CHIRIMEN Hello world - ISOKS

Created Date: 2015-07-24/ updated date: 2015-11-13
  • Medium chirimen 2
Owner & Collaborators
License
By sa
Summary
CHIRIMENを使ってLチカする方法

Materials

    Tools

      Blueprints

        Making

        • 授業の事前準備

          0
          • CHIRIMEN Hello world を参考にして、CHIRIMENによるLチカデモが実演できる状態にしておく。
          • 学生にFirefoxブラウザのインストールを行っておくように通知する。
          • 可能であれば学生にADBのインストールを行っておくように通知する。
          ※下記の開発環境の設定を確認・指導するを参照
          • Lチカサンプルコードのダウンロードを行っておくように通知する。
          ※下記のLチカサンプルアプリの読み込みを参照
          • 授業の開始

            0
            • 授業の目的、期待する成果について説明する。
            • CHIRIMENの概要について説明する。
            • 学習の目的

              0
              • Webアプリの作り方(hello world)を理解する。
              • CHIRIMENの基本的な扱い方を理解する。
              • ハードウェア制御のプログラム開発をWeb言語で簡単に始めることができると体感する。
            • 学習の成果

              0
              MUST
              • Firefoxブラウザ付属のWebIDEを使ってhello worldアプリを作り、インストールすることができる。
              • CHIRIMENの各端子の意味を理解して、起動、操作することができる。
              • 見本通りにLチカ回路の配線を行い、サンプルアプリを使用してCHIRIMEN上でLEDの点滅を行うことができる。
              SHOULD
              • WebアプリによるGPIOの制御方法を学習し、プログラムとLEDの点滅の関連性を理解する。
              MAY
              • 既存のWebアプリにLED制御を組み込むことができる。
              • LED、抵抗を自分で選択して、好きな明るさに設定することができる。

          • デモンストレーション

            0
            • Lチカデモを用いて実演を行う。
            • 講義の達成イメージを認識する。
            • 学習の準備

              0
              • 学生のグループ分けを行う。
              • Fabbleページの準備を行う。
              • 機材を配布する。
            • CHIRIMENの起動・操作方法を指導

              0
              • CHIRIMENの各端子の役割を学習する。
              • CHIRIMEN取り扱い時の注意点を学習する。
              • CHIRIMENを起動・操作する。
              • CHIRIMENの各端子の役割を指導する

                0
                CHIRIMENのインターフェースについて説明を行う。
                Small
              • CHIRIMEN取り扱い時の注意点を指導する

                0
                • 濡れた手でCHIRIMENや電子部品を扱わない。
                • 電源投入の際は端子等の接続を確認し、ショートしていないか注意する。
                • 各端子は壊れやすいのでケーブルを抜き差しする際は丁寧に行う。
              • CHIRIMENを起動・操作する

                0
                • microHDMI端子をディスプレイと接続する。
                • CHIRIMENのフルUSBにマウスを接続する。
                • ACアダプタをAC電源に接続する。
                • CHIRIMEN上のLEDが点灯し、しばらく経つとFirefoxOSが起動する。
                • アプリ画面が表示されたら、マウスを使用して操作をしてみる。左クリックが選択、右クリックがホームボタンの役割となる。
            • 開発環境の設定

              0
              • Firefoxブラウザをインストールする。
              • Firefox WebIDEについて説明する。
              • ADBをインストールする。
              • Firefoxブラウザをインストールする

                0
                Firefoxブラウザをダウンロードしてインストールする。
                Small           2015 07 25 0.51.49
              • Firefox WebIDEについて説明する

                0
                • 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"