CHIRIMEN Hello world 講師用

Created Date: 2015-07-25/ updated date: 2018-03-13
    Owner & Collaborators
    License
    Summary
    CHIRIMENを使ってLチカする方法を指導する

    Materials

      Tools

        Blueprints

          Making

            • CHIRIMEN Hello world を参考にして、CHIRIMENによるLチカデモが実演できる状態にしておく。
            • 学生にFirefoxブラウザのインストールを行っておくように通知する。
            • 可能であれば学生にADBのインストールを行っておくように通知する。
            ※下記の開発環境の設定を確認・指導するを参照
            • Lチカサンプルコードのダウンロードを行っておくように通知する。
            ※下記のLチカサンプルアプリの読み込みを参照
              • 授業の目的、期待する成果について説明する。
              • CHIRIMENの概要について説明する。
                • Webアプリの作り方(hello world)を理解する。
                • CHIRIMENの基本的な扱い方を理解する。
                • ハードウェア制御のプログラム開発をWeb言語で簡単に始めることができると体感する。
              • MUST
                • Firefoxブラウザ付属のWebIDEを使ってhello worldアプリを作り、インストールすることができる。
                • CHIRIMENの各端子の意味を理解して、起動、操作することができる。
                • 見本通りにLチカ回路の配線を行い、サンプルアプリを使用してCHIRIMEN上でLEDの点滅を行うことができる。
                SHOULD
                • WebアプリによるGPIOの制御方法を学習し、プログラムとLEDの点滅の関連性を理解する。
                MAY
                • 既存のWebアプリにLED制御を組み込むことができる。
                • LED、抵抗を自分で選択して、好きな明るさに設定することができる。

              • 学生のグループ分けを行う。
              • Fabbleページの準備を行う。
              • 機材を配布する。
              • CHIRIMENの各端子の役割を学習する。
              • CHIRIMEN取り扱い時の注意点を学習する。
              • CHIRIMENを起動・操作する。
                • 濡れた手でCHIRIMENや電子部品を扱わない。
                • 電源投入の際は端子等の接続を確認し、ショートしていないか注意する。
                • 各端子は壊れやすいのでケーブルを抜き差しする際は丁寧に行う。
                • microHDMI端子をディスプレイと接続する。
                • CHIRIMENのフルUSBにマウスを接続する。
                • ACアダプタをAC電源に接続する。
                • CHIRIMEN上のLEDが点灯し、しばらく経つとB2Gが起動する。
                • アプリ画面が表示されたら、マウスを使用して操作をしてみる。左クリックが選択、右クリックがホームボタンの役割となる。
              • Firefoxブラウザをインストールする。
              • Firefox WebIDEについて説明する。
              • ADBをインストールする。
                • Firefox WebIDEはFirefoxブラウザに標準搭載のWebアプリ開発環境。
                • Webアプリの開発、インストールが可能。
                • メニューから開発ツール->WebIDEで起動することが可能。
                • 以下のページに従ってADBをインストールする。
                https://developer.mozilla.org/ja/Firefox_OS/Debugging/Installing_ADB
                • Windowsの場合:Rockchipのドライバをインストールする。
                • CHIRIMENを起動し、OTGポートをPCと接続する。
                • Web IDEの右上の「ランタイムを選択」からCHIRIMENが見えればインストールは完了
              •  $ adb devices
                でadbからCHIRIMENが認識できているかどうかを確かめる。
                • フルパスでADBを実行すると認識はしている。ADBのパスが通っていない。
                →環境変数の設定
                • ADBでは認識しているのにWebIDE上で認識しない。ADB helperも導入済み。
                →Firefoxをアップデート
                • ADBで認識しない。 
                →CHIRIMENの抜き差し、ADBの再起動、ADBの管理者権限での再起動、ADBのアップデート、再インストールなど
              • WebIDE上でhello worldアプリを作る方法を指導する。
              • Hello worldアプリをCHIRIMENにインストールする。
                • WebIDEの画面左上から新規アプリを選択する。
                • HelloWorldテンプレートを選択し、任意のプロジェクト名を入力してOKボタンを押す。
                • 任意のディレクトリを選択し、Hello Worldアプリを生成する。
                • CHIRIMENを起動してOTGポートとPCを接続する。
                • Web IDE画面右上の「ランタイムを選択」からCHIRIMENを選択する。
                • WebIDEの「インストールして実行」ボタンを押してCHIRIMENにアプリをインストールする。
                • しばらくしてCHIRIMENを接続したディスプレイ上に「Hello World」と表示されればインストールが成功。
              • デジタル信号(0,1)の出力や入力を行うことができるインターフェース。
              • 出力に使うとLEDの点滅やリレーの制御を行うことができる。
              • 入力に使うとボタン入力などを行うことができる。
              GPIO - Wikipedia
                • 極性(カソード(陰極)、アノード(陽極))を持っている。
                • カソード(陰極)に対しアノード(陽極)に正電圧を加えると発光する。
                • 流す電流値によって明るさが変わる。電流値は一緒に接続する抵抗値で制御することができる。
                発光ダイオード - Wikipedia
                  • Lチカサンプルアプリのダウンロード
                  • WebGPIO polyfillの導入
                  • Lチカサンプルアプリの読み込み
                  • Lチカ回路の配線
                  • アプリ実行
                    • webgpio.jsworker.jsをLEDblink/jsディレクトリ内にダウンロード(RAWボタンを右クリックして別名でリンク先を保存を選択)し、index.htmlからの参照先を以下のように変更する。(worker.jsはwebgpio.js内で参照されている)
                    <script src="./js/webgpio.js"></script>
                    • bowerを使える場合、LEDblinkディレクトリに移動し以下のコマンドを実行することで導入することもできる。
                    $ bower install
                    • 配線図に従ってLED、150Ω抵抗を接続する。接続にはスルーホール用ジャンパ線を用いる
                    1. LEDのカソード側(短い方)をCHIRIMENのGNDに接続
                    2. LEDのアノード側(長い方)を抵抗を介してCHIRIMENのCN1-9に接続
                    • 配線が正しいことを確認し、CHIRIMENとPCを接続する。
                    • Lチカサンプルアプリをインストール、実行する。
                    • 正しく動作すればCHIRIMENに接続されたLEDが1秒毎に点滅する様子が確認できる。
                • サンプルプログラムのindex.htmlmain.jsについて解説する。
                  • Index.htmlでpolyfillの読み込みを行う。
                  • gpioAccessインターフェースを取得する。(おまじない)
                  • GPIO端子の初期設定を行う。
                  • GPIO初期化後の処理を記述する。
                  • GPIO端子に対して値の書き込みを行う。
                  • LEDの点滅間隔を変更する。
                  • ボタンのクリックでLEDの点灯を操作する。
                    • ボタンのクリックイベントでLEDが点灯するようにプログラムを変更してみる。
                    • index.htmlにボタンタグを追加する。
                    • main.jsにボタンタグのクリックイベントリスナーの処理を記載する。
                    • クリックイベント発生時にLEDが点灯、消灯を繰り返すように処理を記載する。
                Add Card Order

                References

                  Usages

                  • 東京テクニカルカレッジさんでの授業(第一回目)

                    2コマ(1コマ90分)の授業を実施。第一回目の授業では全学生(40名程度)が開発環境の設定とHello Worldアプリのインストール、実行ができることを目指した。初回ということもあり、授業の目的やCHIRIMENの概要説明に時間を割いた。1名のみADBによるCHIRIMEN認識ができず、授業時間内での解決ができなかったが、その他の学生は全員アプリの実行まで達成できた。LEDの点滅についてはCHIRIMEN Push button 講師用に記載。

                  Project comments