Year Progress を少しいじって表示させてみた
今年も残すところあと1日。巷ではカウントダウンイベントが多数開かれるであろう大晦日。
そんな日なので、今さらながら Awtrix Flow の Year Progress を入れてみることにした。
当然ながら、これをそのまま使うと 99% としか表示されないので少しだけいじる。
切り捨て整数化しかなければ、掛けて割ればよい
JavaScript の切り捨て関数 Math.floor
は切り捨て整数化しかできないように見える。
const progress = Math.floor((diffInMillis / totalMillis) * 100);
だが、例えば10倍して整数切り捨て→10で割れば小数第1位までで切り捨てと同じ結果になる(小数点以下の0を補う方法は別途考えないといけない)。
ということで、
const progress = (Math.floor((diffInMillis / totalMillis) * 10000) / 100).toFixed(2);
こういじればよいことになる。
小数第1・2位に0を補うのは to.Fixed(2)
の部分。前段は全部カッコで括っておく。
小数第3位まで表示することも考えたが、%をつけるとスクロールするので2桁で妥協。
これで物足りなければ、いっそ ppm (百万分率)で表示させる手がある。
これなら1分に2カウントくらい進む。
Internet Time を表示させる
これだけだとあまりに記事としてしょぼいので、応用として Internet Time の表示も作ってみよう。
Swatch が商品化もした Internet Time だが、現在 Swatch 内でも解説ページがある位で、 Web にすら大々的な時刻表示はなく、左上にちょこっと表示される程度である。
(実物も持っているが電池切れ。電池を交換したらここに載せる予定。)
Internet Time はタイムゾーンが UTC+1、1日を1000分割した beat を用いて表す十進時計である。
PHP は標準で使える
何と、 PHP は時刻のフォーマット文字列に B を指定するだけで表示できるようだ(!)。
<?php
echo date("B");
?>
593
おおぉ…これを Node-RED に読め込めば…
Node-RED で実装する
とはいえ、 JavaScript で Internet Time を求めるのもそれほど難しくはない。
var utcmillitime = new Date().getTime();
var bieltime = utcmillitime / 1000 + 1 * 60 * 60;
var inet_time = Math.floor((bieltime % 86400) / 86400 * 1000);
inet_time = ( '000' + inet_time ).slice( -3 );
msg.payload = {"text":inet_time, "icon":"inet_time"};
return msg;
getTime
で 1970/1/1 0:00:00 UTC からのミリ秒が求まるので、秒に直して UTC+1 にゾーンシフト。あとは1日の秒数(86400秒)で剰余を取り、割って小数化、1000倍して切り捨てれば OK 。
頭の0埋めは以下を参考にした。
こんな感じに表示できる。
大雑把でよければ MQTT による更新は1分毎で十分である(1 beat は 1分26.4秒)。
それでは、よいお年を。