Getting Started with CHIRIMEN

Created Date: 2015-07-24/ updated date: 2015-12-09
    • Medium chirimen 2
    Owner & Collaborators
    License
    By sa
    Summary
    This simple tutorial will get you started with Mozilla CHIRIMEN Internet of Things (IoT) development board. In this tutorial we will CHIRIMEN to blink an LED.

    Materials

      Tools

        Blueprints

          Making

          • Know your CHIRIMEN IoT board

            0
            Thumb 808895
            • CHIRIMEN Explained

              0
              Thumb 808895
              The following image explains the layout of components on CHIRIMEN IoT board.
              Small
            • How to safely handle CHIRIMEN IoT board?

              0
              Thumb 808895
              •  Please do not handle CHIRIMEN IoT board and other electronic components with wet hands.
              • Please avoid touching the board with metalic object as it may cause short-circuits.
              • Please refrain from applying excessive force when connecting or disconnecting cables to the CHIRIMEN IoT board.
            • Connecting and turning your CHIRIMEN board on.

              0
              Thumb 808895
              • Connect the CHIRIMEN board to HDMI monitor with a micro HDMI cable.
              • Plug in a USB mouse.
              • Power on the CHIRIMEN board by connecting the AC power adapter to a power socket.
              • The red LED power lights on the CHIRIMEN will turn on and the FirefoxOS starts booting. Use mouse to navigate.
          • Setting Up the Development Environment

            0
            Thumb 808895
            • Installing Firefox web browser.
            • Introduction to Firefox WebIDE.
            • Using Android ADB command.
            • Install Firefox web browser

              0
              Thumb 808895
              Please download and the install the latest version of Firefox web browser.
              Small           2015 07 25 0.51.49
            • Introduction to Firefox WebIDE

              0
              Thumb 808895
              • Firefox WebIDEはFirefoxブラウザに標準搭載のWebアプリ開発環境。
              • Webアプリの開発、インストールが可能。
              • メニューから開発ツール->WebIDEで起動することが可能。
              Small
          • Webアプリの作り方

            0
            • WebIDE上でhello worldアプリを作る。
            • Hello worldアプリをCHIRIMENにインストールする。
            • WebIDE上でhello worldアプリを作る

              0
              • WebIDEの画面左上から新規アプリを選択する。
              • HelloWorldテンプレートを選択し、任意のプロジェクト名を入力してOKボタンを押す。
              • 任意のディレクトリを選択し、Hello Worldアプリを生成する。
              Small
            • Hello worldアプリをCHIRIMENにインストールする

              0
              • CHIRIMENを起動してOTGポートとPCを接続する。
              • Web IDE画面右上の「ランタイムを選択」からCHIRIMENを選択する。
              • WebIDEの「インストールして実行」ボタンを押してCHIRIMENにアプリをインストールする。
              • しばらくしてCHIRIMENを接続したディスプレイ上に「Hello World」と表示されればインストールが成功。
              Small
          • GPIOについて説明

            0
            • デジタル信号(0,1)の出力や入力を行うことができるインターフェース。
            • 出力に使うとLEDの点滅やリレーの制御を行うことができる。
            • 入力に使うとボタン入力などを行うことができる。
            GPIO - Wikipedia
            • LEDについて説明

              0
              • 極性(カソード(陰極)、アノード(陽極))を持っている。
              • カソード(陰極)に対しアノード(陽極)に正電圧を加えると発光する。
              • 流す電流値によって明るさが変わる。電流値は一緒に接続する抵抗値で制御することができる。
              発光ダイオード - Wikipedia
              • Lチカサンプルアプリの実行

                0
                • Lチカサンプルアプリの読み込み
                • Lチカ回路の配線
                • アプリ実行
                • Lチカサンプルアプリの読み込み

                  0
                  • Lチカサンプルアプリをダウンロードして、任意のディレクトリに展開する。
                  • Web IDE左上から「パッケージ型アプリを開く」からダウンロードしたLチカサンプルアプリを読み込む。
                  Small
                • Lチカ回路の配線

                  0
                  • 配線図に従ってLED、150ΩΩ抵抗を接続する。接続にはスルーホール用ジャンパ線を用いる
                  1. LEDのカソード側(短い方)をCHIRIMENのGNDに接続
                  2. LEDのアノード側(長い方)を抵抗を介してCHIRIMENのCN1-9に接続
                  Small
                • アプリ実行

                  0
                  • 配線が正しいことを確認し、CHIRIMENとPCを接続する。
                  • Lチカサンプルアプリをインストール、実行する。
                  • 正しく動作すればCHIRIMENに接続されたLEDが1秒毎に点滅する様子が確認できる。
              • プログラムの解説

                0
                • Index.htmlでライブラリの読み込みを行う。
                • GPIO端子の初期設定を行う。
                • GPIO初期化後の処理を記述する。
                • GPIO端子に対して値の書き込みを行う。
                • Index.htmlでライブラリの読み込みを行う

                  0
                  • WebアプリからGPIOを簡単に扱えるようにライブラリ(geckoGPIO.js)の読み込みを行う。
                  ライブラリの読み込み
                • GPIO端子の初期設定を行う

                  0
                  • GPIO端子の初期化を行う。
                  GPIO端子の初期化
                  • navigator.setGpioPort(<ピン番号>,<ピン入出力設定>)で初期化を行う。
                  • ピン番号はCHIRIMENのピンアサインを参照する。CN1-9は198を使用する。
                  • ピン入出力設定は“in”、“out”のどちらかを設定する。出力として使用する場合は“out”を設定する。
                • GPIO初期化後の処理を記述する

                  0
                  • GPIO初期化後の処理を記述する。
                  GPIO端子初期化後の処理
                  • navigator.setGpioPortの結果はPromise型で初期化されたGPIOポートオブジェクトが帰ってくる。
                  • そのため、navigator.setGpioPort(198,"out").then( port=>{ //初期化後の処理});のように記述する。
                  • 中括弧{}の中に初期化後の処理を記載する。
                • GPIO端子に対して値の書き込みを行う

                  0
                  • GPIO端子に対して1/0の値を書き込む処理を記述する。
                  GPIO端子への値の書き込み
                  • 中括弧の中では変数portに初期化されたGPIOポートオブジェクトが格納される。
                  • GPIOポートオブジェクトのWriteメソッドを使用してGPIO端子に値を書き込むことができる。port.write(value);で値を書き込むことができる。valueには1か0を指定することができる。
                  • v = v ? 0 : 1;はvが1(true)なら0を代入、0(false)なら1を代入する処理である。
              • LEDの点滅タイミングの変更

                0
                • LEDの点滅間隔を変更する。
                • ボタンのクリックでLEDの点灯を操作する。
                • LEDの点滅間隔を変更する

                  0
                  • setInterval関数のdelayの値を変更してLEDの点滅タイミングを変更する。
                  LED点滅タイミングの設定
                  • 1000と書かれた部分の数値を変更して、アプリをアップデートしてみる。
                  • LEDの点滅間隔が実際に変化している様子を確認する。
                • ボタンのクリックでLEDの点灯を操作する

                  0
                  • ボタンのクリックイベントでLEDが点灯するようにプログラムを変更してみる。
                  • index.htmlにボタンタグを追加する。
                  • main.jsにボタンタグのクリックイベントリスナーの処理を記載する。
                  • クリックイベント発生時にLEDが点灯、消灯を繰り返すように処理を記載する。
              Add Card Order

              References

                Usages

                  Convert State

                   to Annotation.

                  Select the numebr of the state to annotate.

                  OK
                  cancel
                  Loading

                  facebook

                  , data-width="400", data-show-faces="true" data-send="true"
                  , data-width="400", data-order-by="reverse_time"