ログファイルからデータの取得と描画

TinyWebDBに、センサーデータ収集ログを解析して、画像にした！表示したのでは、温度（最高、最低）、気圧、バッテリー電圧。

ハードウェアの制作はこちら

https://uc4.net/2018/04/02/wemos-d5-weather-bureau/

送信プログラムはこちら

https://github.com/edu2web/TinyWebDB-WeatherStation

今回は、受信データの描画方法を説明する。

1. fileを配列に読み込む
2. json_decodeでディコード
3. 描画データ配列生成
4. jpgraphで描画する

データの取得

ファイル名draw.phpとする。

<?php
include ("./jpgraph/jpgraph.php");
include ("./jpgraph/jpgraph_line.php");

$tempers = file($_GET['logfile']);
$p_time = 0;
$datax = array();  // Local time p_time, "2001-04-01","2001-04-02","2001-04-03",...
$datay = array();  // temperature p_low
$data2y = array(); // temperature p_high
$datap = array();  // pressure
$datab = array();  // battery

foreach($tempers as $temper) {
        list($dummy,$tagValue) = explode('--', $temper);

        $obj = json_decode($tagValue);
        $temp = round($obj->{'temperature'}, 2);
        $localt = $obj->{'localTime'};
        $pressure = $obj->{'pressure_hpa'};
        $battery = $obj->{'battery_Vcc'};
        list($ldate,$ltime) = explode(' ', $localt);
        $p_time2 = $ldate . " " . substr($ltime, 0, 2); // Truncat to Hour

        if ($p_time2 != $p_time) {
                if ($p_time) {
                        array_push( $datax, $p_time);
                        array_push( $datay, $p_low);
                        array_push( $data2y, $p_high);
                        array_push( $datap, $pressure);
                        array_push( $datab, $battery);
                        // echo "$p_time, $p_low, $p_high <br>";
                }
                $p_time = $p_time2;
                $p_high = $temp;
                $p_low = $temp;
        } else {
                $p_low = ($p_low > $temp or $p_low == 0) ? ($temp) : ($p_low);
                $p_high = ($p_high < $temp or $p_high == 0) ? ($temp) : ($p_high);
        }
}

array_push( $datax, $p_time);
array_push( $datay, $p_low);
array_push( $data2y, $p_high);
array_push( $datap, $pressure);
array_push( $datab, $battery);

// data ready for JpGraph

データの描画

TinyWebDBに、センサーデータ収集ログを解析した画像でした！

JpGraphとは

JpGraphはAditus Consultingが開発しているグラフ生成ライブラリ。
JpGraphを利用することで、数行のコーディングで簡単に動的にグラフを生成することができる。

JpGraphダウントード

JpGraphのダウンロードは下記URLから行える。
http://jpgraph.net/download/

JpGraphインストール

PHPでグラフを出力する方法はいくつかあり、何れにしてもGDライブラリがインストールされていることが前提条件となっている。

この記事は、DreamHostで演習を前提とするので、GDライブラリがすでに用意されている。日本語の表示はフォントのインストールなど必要だが、省略する。そのためソースコードに日本語の表示に関連する箇所はコメントアウトする。

JpGraphはどこに設置しても動作する。

この演習では、jpgraphと言うフォルダに入れて、ソースから直接インクルードする。

// 折れ線グラフ描画に必要なライブラリ
include (“./jpgraph/jpgraph.php”);
include (“./jpgraph/jpgraph_line.php”);

JpGraphサンプル

折れ線グラフを生成するプログラムtest.php

<?php
// 折れ線グラフ描画に必要なライブラリ
include ("./jpgraph/jpgraph.php");
include ("./jpgraph/jpgraph_line.php");

// データ、凡例、描画色を準備
$data = array(
  'data' => array(
    array(151, 170, 140, 116, 157),
    array(161, 147, 182, 105, 140),
    array(115, 110, 90, 93, 88),
  ),
  'legends' => array('Tokyo', 'Akihabara', 'Ueno'),
  'colors' => array('red', 'green', 'blue'),
);

// グラフの描画先
$g = new Graph(400, 400); // サイズ
$g->setScale('textlin'); // 目盛り
// $g->title->setFont(FF_MINCHO, FS_NORMAL, 14); // タイトルフォント
// $g->title->set('上半期 店舗別販売件数'); // タイトル
// $g->legend->setFont(FF_MINCHO, FS_NORMAL, 14); // 凡例フォント

// 配列から順に折れ線グラフを生成＆キャンバスに追加
for ($i = 0; $i < count($data['data']); $i++) {
  $l[] = new LinePlot($data['data'][$i]); // データ
  $l[$i]->setLegend($data['legends'][$i]); // 凡例
  $l[$i]->setColor($data['colors'][$i]); // 描画色
  $g->add($l[$i]); // 追加
}

// グラフを描画
$g->stroke();

作成方法は、

1. グラフの描画キャンバスのGraphオブジェクトを生成
2. 配列から順に折れ線グラフを生成
3. LinePlotクラスを直接にaddメソッドでキャンバスのGraphオブジェクトに追加
4. グラフを描画

参考

1. https://www.buildinsider.net/web/bookphplib100/025

このシリーズは、TinyWebDB の実装を目的とする。

TinyWebDBとは

まずTinyWebDB のリポジトリを確認。

https://github.com/edu2web/tinywebdb-php

TinyWebDB Protocol:

Store A Value Form

Store A Valueを実装するため、tag-value pair Formをコーディングする。StoreAValueForm.php と保存してください。

<h3>Store a tag-value pair in the databse</h3>
<form action="StoreAValueAction.php" method="post" enctype=application/x-www-form-urlencoded>
 <p>Tag: <input type="text" name="tag" size="30"/></p>
 <p>Value: <input type="text" name="value" size="30"/></p>
 <input type="hidden" name="fmt" value="html">
 <input type="submit" value="Store a value">
</form>

Store A Value Action

フォームに入力された値のPHPによる取得方法の実装。下記のコードを StoreAValueAction,php と保存してください。

<?php
            // JSON_API , Post Parameters : tag,value
            $tagName     = $_POST['tag'];
            $tagValue    = $_POST['value'];
            $apiKey      = '';	// $_POST['apikey'];
            $log_message = sprintf("%s:%sn", date('Y-m-d H:i:s'), "storeavalue: ($apiKey) $tagName -- $tagValue");
            echo $log_message;
?>

受け取ったデータは表示されるはず。