CHIRIMEN WoTsignage Edu part3
Owner & Collaborators
License
CHIRIMEN WoTsignage Edu part3 by ChirimenEdu is licensed under the Creative Commons - Attribution-ShareAlike license.
Summary
CHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。
Part3の内容：
・I2Cデバイスの基礎
・距離センサの取得
学習の目的:
・距離センサを例にとり、CHIRIMENでI2C接続のセンサを扱う方法を理解する。
学習の成果
・MUST：サンプルプログラム通りに距離センサの値を取得することができる。
・SHOULD：ウェブアプリによるI2C通信の方法を学習し、プログラムと距離センサ取得の関連性が理解できる。
・MAY：CHIRIMENで動作確認ができているI2Cデバイスについて、自分でプログラムを記述して制御できるようになる。
Part3の内容：
・I2Cデバイスの基礎
・距離センサの取得
学習の目的:
・距離センサを例にとり、CHIRIMENでI2C接続のセンサを扱う方法を理解する。
学習の成果
・MUST：サンプルプログラム通りに距離センサの値を取得することができる。
・SHOULD：ウェブアプリによるI2C通信の方法を学習し、プログラムと距離センサ取得の関連性が理解できる。
・MAY：CHIRIMENで動作確認ができているI2Cデバイスについて、自分でプログラムを記述して制御できるようになる。
Materials
Tools
Blueprints
Making
- これまでのウェブページではマウス操作やタッチ操作によって画面のスクロール操作を行っていました。
- CHIRIMENではI2Cという信号規格を制御することで、様々なセンサーを直接扱うことができます。
- ここでは、距離センサーで取得できる人とサイネージの距離によって画面スクロールを制御する処理を追加します。
- I2Cデバイスの制御を行っていく前にI2Cについて簡単に説明します。
- I2Cとはシリアルデータ通信の方式で。I2CまたはIICと標記し、「アイ・スクエア・シー、アイ・ツー・シー」などと読む。
- GND、VCC(電源3.3v/5v)とSDA、SCLという二つの信号線の計4本で接続する。
- 異なるアドレスを持つI2Cデバイスであれば、一つのI2Cポートに複数のデバイスを接続することができる。（最大112個）
- 0/1の信号だけだはなく、アドレスとデータを指定したデータ通信を行うことができる。
- 温度センサ、加速度センサ、気圧センサなど様々なセンサや、液晶モジュール、モータドライバなど、I2Cインターフェースに対応した様々なデバイスが販売されている。
- GND、VCC、SDA、SCL端子をつなぐことで制御できる。接続方法は共通なので簡単にI2Cデバイスを接続するためのコネクタも存在する。（grove systemなど）
- CHIRIMENはWebアプリからのI2C通信の読み書きに対応しているため、I2Cに対応したデバイスを制御することができる。
- I2Cデバイスの制御を行っていく前にI2Cについて簡単に説明します。
- 前回同様、CHIRIMEN Basic Shieldを使用します。
- SRF02という印字のある場所に図のように距離センサ(SRF02)を接続してください。
- シールドがない場合はCHIRIMEN I2C sensorを参考にして回路を準備してください。
- I2C接続の距離センサを扱うために必要なI2Cの初期化処理を記述していきます。
- I2Cへアクセスするためのアクセサを取得します。
- spawn関数の中に以下の行を追加してください。
- 取得したI2Cアクセサを利用して、使用するI2Cポートオブジェクトを取得します。
- 今回はI2C 0番ポートを距離センサ用のポートとして使用しますので、以下のように0を指定した1行を追加します。
- CHIRIMENには0番と2番の２つのI2Cポートがあります。
- 距離センサの値を取得する処理を記述していきます。
- I2Cデバイスは、slaveオブジェクトのread/writeメソッドを使用して、データを読み書きすることにより制御します。
- 以下のようにwrite8メソッドを使用してアドレスとデータを指定するとデータの書き込みが行えます。
- 以下のようにreadメソッドを使用してアドレスを指定するとデータの読み込みが行えます。
- どのようにデータを読み書きすればデバイスを制御できるかは、デバイスの種類によって異なります。
- 距離センサを読み込む処理はgetDistance関数にまとめてあります。jsの最後に追記してください。
- 初期化したI2Cポートオブジェクトと距離センサのアドレス(0x70)を指定して、距離センサの取得処理を記述します。以下の1行を追加してください。
- distance変数に取得した距離の値（cm）が格納されます。
- 取得した距離をコンソールとウェブ画面上に表示します。以下の2行を追加してください。
document.querySelector("#distance").textContent = distance;- htmlの#contents要素の後に以下の1行を追加してください。
- このままでは一度しか距離を取得できないので、1秒間隔で距離を取得します。
- 以下のように距離センサの取得処理をループ処理で囲ってください。
spawn(function(){
//距離センサの取得処理
});
},1000);
- センサで取得した距離によって画面スクロールする処理を記述していきます。
- 与えた値に応じてスクロールする関数を作成していきます。
- jsの最後にscroll関数を追記してください。
- この関数は、第一引数にスクロール位置、第二引数に一番下へスクロールする時の値、第三引数に一番上へスクロールする時の値を指定します。
- 距離(distance)の取得後に以下の1行を追加してください。
- 距離が15cm以下の場合に一番下へスクロールし、距離が50cmの場合に一番上へスクロールします。距離が50cmより大きい場合はその場に留まります。
- センサで取得した距離によって画面スクロールする処理を記述していきます。
- このままでは、スクロール位置まで瞬時に飛んでしまうため、ライブラリを使用してアニメーションさせてみましょう。
- jsの様々な記述を簡単にするライブラリとしてjqueryというライブラリが知られています。
- jqueryを読み込むため、htmlの<head>タグに以下の1行を追加してください。
- scroll関数内の指定の座標までスクロールをさせる処理を以下の1行に書き換えてください。
- これにより、スクロールする時、なめらかにアニメーションするようになります。
- scroll関数内の指定の座標までスクロールをさせる処理を以下の1行に書き換えてください。
- これまでに作成した全体のjsがこちらのdistanceのmain.jsのようになります。
- うまく作成できていれば、距離センサで取得した距離に応じて画面がスクロールするようになっているはずです。
References
Project comments
Comments