さて、シリアルモニタに温度を表示させるだけではつまらないので、現在動いている自宅サーバにログを取って、その結果をweb上からグラフにして表示させてみることにします。

Kenji.Yさんが構築された素晴らしいシステムには遠く及びませんが、とにかく頑張りましょう。Ethernetシールドを使用してHTTP Getメソッドでサーバにデータをcsv形式で記録し、それを基にグラフ作成です。グラフの描写はhighstockで行うことにしました。

サーバ側のコードはphpで書きました。これは、Mapo堂さんの記事を参考にさせていただきました、ありがとうございます。現在私のところのPHPは Version 5.3です。

tempera_log.php
[PHP]

[/PHP]
動作確認のためにブラウザから

http://サーバアドレス/パス/tempera_log.php?tempera=1234.5

などとアドレス欄に入力してtempera_log.csvが作成され、数値が記録されるか確かめます。私の場合データの投稿はLAN内からのアクセスですので、外部からこのファイルにアクセスできないようにアクセス制限を掛けておきました。もし将来仮に、インターネット側からデータを送らなければいけないときは、安全性を考慮して別の手立てをしなければならないでしょう。

ログファイルの置かれているディレクトリはwebサーバを動かしているユーザーから書き込む事ができるようにアクセス権を設定します。私はいつもこのことで失敗してしまいます。（学習能力がまるで無い）

続いて、先日作成したRx_data.inoにwebサーバアクセス用のコードを付け加えます。 Arduino 1.0 の Examplesにあるwebclientスケッチを元に作成しました。

Rx_data_log.ino ( Rx_log_data.zip )

Rx_data.ino スケッチの冒頭に追加します

[C]
#include

// Ethernet configration

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //ほとんどの場合macアドレスはこのままで大丈夫です
byte ip[] = { 192, 168, 1, 201 }; //イーサネットシールドのIPアドレス:LAN環境に合わせて設定変更が必要です
byte gateway[] = { 192,168,1,1 }; //デフォルトゲートウエイアドレス:　同上
byte subnet[] = { 255, 255, 255, 0 }; //サブネットマスク: 同上

IPAddress Logging_server(192,168,1,100); //logを記録するwebサーバのIPアドレス

EthernetClient client; 　 // イーサーネットクライアントライブラリ をイニシャライズ
[/C]

void loop(void)内の最後に追加します

[C]
// start the Ethernet connection:
Ethernet.begin(mac, ip ,subnet,gateway ); //subnet,gatewayの順番はArduino1.0のためのものです(バグ?)
delay(1000); // イニシャライズの為のディレイです

if (client.connect(Logging_server, 80)) {
Serial.println(“connected to Logging server”);

client.print(“GET /cgi-bin/tempera_log.php?tempera=”); // /cgi-bin/tempera_log.phpへ HTTP GETリクエストです:
client.print( got_data);
client.println(” HTTP/1.0″);
client.println();
}
else {
Serial.println(“Logging server connection failed”);
}
client.stop();
[/C]

さて最後に一番手こずったのがグラフ描写です。今回試したhighstockは以前使ったRRDtoolsとは違いJavaScriptで書かれていて、クライアント側でグラフを描くものです。

Highsoft社が開発元で、個人利用であればフリーで使うことができます。また、姉妹版のhighchartsというライブラリもあって、豊富な種類かつ表現豊かなグラフを描くことができます。highstockは時系列のデータに対して相性が良いようです。

こちらからライブラリをダウンロードして適切なディレクトリに解凍して設置します。

ドキュメントを参考にしてプログラムを組んだのですが、CSVファイルの取り込みがどうしてもうまくいかなくて苦労しました。サポートフォーラムの中を必死に探してようやく動かすことができました。でも、ひょっとすると、もっと根本的な恥ずかしい間違いを犯しているかもしれません。

このソフトに関しては日本語の資料があまりなく、へっぽこメモさんのwebに助けていただきました。ありがとうございます。

highstock.jsとtempera_log.csvのファイルのパスに注意します。文字コードセットをUTF8で保存します。

temperature.html

こちらにグラフサンプル