jaseg/8seg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add individual led option to visualization tool

Browse source
This commit is contained in:
jaseg 2022-07-24 12:28:51 +02:00
parent cfe1008fa6
commit a444378c4d
1 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

61
planning/8seg_vis.html
View file

@ -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();