CHIRIMEN WoTsignage Edu part1

Created Date: 2015-07-25/ updated date: 2018-03-13
    Owner & Collaborators
    License
    Summary
    CHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。
    Part1の内容:
    ・CHIRIMENの概要紹介
    ・静的Webページの作成
    ・Lチカ
    学習の目的:
    ・CHIRIMENの基本的な扱い方を理解し、ハードウェア制御のプログラム開発をウェブ言語で簡単に始めることができると体感する。
    学習の成果:
    ・MUST:CHIRIMENの各端子の意味を理解して、起動、操作することができる。
    ・SHOULD:ウェブアプリによるGPIOの制御方法を学習し、プログラムとLEDの点滅の関連性が理解できる。
    ・MAY:任意のウェブアプリにLED制御を組み込むことができるようになる。

    Materials

      Tools

        Blueprints

          Making

            • ウェブデベロッパのためのWoT(Web of Things)デバイス開発環境です。
            • センサやアクチュエータも全てウェブ技術で制御でき、ウェブページを作るようにWoT デバイスアプリケーションの開発が可能となります。
            • ウェブとモノ(Things)を組み合わせることで、これまでにない全く新しいコンセプトのデバイスが作られていくのではないか、と注目されています。
            • CHIRIMEN概要資料を参照。
              • CHIRIMENの各端子の役割。
              • CHIRIMEN取り扱い時の注意点。
              • CHIRIMENを起動・操作する。
                • 濡れた手でCHIRIMENや電子部品を扱わない。
                • 電源投入の際は端子等の接続を確認し、ショートしていないか注意する。
                • 各端子は壊れやすいのでケーブルを抜き差しする際は丁寧に行う。
                • microHDMI端子をディスプレイと接続する。
                • CHIRIMENのフルUSBにUSBハブを接続し、マウスとWiFiドングルを接続する。
                • ACアダプタをAC電源に接続する。
                • CHIRIMEN上のLEDが点灯し、しばらく経つとB2Gが起動する。
                • アプリ画面が表示されたら、マウスを使用して操作をしてみる。左クリックが選択、右クリックがホームボタンの役割となる。
                • 設定画面(settings)からWiFiの接続設定を行う。
              • ウェブページの基本的な機能として、ハイパーテキストリンクがあります。ウェブページ上に設定されたリンクをクリックして、ページ遷移を行うというものです。
              • この、ウェブにおいて最も基本的な動作に対して、WoTの基本である、GPIOの制御によるLEDの点灯(Lチカ)を組み込んでいきます。
                • リンクのクリックとLEDの連動に必要な基礎知識であるGPIOとLEDについて簡単に説明します。
                  • デジタル信号(0,1)の出力や入力を行うことができるインターフェース。
                  • 電圧の高低により、0か1かを変化させている。
                  • 出力に使うとLEDの点滅やリレーの制御を行うことができる。極端に言えば、あらゆる機器の電源オンオフがコントロールできる。
                  • 入力に使うと物理スイッチや人感センサーなどを扱うことができる。
                  GPIO - Wikipedia
                  • 極性(カソード(陰極)、アノード(陽極))を持っている。
                  • カソード(陰極)に対しアノード(陽極)に正電圧を加えると発光する。
                  • 流す電流値によって明るさが変わる。電流値は一緒に接続する抵抗値で制御することができる。
                  発光ダイオード - Wikipedia
              • ※ペアプログラミング環境を利用している場合はindex.html内のmain.cssを読み込んでいる行は不要です。
                • 正しく作成できれば、ページ上部に大きく「CHIRIMENとは」と表示され、ページ下部にCHIRIMENの説明が書かれているwebページが確認できるはずです。

                  • CHIRIMENとLEDの接続を行います。
                  • 今回は簡単にLEDを接続できるようCHIRIMEN Basic Shieldを使用します。
                  • シールドをCHIRIMENと同じ向きに差し込みます。
                  • このシールドはLED、タクトスイッチ、距離センサ(SRF02)、温度センサ(ADT7410)が簡単に接続できるコネクタが用意されており、さらに10個のgroveコネクタがついています。
                  • シールドがない場合はCHIRIMEN hello worldを参考にしてLED回路を準備してください。

                    • CHIRIMENで電子デバイスを制御するために必要なjsを読み込む記述をhtmlに追記します。
                    • <head>タグにjs読み込みの3行を追加してください。
                    • 必要な記述を追加したindex.htmlがled-blinkのindex.htmlです。
                    ※ペアプログラミング環境を使用している場合、main.jsの行の追記は不要です。

                        • CHIRIMENでLEDなどの電子部品を制御していくとき、たくさんの非同期処理を記述する必要があります。
                        • これらを普通に記述するとたくさんの入れ子構造ができてしまい、見た目も非常に複雑になります。
                        • そのため、非同期処理を同期的に記述することができるtask.jsを使用しています。
                      • LEDを光らせるために必要なGPIOの初期化処理を記述していきます。
                        • Lチカ用にLEDポートオブジェクトを格納するためのグローバル変数を定義します。
                        • jsの先頭に以下の1行を追加してください。
                        var ledPort;

                        • GPIOへアクセスするためのアクセサを取得します。
                        • spawn関数の中に以下の行を追加してください。
                        const gpioAccessor = yield navigator.requestGPIOAccess();
                        • yieldの付いた箇所が非同期処理の部分になります。task.jsを利用したspawn関数内では同期処理的に記述することができます。

                        • 取得したGPIOアクセサを利用して使用するGPIOポートオブジェクトを取得します。
                        • 今回はGPIO198番ポート(CHIRIMEN CN1-9)をLED用のポートとして使用しますので、以下のように198を指定した1行を追加します。
                        ledPort = gpioAccessor.ports.get(198);

                        • 取得したGPIOポートオブジェクトのexportメソッドを使用して、このGPIOポートをoutputモードで初期化します。
                        • 以下のように”out”を指定した1行を追加します。
                        yield ledPort.export("out");

                        • GPIOの初期化を確認するため、LEDを点灯させてみます。
                        • LEDの点灯はGPIOポートオブジェクトのwriteメソッド使用して制御できます。
                        • 点灯する時は以下のように1を指定した1行を追加します。
                        ledPort.write(1);
                        • 正しく動作していればLEDが点灯します。
                        ※プログラムが正しくてもLEDが正しく点滅しない場合、ブラウザのリロードなどを行ってみてください。
                      • ドキュメント内のリンク(aタグ)をクリックした時のイベント処理を記述していきます。
                    Add Card Order

                    References

                      Project comments