気温データベースを作ってみよう!(温度の記録と確認)~ SOCKET SERVER 'HAL'

ソケットサーバー「HAL」には、簡単にデータベースを利用するためのライブラリ「DataMapper Lite」が付属しています。DataMapper Lite を使うと、とても簡単にデータベースの操作ができるようになります。

今回は Raspberry Pi で温度を全自動で測定してデータベースに記録し、室温の推移をWEBブラウザで確認できるようにしてみましょう。

おススメ!記事
Raspberry Pi 用「HAL」で、
カップラーメン・タイマーを作ってみよう!
ラズパイDIYの決定版! ソケットサーバー「HAL」をご紹介します。

※誠に申し訳ありませんがこちらの電子工作のコンテンツは弊社の実験制作例となっております。十分な安全が保障されているわけではないため、参照や実施は自己責任となってしまいますのでご注意ください。

気温データベースを作ってみよう!(温度の記録と確認)

ソケットサーバー「HAL」には、簡単にデータベースを利用するためのライブラリ「DataMapper Lite」が付属しています。DataMapper Lite を使うと、とても簡単にデータベースの操作ができるようになります。

Raspberry Pi では温度センサモジュールを接続するだけで、簡単に室温を計測することが出来ます。

今回は、こうして計測した温度を DataMapper Lite を使ってデータベースに記録し、室温の推移をWEBブラウザで確認できるようにしてみましょう。

このコーナーでの最終目標

Raspberry Pi に定期的に自動で気温を測定させ、いつでもブラウザからそのデータを確認できるようにする。

このようなデータが確認できます。記録間隔は自由に変えられますし、グラフのデザインも同様にかなりの自由度があります。

温度センサモジュールの接続

今回利用する温度センサモジュールは、秋月電子通商 の「ADT7410使用 高精度・高分解能 I2C・16Bit 温度センサモジュール」です。100円玉は大きさ比較のために置いてみました。

ADT7410使用 高精度・高分解能 I2C・16Bit 温度センサモジュール

温度測定に必要な部品は全てハンダ付けされているのですが、ブレッドボードで利用するための4本足のピンヘッダはハンダ付けが必要です。私でもハンダ付けはできましたのでそれほど難しくはありませんが、ご購入にあたっては予め念頭において下さい。

この温度センサモジュールを使った基本的な接続方法や利用方法については、「室内温度の測定(ADT7410使用モジュールとPHP)」 の方で纏めました。そちらを御覧ください。

データベースの導入

ソケットサーバー「HAL」のデータベースライブラリ「DataMapper Lite」で利用できるデータベースは MySQL、PostgreSQL、SQLite の3つです。どれでもお好きな物をお選びいただけますし、途中でデータベースを変更することになっても、基本的なプログラムはそのまま利用できます。

どのデータベースがどんな特徴があるのかについては「データベースの選択と導入」に簡単に纏めました。この記事から、各データベースの導入記事へのリンクが張られていますので、自分に合いそうなデータベースを選んで導入して下さい。それほど深く考えなくても大丈夫だと思います。

データベースの選定と導入ができたら、HAL を導入したデータベースに併せてセッティングしましょう。/HAL/setting/DBSetting.php で設定を行います。

/HAL/setting/DBSetting.php

public static function getDB()
{
$db = self::getDBMySQL(); // MySQLを使う場合
//$db = self::getDBPgSQL(); // PostgreSQLを使う場合
//$db = self::getDBSQLite(); // SQLiteを使う場合

return $db;
}

上記の場合、HAL では MySQL を利用します。もし PostgreSQL か SQLite を利用される方は $db = self::getDBMySQL(); の前に // を入力してコメントにし、お使いのデータベースの方の $db の前の // を消して有効にしてください。

self::getDB****();

というのは、この DBSetting.php 内の DBSetting クラスに定義してある getDB**** というメソッドを実行しています。データベース毎に記述してある getDB****メソッドでは DB クラスのオブジェクトを生成して利用するデータベースに合った設定を行い、その DB クラスオブジェクトを返します。getDB**** メソッド内には既に雛形が記述してあります。

$db->dbhost に記述されている localhost というのは、自分自身のことを指します。つまり、HAL を動作させる Raspberry Pi 上で動作しているデータベースを利用する、という意味になります。

SQLite だけは少し違っていて、$db->dbhost に、データベースファイルのあるディレクトリまでのパスを記述し、$db->dbname にデータベースファイル名を記述して下さい。

