クリエイター手抜きプロジェクト[550]IoT obniz編 リアルタイムに時間を表示する/古籏一浩

投稿:  著者:  読了時間:6分(本文:約2,800文字)



今回は、obnizの液晶画面に現在の時間をリアルタイムに表示してみます。時間の情報は前回も使ったDateオブジェクトを利用します。Date時間を取得するメソッドは、以下のようになります。

時  getHours()
分  getMinutes()
秒  getSeconds()

前回表示した日付のプログラムを少し変更して、時分秒にしたのが、以下のプログラムです。




<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.3/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.font("Times",18);
var currentDate=new Date();
var h=currentDate.getHours();
var m=currentDate.getMinutes();
var s=currentDate.getSeconds();
var str=h+"時"+m+"分"+s+"秒";
obniz.display.print(str);
}
</script>
</body>
</html>

実行すると分かりますが、obnizに時間が表示されるものの、リアルタイムには変化しません。リアルタイムに現在の時間を表示させるには、定期的に処理を繰り返す必要があります。

Webブラウザで使われるタイマーとしては、setTimeout()、setInterval()があります。setTimeout()は、指定された処理を一度だけ実行します。

setInterval()は指定された処理を定期的に実行します。obnizもこの2つのタイマーを使うことができます。

setInterval()を使った場合は、以下のようになります。プログラムを実行すると多少ちらつきますが、obnizの液晶画面にリアルタイムに現在の時間が表示されます。

var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
setInterval(function(){
obniz.display.clear();
obniz.display.font("Times",18);
var currentDate=new Date();
var h=currentDate.getHours();
var m=currentDate.getMinutes();
var s=currentDate.getSeconds();
var str=h+"時"+m+"分"+s+"秒";
obniz.display.print(str);
},1000);
}

obnizでsetInterval()を使うと、接続が切れてもタイマーの処理が止まりません。今回のような時間を表示する程度であればよいのですが、モーター駆動やセンサー処理などでは、問題が起こる場合があります。

そこで、obnizとの接続が切れたら、タイマーも自動的に停止するメソッドが用意されています。それがobniz.repeat()です。

指定できるパラメーターはsetInterval()とまったく同じです。obnizではsetInterval()よりobniz.repeat()を使用する方がよいでしょう。obniz.repeat()に書き換えたプログラムは以下のようになります。

var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.repeat(function(){
obniz.display.clear();
obniz.display.font("Times",18);
var currentDate=new Date();
var h=currentDate.getHours();
var m=currentDate.getMinutes();
var s=currentDate.getSeconds();
var str=h+"時"+m+"分"+s+"秒";
obniz.display.print(str);
},1000);
}

obnizの画面に、現在の時刻がリアルタイムに表示されればバッチリです。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

ようやくあらいぐまラスカルのアニメが終了。今度こそは新しいアニメを放送してくれるに違いない……。ということで、次週からの予告が表示!

「来週からはアルプスの少女ハイジをお送り致します」

あぁ、そうですか……。


・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/