自宅のリモコンのリメイク(1)
冬に作った部屋の照明&エアコンのリモコンを作りなおすことに。冬に作ったから暖房のデータしかサンプリングしてないのですよ(笑)
まぁせっかく作り直すので、アーキテクチャから見直しをかけて、将来のために、無駄に(今は)要らないツールも使っているのでなかなか肝心の冷房機能が実装できてないのですけど・・。
1. ハードウェアアーキテクチャの変更
これまではESP-WROOM-02(以下ESPrIR)という3cm✕4cmくらいのWiFi+IR(赤外線LED)のみで、リモコンを作っていた。WEBページで利用可能にしたが、何のことはない、80番ポートでソケット開いて、処理結果をHTMLで(HTMLで!)返していたのだった。
1つで家の中全体に赤外線を飛ばせるならこれでも不自由はない。が、小さな部屋と言えど、1つでは無理。2つは要る。他に赤外線でなくてもコントロールしたいものが増えるかもしれない。
なので司令塔として、部屋に転がっていたRaspberry Pi 2 B+(以下RPi)を使うことにして、WEBのレンダリングもRPiにやらせる。まずRPiがUIからのリクエストを受けて、各子機(今回はまだESPrIR1機のみ)にリクエストを投げる。親機と子機の間もHTTPだが、ここはJSONかCSONでやり取りすることにして、まぁ、RESTful風にする。
2. ソフトウェアの変更
WEBのUIレンダリングには(別の案件で使いたいと思っている)Vue.jsを使用した。RPiのWEBサーバーはNginxにしたが、単に好み。実際に子機との通信部分をCGIでやらせても良いのですが(笑)、せっかくなので、これも別案件で使いたいと思っていたPython、その軽量フレームワークのFlaskを使ってみることにした。
というわけで、UI(HTML,CSS,JS,Vue.js)、サーバー(Nginx+Python+Flask)という、、実はindex.html1枚とCGIで済むところに、無駄にふんだんに仕掛けを投入(笑)。ちなみに別案件はビジネス向けのWEBシステム(のプロトタイプ)で、MySQLという名のMariaDBとMroonga、MongoDB辺りを使うのと、Rや,Cともバインドがあるのではと思われるので、ららべるに後ろ髪引かれながらもPHPではなく、グルー言語の誉れ高いPython、なのでした。
3. しかし、この組み合わせは・・・(笑)
なんと、Flaskのテンプレートエンジン(Jinja2)でのサーバーサイドレンダリングと、Vue.jsでのHTMLへのデータインジェクションの「ノテーションが同じ」という軽いワナがあることが判り。やってみるもんですね。超ざっくり書くと、
<h1>{{ greeting }}</h1>
と書いて、これがVue.jsのため、と思っていても、Flask側でこのHTMLファイルをtemplatesフォルダに入れて、render_template(xxxx.html)とすると、greetingが定義されとらん! とTrace吐かれるのデス。
ま、SPAで行くならサーバーサイドレンダリングなどせずに、staticから諸々ファイルをまんま読み込んで、あとはAJAXでのリクエスト処理だけ Flaskにやらす、でいいや、というところで今日は終わり。
4. ちなみに
つまらないものですが、UIイメージだけ出来とります。ペタっ。
== END ==