データベースにテーブルを作成する

データベースの設定が終わったら、室温を記録するためのテーブルと、データを出し入れするためのデータモデルを作成します。

DBアクセスライブラリ「DataMapper Lite」」の「bakepi コマンドの作成」のように bakepi(パイを焼く)コマンドを作成したら、次のようにテーブル定義ファイルを記述します。(HAL までのディレクトリパスはお使いの環境に合わせてください)

sudo vi /var/www/HAL/db/tabledefinitions/Temperature.yml
## 室温ログ用テーブル設定
---
columns:
time_at:
type: "TIMESTAMP"
collation: "utf8mb4_general_ci"
allownull: false
default: null
ai: false
extra: null
other: null
index: null
comment: "タイムスタンプ"
temp:
type: "FLOAT(4)"
collation: "utf8mb4_general_ci"
allownull: false
default: null
ai: false
extra: null
other: null
index: null
comment: "温度"
primary:
- "time_at"
unique: null
index: null
fulltext: null
check: null
foreign: null
table_comment: "温度テーブル"

上記のように記述して保存したら、bakepi コマンドを実行します。

sudo bakepi -d Temperature true

データベースのセッティングが正しければデータベース内に temperatures テーブルが作られ、/HAL/db/datamodels/ ディレクトリ内に Temperature.php が自動で作成されます。

Temperature.php

<?php
namespace Feijoa\HAL;

class Temperature extends DataModelAbstract {

//*****************************************/
// const
// BOOLEAN = 'boolean',
// INTEGER = 'integer',
// DOUBLE = 'double',
// FLOAT = 'double',
// STRING = 'string',
// DATETIME = 'dateTime';
//*****************************************/

protected $schema = array(

'time_at' => parent::STRING,
'temp' => parent::DOUBLE,


'add_time' => parent::DATETIME,
'add_proc' => parent::STRING,
'add_id' => parent::STRING,
'update_time' => parent::DATETIME,
'update_proc' => parent::STRING,
'update_id' => parent::STRING,
'lg_del' => parent::BOOLEAN,
);

protected $primary = array( 'time_at'
);
}

ところで bakepi コマンドですが、既に同名のテーブルが存在する場合にはエラーとなります。ただし、最後に

sudo bakepi -d Temperature true

のように true を指定することで、既存テーブルを削除(DROP TABLE)してから新たにテーブルを作成してくれます。

それと、既存の同名データモデルについては、

pi@raspberrypi:/var/www/HAL/db/datamodels $ ls

Temperature.php
Temperature.php.20160719090225.back

のように、タイムスタンプを記したバックアップファイルとして残されます。中身はそのままですので、もし必要であればリネームすることで昔のデータモデルを利用することができます。

温度を計測してデータベースに記録する

データモデルが作成できたら、次は実際に測定した温度をデータベースに記録してみます。HAL ディレクトリ内に /apps ディレクトリを作成してその中にプログラムを入れることにしましょうか。

cd /var/www/HAL

sudo mkdir apps
sudo vi /var/www/HAL/apps/measure_temp.php
<?php
namespace Feijoa\HAL;

// 必要なライブラリの読み込み
define("__HALROOT", "/var/www/HAL/"); // HAL までのパスを __HALROOT として定義
define("__PROG", "MEASURE_TEMP"); // データベース記録用のメタ情報
require(__HALROOT . "setting/requires.php"); // 必要なライブラリの読み込み

// 温度の計測
$read = system("sudo i2cget -y 1 0x48 0x00 w &");
$r1 = substr($read, 2, 2);
$r2 = substr($read, 4, 2);
$swap = "0x{$r2}{$r1}";
$temp = (float)number_format(intval(hexdec($swap)) / 128, 1);

// DBのセットアップ
$dto = new HALDto();
$dto->DB = DBSetting::getDB();
$dto->pdo = DBConnect::getInstance()->getPDO($dto->DB);
DataMapper::getInstance()->db($dto->DB)->meta(__PROG, __PROG);

// 温度の記録
$dm = new Temperature();
$dm->time_at = date("Y-m-d H:i:s");
$dm->temp = $temp;
DataMapper::getInstance()->setUp("Temperature")->insert($dm)->execute();

温度の計測部分については、「室内温度の測定(ADT7410使用モジュールとPHP)」の「デバイスが利用できるか確認」を参照して下さい。詳しく記述してあります。

