授業の事前準備

  • CHIRIMEN Hello world Eduの講義を終えておく。
  • CHIRIMEN I2C sensorを参照し、センサ情報を読み取るデモが実演できる状態にしておく。

授業の開始

  • 授業の目的、期待する成果について説明する。

学習の目的

  • CHIRIMENでI2C接続のセンサを扱う方法を理解する。
  • CHIRIMENによってあらゆるI2Cデバイスをブラウザで制御できるようになることを理解する。

学習の成果

MUST
  • 見本通りにI2C温度センサ回路の配線を行い、サンプルアプリを使用してCHIRIMENで温度センサの値を取得することができる。
SHOULD
  • ライブラリを用いてCHIRIMENから各種I2Cデバイスを制御する方法を理解して、ライブラリが用意されているI2Cデバイスを制御することができる。
MAY
  • WebI2CAPIのread、writeの方法を理解し、I2Cデバイス制御用のライブラリの中身を理解することができる。
  • I2Cデバイスを制御するためのコマンドを調べて、自分でライブラリを作ることができる。

デモンストレーション

  • 用意しておいたセンサ情報読み取りデモを用いて実演を行う。
  • 学生に講義の達成イメージを認識させる。

学習の準備

  • 学生のグループ分けを行う。
  • 機材を配布する。

学生のグループ分け

  • 授業の人数に応じて学生のグループ分けを行う。
  • 1グループ4人が理想。

機材の配布

各グループに機材を配布する。
  • CHIRIMEN
  • microUSBケーブル
  • microHDMI-HDMIケーブル
  • ACアダプタ
  • HDMIディスプレイ
  • ブレットボード
  • I2Cセンサ
  • スルーホール用ジャンパワイヤ適量

I2Cとは?

  • I2Cとはシリアルデータ通信の方式で。I2CまたはIICと標記し、「アイ・スクエア・シー、アイ・ツー・シー」などと読む。
  • GND、VCC(電源3.3v/5v)とSDA、SCLという二つの信号線の計4本で接続する。
  • 異なるアドレスを持つI2Cデバイスであれば、一つのI2Cポートに複数のデバイスを接続することができる。(最大112個)
  • 0/1の信号だけだはなく、アドレスとデータを指定したデータ通信を行うことができる。
I2C - Wikipedia

温度センササンプルアプリの実行

  • 温度センサアプリのダウンロード
  • Web GPIO polyfillの導入
  • 温度センサアプリの読み込み
  • 温度センサ回路の配線
  • アプリ実行

温度センサアプリのダウンロード

  • CHIRIMEN examplesをダウンロード(Download zipというボタンでダウンロード可能)して、任意のディレクトリに展開する。

Web I2C polyfillの導入

  • webi2c.jsとworker.jsをi2c-ADT7410/jsディレクトリ内にダウンロード(RAWボタンを右クリックして別名でリンク先を保存を選択)し、index.htmlからの参照先を以下のように変更する。(worker.jsはwebgpio.js内で参照されている)
<script src="./js/webi2c.js"></script>
  • bowerを使える場合、i2c-ADT7410ディレクトリに移動し以下のコマンドを実行することで導入することもできる。
$ bower install

温度センサアプリの読み込み

  • Web IDE左上の「パッケージ型アプリを開く」からi2c-ADT7410ディレクトリを読み込む。

温度センサ回路の配線

  • 配線図に従って温度センサを接続する。接続にはスルーホール用ジャンパ線を用いる。
  1. CHIRIMENのI2C0_SDA(CN2-12)、I2C0_SCL(CN2-11)と温度センサのSDA、SCLを接続する。
  2. CHIRIMENのGND(CN2-1)、VCC(CN2-18)と温度センサのGND、VCCを接続する。

アプリ実行

  • 配線が正しいことを確認し、CHIRIMENとPCを接続する。
  • アプリをインストールする。
  • 正しく動作すればディスプレイ上に温度が表示されていることが確認できる。温度センサを(黒い部分を指で触るなどして)温めると、ディスプレイ上の表示温度も上昇していくことが確認できる。

プログラムの解説

サンプルプログラムのindex.html、main.jsについて解説する。
  • Index.htmlでpolyfillの読み込みを行う
  • I2CAccessインターフェースを取得する(おまじない)
  • I2C端子の初期設定を行う
  • 温度センサの読み取り
  • 温度センサの読み取り後の処理

Index.htmlでpolyfillの読み込みを行う

  • webI2Cを扱うためのpolyfill(webi2c.js)を読み込む。code:polyfillの読み込み

I2CAccessインターフェースを取得する(おまじない)

  • I2Cの操作を行うため、I2CAccessインターフェースを取得する。
  • code:I2CPortMapインターフェースの取得処理とcode:エラー処理をおまじない的に記述する。

I2C端子の初期設定を行う

  • i2cAccess.ports.get(<ピン番号>)でi2cPortオブジェクトを取得する。code:I2CPortオブジェクトの取得。
  • CHIRIMENにはI2C0(CN2側)、I2C2(CN1側)の二つの端子が出ているため、ピン番号には0か2を指定する。

温度センサの読み取り

  • 温度センサ(ADT7410)のライブラリを読み込む。code:温度センサライブラリの読み込み
  • new ADT7410(<i2cPortオブジェクト>,<i2cデバイスアドレス>)でADT7410のコンストラクタ呼び出しを行う。code:ADT7410コンストラクタ呼び出し
  • ADT7410使用の温度センサのデバイスアドレスは初期値が0x48なので、これを指定する。
  • adt7410.read()のように、呼び出したコンストラクタのreadメソッドを使用して温度センサの値の読み込みを行う。code:温度センサの読み込み

