カテゴリー別記事一覧

マイコン

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

以前、BoneScriptとJavaScriptを使って温度を取得する仕組みをご紹介しましたが、現状JavaScriptだけで閉じてしまっています。これではわざわざWeb IDEとJavaScriptで作ったメリットがありません。

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

【目次】

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

　

システムの概要

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

今回作成するコードは、

app.js

と

index.html

の2つです。

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

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

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

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

↑ページトップに戻る

プログラムの説明

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部分です。Webブラウザはこれを元にして、画面上にunknownと表示するだけのページを作ります。

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

↑ページトップに戻る

JavaScript部

ソケットを用いて温度を取得し、先ほどの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を開いて、したの方にタブを選択する部分があるので、下図を参考にタブを切り替えてください。

このタブを開くと、下図のようにコンソールが立ち上がります。

ここに以下のコマンドを入力し、実行すればインストールが行われます。

```

npm install socket.io
```

起動
app.js をRunして、Webブラウザから

192.168.7.2:5000

にアクセスすると、以下のようにWebページに温度が表示されます。

↑ページトップに戻る

おわりに

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

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

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

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

↑ページトップに戻る

作者

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

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

↑ページトップに戻る