ʍoɹɐɥsのブ口グ

ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็็็็็็็็็็็็็็็ ส็็็็็็็็็็็

温度センサの値をブラウザから見れるようにする(2)

f:id:sharow:20150612054614p:plain

RaspberryPiと温度センサDS18B20のやつ。

とりあえずできた。グラフ描画にはNVD3を使うことにした。下の狭い方のグラフを範囲選択すると上のグラフに反映される、lineWithFocusChart()を使った。

bower経由で使ったモジュールは以下のとおり。

  "dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.4",
    "riotjs": "~2.1.0",
    "nvd3": "~1.7.1"
  }

最近いいなぁと思うのは、Jade(実際は本家jadeとpyjadeを組み合わせてる)とRiot。SPA風のつくりになってるのだけど、その1個しかないhtmlコンテンツのコードはまんまこうなっている。

doctype 5
html(lang='ja')
  head
    {{> meta}}
    title Thermal Censor
  body
    {{> navigator}}
    div#container.center-block
      app
  {{> scripts}}
  script.
    var app = riot.mount('app')[0];
    riot.route(function(page) {
      app.update({page: page});
    });

たったこんだけである。もちろん、{{> hoge }}でincludeされるコンテンツはあるのだけど、それらの中身で書くべきことは、metaとかscriptsという名前に代表されること以外を省けるので、再利用もできるし、書くときに分かりやすい。例えばscripts.jadeはこう。

script(src='/static/lib/jquery/dist/jquery.min.js', charset='utf-8')
script(src='/static/lib/bootstrap/dist/js/bootstrap.min.js', charset='utf-8')
script(src='/static/lib/riotjs/riot.js', charset='utf-8')
script(src='/static/lib/d3/d3.min.js', charset='utf-8')
script(src='/static/lib/nvd3/build/nv.d3.min.js', charset='utf-8')
script(src='/static/js/main.js', charset='utf-8')

appタグはriotでマウントするカスタムタグで、以下の6行で全部。

app
  home#home(if='{ page == "home" }')
  censor0#censor0(if='{ page == "censor0" }')
  censor1#censor1(if='{ page == "censor1" }')
  script.
    this.page = 'home';

app内にはさらにhomeとかcensor0などのカスタムタグがある。ナビゲータ部分でクリックしたときにどこへ飛ぶかはここで列挙するだけ。あとはhome.tagやcensor0.tagで、自己中にそのページのコンテンツだけ書けばよい。ちなみにriotはJSXのようにプリコンパイルのフェーズがあるのだけど、コンパイルオプションに--template jadeをつけるとことで普通にjadeでカスタムタグが書ける。これはほんとに便利。今回は使わなかったけどスクリプト部分はCoffeeScriptにも対応してる。riotいいよ?

ところで温度センサで拾ってるのは室内、それも16ポートハブや長時間動いてるノートPCの近くなので外気と比べるとだいぶ高い温度になってる。ためしに窓をあけてみたら1℃くらい下がった。ところが体感では3℃くらい変わったのかと思うくらいだった。自分が思ってたより1℃の差というのは大きい。

まだPython側に作業することがあるのだけど、とりあえず1週間くらいコードは放置しようと思う。いまは何もキャッシュしていないので、毎回ディスクからpickleを読み込んでいる。問題が出るとすると半年とか1年規模のデータになったときか。これからくる夏の暑さでどのくらい温度が上がるのか少々楽しみにしつつ、エアコンが無いので同時に恐れつつ…。