温度センサ読み取り後の処理

  • 温度センサの読み込み処理、adt7410.read()の結果はPromise型で帰ってくる。そのため、adt7410.read().then(function(value){ //温度センサ読み取り後の処理 });のように記述する。code:温度センサ読み取り後の処理
  • 温度センサの値は引数に指定したvalueという変数に格納される。

他のI2Cセンサを読み取る方法を指導する

  • 距離センサを読み取る
  • 光センサを読み取る
  • 加速度センサを読み取る

距離センサを読み取る

  • 回路図に従って距離センサ回路を作成する。
  • 温度センサの場合と同様に距離センサアプリ(i2c-SRF02)をダウンロード、WebI2CPolyfillの設定を行う。
  • WebIDE上でi2c-SRF02ディレクトリを読み込み実行する。
  • 距離センサの値がディスプレイに表示される。

距離センサのサンプルコード

  • Index.htmlでWebI2CPolyfill、SRF02.jsを読み込む。code:polyfill、距離センサライブラリの読み込み
  • 温度センサと同様にI2CAccessインターフェース、I2Cポートの初期化、距離センサのコンストラクタ呼び出しを行う。code:距離センサ初期設定
  • srf02.read()で距離センサの値を読み込むことができる。code:距離センサの読み込み
  • 距離センサ(SRF02)のデバイスアドレスは0x70(初期設定)を使用する。

光センサを読み取る

  • 回路図に従って光センサ回路を作成する。
  • 温度センサの場合と同様に光センサアプリ(i2c-SRF02)をダウンロード、WebI2CPolyfillの設定を行う。
  • WebIDE上でi2c-grove-lightディレクトリを読み込み実行する。
  • 光センサの値がディスプレイに表示される。

光センサのサンプルコード

  • Index.htmlでWebI2CPolyfill、i2c-grove-light.jsを読み込む。code:polyfill、光センサライブラリの読み込み
  • 温度センサと同様にI2CAccessインターフェース、I2Cポートの初期化、光センサのコンストラクタ呼び出しを行う。code:光センサ初期設定
  • grovelight.init()で光センサの初期化を行う。code:光センサの初期化
  • grovelight.read()で光センサの値を読み込むことができる。code:光センサの読み込み
  • 光センサ(Grove digital light sensor)のデバイスアドレスは0x29(初期設定)を使用する。

加速度センサを読み取る

  • 回路図に従って加速度センサ回路を作成する。
  • 温度センサの場合と同様に加速度センサアプリ(i2c-grove-accelerometer)をダウンロード、WebI2CPolyfillの設定を行う。
  • WebIDE上でi2c-grove-acceleromterディレクトリを読み込み実行する。
  • 加速度センサの値がディスプレイに表示される。

加速度センサのサンプルコード

  • Index.htmlでWebI2CPolyfill、i2c-grove-accelerometer.jsを読み込む。code:polyfill、加速度センサライブラリの読み込み
  • 温度センサと同様にI2CAccessインターフェース、I2Cポートの初期化、加速度センサのコンストラクタ呼び出しを行う。code:加速度センサ初期設定
  • groveaccelerometer.init()で加速度センサの初期化を行う。code:加速度センサの初期化
  • groveaccelerometer.read()で加速度センサの値を読み込める。code:加速度センサの読み込み
  • デバイスアドレスは0x53(初期設定)を使用する。

I2Cデバイス

  • 温度センサ、加速度センサ、気圧センサなど様々なセンサや、液晶モジュール、モータドライバなど、I2Cインターフェースに対応した様々なデバイスが販売されている。
  • GND、VCC、SDA、SCL端子をつなぐことで制御できる。接続方法は共通なので簡単にI2Cデバイスを接続するためのコネクタも存在する。(grove systemなど)
  • CHIRIMENはWebアプリからのI2C通信の読み書きに対応しているため、I2Cに対応したデバイスを制御することができる。

I2Cデータ通信の方法を指導する。

  • I2Cデバイスのライブラリの中身を読んでみる。
  • I2Cデバイスから値を読み込む。
  • I2Cデバイスへ値を書き込む。

I2Cデバイスのライブラリの中身を読んでみる

  • ライブラリの作成されていないI2Cデバイスを扱う場合、I2Cのデータ通信処理を自分で記述する必要がある。
  • I2Cのデータ通信の流れは、I2Cデバイスのデータシートや、arduino、raspberry pi向けに作られたサンプルプログラムから読み取ることができる。

I2Cデバイスから値を読み込む

  • I2Cポートオブジェクトのread8(8ビット用)、read16(16ビット用)メソッドで値の読み込みができる。
  • i2cSlave.read8(<読み込みを開始するアドレス>,<isOctet>)のようにして値の書き込みができる。code:I2Cの読み取り
  • <isOctet>には読み込むデータがオクテット(1バイト)かどうかをtrue/falseで指定する。

I2Cデバイスへ値を書き込む

  • I2Cポートオブジェクトのwrite8(8ビット用)、write16(16ビット用)メソッドで値の書き込みができる。
  • i2cSlave.write8(<書き込むアドレス>,<書き込むデータ>)のようにして値の書き込みができる。code:I2Cの書き込み
  • I2Cデバイスによってはデータの書き込みの間に指定の時間を待つ必要がある。I2Cの書き込み処理は全て非同期で行われるため、書き込み完了を待つ必要があるが、genelator機能を使用して同期的に処理しているように記述できるようにしている。code:連続したデータの書き込み