今回は、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/