diff --git a/wled00/data/pixart/boxdraw.js b/wled00/data/pixart/boxdraw.js
new file mode 100644
index 00000000..c000c2e6
--- /dev/null
+++ b/wled00/data/pixart/boxdraw.js
@@ -0,0 +1,62 @@
+function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
+
+ var w = window;
+
+ // Get the canvas context
+ var ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ // Set the width and height of the canvas
+ if (w.innerHeight < w.innerWidth) {
+ canvas.width = Math.floor(w.innerHeight * 0.98);
+ }
+ else{
+ canvas.width = Math.floor(w.innerWidth * 0.98);
+ }
+ //canvas.height = w.innerWidth;
+
+ let pixelSize = Math.floor(canvas.width/widthPixels);
+
+ let xOffset = (w.innerWidth - (widthPixels * pixelSize))/2
+
+ //Set the canvas height to fit the right number of pixelrows
+ canvas.height = (pixelSize * heightPixels) + 10
+
+ //Iterate through the matrix
+ for (let y = 0; y < heightPixels; y++) {
+ for (let x = 0; x < widthPixels; x++) {
+
+ // Calculate the index of the current pixel
+ let i = (y*widthPixels) + x;
+
+ //Gets the RGB of the current pixel
+ let pixel = inputPixelArray[i];
+
+ let pixelColor = 'rgb(' + pixel[0] + ', ' + pixel[1] + ', ' + pixel[2] + ')';
+
+ let textColor = 'rgb(128,128,128)';
+
+ // Set the fill style to the pixel color
+ ctx.fillStyle = pixelColor;
+
+ //Draw the rectangle
+ ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+
+ // Draw a border on the box
+ ctx.strokeStyle = '#888888';
+ ctx.lineWidth = 1;
+ ctx.strokeRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+
+ //Write text to box
+ ctx.font = "10px Arial";
+ ctx.fillStyle = textColor;
+ ctx.textAlign = "center";
+ ctx.textBaseline = 'middle';
+ ctx.fillText((pixel[4] + 1), (x * pixelSize) + (pixelSize /2), (y * pixelSize) + (pixelSize /2));
+ }
+ }
+ var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ canvas.width = w.innerWidth;
+ ctx.putImageData(imageData, xOffset, 0);
+}
+
diff --git a/wled00/data/pixart/favicon-16x16.png b/wled00/data/pixart/favicon-16x16.png
new file mode 100644
index 00000000..feb51ca0
Binary files /dev/null and b/wled00/data/pixart/favicon-16x16.png differ
diff --git a/wled00/data/pixart/favicon-32x32.png b/wled00/data/pixart/favicon-32x32.png
new file mode 100644
index 00000000..a3b5cceb
Binary files /dev/null and b/wled00/data/pixart/favicon-32x32.png differ
diff --git a/wled00/data/pixart/favicon.ico b/wled00/data/pixart/favicon.ico
new file mode 100644
index 00000000..bde8945e
Binary files /dev/null and b/wled00/data/pixart/favicon.ico differ
diff --git a/wled00/data/pixart/getPixelValues.js b/wled00/data/pixart/getPixelValues.js
new file mode 100644
index 00000000..ffbf94a7
--- /dev/null
+++ b/wled00/data/pixart/getPixelValues.js
@@ -0,0 +1,320 @@
+function getPixelRGBValues(base64Image) {
+ httpArray = [];
+ fileJSON = `{"on":true,"bri":${brgh.value},"seg":{"id":${tSg.value},"i":[`;
+
+ //Which object holds the secret to the segment ID
+
+ let segID = 0;
+ if(tSg.style.display == "flex"){
+ segID = tSg.value
+ } else {
+ segID = sID.value;
+ }
+
+
+ //const copyJSONledbutton = gId('copyJSONledbutton');
+ const maxNoOfColorsInCommandSting = parseInt(cLN.value);
+
+ let hybridAddressing = false;
+ let selectedIndex = -1;
+
+ selectedIndex = frm.selectedIndex;
+ const formatSelection = frm.options[selectedIndex].value;
+
+
+ selectedIndex = lSS.selectedIndex;
+ const ledSetupSelection = lSS.options[selectedIndex].value;
+
+ selectedIndex = cFS.selectedIndex;
+ let hexValueCheck = true;
+ if (cFS.options[selectedIndex].value == 'dec'){
+ hexValueCheck = false
+ }
+
+ selectedIndex = aS.selectedIndex;
+ let segmentValueCheck = true; //If Range or Hybrid
+ if (aS.options[selectedIndex].value == 'single'){
+ segmentValueCheck = false
+ } else if (aS.options[selectedIndex].value == 'hybrid'){
+ hybridAddressing = true;
+ }
+
+ let curlString = ''
+ let haString = ''
+
+ let colorSeparatorStart = '"';
+ let colorSeparatorEnd = '"';
+ if (!hexValueCheck){
+ colorSeparatorStart = '[';
+ colorSeparatorEnd = ']';
+ }
+ // Warnings
+ let hasTransparency = false; //If alpha < 255 is detected on any pixel, this is set to true in code below
+ let imageInfo = '';
+
+ // Create an off-screen canvas
+ var canvas = cE('canvas');
+ var context = canvas.getContext('2d', { willReadFrequently: true });
+
+ // Create an image element and set its src to the base64 image
+ var image = new Image();
+ image.src = base64Image;
+
+ // Wait for the image to load before drawing it onto the canvas
+ image.onload = function() {
+
+ let scalePath = scDiv.children[0].children[0];
+ let color = scalePath.getAttribute("fill");
+ let sizeX = szX.value;
+ let sizeY = szY.value;
+
+ if (color != accentColor || sizeX < 1 || sizeY < 1){
+ //image will not be rezised Set desitred size to original size
+ sizeX = image.width;
+ sizeY = image.height;
+ //failsafe for not generating huge images automatically
+ if (image.width > 512 || image.height > 512)
+ {
+ sizeX = 16;
+ sizeY = 16;
+ }
+ }
+
+ // Set the canvas size to the same as the desired image size
+ canvas.width = sizeX;
+ canvas.height = sizeY;
+
+ imageInfo = 'WLED Pixel Art Converter
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wled00/data/pixart/pixart.js b/wled00/data/pixart/pixart.js
new file mode 100644
index 00000000..a1c67aa9
--- /dev/null
+++ b/wled00/data/pixart/pixart.js
@@ -0,0 +1,364 @@
+//Start up code
+//if (window.location.protocol == "file:") {
+// let locip = prompt("File Mode. Please enter WLED IP!");
+// gId('curlUrl').value = locip;
+//} else
+//
+//Start up code
+let devMode = false; //Remove
+gurl.value = location.host;
+
+const urlParams = new URLSearchParams(window.location.search);
+if (gurl.value.length < 1){
+ gurl.value = "Missing_Host";
+}
+
+function gen(){
+ //Generate image if enough info is in place
+ //Is host non empty
+ //Is image loaded
+ //is scale > 0
+ if (((szX.value > 0 && szY.value > 0) || szDiv.style.display == 'none') && gurl.value.length > 0 && prw.style.display != 'none'){
+ //regenerate
+ let base64Image = prw.src;
+ if (isValidBase64Gif(base64Image)) {
+ im.src = base64Image;
+ getPixelRGBValues(base64Image);
+ imcn.style.display = "block";
+ bcn.style.display = "";
+ } else {
+ let imageInfo = 'Width: ' + sizeX + ', Height: ' + sizeY + ' (make sure this matches your led matrix setup)
' + + // Draw the image onto the canvas + context.drawImage(image, 0, 0, sizeX, sizeY); + + // Get the pixel data from the canvas + var pixelData = context.getImageData(0, 0, sizeX, sizeY).data; + + // Create an array to hold the RGB values of each pixel + var pixelRGBValues = []; + + // If the first row of the led matrix is right -> left + let right2leftAdjust = 1; + + if (ledSetupSelection == 'l2r'){ + right2leftAdjust = 0; + } + + // Loop through the pixel data and get the RGB values of each pixel + for (var i = 0; i < pixelData.length; i += 4) { + var r = pixelData[i]; + var g = pixelData[i + 1]; + var b = pixelData[i + 2]; + var a = pixelData[i + 3]; + + let pixel = i/4 + let row = Math.floor(pixel/sizeX); + let led = pixel; + if (ledSetupSelection == 'matrix'){ + //Do nothing, the matrix is set upp like the index in the image + //Every row starts from the left, i.e. no zigzagging + } + else if ((row + right2leftAdjust) % 2 === 0) { + //Setup is traditional zigzag + //right2leftAdjust basically flips the row order if = 1 + //Row is left to right + //Leave led index as pixel index + + } else { + //Setup is traditional zigzag + //Row is right to left + //Invert index of row for led + let indexOnRow = led - (row * sizeX); + let maxIndexOnRow = sizeX - 1; + let reversedIndexOnRow = maxIndexOnRow - indexOnRow; + led = (row * sizeX) + reversedIndexOnRow; + } + + // Add the RGB values to the pixel RGB values array + pixelRGBValues.push([r, g, b, a, led, pixel, row]); + } + + pixelRGBValues.sort((a, b) => a[5] - b[5]); + + //Copy the values to a new array for resorting + let ledRGBValues = [... pixelRGBValues]; + + //Sort the array based on led index + ledRGBValues.sort((a, b) => a[4] - b[4]); + + //Generate JSON in WLED format + let JSONledString = ''; + + //Set starting values for the segment check to something that is no color + let segmentStart = -1; + let maxi = ledRGBValues.length; + let curentColorIndex = 0 + let commandArray = []; + + //For evry pixel in the LED array + for (let i = 0; i < maxi; i++) { + let pixel = ledRGBValues[i]; + let r = pixel[0]; + let g = pixel[1]; + let b = pixel[2]; + let a = pixel[3]; + let segmentString = ''; + let segmentEnd = -1; + + if(segmentValueCheck){ + if (segmentStart < 0){ + //This is the first led of a new segment + segmentStart = i; + } //Else we allready have a start index + + if (i < maxi - 1){ + + let iNext = i + 1; + let nextPixel = ledRGBValues[iNext]; + + if (nextPixel[0] != r || nextPixel[1] != g || nextPixel[2] != b ){ + //Next pixel has new color + //The current segment ends with this pixel + segmentEnd = i + 1 //WLED wants the NEXT LED as the stop led... + if (segmentStart == i && hybridAddressing){ + //If only one led/pixel, no segment info needed + if (JSONledString == ''){ + //If addressing is single, we need to start every command with a starting possition + segmentString = '' + i + ','; + //Fixed to b2 + } else{ + segmentString = '' + } + } + else { + segmentString = segmentStart + ',' + segmentEnd + ','; + } + } + + } else { + //This is the last pixel, so the segment must end + segmentEnd = i + 1; + + if (segmentStart + 1 == segmentEnd && hybridAddressing){ + //If only one led/pixel, no segment info needed + if (JSONledString == ''){ + //If addressing is single, we need to start every command with a starting possition + segmentString = '' + i + ','; + //Fixed to b2 + } else{ + segmentString = '' + } + } + else { + segmentString = segmentStart + ',' + segmentEnd + ','; + } + } + } else{ + //Write every pixel + if (JSONledString == ''){ + //If addressing is single, we need to start every command with a starting possition + JSONledString = i + //Fixed to b2 + } + + segmentStart = i + segmentEnd = i + //Segment string should be empty for when addressing single. So no need to set it again. + } + + if (a < 255){ + hasTransparency = true; //If ANY pixel has alpha < 255 then this is set to true to warn the user + } + + if (segmentEnd > -1){ + //This is the last pixel in the segment, write to the JSONledString + //Return color value in selected format + let colorValueString = r + ',' + g + ',' + b ; + + if (hexValueCheck){ + const [red, green, blue] = [r, g, b]; + colorValueString = `${[red, green, blue].map(x => x.toString(16).padStart(2, '0')).join('')}`; + } else{ + //do nothing, allready set + } + + // Check if start and end is the same, in which case remove + + JSONledString += segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd; + fileJSON = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd; + + curentColorIndex = curentColorIndex + 1; // We've just added a new color to the string so up the count with one + + if (curentColorIndex % maxNoOfColorsInCommandSting === 0 || i == maxi - 1) { + + //If we have accumulated the max number of colors to send in a single command or if this is the last pixel, we should write the current colorstring to the array + commandArray.push(JSONledString); + JSONledString = ''; //Start on an new command string + } else + { + //Add a comma to continue the command string + JSONledString = JSONledString + ',' + } + //Reset segment values + segmentStart = - 1; + } + } + + JSONledString = '' + + //For every commandString in the array + for (let i = 0; i < commandArray.length; i++) { + let thisJSONledString = `{"on":true,"bri":${brgh.value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`; + httpArray.push(thisJSONledString); + + let thiscurlString = `curl -X POST "http://${gurl.value}/json/state" -d \'${thisJSONledString}\' -H "Content-Type: application/json"`; + + //Aggregated Strings That should be returned to the user + if (i > 0){ + JSONledString = JSONledString + '\n'; + curlString = curlString + ' && '; + } + JSONledString += thisJSONledString; + curlString += thiscurlString; + } + + + haString = `#Uncomment if you don\'t allready have these defined in your switch section of your configuration.yaml +#- platform: command_line + #switches: + ${haIDe.value} + friendly_name: ${haNe.value} + unique_id: ${haUe.value} + command_on: > + ${curlString} + command_off: > + curl -X POST "http://${gurl.value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`; + + if (formatSelection == 'wled'){ + JLD.value = JSONledString; + } else if (formatSelection == 'curl'){ + JLD.value = curlString; + } else if (formatSelection == 'ha'){ + JLD.value = haString; + } else { + JLD.value = 'ERROR!/n' + formatSelection + ' is an unknown format.' + } + + fileJSON += ']}}'; + + let infoDiv = imin; + let canvasDiv = imin; + if (hasTransparency){ + imageInfo = imageInfo + 'WARNING! Transparency info detected in image. Transparency (alpha) has been ignored. To ensure you get the result you desire, use only solid colors in your image.
' + } + + infoDiv.innerHTML = imageInfo; + canvasDiv.style.display = "block" + + + //Drawing the image + drawBoxes(pixelRGBValues, sizeX, sizeY); + } +} \ No newline at end of file diff --git a/wled00/data/pixart/pixart.css b/wled00/data/pixart/pixart.css new file mode 100644 index 00000000..39ba1f28 --- /dev/null +++ b/wled00/data/pixart/pixart.css @@ -0,0 +1,324 @@ + +.box { + border: 2px solid #fff; +} +body { + font-family: Arial, sans-serif; + background-color: #111; +} + +.top-part { + width: 600px; + margin: 0 auto; +} +.container { + max-width: 100% -40px; + border-radius: 0px; + padding: 20px; + text-align: center; +} +h1 { + font-size: 2.3em; + color: #ddd; + margin: 1px 0; + font-family: Arial, sans-serif; + line-height: 0.5; + /*text-align: center;*/ +} +h2 { + font-size: 1.1em; + color: rgba(221, 221, 221, 0.61); + margin: 1px 0; + font-family: Arial, sans-serif; + line-height: 0.5; + text-align: center; +} +h3 { + font-size: 0.7em; + color: rgba(221, 221, 221, 0.61); + margin: 1px 0; + font-family: Arial, sans-serif; + line-height: 1.4; + text-align: center; + align-items: center; + justify-content: center; + display: flex; +} + +p { + font-size: 1em; + color: #777; + line-height: 1.5; + font-family: Arial, sans-serif; +} + +#fieldTable { + font-size: 1 em; + color: #777; + line-height: 1; + font-family: Arial, sans-serif; +} + +#scaleTable { + font-size: 1 em; + color: #777; + line-height: 1; + font-family: Arial, sans-serif; +} + +#drop-zone { + display: block; + width: 100%-40px; + border: 3px dashed #ddd; + border-radius: 0px; + text-align: center; + padding: 20px; + margin: 0px; + cursor: pointer; + font-family: Arial, sans-serif; + font-size: 15px; + color: #777; +} + +#file-picker { + display: none; +} +.adaptiveTD{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + +} + +.mainSelector { + background-color: #222; + color: #ddd; + border: 1px solid #333; + margin-top: 4px; + margin-bottom: 4px; + padding: 0 8px; + height: 28px; + font-size: 15px; + border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.adaptiveSelector { + background-color: #222; + color: #ddd; + border: 1px solid #333; + margin-top: 4px; + margin-bottom: 4px; + padding: 0 8px; + height: 28px; + font-size: 15px; + border-radius: 7px; + flex-grow: 1; + display: none; +} + +.segmentsDiv{ + width: 36px; + padding-left: 5px; +} + +* input[type=range] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + flex-grow: 1; + padding: 0; + margin: 4px 8px 4px 0; + background-color: transparent; + cursor: pointer; + background: linear-gradient(to right, #bbb 50%, #333 50%); + border-radius: 7px; +} + +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + height: 28px; + cursor: pointer; + background: transparent; + border-radius: 7px; +} +input[type=range]::-webkit-slider-thumb { + height: 16px; + width: 16px; + border-radius: 50%; + background: #fff; + cursor: pointer; + -webkit-appearance: none; + margin-top: 4px; + border-radius: 7px; +} +input[type=range]::-moz-range-track { + height: 28px; + background-color: rgba(0, 0, 0, 0); + border-radius: 7px; +} +input[type=range]::-moz-range-thumb { + border: 0px solid rgba(0, 0, 0, 0); + height: 16px; + width: 16px; + border-radius: 7px; + background: #fff; +} + +.rangeNumber{ + width: 20px; + vertical-align: middle; +} + +.fullTextField[type=text] { + background-color: #222; + border: 1px solid #333; + padding-inline-start: 5px; + margin-top: 4px; + margin-bottom: 4px; + height: 24px; + border-radius: 0px; + font-family: Arial, sans-serif; + font-size: 15px; + color: #ddd; + border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} +.flxTFld{ + background-color: #222; + border: 1px solid #333; + padding-inline-start: 5px; + height: 24px; + border-radius: 0px; + font-family: Arial, sans-serif; + font-size: 15px; + color: #ddd; + border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} + +* input[type=submit] { + background-color: #222; + border: 1px solid #333; + padding: 0.5em; + width: 100%; + border-radius: 24px; + font-family: Arial, sans-serif; + font-size: 1.3em; + color: #ddd; +} + +* button { + background-color: #222; + border: 1px solid #333; + padding-inline: 5px; + width: 100%; + border-radius: 24px; + font-family: Arial, sans-serif; + font-size: 1em; + color: #ddd; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +#scaleDiv { + display: flex; + align-items: center; + vertical-align: middle; +} + +textarea { + grid-row: 1 / 2; + width: 100%; + height: 200px; + background-color: #222; + border: 1px solid #333; + color: #ddd; +} +.hide { + display: none; +} + +.svg-icon { + vertical-align: middle; +} +#image-container { + display: grid; + grid-template-rows: 1fr 1fr; +} +#button-container { + display: flex; + padding-bottom: 10px; + padding-top: 10px; +} + +.buttonclass { + flex: 1; + padding-top: 5px; + padding-bottom: 5px; +} + +.gap { + width: 10px; +} + +#submitConvert::before { + content: ""; + display: inline-block; + background-image: url('data:image/svg+xml;utf8, '); + width: 36px; + height: 36px; +} + +#sizeDiv * { + display: inline-block; +} +.sizeInputFields{ + width: 50px; + background-color: #222; + border: 1px solid #333; + padding-inline-start: 5px; + margin-top: -5px; + height: 24px; + border-radius: 7px; + font-family: Arial, sans-serif; + font-size: 15px; + color: #ddd; +} +a:link { + color: rgba(221, 221, 221, 0.61); + background-color: transparent; + text-decoration: none; +} + +a:visited { + color: rgba(221, 221, 221, 0.61); + background-color: transparent; + text-decoration: none; +} + +a:hover { + color: #ddd; + background-color: transparent; + text-decoration: none; +} + +a:active { + color: rgba(221, 221, 221, 0.61); + background-color: transparent; + text-decoration: none; +} \ No newline at end of file diff --git a/wled00/data/pixart/pixart.htm b/wled00/data/pixart/pixart.htm new file mode 100644 index 00000000..889bd37d --- /dev/null +++ b/wled00/data/pixart/pixart.htm @@ -0,0 +1,210 @@ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + WLED Pixel Art Converter +
+Convert image to WLED JSON (pixel art on WLED matrix)
++
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + 128 + | +
| + + | ++ + 256 + | +
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + | +
| + + | ++ + + + | +
|
+
+
+ Scale image
+
+ |
+ + + | +
+ +
+ ++ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Version 1.0.7 - Help/About
+ WARNING! File does not appear to be a valid image
'; + imin.innerHTML = imageInfo; + imin.style.display = "block"; + imcn.style.display = "none"; + JLD.value = ''; + if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image."); + } + } + + if(gurl.value.length > 0){ + gId("sSg").setAttribute("fill", accentColor); + } else{ + gId("sSg").setAttribute("fill", accentTextColor); + let ts = tSg; + ts.style.display = "none"; + ts.innerHTML = ""; + sID.style.display = "flex"; + } +} + + +// Code for copying the generated string to clipboard + +cjb.addEventListener('click', async () => { + let JSONled = JLD; + JSONled.select(); + try { + await navigator.clipboard.writeText(JSONled.value); + } catch (err) { + try { + await d.execCommand("copy"); + } catch (err) { + console.error('Failed to copy text: ', err); + } + } +}); + +// Event listeners ======================= + +lSS.addEventListener("change", gen); +szY.addEventListener("change", gen); +szX.addEventListener("change", gen); +//frm.addEventListener("change", gen); +cFS.addEventListener("change", gen); +aS.addEventListener("change", gen); +brgh.addEventListener("change", gen); +cLN.addEventListener("change", gen); +haIDe.addEventListener("change", gen); +haUe.addEventListener("change", gen); +haNe.addEventListener("change", gen); +gurl.addEventListener("change", gen); +sID.addEventListener("change", gen); +prw.addEventListener("load", gen); +//gId("convertbutton").addEventListener("click", gen); + +tSg.addEventListener("change", () => { + sop = tSg.options[tSg.selectedIndex]; + szX.value = sop.dataset.x; + szY.value = sop.dataset.y; + gen(); +}); + +gId("sendJSONledbutton").addEventListener('click', async () => { + if (window.location.protocol === "https:") { + alert('Will only be available when served over http (or WLED is run over https)'); + } else { + postPixels(); + } +}); + +brgh.oninput = () => { + brgV.textContent = brgh.value; + let perc = parseInt(brgh.value)*100/255; + var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`; + brgh.style.backgroundImage = val; +} + +cLN.oninput = () => { + let cln = cLN; + cLV.textContent = cln.value; + let perc = parseInt(cln.value)*100/512; + var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`; + cln.style.backgroundImage = val; +} + +frm.addEventListener("change", () => { + for (var i = 0; i < hideableRows.length; i++) { + hideableRows[i].classList.toggle("hide", frm.value !== "ha"); + } +}); + +async function postPixels() { + let ss = gId("sendSvgP"); + ss.setAttribute("fill", prsCol); + let er = false; + for (let i of httpArray) { + try { + if (devMode) console.log(i); + if (devMode) console.log(i.length); + const response = await fetch('http://'+gId('curlUrl').value+'/json/state', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + //'Content-Type': 'text/html; charset=UTF-8' + }, + body: i + }); + const data = await response.json(); + if (devMode) console.log(data); + } catch (error) { + console.error(error); + er = true; + } + } + if(er){ + //Something went wrong + ss.setAttribute("fill", redColor); + setTimeout(function(){ + ss.setAttribute("fill", accentTextColor); + }, 1000); + } else { + // A, OK + ss.setAttribute("fill", greenColor); + setTimeout(function(){ + ss.setAttribute("fill", accentColor); + }, 1000); + } +} + +//File uploader code +const dropZone = gId('drop-zone'); +const filePicker = gId('file-picker'); +const preview = prw; + +// Listen for dragenter, dragover, and drop events +dropZone.addEventListener('dragenter', dragEnter); +dropZone.addEventListener('dragover', dragOver); +dropZone.addEventListener('drop', dropped); +dropZone.addEventListener('click', zoneClicked); + +// Listen for change event on file picker +filePicker.addEventListener('change', filePicked); + +// Handle zone click +function zoneClicked(e) { + e.preventDefault(); + //this.classList.add('drag-over'); + //alert('Hej'); + filePicker.click(); +} + +// Handle dragenter +function dragEnter(e) { + e.preventDefault(); + this.classList.add('drag-over'); +} + +// Handle dragover +function dragOver(e) { + e.preventDefault(); +} + +// Handle drop +function dropped(e) { + e.preventDefault(); + this.classList.remove('drag-over'); + + // Get the dropped file + const file = e.dataTransfer.files[0]; + updatePreview(file) +} + +// Handle file picked +function filePicked(e) { + // Get the picked file + const file = e.target.files[0]; + updatePreview(file) +} + +// Update the preview image +function updatePreview(file) { + // Use FileReader to read the file + const reader = new FileReader(); + reader.onload = () => { + // Update the preview image + preview.src = reader.result; + //gId("submitConvertDiv").style.display = ""; + prw.style.display = ""; + }; + reader.readAsDataURL(file); +} + +function isValidBase64Gif(string) { + // Use a regular expression to check that the string is a valid base64 string + /* + const base64gifPattern = /^data:image\/gif;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/; + const base64pngPattern = /^data:image\/png;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/; + const base64jpgPattern = /^data:image\/jpg;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/; + const base64webpPattern = /^data:image\/webp;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/; + */ + //REMOVED, Any image appear to work as long as it can be drawn to the canvas. Leaving code in for future use, possibly + if (1==1 || base64gifPattern.test(string) || base64pngPattern.test(string) || base64jpgPattern.test(string) || base64webpPattern.test(string)) { + return true; + } else { + //Not OK + return false; + } +} + +var hideableRows = d.querySelectorAll(".ha-hide"); +for (var i = 0; i < hideableRows.length; i++) { + hideableRows[i].classList.add("hide"); +} +frm.addEventListener("change", () => { + for (var i = 0; i < hideableRows.length; i++) { + hideableRows[i].classList.toggle("hide", frm.value !== "ha"); + } +}); + +function switchScale() { + //let scalePath = gId("scaleDiv").children[1].children[0] + let scaleTogglePath = scDiv.children[0].children[0] + let color = scaleTogglePath.getAttribute("fill"); + let d = ''; + if (color === accentColor) { + color = accentTextColor; + d = scaleToggleOffd; + szDiv.style.display = "none"; + // Set values to actual XY of image, if possible + } else { + color = accentColor; + d = scaleToggleOnd; + szDiv.style.display = ""; + } + //scalePath.setAttribute("fill", color); + scaleTogglePath.setAttribute("fill", color); + scaleTogglePath.setAttribute("d", d); + gen(); +} + +function generateSegmentOptions(array) { + //This function is prepared for a name property on each segment for easier selection + //Currently the name is generated generically based on index + tSg.innerHTML = ""; + for (var i = 0; i < array.length; i++) { + var option = cE("option"); + option.value = array[i].value; + option.text = array[i].text; + option.dataset.x = array[i].x; + option.dataset.y = array[i].y; + tSg.appendChild(option); + if(i === 0) { + option.selected = true; + szX.value = option.dataset.x; + szY.value = option.dataset.y; + } + } +} + +// Get segments from device +async function getSegments() { + cv = gurl.value; + if (cv.length > 0 ){ + try { + var arr = []; + const response = await fetch('http://'+cv+'/json/state'); + const json = await response.json(); + let ids = json.seg.map(sg => ({id: sg.id, n: sg.n, xs: sg.start, xe: sg.stop, ys: sg.startY, ye: sg.stopY})); + for (var i = 0; i < ids.length; i++) { + arr.push({ + value: ids[i]["id"], + text: ids[i]["n"] + ' (index: ' + ids[i]["id"] + ')', + x: ids[i]["xe"] - ids[i]["xs"], + y: ids[i]["ye"] - ids[i]["ys"] + }); + } + generateSegmentOptions(arr); + tSg.style.display = "flex"; + sID.style.display = "none"; + gId("sSg").setAttribute("fill", greenColor); + setTimeout(function(){ + gId("sSg").setAttribute("fill", accentColor); + }, 1000); + + } catch (error) { + console.error(error); + gId("sSg").setAttribute("fill", redColor); + setTimeout(function(){ + gId("sSg").setAttribute("fill", accentColor); + }, 1000); + tSg.style.display = "none"; + sID.style.display = "flex"; + } + } else{ + gId("sSg").setAttribute("fill", redColor); + setTimeout(function(){ + gId("sSg").setAttribute("fill", accentTextColor); + }, 1000); + tSg.style.display = "none"; + sID.style.display = "flex"; + } +} + +//Initial population of segment selection +function generateSegmentArray(noOfSegments) { + var arr = []; + for (var i = 0; i < noOfSegments; i++) { + arr.push({ + value: i, + text: "Segment index " + i + }); + } + return arr; +} + +var segmentData = generateSegmentArray(10); + +generateSegmentOptions(segmentData); + +seDiv.innerHTML = +'' +/*gId("convertbutton").innerHTML = +' Convert to WLED JSON '; +*/ +cjb.innerHTML = +' Copy to clipboard'; +gId("sendJSONledbutton").innerHTML = +' Send to device'; + +//After everything is loaded, check if we have a possible IP/host + +if(gurl.value.length > 0){ + // Needs to be addressed directly here so the object actually exists + gId("sSg").setAttribute("fill", accentColor); +} diff --git a/wled00/data/pixart/site.webmanifest b/wled00/data/pixart/site.webmanifest new file mode 100644 index 00000000..82452af2 --- /dev/null +++ b/wled00/data/pixart/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "WLED Pixel Art Convertor", + "short_name": "ledconv", + "icons": [ + { + "src": "/favicon-32x32.png", + "sizes": "32x322", + "type": "image/png" + }, + { + "src": "/favicon-32x32.png", + "sizes": "32x32", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" + } \ No newline at end of file diff --git a/wled00/data/pixart/statics.js b/wled00/data/pixart/statics.js new file mode 100644 index 00000000..b4f3c407 --- /dev/null +++ b/wled00/data/pixart/statics.js @@ -0,0 +1,51 @@ +//elements +var gurl = gId('curlUrl'); +var szX = gId("sizeX"); +var szY = gId("sizeY"); +var szDiv = gId("sizeDiv"); +var prw = gId("preview"); +var sID = gId('segID'); +var JLD = gId('JSONled'); +var tSg = gId('targetSegment'); +var brgh = gId("brightnessNumber"); + +var seDiv = gId("getSegmentsDiv") +var cjb = gId("copyJSONledbutton"); +var frm = gId("formatSelector"); +var cLN = gId("colorLimitNumber"); +var haIDe = gId("haID"); +var haUe = gId("haUID"); +var haNe = gId("haName"); +var aS = gId("addressingSelector"); +var cFS = gId("colorFormatSelector"); +var lSS = gId("ledSetupSelector"); +var imin = gId('image-info'); +var imcn = gId('image-container'); +var bcn = gId("button-container"); +var im = gId('image'); +//var ss = gId("sendSvgP"); +var scDiv = gId("scaleDiv"); +var w = window; +var canvas = gId('pixelCanvas'); +var brgV = gId("brightnessValue"); +var cLV = gId("colorLimitValue") + +//vars +var httpArray = []; +var fileJSON = ''; + +var hideableRows = d.querySelectorAll(".ha-hide"); +for (var i = 0; i < hideableRows.length; i++) { + hideableRows[i].classList.add("hide"); +} + +var accentColor = '#eee'; +var accentTextColor = '#777'; +var prsCol = '#ccc'; +var greenColor = '#056b0a'; +var redColor = '#6b050c'; + +var scaleToggleOffd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z"; +var scaleToggleOnd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"; + +var sSg = gId("getSegmentsSVGpath"); \ No newline at end of file diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm index 20b8de8d..45eb4980 100644 --- a/wled00/data/settings_leds.htm +++ b/wled00/data/settings_leds.htm @@ -9,6 +9,10 @@ var d=document,laprev=55,maxB=1,maxV=0,maxM=4000,maxPB=4096,maxL=1333,maxLbquot=0; //maximum bytes for LED allocation: 4kB for 8266, 32kB for 32 var customStarts=false,startsDirty=[],maxCOOverrides=5; var loc = false, locip; + d.um_p = []; + d.rsvd = []; + d.ro_gpio = []; + d.max_gpio = 39; function H(){window.open("https://kno.wled.ge/features/settings/#led-settings");} function B(){window.open("/settings","_self");} function gId(n){return d.getElementById(n);} @@ -23,10 +27,6 @@ // success event scE.addEventListener("load", () => { //console.log("File loaded"); - d.um_p = []; - d.rsvd = []; - d.ro_pins = []; - d.max_gpio = 39; GetV();checkSi();setABL(); if (d.um_p[0]==-1) d.um_p.shift(); }); @@ -66,7 +66,7 @@ for (k=0;k