DB のセットアップについては、ほとんどが決まり事です。どんな処理でも最初にこれを一度行っておいて下さい。meta(__PROG, __PROG) については、第一引数が実行プログラム情報、第二引数が実行ユーザーID として、データベースで追加・更新されるレコードに併せて記録されます。__PROG は “必要なライブラリの読み込み” のところで define(定義)した文字列が使われますので、この場合、"MEASURE_TEMP" という文字がレコードに記録されます。

温度の記録部分で、先ほど作成したデータモデル Temperature を利用しています。

まず、

$dm = new Temperature();

で、データモデルのインスタンス(実体)を生成し、値を設定しています。time_at が計測時間で temp が温度です。その他の情報は DataMapper Lite により自動で作成されます。

date() メソッドは第一引数で指定したフォーマットで、第二引数で指定された時刻を、文字列型で返します。今回は第二引数を省略したので、このプログラムが実行された時間がフォーマットされて返されます。フォーマット形式については、下記 PHP マニュアルを参照して下さい。

date

最後に、DataMapper Lite を使ってデータベースにデータを登録します。

DataMapper::getInstance()

で、DataMapper Lite の実体を取得し、そこに対して

setUp("Temperature")

で、Temperature データモデルと、temperatures テーブルを利用するように設定し、

insert($dm)

で、INSERT(挿入) 命令の作成と、挿入するデータの準備が行われ

execute();

で、命令が実行されます。

余談ですが、先ほど準備された INSERT はクエリが prepare され、値はデータベースの機能を使ってバインドされて実行されます。(SQLite はプリペアード・ステートメントが利用できないため、PHP の PDO を使ってエミュレートされます)

では、正しくデータベースに温度が登録されるか試してみましょう。

sudo php -q /var/www/HAL/apps/measure_temp.php

以下のように 16進数で温度が表示され、

0xd00d

データベースに温度が記録されていたら成功です。

記録されたレコード

cron で一定時間毎に記録

さて、温度計測とデータベースに記録するプログラムが書けたら、次はこれを一定時間毎に実行します。

Linux では、決まった時間毎に決まった処理を実行するためのデーモン(バックグランドで動作するプロセスのこと)として cron が用意されています。クローンでもクーロンでもなく、クロンです。

この cron に処理を簡単に追加するコマンドに crontab というのがあります。

crontab -e

を実行すると、定期実行する処理についての情報を記述するファイルが nano(テキストエディタ)で開かれます。今まで利用したことがなければ、全て # で始まるコメント文が確認できると思いますので、その最後の行に

*/1 * * * * sudo php -q /var/www/HAL/apps/measure_temp.php

のように記述します。nano では vi のように入力モードに切り替える必要はないので、ただのテキストエディタだと思って入力して下さい。

最初の 5 パートについてはそれぞれ、

分 時 日 月 曜日

を指定しますが、分について */1 とすると、「1 分」ではなく「1 分毎」になります。これで、1分毎に sudo php -q /var/www/HAL/apps/measure_temp.php というコマンドを実行してくれることになります。

nano での保存は、ctrl + X で保存しても良いか聞かれるので y を押し、ファイルネームを聞かれるので変更する必要のない場合はそのままエンターキーを押してください。

参考)決まった時間に処理する Make.

crontab の設定変更後は再起動する必要なく反映されるはずです。しばらく時間を置いてから、データベースの内容を確認してみましょう。下記のように指定した時間の間隔で記録されているはずです。

cronによる定期記録

ブラウザで確認するための下準備

ブラウザでこの記録を確認するには、WEB サーバーでこの情報を取得してブラウザに出力する必要があります。このプログラムも PHP です。PHP は WEB サーバー上でモジュールとして動作するので、特別難しい事をする必要はありません。

WEB サーバーのドキュメントルート等に PHP プログラムを作成します。

sudo vi /var/www/html/getTempLog.php
<?php
namespace Feijoa\HAL;

// エラー表示
ini_set("display_errors", 1); // 0にすると、エラーが表示されなくなる。デバッグ時のみ 1 に設定。

// 必要なライブラリの読み込み
define("__HALROOT", "/var/www/HAL/");
define("__PROG", "GET_TEMP_LOG");
require(__HALROOT . "setting/requires.php");

