Raspberry Piと温度湿度センサーを使って数値をグラフ化 - PHP,MySQL,Flex,JSな日々＋イラストとか

f:id:haru-komugi:20140720142337j:plain
Raspberry Piと温度湿度センサーを使って数値をグラフ化します。

サンプルはこちら
http://moeten.info/js/20140720_tempHumGraph/graph.html

必要なアイテム

Raspberry Pi Type B 512MBと温度湿度センサー
f:id:haru-komugi:20140720144910j:plain

温度湿度センサーのインストール

温度湿度センサーのインストール（詳細はこちらを参照）

$ sudo apt-get install gcc libusb-dev
$ cd /usr/local/src
$ sudo wget http://www.dd.iij4u.or.jp/~briareos/soft/usbrh-0.05.tar.gz
$ sudo tar xvfz usbrh-0.05.tar.gz
$ cd usbrh-0.05

usbrh_main.c の下記部分を追加修正します。

if((rc = usb_set_configuration(dh, dev->config->bConfigurationValue))<0){
    if( rc = usb_detach_kernel_driver_np(dh, dev->config->interface->altsetting->bInterfaceNumber)<0 ){ //<-- 追記
        puts("usb_set_configuration error");
        usb_close(dh);
        exit(3);
    } //<-- 追記
}

コンパイルとインストールと実行

$ make
$ sudo chown root:root usbrh
$ sudo chmod u+s usbrh
$ sudo mv -i usbrh /usr/local/bin/
$ usbrh
  //[温度] [湿度]　が表示されます。

PHP実行部分

温度湿度センサーusbrhをphpから実行し、温度・湿度データーを取得します。
add.php

<?php

//データーベースに接続
$con = mysql_connect('localhost', 'USER', 'PASSWORD');
mysql_select_db('DATABASE_NAME');

//温度湿度計コマンド実行
exec( '/usr/local/bin/usbrh',$buf);
list($temp , $hum ) = explode(" ",$buf[0]);

//不快指数の計算 http://homepage2.nifty.com/luminaries/guidance/kishou_018.htm
//０．８１×気温＋０．０１×湿度×（０．９９×気温－１４．３）＋４６．３
$discomfort = 0.81 * $temp + 0.01*$hum*(0.99*$temp-14.3)+46.3;

//Raspberry Piの場合は下記コマンドでCPU温度が取得できます。
exec( '/opt/vc/bin/vcgencmd  measure_temp',$buf2);
list($str , $temp_cpu ) = explode("=",$buf2[0]);
$temp_cpu = floatval( $temp_cpu );

//データーベースへデーターを挿入（変数のmysql_real_escape_stringは適宜してください ）
$sql = <<<SQL
INSERT INTO
  temperature_data (
    temperature,
    humidity,
    discomfort,
    temperature_cpu,
    mdatetime
  )VALUES(
    '{$temp}',
    '{$hum}',
    '{$discomfort}',
    '{$temp_cpu}',
    NOW()
  );
SQL;
$res = mysql_query( $sql );

cronを使って定期的にadd.phpプログラムを実行します。

$ sudo crontab -e

１０分おきにコマンドを実行する場合

*/10 * * * * php /var/www/add.php

javascript用にデーターベースの中身をjson形式で出力
print.php

<?php

//データーベースに接続
$con = mysql_connect('localhost', 'USER', 'PASSWORD');
mysql_select_db('DATABASE_NAME');

//データー取得
$sql = "SELECT * FROM temperature_data ORDER BY id LIMIT 100 ;";
$res = mysql_query( $sql );
while( $val = mysql_fetch_assoc( $res ) ){
  $json[] = $val;
}

//jsonで出力
echo json_encode( $json );

グラフ表示部分

graph.html

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});

    //
    $(function(){

      //グーグルグラフのライブラリ読み込み完了イベント
      google.setOnLoadCallback( init );

      //初期化
      function init(){

        //グラフ描画＋指定秒繰り返す
        makeGraph();
        setInterval(function(){
          makeGraph();
        },60 * 1000 );

      }

      //グラフの描画
      function makeGraph(){

        //JSONデーターの取得
        $.ajax({
          type: 'GET',
          url: './print.php',
          dataType: 'json',
          success: function(json){

            //タイトル作成
            var dataArray = [[
              '日付',
              '温度',
              '湿度',
              '不快指数',
              'CPU温度'
            ]];

            //jsonデーターの中身取得
            var len = json.length;
            for(var i=0; i < len; i++){

              //最新のデーターを取得
              if( i == len-1 ){
                $("#temperature").text(parseFloat(json[i].temperature) + "℃" );
                $("#humidity").text(parseFloat(json[i].humidity) + "％" );
                $("#discomfort").text(parseInt(json[i].discomfort , 10 ) );
                $("#temperature_cpu").text(parseFloat(json[i].temperature_cpu) + "℃" );
              }

              //データーに追加
              dataArray.push([
                json[i].mdatetime,
                parseFloat(json[i].temperature),
                parseFloat(json[i].humidity),
                parseFloat(json[i].discomfort),
                parseFloat(json[i].temperature_cpu)
              ]);

            }

            //グラフの描画
            var data = google.visualization.arrayToDataTable( dataArray );
            var options = {
              title: '温度・湿度グラフ',
              legend: { position: 'top' }
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);

          }

        });

      }

    });
  </script>
  <style type="text/css">
    #chart_div{
      width: 900px;
      height: 500px;
    }
    dl{
      position: absolute;
      top: 76px;
      left: 760px;
      border: 1px solid rgb(228, 228, 228);
      padding: 10px 15px 0 14px;
      border-radius: 10px;
      box-shadow: 0 0 3px gray;
      background: rgb(255, 254, 249);
    }
    dd{
      padding: 0;
      margin: 6px 0 10px 20px;
      font-size: 46px;
      text-align: right;
    }
  </style>
</head>
<body>
<div id="chart_div"></div>
<dl>
  <dt>不快指数</dt>
  <dd id="discomfort"></dd>
  <dt>CPU温度</dt>
  <dd id="temperature_cpu"></dd>
  <dt>湿度</dt>
  <dd id="humidity"></dd>
  <dt>温度</dt>
  <dd id="temperature"></dd>
</dl>
</body>
</html>