From cfe1008fa6cb34d3960e997efbb97d985b26279a Mon Sep 17 00:00:00 2001
From: jaseg <git-bigdata-wsl-arch@jaseg.de>
Date: Sat, 16 Jul 2022 17:04:20 +0200
Subject: add vis
---
planning/8seg_vis.html | 195 +++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 195 insertions(+)
create mode 100644 planning/8seg_vis.html
(limited to 'planning')
diff --git a/planning/8seg_vis.html b/planning/8seg_vis.html
new file mode 100644
index 0000000..eeeb584
--- /dev/null
+++ b/planning/8seg_vis.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html>
+ <head>
+ <title>8seg dimension planning</title>
+<style>
+canvas {
+}
+
+body {
+ margin-left: auto;
+ margin-right: auto;
+ width: min-content;
+}
+
+#form {
+ max-width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+ display: grid;
+ grid-template-columns: max-content auto;
+}
+
+#form > label {
+ text-align: right;
+ padding-right: 0.5em;
+}
+
+#form > input[type="number"] {
+ max-width: 5em;
+}
+
+</style>
+ </head>
+ <body>
+ <canvas id="viz" width="1800px" height="500px">
+ </canvas>
+ <div id="form">
+ <label for="text">Text</label><input type="text" id="text" value="Sphinx of black quartz/judge my vow"/>
+ <label for="digit_width">Digit width</label><input type="number" id="digit_width" step="0.01" value="1.0">
+ <label for="digit_height">Digit height</label><input type="number" id="digit_height" step="0.01" value="1.6">
+ <label for="digit_space">Digit spacing</label><input type="number" id="digit_space" step="0.01" value="0.4">
+ <label for="digit_num">Number of digits</label><input type="number" id="digit_num" value="36">
+ <label for="line_width">Visualization line width</label><input type="number" id="line_width", value=0.05>
+ </div>
+<script>
+
+ const seg_map = {
+ " ": 0x00,
+ "a": 0x2e,
+ "b": 0xd6,
+ "c": 0xd0,
+ "d": 0xc5,
+ "e": 0x59,
+ "f": 0x98,
+ "g": 0xd4,
+ "h": 0x8c,
+ "i": 0x5c,
+ "j": 0x78,
+ "k": 0x8e,
+ "l": 0xc0,
+ "m": 0xa3,
+ "n": 0xa5,
+ "o": 0xf0,
+ "p": 0x93,
+ "q": 0xf4,
+ "r": 0x9e,
+ "s": 0x55,
+ "t": 0xc8,
+ "u": 0xe0,
+ "v": 0x8a,
+ "w": 0xac,
+ "x": 0x0f,
+ "y": 0x0b,
+ "z": 0x5a,
+ "0": 0x13,
+ "1": 0x20,
+ "2": 0x16,
+ "3": 0x56,
+ "4": 0x23,
+ "5": 0x1c,
+ "6": 0x4e,
+ "7": 0x1a,
+ "8": 0x5f,
+ "9": 0x33,
+ "/": 0x0a,
+ "\\": 0x05,
+ };
+
+ function map_digit(codepoint) {
+ if (!seg_map.hasOwnProperty(codepoint)) {
+ return seg_map[" "];
+ }
+
+ return seg_map[codepoint];
+ }
+
+ function draw_digit(ctx, x, y, w, h, seg) {
+ for (var i=0; i<2; i++) {
+ if (i == 0) {
+ ctx.strokeStyle = '#e00000';
+ } else {
+ ctx.strokeStyle = '#404040';
+ seg = ~seg;
+ }
+ ctx.beginPath();
+ if (seg & 0x80) {
+ ctx.moveTo(x, y);
+ ctx.lineTo(x, y+h);
+ }
+ if (seg & 0x40) {
+ ctx.moveTo(x, y+h);
+ ctx.lineTo(x+w, y+h);
+ }
+ if (seg & 0x20) {
+ ctx.moveTo(x+w, y+h);
+ ctx.lineTo(x+w, y);
+ }
+ if (seg & 0x10) {
+ ctx.moveTo(x+w, y);
+ ctx.lineTo(x, y);
+ }
+ if (seg & 0x01) {
+ ctx.moveTo(x+w/2, y+h/2);
+ ctx.lineTo(x, y);
+ }
+ if (seg & 0x02) {
+ ctx.moveTo(x+w/2, y+h/2);
+ ctx.lineTo(x+w, y);
+ }
+ if (seg & 0x08) {
+ ctx.moveTo(x+w/2, y+h/2);
+ ctx.lineTo(x, y+h);
+ }
+ if (seg & 0x04) {
+ ctx.moveTo(x+w/2, y+h/2);
+ ctx.lineTo(x+w, y+h);
+ }
+ ctx.stroke();
+ }
+ }
+
+ function update() {
+ const canvas = document.querySelector("#viz");
+ const ctx = canvas.getContext("2d");
+ ctx.fillStyle = '#202020';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ const digit_num = parseFloat(document.querySelector("#digit_num").value);
+ const digit_width = parseFloat(document.querySelector("#digit_width").value);
+ const digit_height = parseFloat(document.querySelector("#digit_height").value);
+ const digit_space = parseFloat(document.querySelector("#digit_space").value);
+ const line_width = parseFloat(document.querySelector("#line_width").value);
+ const text = document.querySelector("#text").value.toLowerCase();
+
+ const segs = [];
+ for (var codepoint of text) {
+ segs.push(map_digit(codepoint));
+ }
+
+ for (var i=0; i<digit_num; i++) {
+ segs.push(map_digit(" "));
+ }
+
+ const total_w = digit_num * digit_width + (digit_num - 1) * digit_space;
+ const total_h = digit_height;
+
+ const fill_factor = 0.8;
+ const scale = canvas.width * fill_factor / total_w;
+
+ var x = (canvas.width - total_w*scale) / 2;
+ var y = (canvas.height - total_h*scale) / 2;
+
+ ctx.lineWidth = scale*line_width*digit_width;
+
+ for (var i=0; i<digit_num; i++) {
+ draw_digit(ctx, x, y, digit_width*scale, digit_height*scale, segs[i]);
+ x += digit_width*scale + digit_space*scale;
+ }
+ }
+
+ function handle_change(evt) {
+ update();
+ }
+
+ document.querySelector("#digit_width").addEventListener('change', handle_change);
+ document.querySelector("#digit_height").addEventListener('change', handle_change);
+ document.querySelector("#digit_space").addEventListener('change', handle_change);
+ document.querySelector("#digit_num").addEventListener('change', handle_change);
+ document.querySelector("#line_width").addEventListener('change', handle_change);
+ document.querySelector("#text").addEventListener('input', handle_change);
+
+ update();
+</script>
+ </body>
+</html>
--
cgit