今回は、IchigoJamとMixJuiceを使って、IoTデバイスを構築してみました。IoTプラットフォームにはdweet.ioを使用します。
具体的には、IchigoJamに接続した温度センサー(TMP36)の計測データを、dweet.iにポストして、そのデータをブラウザで受信してGoogleゲージで可視化します。
○MixJuiceの作成
MixJuiceの中身はESP-WROOM-02です。ファームウェアも公開されているので、自作することができます。手元にESP-WROOM-02があったので、とりあえずブレッドボードベースで作成してみました。
・必要なモノ
MixJuiceファームウェア(「DOWNLOAD」をクリック)
・ESP-WROOM-02の配線
GPIO0 Low(GND)
GPIO2 High(3.3V)
GPIO15 Low(GND)
EN 10kΩで3.3Vにプルアップ
RST 10kΩで3.3Vにプルアップ
TXD シリアル変換ケーブルRXD(白)
RXD シリアル変換ケーブルTXD(緑)
・ファームウェアの書き込み
次のように操作してMixJuiceのファームウェアを書き込みます。
①FLASH DOWNLOAD TOOLSを起動します。
②COMポート(COM PORT)とボーレート(BOAUDRATE)を設定します。
③「Download Path Config」のいずれかの入力ボックスの右にある[...]ボタンをクリックします。
④MixJuiceファームウェア「MixJuice.bin」を選択し、[開く(O)]ボタンをクリックします。
⑤ADDRに「0x00000」と入力し、左のチェックをオンにします。
⑥その他を次のように設定します。
CristalFreq ：26M
SPI SPEED ：40MHz
SPI MODE ：QIO
FLASH SIZE：32Mbit
※この図では「Download Path Config」に「「MixJuice.bin」」以外の項目が入力されていますが、無視してください。
⑦[START]ボタンをクリックします。
なお ESP-WROOM-02の規定のファームウェアへの書き換え、アップデート方法については、ここを参照してください。
○回路の配線
MixJuice IchigoJam
TXD RXD
RXD TXD
MixJuice(ESP-WROOM-02)の「GPIO0」はHigh(3.3V)に設定します。
温度センサー(TMP36)は、次のように配線します。
○アクセスポイントへの接続
次のように操作して、アクセスポイント(WiFiルーター)に接続します。
①IchigoJamとMixJuiceの電源をオンにします。
②「?"MJ APC ssid password"」と入力します。ssidにはアクセスポイントのSSIDを、passwordにはアクセスポイントのパスワードを入力します。
○プログラム
・データ送信
IchigoJamで、次のBASICプログラムを入力します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 1 'temperature | |
| 2 c=(ana(2)*32-5000)/100 | |
| 3 ?"MJ POST START dweet.io/dweet/for/ichigojam?val=";c | |
| 4 ?"MJ POST END" | |
| 5 wait 3600 | |
| 6 goto 1 |
・データ受信用HTML
テキストエディタで、次のHTMLコードを入力します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>温度</title> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
| <script src="http://dweet.io/client/dweet.io.min.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <button onclick="subscribe()">接続</button> | |
| <button onclick="unsubscribe()">切断</button> | |
| </div> | |
| <div> | |
| <div id="temperatureGauge"></div> | |
| <div id="chart_div"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| var thingName = "ichigojam" // channel名の設定 | |
| // Google Chart | |
| google.load("visualization", "1", {packages:["gauge", "line","corechart"]}); | |
| google.setOnLoadCallback(drawChart); | |
| function drawChart() { | |
| // Data for temperature Gauge | |
| Data = google.visualization.arrayToDataTable([ | |
| ['Label', 'Value'], | |
| ['Temperature', 0], | |
| ]); | |
| // Option for temperature Gauge | |
| Options = { | |
| width: 200, height: 200, | |
| min: 0, max: 150, | |
| redFrom: 112, redTo: 150, | |
| yellowFrom:75, yellowTo: 112, | |
| minorTicks: 5 | |
| }; | |
| Gauge = new google.visualization.Gauge(document.getElementById('temperatureGauge')); | |
| Gauge.draw(Data, Options); | |
| }; | |
| function subscribe() { | |
| dweetio.listen_for(thingName, function(dweet){ | |
| // Update temperature data | |
| Data.setValue(0, 1, dweet.content.val); | |
| Gauge.draw(Data, Options); | |
| }); | |
| } | |
| function unsubscribe(){ | |
| dweetio.stop_listening_for(thingName); | |
| Data.setValue(0, 1, 0); | |
| Gauge.draw(Data, Options); | |
| } | |
| </script> | |
| </body> | |
| </html> |
BASICプログラム中の「dweet.io/dweet/for/ichigojam?val=」とHTMLコード中の「var thingName = "ichigojam"」の「ichigojam」にデータを送受信するための固有名で、同じ名前を指定します。これは、任意の名前を指定できます。
○動作の確認
動作を確認するには、次のように操作します。
①IchigoJamでプログラムを実行します。
②ブラウザでデータ受信用HTMLを開き、[接続]ボタンをクリックします。
0 件のコメント:
コメントを投稿