feat(demo): improve currentTime

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

@ -1,11 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MonoDisplay Test</title> <title>MonoDisplay Test</title>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body { body {
background: #111; background: #111;
@ -49,7 +56,8 @@
height: 100%; height: 100%;
display: block; display: block;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; /* Firefox */ image-rendering: crisp-edges;
/* Firefox */
} }
#resolution { #resolution {
@ -80,12 +88,25 @@
transition: background 0.1s, color 0.1s; transition: background 0.1s, color 0.1s;
} }
#controls button:hover { background: #222; color: #bbb; } #controls button:hover {
#controls button.active { background: #1e3a1e; color: #33ff66; border-color: #33ff66; } 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> </style>
</head> </head>
<body> <body>
<h1>MonoDisplay — 160 × 80</h1> <h1>MonoDisplay — 160 × 80</h1>
@ -191,8 +212,33 @@
elements_always: { elements_always: {
flags: { drawFront: true, clearBuffer: true }, flags: { drawFront: true, clearBuffer: true },
elements: [{ elements: [{
flags: {},
type: ElementType.CurrentTime, 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, width: W, height: 16,
utcOffsetMinutes: 120, utcOffsetMinutes: 120,
}], }],
@ -222,4 +268,5 @@
</script> </script>
</body> </body>
</html> </html>
Loading…
Cancel
Save