2014年08月07日

マイコン

BBBで温度を表示するWebページを作ろう

みなさん、こんにちは。前回はBoneScriptとJavaScriptを使って温度を取得しましたが、現状JavaScriptだけで閉じてしまっています。これではわざわざWeb IDEとJavaScriptで作ったメリットが無いですね。

WebといえばJavaScript、JavaScriptといえばWebです! そこで今回は、取得した温度をWebページに表示して見られるようにしてみましょう。

【目次】


 ・システムの概要
 ・プログラムの説明
 ・ソケット通信
 ・JavaScript部
 ・おわりに
 ・作者

 

システムの概要


今までマイコンしか触ってこなかった人にとっては、Webというのは未知の世界だと思います。実際私がそうでして、いろいろ理解が難しい所があったので、先に今回つくるプログラムの概要を説明します。
temp_web_white.jpg

今回作成するコードは、
app.js
index.html
の2つです。

前者は主にサーバーとしての機能を持ち、後者はクライアントとしての機能を持ちます。

基本的な動作手順は以下のようになっています。

  1. WebブラウザがHTTP GETリクエストを投げる
  2. BBB側がリクエストに対し、index.htmlというHTMLファイルを送る
  3. WebブラウザがHTMLを解釈して表示する
  4. app.jsがWebブラウザ側のソケット通信接続を待つ
  5. HTMLファイル内に埋め込まれたJavaScriptが、BBB側に対してソケット通信接続を行う
  6. app.jsが接続を検知し、温度を取得して、ソケット通信で送信する
  7. ブラウザ側が温度を取り出し、Webページのデータを更新する

注意すべきところは図を見ていただければわかるように、温度を取得する側と、温度を表示する側のシステムが完全に分かれていることです。これがどちらもBBB上で動くのであれば、前回作ったJavaScriptを適当なHTMLファイルに追記するだけでOKです。しかし今回は温度センサーがつながっているのはBBB、表示するのは別のパソコンとなっているので、温度計のついていないクライアントサイド(パソコン)では、温度を表示することができません。これを解決するために構成をサーバーとクライアントに分けていて、それを実現するためにはソケット通信を用いています。


プログラムの説明


app.js
app.js
はBBBで動作するサーバープログラムで、以下の動作を行います。

※温度の取得
※簡易HTTPサーバー
※ソケット通信を使った温度の送信


コードは以下のようになっています。

温度の取得
前回作ったコードとほとんど変わりません。温度を小数点第1位までに丸めて、戻り値で返すだけです。

```javascript var b = require('bonescript');

var getTemperature = function(){ var AN0 = "P9_39";

var B = 3975;
varkl R0 = 10000;
var Rs = 10000;
var Vref = 1.8;
var Ts = 25 + 273.15;

var a_val = b.analogRead(AN0);
var V = a_val * 1.8; // 0 to 1 : 0 to 1.8(V)
var R = R0 * V / (Vref - V);
var T = 1 / ( 1 / Ts - Math.log(R / Rs) / B ) - 273.15;
T = Math.round(T*10) / 10;

console.log("Temperature: " + T);

return T;
} ```


HTTPサーバー
```javascript var app = require('http').createServer(handler) var fs = require('fs');

app.listen(5000);

function handler (req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading index.html'); }

res.writeHead(200);
res.end(data);
});
} ```

この部分は
app.listen(5000)
で5000番ポートで接続を待ち、接続されたら同じディレクトリに存在する
index.html
を返します。つまり簡単なHTTPサーバーとして動作します。

HTTPサーバーと言うとApacheやIISのような大きなシステムが必要なように感じますが、HTTPサーバーはGET要求に対して適当なHTMLを返せばいいだけなので、このように簡単な実装でも問題ないのです。


ソケット通信


```javascript var io = require('socket.io')(app);

io.on('connection', function (socket) {
 t = getTemperature();
 socket
.emit('nowTemp', { temp: t });

}); ```


この部分では
socket.io
ライブラリを用いて、クライアントからの接続が行われた際に、温度をソケット通信を用いて送信します。

後でコードを載せますが、受け側は送られたデータからnowTempタグの付いたものを取り出して、その中のtempタグのデータを開くことで、温度のデータが得られるようになっています。

index.html
index.html
と、そこに記述されたJavaScriptは以下の動作を行います。

※ベースとなるHTMLの用意
※ソケット通信を使った温度の取得

ベースとなるHTML
html.jpg
以上がベースとなるHTML部分です。Webブラウザはこれを元にして、画面上にunknownと表示するだけのページを作ります。

ただし、このunknownにはidがついており、後でJavaScript等を用いて変更することが可能となっています。


JavaScript部


java.jpg
ソケットを用いて温度を取得し、先ほどのHTMLを書き換えるコードです。

まず

javascript var socket = io('http://192.168.7.2');

でBBBのIPに対して接続し、

javascript socket.on('nowTemp', function (t) {

この部分でデータを取り出してtと名づけて

javascript document.getElementById("temp").innerHTML = "現在の温度は" + t.temp + "度です。";

tの中の要素tempにアクセスし温度を取り出した後、idを用いてunknownを温度で書き換えます。

ソースコード全体
以上のコードをまとめたものをgistで公開しておきますので、わからなくなった方はこちらを参考にしてください。

https://gist.github.com/jitomesky/6d58fd1ab17dfd696c27

動かしてみる
socket.ioのインストール
socket.ioは最初から入っていないので、インストールする必要があります。

本来インストールのためにはSSH等で中のシステムに接続して……と面倒な手順が必要ですが、この手順もWeb IDEを使えば簡略化することができます。

まずはWeb IDEを開いて、したの方にタブを選択する部分があるので、下図を参考にタブを切り替えてください。
web_ide_tab.jpg
このタブを開くと、下図のようにコンソールが立ち上がります。
web_ide_console.jpg
ここに以下のコマンドを入力し、実行すればインストールが行われます。

```

npm install socket.io
```

起動
app.js をRunして、Webブラウザから
192.168.7.2:5000
にアクセスすると、以下のようにWebページに温度が表示されます。
web_page2.jpg

おわりに


今回はWebページに温度を表示することをしてみました。 JavaScriptを使ったコーディングは、組み込み野郎に取ってはちょっと大変でしたが、やっと報われた気がします。

しかし現状、温度のリアルタイム更新もできていませんし、なにより温度をそのまま表示するだけでは面白みにかけます。次回はWebならではの方法で、温度のチェックを楽しくしてみたいと思います。

次回もよろしくお願いします。

参考文献orサイト
米田聡 著 - BeagleBone Blackで遊ぼう! ISBN978-4-89977-393-1


作者


作者: 西永俊文
Twitter: tnishinaga
協力: マルツエレック株式会社

クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。

ページトップへ