diff options
Diffstat (limited to 'planning/8seg_vis.html')
| -rw-r--r-- | planning/8seg_vis.html | 61 |
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(); |