aboutsummaryrefslogtreecommitdiff
path: root/planning/8seg_vis.html
diff options
context:
space:
mode:
Diffstat (limited to 'planning/8seg_vis.html')
-rw-r--r--planning/8seg_vis.html61
1 files changed, 40 insertions, 21 deletions
diff --git a/planning/8seg_vis.html b/planning/8seg_vis.html
index eeeb584..11f7fcc 100644
--- a/planning/8seg_vis.html
+++ b/planning/8seg_vis.html
@@ -29,6 +29,10 @@ body {
max-width: 5em;
}
+#form > input {
+ justify-self: start;
+}
+
</style>
</head>
<body>
@@ -40,6 +44,8 @@ body {
<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="leds_per_m">LEDs per meter</label><input type="number" id="leds_per_m" value="10">
+ <label for="individual_leds">Render individual LEDs</label><input type="checkbox" id="individual_leds">
<label for="line_width">Visualization line width</label><input type="number" id="line_width", value=0.05>
</div>
<script>
@@ -94,7 +100,26 @@ body {
return seg_map[codepoint];
}
- function draw_digit(ctx, x, y, w, h, seg) {
+ function do_line(ctx, x1, y1, x2, y2, scale) {
+ if (document.querySelector("#individual_leds").checked) {
+ const leds_per_m = parseFloat(document.querySelector("#leds_per_m").value);
+ const dist = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
+ const num_leds = dist * leds_per_m;
+ const d_off = (num_leds % 1.0) / 2;
+ for (var i=0; i<num_leds; i++) {
+ const frac_d = ((d_off + i)/leds_per_m);
+ const x = x1*scale + (x2-x1)*scale*frac_d/dist;
+ const y = y1*scale + (y2-y1)*scale*frac_d/dist;
+ ctx.moveTo(x-0.5, y-0.5);
+ ctx.lineTo(x+0.5, y+0.5);
+ }
+ } else {
+ ctx.moveTo(x1*scale, y1*scale);
+ ctx.lineTo(x2*scale, y2*scale);
+ }
+ }
+
+ function draw_digit(ctx, x, y, w, h, seg, scale) {
for (var i=0; i<2; i++) {
if (i == 0) {
ctx.strokeStyle = '#e00000';
@@ -104,36 +129,28 @@ body {
}
ctx.beginPath();
if (seg & 0x80) {
- ctx.moveTo(x, y);
- ctx.lineTo(x, y+h);
+ do_line(ctx, x, y, x, y+h, scale);
}
if (seg & 0x40) {
- ctx.moveTo(x, y+h);
- ctx.lineTo(x+w, y+h);
+ do_line(ctx, x, y+h, x+w, y+h, scale);
}
if (seg & 0x20) {
- ctx.moveTo(x+w, y+h);
- ctx.lineTo(x+w, y);
+ do_line(ctx, x+w, y+h, x+w, y, scale);
}
if (seg & 0x10) {
- ctx.moveTo(x+w, y);
- ctx.lineTo(x, y);
+ do_line(ctx, x+w, y, x, y, scale);
}
if (seg & 0x01) {
- ctx.moveTo(x+w/2, y+h/2);
- ctx.lineTo(x, y);
+ do_line(ctx, x+w/2, y+h/2, x, y, scale);
}
if (seg & 0x02) {
- ctx.moveTo(x+w/2, y+h/2);
- ctx.lineTo(x+w, y);
+ do_line(ctx, x+w/2, y+h/2, x+w, y, scale);
}
if (seg & 0x08) {
- ctx.moveTo(x+w/2, y+h/2);
- ctx.lineTo(x, y+h);
+ do_line(ctx, x+w/2, y+h/2, x, y+h, scale);
}
if (seg & 0x04) {
- ctx.moveTo(x+w/2, y+h/2);
- ctx.lineTo(x+w, y+h);
+ do_line(ctx, x+w/2, y+h/2, x+w, y+h, scale);
}
ctx.stroke();
}
@@ -167,14 +184,14 @@ body {
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;
+ var x = (canvas.width/scale - total_w) / 2;
+ var y = (canvas.height/scale - total_h) / 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;
+ draw_digit(ctx, x, y, digit_width, digit_height, segs[i], scale);
+ x += digit_width + digit_space;
}
}
@@ -187,6 +204,8 @@ body {
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("#leds_per_m").addEventListener('change', handle_change);
+ document.querySelector("#individual_leds").addEventListener('change', handle_change);
document.querySelector("#text").addEventListener('input', handle_change);
update();