Obsidianにアナログ時計を載せる魔法

Textwellに載せたら次はObsidianにも。

HTML Reader

Obsidian - Connected Notes 1.5.8

分類: 仕事効率化,辞書／辞典／その他
価格: 無料 (Dynalist Inc.)

Obsidianは手抜きで。

プラグインの HTML Reader をインストールします。これで拡張子が.htmlのファイルも表示できるようになります。あとはWebアプリを作るのと同じ要領で。

Import Obsidian: HTML Reader

HTML Raeder の設定で「Operating Mode」を「Unrestricted Mode」に変更。 Javascript が有効になり、好きなように組み込める。ほしいものが作れる魔改造モードです。

Clock.html

HTMLファイルを作ります。

<style>

#clock {
  position: relative;
  margin: auto;
  margin-top: 100px;
  width: 50vw;
  height: 50vw;
  background: chocolate;
  border-radius: 50%;
  border: 1px whitesmoke solid;
}

#hour, #minute, #second {
  position: absolute;
  border-radius: 5px;
  transform-origin: bottom;
}

#hour {
  background: black;
  width: 2%;
  height: 25%;
  top: 25%;
  left: 49%;
}

#minute {
  background: black;
  width: 1.6%;
  height: 40%;
  top: 10%;
  left: 49.2%;
}

#second {
  background: silver;
  width: 1%;
  height: 40%;
  top: 10%;
  left: 49.5%;
}

#center {
  position: relative;
  background: black;
  width: 5%;
  height: 5%;
  top: 47.5%;
  left: 47.5%;
  border-radius: 50%;
}

#clock12{
  position: absolute;
  color: black;
  font-weight: 800;
  top: 3%;
  left: 47%;
}

</style>

<body>
<div id="clock">
  <div id="center"></div>
  <div id="hour"></div>
  <div id="minute"></div>
  <div id="second"></div>
  <div id="clock12">Ⅻ</div>
</div>

<script>
setInterval(() => {
  d = new Date()
  h = d.getHours()
  m = d.getMinutes()
  s = d.getSeconds()
  hr = 30*h + m/2
  mr = 6*m
  sr = 6*s

  hour.style.transform = `rotate(${hr}deg)`
  minute.style.transform = `rotate(${mr}deg)`
  second.style.transform = `rotate(${sr}deg)`
}, 1000)
</script>

</body>