// DBのセットアップ
$dto = new HALDto();
$dto->DB = DBSetting::getDB();
$dto->pdo = DBConnect::getInstance()->getPDO($dto->DB);
DataMapper::getInstance()->db($dto->DB)->meta(__PROG, __PROG);

// 温度ログの取得
$qry = <<< EOL
SELECT
time_at, temp
FROM
temperatures
ORDER BY
time_at DESC
LIMIT
50
EOL;

$result = DataMapper::getInstance()->setUp("Temperature")->loose()->query($qry)->execute();

// レコードが取得できなかったら error という文字を出力して終了
if(!is_array($result))
{
echo "error";
exit;
}

// レコードが取得できたらJSONでエンコードして出力

// 配列を反転
$result = array_reverse($result);

$json = json_encode($result, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
header('Content-Type: application/json charset=UTF-8');
header('X-Content-Type-Options: nosniff');
echo $json;
exit;

DBのセットアップまでは、先ほどとほとんど一緒です。

温度ログの取得の SQL 文はまず、

SELECT time_at, temp FROM temperatures

で、 temperatures テーブルから time_at カラムと、temp カラムを取得することを宣言します。

SELECT * FROM temperatures

とすれば、全てのカラムを取得できますが、メモリがたくさん必要になるのと、この後ブラウザに情報を出力する時に不要な情報を漏洩させないため、敢えて、取得するカラムを制限しています。

ORDER BY time_at DESC

では、取得するレコードの順番を指定しています。DESC というのは降順のことで、大きい方から小さい方に向かって並べられます。時間を記録しているタイムスタンプは時間経過とともに常に値が大きくなっていくので、DESC を指定すると最新のレコードから古い方に向かってレコードが並べられて取得されます。

最後に

LIMIT 50

で、最大で 50 件までのレコードを取得するように設定しています。記録されているレコードが 50 件よりも少なければ全て、それ以上の場合は 50 件のレコードが取得されます。

なお、SQL の命令部分については、基本的には大文字と小文字を区別しません。ですが、慣例として、命令部分は大文字、テーブル名やカラム名といった記述子については小文字を使う事が多いでしょう。また、SQL 文は1行で書いても、適切にインデントや改行を行っても構いません。

この、

SELECT time_at, temp FROM temperatures ORDER BY time_at DESC LIMIT 50

を、DataMapper Lite の query() メソッドで設定し、最後に execute() で実行すると $result に結果が配列として帰ってくるわけです。

ところで、この $result は先ほど SQL で指定した通り、新しい順になっています。この後で作る、ブラウザで動作するグラフ描画ライブラリの利用では、古い順にデータがあった方が描画が楽です。JavaScript では、配列の反転は少しめんどくさいので、メソッド1つ記述するだけで反転できる PHP でやってしまいましょう。

$result = array_reverse($result);

これで、古い順になりました。

(2016/07/20追記、よく考えたら JavaScript にも Array.reverse() がありました…。この場合はどっちでも大して違いないですね…)

そうしたら最後に、その配列を JSON という形式でブラウザに返します。JSON は ブラウザで動作するプログラムの代表である JavaScript のためにつくられたデータ記述形式で、現在では JavaScript だけでなく、様々なプログラム言語でも利用されています。

今はあまり深く知らなくても大丈夫ですが、ご興味がありましたら、下記などが参考になると思います。

参考)JavaScriptプログラミング講座【JSON について】

一番最後のプログラムについては、ほとんど PHP における JSON 出力の定型文です。文字化けしないように特定の文字を参照に置き換え、ブラウザで JSON データとして認識出来るように適切なHTTP ヘッダを先に出力してから、最後に echo 文で JSON 文字列を出力するだけです。

