feat(demo): improve currentTime

pull/1/head
flop 4 weeks ago
parent 730099c78d
commit c1691ba069
  1. 61
      ts/index.html

@ -1,11 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MonoDisplay Test</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #111;
@ -49,7 +56,8 @@
height: 100%;
display: block;
image-rendering: pixelated;
image-rendering: crisp-edges; /* Firefox */
image-rendering: crisp-edges;
/* Firefox */
}
#resolution {
@ -80,12 +88,25 @@
transition: background 0.1s, color 0.1s;
}
#controls button:hover { background: #222; color: #bbb; }
#controls button.active { background: #1e3a1e; color: #33ff66; border-color: #33ff66; }
#controls button:hover {
background: #222;
color: #bbb;
}
#controls button.active {
background: #1e3a1e;
color: #33ff66;
border-color: #33ff66;
}
#status { font-size: 11px; color: #444; min-height: 1em; }
#status {
font-size: 11px;
color: #444;
min-height: 1em;
}
</style>
</head>
<body>
<h1>MonoDisplay — 160 × 80</h1>
@ -106,7 +127,7 @@
<script src="./public/mono-display.js"></script>
<script>
(function() {
(function () {
const { MonoDisplayDriver, MonoDisplayFile, ElementType } = window.MonoDisplay;
const driver = new MonoDisplayDriver("canvas_root", {
@ -191,8 +212,33 @@
elements_always: {
flags: { drawFront: true, clearBuffer: true },
elements: [{
flags: {},
type: ElementType.CurrentTime,
xOffset: 0, yOffset: 32,
xOffset: 0, yOffset: 8,
width: W, height: 16,
utcOffsetMinutes: 120,
}, {
flags: { clock12h: true },
type: ElementType.CurrentTime,
xOffset: 40, yOffset: 16,
width: W, height: 16,
utcOffsetMinutes: 120,
}, {
flags: { clock12h: true, showHours: true },
type: ElementType.CurrentTime,
xOffset: 0, yOffset: 24,
width: W, height: 16,
utcOffsetMinutes: 120,
}, {
flags: { clock12h: true, showHours: false },
type: ElementType.CurrentTime,
xOffset: 40, yOffset: 32,
width: W, height: 16,
utcOffsetMinutes: 120,
}, {
flags: { clock12h: true, showSeconds: true },
type: ElementType.CurrentTime,
xOffset: 120, yOffset: 32,
width: W, height: 16,
utcOffsetMinutes: 120,
}],
@ -222,4 +268,5 @@
</script>
</body>
</html>
Loading…
Cancel
Save