CHIRIMEN WoTsignage Edu part1
Owner & Collaborators
License
CHIRIMEN WoTsignage Edu part1 by ChirimenEdu is licensed under the Creative Commons - Attribution-ShareAlike license.
Summary
CHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。
Part1の内容：
・CHIRIMENの概要紹介
・静的Webページの作成
・Lチカ
学習の目的：
・CHIRIMENの基本的な扱い方を理解し、ハードウェア制御のプログラム開発をウェブ言語で簡単に始めることができると体感する。
学習の成果：
・MUST：CHIRIMENの各端子の意味を理解して、起動、操作することができる。
・SHOULD：ウェブアプリによるGPIOの制御方法を学習し、プログラムとLEDの点滅の関連性が理解できる。
・MAY：任意のウェブアプリにLED制御を組み込むことができるようになる。
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のインターフェースについて。
- 濡れた手でCHIRIMENや電子部品を扱わない。
- 電源投入の際は端子等の接続を確認し、ショートしていないか注意する。
- 各端子は壊れやすいのでケーブルを抜き差しする際は丁寧に行う。
- microHDMI端子をディスプレイと接続する。
- CHIRIMENのフルUSBにUSBハブを接続し、マウスとWiFiドングルを接続する。
- ACアダプタをAC電源に接続する。
- CHIRIMEN上のLEDが点灯し、しばらく経つとB2Gが起動する。
- アプリ画面が表示されたら、マウスを使用して操作をしてみる。左クリックが選択、右クリックがホームボタンの役割となる。
- 設定画面（settings）からWiFiの接続設定を行う。
- CHIRIMENのアプリ開発の基本を学ぶため、ウェブとモノとを組み合わせたサイネージ（看板）アプリを作っていきます。
- CHIRIMENのアプリ開発の基本を学ぶため、ウェブとモノとを組み合わせたサイネージ（看板）アプリを作っていきます。
- ウェブページの基本的な機能として、ハイパーテキストリンクがあります。ウェブページ上に設定されたリンクをクリックして、ページ遷移を行うというものです。
- この、ウェブにおいて最も基本的な動作に対して、WoTの基本である、GPIOの制御によるLEDの点灯（Lチカ）を組み込んでいきます。
- ウェブページの基本的な機能として、ハイパーテキストリンクがあります。ウェブページ上に設定されたリンクをクリックして、ページ遷移を行うというものです。
- リンクのクリックとLEDの連動に必要な基礎知識であるGPIOとLEDについて簡単に説明します。
- デジタル信号(0,1)の出力や入力を行うことができるインターフェース。
- 電圧の高低により、0か1かを変化させている。
- 出力に使うとLEDの点滅やリレーの制御を行うことができる。極端に言えば、あらゆる機器の電源オンオフがコントロールできる。
- 入力に使うと物理スイッチや人感センサーなどを扱うことができる。
- 極性（カソード（陰極）、アノード（陽極））を持っている。
- カソード（陰極）に対しアノード（陽極）に正電圧を加えると発光する。
- 流す電流値によって明るさが変わる。電流値は一緒に接続する抵抗値で制御することができる。
- CHIRIMENのアプリは純粋なウェブアプリなので、ウェブアプリの開発環境がそのまま使用できる。
- ブラウザ上で直接、開発と実行ができる環境もある。
- CHIRIMENを直接接続する場合、CHIRIMENアプリ開発環境構築を参照して開発環境を準備する。
- WoTサイネージの作成にあたり、まずは静的なwebページの作成を行います。
- htmlの内容を静的webページのindex.htmlのように、cssの内容を静的webページの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です。
- CHIRIMENでの電子デバイス制御を簡単に記述できるようにtask.jsを使用します。
- CHIRIMENアプリベースjsの7行目のspawn関数の中に基本的な処理を書いていくことになります。
- よくわからない場合は、現時点ではおまじないだと考えてください。
- CHIRIMENでLEDなどの電子部品を制御していくとき、たくさんの非同期処理を記述する必要があります。
- これらを普通に記述するとたくさんの入れ子構造ができてしまい、見た目も非常に複雑になります。
- そのため、非同期処理を同期的に記述することができるtask.jsを使用しています。
- LEDを光らせるために必要なGPIOの初期化処理を記述していきます。
- Lチカ用にLEDポートオブジェクトを格納するためのグローバル変数を定義します。
- jsの先頭に以下の1行を追加してください。
- GPIOへアクセスするためのアクセサを取得します。
- spawn関数の中に以下の行を追加してください。
- yieldの付いた箇所が非同期処理の部分になります。task.jsを利用したspawn関数内では同期処理的に記述することができます。
- 取得したGPIOアクセサを利用して使用するGPIOポートオブジェクトを取得します。
- 今回はGPIO198番ポート(CHIRIMEN CN1-9)をLED用のポートとして使用しますので、以下のように198を指定した1行を追加します。
- 取得したGPIOポートオブジェクトのexportメソッドを使用して、このGPIOポートをoutputモードで初期化します。
- 以下のように”out”を指定した1行を追加します。
- GPIOの初期化を確認するため、LEDを点灯させてみます。
- LEDの点灯はGPIOポートオブジェクトのwriteメソッド使用して制御できます。
- 点灯する時は以下のように1を指定した１行を追加します。
- 正しく動作していればLEDが点灯します。
- GPIOの初期化を確認するため、LEDを点灯させてみます。
- ドキュメント内のリンク（aタグ）をクリックした時のイベント処理を記述していきます。
- 少し処理が長いので、addEventLink()という関数を作っていきます。
- jsの最後にこちらのaddEventLink関数を追加します。
- e.addEventListener("touchstart",()=>{ });の中にaタグをクリックした時の処理を記述していくことになります。
- aタグをクリックした時の処理としてLEDを点灯させる処理を記述していきます。
- e.addEventListener("touchstart",()=>{ });の中に以下の１行を追加します。
- 正しく動作していれば、リンクをクリックした時にLEDが点灯するようになります。
- LEDを点灯させるだけでは点きっぱなしになってしまうので、1秒後にLEDを消灯させるようにします。
- LEDの点灯処理の後に、setTimeout関数を使用した以下の行を追加します。
//LEDを消灯させる
ledPort.write(0);
},1000);
References
Project comments
Comments