$json = json_encode($result, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
header('Content-Type: application/json charset=UTF-8');
header('X-Content-Type-Options: nosniff');
echo $json;
exit;

このプログラムに、ブラウザからアクセスしてみましょう。** は、お使いの Raspberry Pi の IP アドレス、/getTempLog.php についてはお使いの環境に合わせてください。例えば、WEB サーバーのドキュメントルート下に temp というディレクトリを作ってその中に getTempLog.php ファイルを作成していたとしたら、http://192.168.**.**/temp/getTempLog.php にアスセスする事になります。

http://192.168.**.**/getTempLog.php

JSONデータを確認

こうして記事を書いているうちに、随分データが記録されていました。これが JSON データの構造です。後はこのデータを使ってグラフを描画するだけです。

なおこのように、ブラウザで利用する情報は簡単に見る事ができます。ですから、見られても困らない情報だけを出力するようにしましょう。

グラフの描画

最後のしめくくりは、先ほどの JSON データを使ってグラフを作成します。

JavaScript には便利なグラフ描画ライブラリが沢山あるので、そのうちの一つを使って簡単に仕上げましょう。今回使うのは、

Highcharts

にしてみました。Highcharts JS > Licenses によると、Non-commercial(非商用)の個人使用、又は非営利プロジェクトでご利用になる場合、クリエイティブ・コモンズ・ライセンスの下で、無料で利用できるそうです。

ライセンス

この DOWNLOAD リンクから Download ページを開きパッケージをダウンロードしてください。

ダウンロード

zip ファイルがダウンロードされるのでそれを解凍すると、js フォルダが見つかると思います。この js フォルダを、Raspberry Pi の WEB サーバーのドキュメントルート下などにアップロードして下さい。

では、グラフを描画する HTML ファイルと JavaScript ファイルを作成しましょう。

HTML ファイルの作成

まず、getTempLog.html です。

sudo vi /var/www/html/getTempLog.html

<head/>内で jQuery を google の CDN から読み込み、併せて、先ほどアップロードした js フォルダ内の highcharts.js を読み込んでいます。src に対して / で始めると、それはドキュメントルートを示す相対パスになりますから、下記の場合、ドキュメントルート下にある js フォルダの中の highcharts.js を読み込みます。

また、getTempLog.js はこれから記述する、グラフ描画プログラムへのパスです。

<!DOCTYPE html>
<html>
<head>
<title>温度ログ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
<script src="/js/getTempLog.js"></script>

<style type="text/css">
#temp-chart {
box-sizing: border-box;
min-width: 300px;
width: 100%;
height: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- グラフ描画するエリア -->
<div id="temp-chart"></div>
</body>
</html>

この状態で、この HTML にブラウザからアクセスし、開発ツール(Chrome では Ctrl + Shift + I)を開くと、このようなエラーが表示されるはずです。

エラー

これは勿論、まだ /js/getTempLog.js を作成していないためですが、もし、他にもエラーが出ていた場合はそこを修正して下さい。

さて、そうしたら /js/getTempLog.js を作成し、グラフを描画してみましょう。

sudo vi /var/www/html/js/getTempLog.js

まず、動作確認のため、先ほどのサイトのサンプルプログラムを、ほぼそのまま使ってみます。

配布元のサンプルコード

当サイトのコード

$(function () {

$(document).ready(function ()
{
$('#temp-chart').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});

変えた場所の一つは $('#container') の部分です。理由は「それが一体何であるのか」を示す id について、container のように抽象的な記述をするのはあまり好ましくないからです。なぜなら、後から別の機能が追加されてきた時に、どれがどの機能の ID なのか判断がつきづらくなるケースが往々にしてあるからです。

ですから先程の HTML では id="temp-chart" として、温度チャートであることを明確にしていました。このため、$('#temp-chart')として、グラフを描画する要素を指定しています。

あともう一つは、<head/>内でこの js プログラムを読み込んでいるため、その時点ではまだ<div id="temp-chart"> が存在しておらず、グラフは描画されません。

このため、HTML ドキュメントの準備が終わるのを待ってから $('#temp-chart').highcharts(); メソッドを実行するように、jQuery の ready() メソッドを使っています。

さぁ、この getTempLog.js を保存したら、再び getTempLog.html にブラウザでアクセスしてみましょう。アニメーション付きで下図のようなグラフが作成されれば成功です。

サンプルグラフ

こうなれば後は getTempLog.js について、値を適宜差し替えるだけですね。後一歩です。

最後の仕上げ

まず、非同期通信で getTempLog.php にアクセスして JSON データを取得するプログラムを書きます。先ほどのgetTempLog.js の前半部分にコードを差し込んでください。

sudo vi /var/www/html/js/getTempLog.js
$(function () {

$(document).ready(function ()
{
$.ajax({
type: 'GET',
url: '/getTempLog.php',
dataType: 'json'
}).done(function (response, textStatus, jqXHR) {

// 室温ログの取得に成功した場合、ここで処理をする
console.log(response);

}).fail(function (jqXHR, textStatus, errorThrown) {
alert("通信に失敗しました。");
});

$('#temp-chart').highcharts({ // (この行から変わらず)
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
// :(以下変わらず)

この状態でページをリロードし、開発ツールの Console(コンソール)で確認すると、このように Array(配列)で値が取得できているのがわかります。

ajaxで取得した記録データ

さぁ、これを整形して highcharts() に渡しましょう。

まず、X軸のラベルである xAxis.categories に渡す配列はタイムスタンプの配列です。併せて series には室温の配列を data に設定したオブジェクトを 1 つだけ持った配列として渡します。

このため、ラベル文字列格納用の配列 labels と、温度格納用の配列 temps を作成し、そこに順番にデータを入れていきます。

// テンポラリ配列作成
var labels = [];
var temps = [];

// データの仕分け
for (var len = response.length, i = 0; i < len; i++)
{
// ラベル用
labels.push(response[i].time_at);

// 温度データ
temps.push(response[i].temp);
}

最後に、このそれぞれの配列をセットしてグラフを描画するだけです。全てのスクリプトは、こうなりました。(本当はグラフ描画部分については別のメソッドに切り出したほうが良いですが、今回はわかりやすさを優先して割愛します)

$(function () {

$(document).ready(function ()
{
$.ajax({
type: 'POST',
url: '/getTempLog.php',
dataType: 'json'
}).done(function (response, textStatus, jqXHR) {

// テンポラリ配列作成
var labels = [];
var temps = [];

// データの仕分け
for (var len = response.length, i = 0; i < len; i++)
{
// ラベル用
labels.push(response[i].time_at);

// 温度データ
temps.push(response[i].temp);
}

// グラフの描画
$('#temp-chart').highcharts({
title: {
text: 'この部屋の室温',
x: -20 //center
},
subtitle: {
text: 'Source: feijoa.jp',
x: -20
},
xAxis: {
categories: labels
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'my room',
data: temps
}]
});


}).fail(function (jqXHR, textStatus, errorThrown) {
alert("通信に失敗しました。");
});
});
});

ブラウザから getTempLog.html にアクセスしてみましょう。下図のようにグラフが作成されれば成功です。

描画結果

あとはお好みのように設定を書き換えて下さい。今回は 1 分毎の温度変化を記録しましたが、記録間隔は cron の設定で変えられますし、あるいは、DB からの SELECT 条件などでも設定できます。

また、X 軸のラベルは秒まであってもあまり意味が無いので、それを表示しないのも良いでしょう。highcharts.js では、開始日時とインターバルを設定することで日付ラベルをフォーマットした値で表示できるようです。参考にして下さい。

dateTimeLabelFormats

日付フォーマットの使用方法

まとめ

少々長い記事で、プログラムコードも沢山になってしまいましたが、やっている事はそれほど難しいものではなく、頻繁に利用されるコードの流用ばかりです。

「Raspberry Pi は買ったけど、何に使おう?」と思ってらっしゃるのでしたら、是非これを機会に室温計を作ってみたらいかがでしょうか? 一日のうちにどれほど部屋の温度が変わるのか、あらためて確認できると思います。

なお、冒頭のサンプルに使っている当サイトの室温グラフを見るとお分かりになると思いますが、私の部屋に「エアコン」なんていうハイカラなものは無いです。長野は中途半端に夏暑く冬寒いので、エアコンの普及はかなり遅れた方だと思います。ですから、そういう身体に育ってしまっているので、下手にエアコンが効いていると寒くて凍えてしまいます。最近のお店はどこも、凍るんじゃないかと思うくらい冷房が効いているので何か羽織るものを持って来るべきだったと後悔することが頻繁にあります。


ご購入

もう少々お待ち下さい。

体験版

version 1.5 から、IPアドレス制限が無くなり、ライセンス制になりました。ライセンスされていない場合、起動後30時間後に自動的に HAL を終了します。

体験版のインストーラー・スクリプトをダウンロード インストーラー・スクリプト
SHA-1: dd2a390b4f0f8c15301eaee23cd92bd5e831da91
※インストール方法については ソケットサーバー「HAL」の概要 (version 2.0対応版)~導入方法 を御覧ください。

体験版パッケージ
HAL_trial_2_0.tar.gz | version 2.0 | SHA-1: ce31802a5b423a9b0d73721a3d43e0585b009a6f
試用期限 2017/1/31 まで

この記事へのコメント

※現在コメントはMarkdown記法が強制です。>>Markdown の書き方


この記事に返信

このコメントに返信