logo header
logo header
logo header
logo header
  • 2016.05.02
  • 技術ブログ

【センサー編】Raspberry Piで作ろう!手作りスマートミラー

ハードウェア・組み込み部部長のtacckです。
札幌もすっかり春めいてきました。ようやく、桜がちらほらと咲き始めています。

Raspberry Pi 3も国内流通が始まりましたね。
私は、日経Linuxさんから販売されている「ラズパイマガジン」とのセットで購入しました。

さて、今回も引き続き、スマートミラー作成を行なっていきます。
今回は、コンテンツに動的なアクションを行なえるように、静電容量式のタッチセンサーを利用して、結果をブラウザへpushする流れをやってみます。

第1回:準備編
第2回:センサー編 ←今ここ
第3回:コンテンツ作成編
第4回:完成編

センサー紹介

まずは、タッチセンサーです。

静電容量式タッチセンサー

こちら、モジュールにRaspberry Piの電源・GPIO入力を繋げるだけで、簡単に利用できます。
モジュール上の赤色LEDで反応しているかも見えるので、プロトタイプで使うにはもってこいですね。

センサー情報取得

では、センサーの情報をRaspberry PiのGPIOから取得してみます。
動作確認レベルですが、下記のコードをRaspberry Piのコンソールで実行すると確認できます。

実行すると、コンソールに結果が延々と出てきます。簡単に利用できました。

2016042801

Server-Sent Events (SSE) とは

次は、Pythonで取得したセンサーの情報を、ブラウザへ反映させるようにします。
いわゆる「サーバプッシュ」の機能が必要です。

この手の機能としては一般にはWebSocketが有名で、これは双方向通信が可能です。
しかし、今回はサーバから一方的に情報を送るだけでよいので、「Server-Sent Events (SSE)」を使用します。
これは、HTTPにのっとりながらサーバプッシュの機能を追加できるものです。
(WebSocketは、HTTPとは異なるプロトコル。)
そのため、Apache HTTP Serverで特別な設定も無く簡単に使えるようになります。
(後述しますが、クライアントであるブラウザに制限があります。)

センサー情報をSSEで送信できるように、コードを修正します。

SSE使ってセンサー情報をブラウザへプッシュ

最後に、ブラウザ側で利用するHTML/JavaScriptを書きます。

SSEの機能はIE系では利用できないのですが、Raspberry PiはLinuxディストリビューションであるRaspbienを使っているので、気にする必要はありませんでした。
今回は、aptで簡単にインストールできるブラウザ「Iceweasel」(Firefoxの派生ブラウザ)で確認します。

Apache HTTP Serverを経由してRaspberry PiのGPIOを操作するために、www-dataユーザをgpioグループに追加しておいてください。

あとは、下記HTMLファイルと先のPythonプログラムをApache HTTP Serverから参照できる同じディレクトリに配置してください。

では、実際に確認してみましょう。

2016042802

写真ではわかりづらいかもしれませんが、タッチしたセンサーの番号に合わせて、画面上の数字が変更されます。
タッチすると"1"、離すと"0"、ときちんと反映されました!

これで、タッチセンサーをメニューとした画面遷移、といったコンテンツも作れるようになりました。
次回は、コンテンツ作成編として、表示する中身を作成していきます!

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!