クリエイター手抜きプロジェクト[548]IoT obniz編 日付の表示とフォント指定/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,200文字)



今回は、obnizの液晶画面に現在の日付を表示してみます。

obnizの液晶画面に文字を表示するプログラムは、前回作成しました。プログラム部分(JavaScriptコード)だけ抜き出すと、以下のようになります。

var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.print("Digital Creators");
}

機器番号は制御したいobnizの番号を入れてください。1234-5678であれば、1234-5678または12345678と入力します。もちろん、このまま実行しても構いません。

その場合は、プログラムを実行するとターゲットにするobnizの機器番号を入力するダイアログが表示されます。





今回は時計を表示しますので、obniz.display.print()の部分に、現在の日付を指定すればよさそうです。JavaScriptで日付を扱うのは、Dateオブジェクトです。

new Date()とすると、現在の日付のオブジェクト(インスタンス)が生成されます。

obniz.display.print()のパラメーターに、new Date()を指定するだけで、現在の日付情報が液晶画面に表示されます。

<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.4/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.print(new Date());
}
</script>
</body>
</html>

実際に表示してみると、長い文字は改行されずに右端で切れてしまいます。そこで、今度は文字の表示サイズを小さくして、画面内に収まるように調整してみましょう。

文字のサイズを指定するには、obniz.display.font()を使います。パラメーターには「フォント名」と「フォントサイズ」の二つを指定します。フォント名はnullを指定することができ、その場合は送信側のデフォルトフォントになります。

obniz.display.font()で指定できるフォントの種類は、プログラムを送るコンピューター(送信側)に依存します。

送信側のパソコンに日本語フォントがあれば日本語表示できますし、中国語フォントがあれば中国語も表示できます。アラビア語なども同様です。

つまり、送信側にフォントがあれば何でも表示できることになります。

表示する日付は英語なので、英語フォントのTimesを指定してみましょう。サイズは12にしました。プログラム部分は以下のようになります。入力したら実行してみてください。obnizに小さい文字で日付が表示されます。

var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.font("Times",12);
obniz.display.print(new Date());
}

それでは次に、液晶画面に年月日を表示してみましょう。今度は年月日を取得するDateオブジェクトのメソッドを使います。

4桁の西暦年   getFullYear()
月(0〜11)   getMonth()
日にち     getDate()

getMonth()は実際の月より1少ない数を返すので、表示する時には1を足す必要があります。プログラム部分は以下のようになります。入力したら実行してみましょう。obnizに今日の日付が表示されるはずです。

ちなみに英語フォントを指定しても、日本語は(送信側で問題なく処理されれば)表示されます。

var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.font("Times",18);
var currentDate=new Date();
var y=currentDate.getFullYear();
var m=currentDate.getMonth()+1;
var d=currentDate.getDate();
var str=y+"年"+m+"月"+d+"日";
obniz.display.print(str);
}

obnizで表示される日付ですが、これは送信側の機器の日付情報になります。送信側の日付がずれていると、obnizに表示される日付もずれてしまいます。

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

「NHKですが……」

うちにNHKの取材班がきました。ついに取材されるまでになったのかと思ったら、雹が降ったので野菜とかの被害がないかといった内容でした。都合のいいことに、雹が降ってくるところをiPhone SEで撮影していたので、それを提供しました。まあ、映像もいろいろ撮影しておくといいこともあるものです。

スクープBOXで映像が採用されると、NHKから記念品が贈られてきます。記念品は決まったものではなく、いくつかの中から選択できます。今回は一番使えそうな今治タオルにしました。

なんだかんだ言っても、こういう映像使用に関しては、やはりNHKかなという気がしました。


・創って学ぼうプログラミング
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/