| 14 | } |
| 15 | |
| 16 | function paint(ctx, w, h) { |
| 17 | ctx.fillStyle = theme.groupbox_background; |
| 18 | ctx.fillRect(0, 0, w, h); |
| 19 | |
| 20 | const cx = w * 0.5; |
| 21 | const cy = h * 0.5; |
| 22 | const r = Math.min(w, h) * 0.42; |
| 23 | |
| 24 | // Dial face. |
| 25 | ctx.fillStyle = theme.window; |
| 26 | ctx.beginPath(); |
| 27 | ctx.moveTo(cx + r, cy); |
| 28 | ctx.arc(cx, cy, r, 0, Math.PI * 2); |
| 29 | ctx.fill(); |
| 30 | |
| 31 | // Outer rim. |
| 32 | ctx.strokeStyle = theme.groupbox_border; |
| 33 | ctx.lineWidth = 3; |
| 34 | ctx.beginPath(); |
| 35 | ctx.moveTo(cx + r, cy); |
| 36 | ctx.arc(cx, cy, r, 0, Math.PI * 2); |
| 37 | ctx.stroke(); |
| 38 | |
| 39 | // Hour numerals. |
| 40 | ctx.fillStyle = theme.text; |
| 41 | ctx.font = "bold 14px serif"; |
| 42 | ctx.textAlign = "center"; |
| 43 | ctx.textBaseline = "middle"; |
| 44 | for (let i = 1; i <= 12; ++i) { |
| 45 | const ang = (i / 12) * Math.PI * 2 - Math.PI / 2; |
| 46 | const tx = cx + Math.cos(ang) * r * 0.82; |
| 47 | const ty = cy + Math.sin(ang) * r * 0.82; |
| 48 | ctx.fillText("" + i, tx, ty); |
| 49 | } |
| 50 | |
| 51 | // Minute ticks. |
| 52 | ctx.strokeStyle = theme.mid; |
| 53 | for (let i = 0; i < 60; ++i) { |
| 54 | const ang = (i / 60) * Math.PI * 2 - Math.PI / 2; |
| 55 | const major = (i % 5 === 0); |
| 56 | const inner = r * (major ? 0.93 : 0.96); |
| 57 | const outer = r * 0.99; |
| 58 | ctx.lineWidth = major ? 2 : 1; |
| 59 | ctx.beginPath(); |
| 60 | ctx.moveTo(cx + Math.cos(ang) * inner, cy + Math.sin(ang) * inner); |
| 61 | ctx.lineTo(cx + Math.cos(ang) * outer, cy + Math.sin(ang) * outer); |
| 62 | ctx.stroke(); |
| 63 | } |
| 64 | |
| 65 | const tod = readTimeOfDay(); |
| 66 | const sec = tod % 60; |
| 67 | const min = (tod / 60) % 60; |
| 68 | const hour = (tod / 3600) % 12; |
| 69 | |
| 70 | function hand(angle, length, width, color) { |
| 71 | ctx.strokeStyle = color; |
| 72 | ctx.lineWidth = width; |
| 73 | ctx.lineCap = "round"; |