|
|
|
@ -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> |