現在時刻をbarで視覚的に表示するUserScript
時刻を視覚化するUserScriptの一つ
scrapboxのnav barに3時間ごとの区切り線と現在時刻線を表示する
動機
一日の中の現在位置を知りたい
scrapbox上でリアルタイムに残り時間を表示するUserScriptだと数字だけで、どの程度時間を消費して後どれ位残っているのかがの時間感覚がつかめない
こんなかんじ(09:14頃に撮影)
狭い時
幅広
2024-04-10 17:45:36 当日の予定をタイムラインに常時表示するUserScriptで現在時刻がわかるから、もういらないかも
当日の予定をタイムラインに常時表示するUserScriptは予定も合わせて確認できて、上位互換である
2023-02-15
22:00:26 できた
21:51:34 3時間ごとなら6等分じゃなくて8等分だった
値を修正する
21:41:05 過去と未来で色を変えるのをやめた
今動作確認中
21:42:51 3時間ごとの目盛りが、中央の線しか表示されない
スクショに写ってるじゃん！
ディスプレイ上だと細すぎて見えなかったということか
0.2%から0.4%に幅を増やそう
21:51:29 表示された
2023-02-14
12:27:44 これでリリースする
11:19:41
いいかんじ
あ、時刻は自前でdom作って表示する必要があるか。
d3-axisを真似すれば作れるかな？
実装したいこと
✅過去と未来とで色を変える必要性がないように思えてきた
現在位置と3時間ごとの目盛りさえあれば、他はいらないや
❌projectのテーマに色を合わせたい
現状だと、過ぎた時間を表す色が決めうちになってしまっている
どのprojectでも色が同じ
CSSで色合成できないかな？
alpha値だけ別の値にして、他はcss custom propertyからとってくるとか
✅n時間ごとに不連続に色を変えたい目盛りを入れる
1/2や1/4経過したことはぱっと見てわかるが、6時や9時を経過したのかはよくわからない
色変えじゃなくて、縦線を目盛り代わりに挿入するだけで十分だな
projectによって色がみにくい
css custom propertyを入れて、UserCSSでprojectごとに色を指定できるようにしようかな
色がにじむ？
usercss職人に聞いてみる
バーの幅は24*18=432秒=7分12秒
あんまり見てない……
環境ではなく自分を変えるべき？
環境ではなくメンタルモデルの問題なのだろうか
CSS gradientの不連続線の制御の仕組み
$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/現在時刻をbarで視覚的に表示するUserScript/script.tsscript.ts///<reference no-default-lib="true" />
///<reference lib="esnext" />
///<reference lib="dom" />
interface Indicator {
/** 現在時刻 */
now: Date;
/** the color of the now indicator */
present: string;
/** 3時間ごとの目盛りの色 */
by3: string;
}
const renderIndicator = (init: Indicator) => {
const nav = document.querySelector("nav.navbar");
if (!(nav instanceof HTMLElement)) throw Error('"nav.navbar" does not exist.');
const start = new Date(init.now.getFullYear(), init.now.getMonth(), init.now.getDate());
const nowPos = (init.now.getTime() - start.getTime()) / (24 * 3600 * 1000);
const posLeft = (nowPos * 100 - 0.25).toFixed(2);
const posRight = (nowPos * 100 + 0.25).toFixed(2);CSS gradientで目盛りを設定する
重ねて表示することで、現在時刻を表す線の位置に応じた場合分けが不要になる
最上層
現在時刻を表す線を描く
幅0.5%
7.2分に相当
真ん中
3時間ごとに目盛りを打つ
幅0.4%
5.76分に相当
最下層
navbarの色塗り
script.ts nav.style.background = `linear-gradient(to right, ${
posLeft < 0
? `${init.now} ${posRight}%, transparent ${posRight}%`
: posRight > 100
? `transparent ${posLeft}%, ${init.present} ${posLeft}%`
: `transparent ${posLeft}%, ${init.present} ${posLeft}% ${posRight}%, transparent ${posRight}%`
}), linear-gradient(to right, ${init.by3} 0.20%, transparent 0.20% 12.3%, ${init.by3} 12.3% 12.7%, transparent 12.7% 24.8%, ${init.by3} 24.8% 25.2%, transparent 25.2% 37.3%, ${init.by3} 37.3% 37.7%, transparent 37.7% 49.8%, ${init.by3} 49.8% 50.2%, transparent 50.2% 62.3%, ${init.by3} 62.3% 62.7%, transparent 62.7% 74.8%, ${init.by3} 74.8% 75.2%, transparent 75.2% 87.3%, ${init.by3} 87.3% 87.7%, transparent 87.7% 99.8%, ${init.by3} 99.8%), var(--navbar-bg, rgba(53, 59, 72, 0.6))`;
};
let timer: number | undefined;
setInterval(() => {
if (timer !== undefined) cancelAnimationFrame(timer);
timer = requestAnimationFrame(() => renderIndicator({
now: new Date(),
present: "#ffdd4480",
by3: "#80808080",
}));
}, 1000);
#2024-04-10 17:46:16
#2023-03-17 09:15:17
#2023-02-22 21:48:52
#2023-02-16 10:38:20
#2023-02-15 21:20:29