Lurkars/led_bikewheel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved image script, added multiple stripe support, fixes

Browse Source
This commit is contained in:
Lurkars
2020-12-30 19:07:03 +01:00
parent 6c13596110
commit 0376723a95
3 changed files with 497 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bikewheel.html
+43 -12
View File
@@ -1,12 +1,17 @@
<html>
<head>
<style>
canvas {
display: block;
}
</style>
</head>
<body>
<h1>Image for led_bikewheel</h1>
<p>Tool to convert an image to a byte array in C with 8 bit color depth + palette. This works directly in browser, so selected
<p>Tool to convert an image to a byte array in C with 8 bit color depth + palette. This works directly in browser,
so selected
image file is NOT uploaded!</p>
<input type="file" id="file" accept="image/*" /><br>
<label for="num_segments">Num Segments</label>
@@ -22,6 +27,7 @@
<hr>
<h2>Preview</h2>
<canvas id="canvas_out" width="0" height="0"></canvas>
<canvas id="canvas_out2" width="0" height="0"></canvas>
<h2>Output</h2>
<pre id="output"></pre>
@@ -33,6 +39,22 @@
let canvas_elem = document.getElementById("canvas_in");
let output_elem = document.getElementById("output");
let canvas_out_elem = document.getElementById("canvas_out");
let canvas_out2_elem = document.getElementById("canvas_out2");
let intToHex = function (color, int16) {
let text = color.toString(16);
if (text.length == 1) {
text = (int16 ? "000" : "0") + text;
} if (text.length == 2 && int16) {
text = "00" + text;
} else if (text.length == 3) {
text = "0" + text;
}
return "0x" + text.toUpperCase();
}
let read_image = function () {
let file_reader = new FileReader();
@@ -54,12 +76,16 @@
let data = new Array();
let canvas_out_context = canvas_out_elem.getContext("2d");
canvas_out_elem.width = image.width;
canvas_out_elem.height = image.height;
let out_data = canvas_out_context.createImageData(image.width, image.height);
let canvas_out2_context = canvas_out2_elem.getContext("2d");
canvas_out2_elem.width = num_segments * 2;
canvas_out2_elem.height = num_leds;
let out_data2 = canvas_out_context.createImageData(num_segments * 2, num_leds);
let color_palette = new Array();
for (let led = 0; led < num_leds; led++) {
@@ -80,6 +106,12 @@
out_data.data[index + 2] = data[seg][led][2];
out_data.data[index + 3] = data[seg][led][3];
index = 4 * ((seg * 2) + (num_leds - led) * num_segments * 2);
out_data2.data[index] = data[seg][led][0];
out_data2.data[index + 1] = data[seg][led][1];
out_data2.data[index + 2] = data[seg][led][2];
out_data2.data[index + 3] = data[seg][led][3];
let found = -1;
for (color = 0; color < color_palette.length; color++) {
if (color_palette[color][0] == data[seg][led][0] && color_palette[color][1] == data[seg][led][1] && color_palette[color][2] == data[seg][led][2]) {
@@ -96,9 +128,8 @@
data[seg][led] = found;
}
}
canvas_out_context.putImageData(out_data, 0, 0);
canvas_out2_context.putImageData(out_data2, 0, 0);
let text = "const PROGMEM uint8_t " + (file_elem.files[0].name).replace(" ", "_").replace(".", "_") + "_palette";
@@ -111,11 +142,11 @@
text += "\n";
for (let color = 0; color < color_palette.length; color++) {
text += "\t{" + color_palette[color][0] + "," + color_palette[color][1] + "," + color_palette[color][2] + "}";
text += "\t{" + intToHex(color_palette[color][0]) + "," + intToHex(color_palette[color][1]) + "," + intToHex(color_palette[color][2]) + "}";
if (color < color_palette.length - 1) {
text += ", // " + color + "\n";
text += ", // " + intToHex(color) + "\n";
} else {
text += " // " + color + "\n";
text += " // " + intToHex(color) + "\n";
}
}
@@ -137,12 +168,12 @@
if (led > 0) {
text += ", ";
}
text += data[seg][led];
text += intToHex(data[seg][led].toString(16));
}
if (seg < num_segments - 1) {
text += ", // " + seg + "\n";
text += ", // " + intToHex(seg, true) + "\n";
} else {
text += " // " + seg + "\n";
text += " // " + intToHex(seg, true) + "\n";
}
}
text += "};";