Year Progress を少しいじって表示させてみた

今年も残すところあと1日。巷ではカウントダウンイベントが多数開かれるであろう大晦日。

そんな日なので、今さらながら Awtrix Flow の Year Progress を入れてみることにした。

当然ながら、これをそのまま使うと 99% としか表示されないので少しだけいじる。

切り捨て整数化しかなければ、掛けて割ればよい

JavaScript の切り捨て関数 Math.floor は切り捨て整数化しかできないように見える。

original

const progress = Math.floor((diffInMillis / totalMillis) * 100);

だが、例えば10倍して整数切り捨て→10で割れば小数第1位までで切り捨てと同じ結果になる（小数点以下の0を補う方法は別途考えないといけない）。

ということで、

小数第2位まで表示

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 を指定するだけで表示できるようだ（！）。

internet_time.php

<?php
echo date("B");
?>

実行結果 (22:14 JST 頃)

おおぉ…これを Node-RED に読め込めば…

Node-RED で実装する

とはいえ、 JavaScript で Internet Time を求めるのもそれほど難しくはない。

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秒）。

それでは、よいお年を。