diff --git a/tools/cdata.js b/tools/cdata.js
index d01c3e35f..bf5a65e84 100644
--- a/tools/cdata.js
+++ b/tools/cdata.js
@@ -220,6 +220,7 @@ function writeChunks(srcDir, specs, resultFile) {
writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h", 'index');
writeHtmlGzipped("wled00/data/simple.htm", "wled00/html_simple.h", 'simple');
+writeHtmlGzipped("wled00/data/pixart/pixart.htm", "wled00/html_pixart.h", 'pixart');
/*
writeChunks(
"wled00/data",
diff --git a/wled00/data/pixart/boxdraw.js b/wled00/data/pixart/boxdraw.js
new file mode 100644
index 000000000..75f8f9430
--- /dev/null
+++ b/wled00/data/pixart/boxdraw.js
@@ -0,0 +1,91 @@
+function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
+
+ // Get a reference to the canvas element
+ var canvas = document.getElementById('pixelCanvas');
+
+ // Get the canvas context
+ var ctx = canvas.getContext('2d');
+
+ // Set the width and height of the canvas
+ if (window.innerHeight < window.innerWidth) {
+ canvas.width = Math.floor(window.innerHeight * 0.98);
+ }
+ else{
+ canvas.width = Math.floor(window.innerWidth * 0.98);
+ }
+ //canvas.height = window.innerWidth;
+
+ let pixelSize = Math.floor(canvas.width/widthPixels);
+
+ //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 r = pixel[0];
+ let g = pixel[1];
+ let b = pixel[2];
+ let pos = pixel[4];
+
+ 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((pos + 1), (x * pixelSize) + (pixelSize /2), (y * pixelSize) + (pixelSize /2));
+ }
+ }
+}
+
+function drawBackground() {
+ const grid = document.createElement("div");
+ grid.id = "grid";
+ grid.classList.add("grid-class");
+ grid.style.cssText = "";
+
+ const boxSize = 20;
+ const boxCount = Math.ceil(window.innerWidth / boxSize) * Math.ceil(window.innerHeight / boxSize);;
+
+ for (let i = 0; i < boxCount; i++) {
+ const box = document.createElement("div");
+ box.classList.add("box");
+ box.style.backgroundColor = getRandomColor();
+ grid.appendChild(box);
+ }
+ grid.style.zIndex = -1;
+ document.body.appendChild(grid);
+}
+
+function getRandomColor() {
+ const letters = "0123456789ABCDEF";
+ let color = "rgba(";
+ for (let i = 0; i < 3; i++) {
+ color += Math.floor(Math.random() * 256) + ",";
+ }
+ color += "0.05)";
+ return color;
+}
+
+ window.drawBackground = drawBackground;
diff --git a/wled00/data/pixart/favicon-16x16.png b/wled00/data/pixart/favicon-16x16.png
new file mode 100644
index 000000000..feb51ca09
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 000000000..a3b5cceb1
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 000000000..bde8945e5
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 000000000..76ded2e5d
--- /dev/null
+++ b/wled00/data/pixart/getPixelValues.js
@@ -0,0 +1,303 @@
+function getPixelRGBValues(base64Image) {
+ httpArray = [];
+ fileJSON = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2;
+
+ //const copyJSONledbutton = document.getElementById('copyJSONledbutton');
+ const JSONled = document.getElementById('JSONled');
+ const maxNoOfColorsInCommandSting = document.getElementById('colorLimitNumber').value;
+
+ let hybridAddressing = false;
+ let selectedIndex = -1;
+
+ let selector = document.getElementById("formatSelector");
+ selectedIndex = selector.selectedIndex;
+ const formatSelection = selector.options[selectedIndex].value;
+
+ selector = document.getElementById("ledSetupSelector");
+ selectedIndex = selector.selectedIndex;
+ const ledSetupSelection = selector.options[selectedIndex].value;
+
+ selector = document.getElementById("colorFormatSelector");
+ selectedIndex = selector.selectedIndex;
+ let hexValueCheck = true;
+ if (selector.options[selectedIndex].value == 'dec'){
+ hexValueCheck = false
+ }
+
+ selector = document.getElementById("addressingSelector");
+ selectedIndex = selector.selectedIndex;
+ let segmentValueCheck = true; //If Range or Hybrid
+ if (selector.options[selectedIndex].value == 'single'){
+ segmentValueCheck = false
+ } else if (selector.options[selectedIndex].value == 'hybrid'){
+ hybridAddressing = true;
+ }
+
+ let segmentString = ''
+ let curlString = ''
+ let haString = ''
+ let haCommandCurlString = '';
+
+
+ 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 = document.createElement('canvas');
+ var context = canvas.getContext('2d');
+
+ // 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 = document.getElementById("scalePath");
+ let color = scalePath.getAttribute("fill");
+ let sizeX = document.getElementById("sizeX").value;
+ let sizeY = document.getElementById("sizeY").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;
+ }
+
+ // Set the canvas size to the same as the desired image size
+ canvas.width = sizeX;
+ canvas.height = sizeY;
+
+ 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 = '';
+ let JSONledStringShort = '';
+
+ //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 = 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 evry commandString in the array
+ for (let i = 0; i < commandArray.length; i++) {
+ let thisJSONledString = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd;
+ httpArray.push(thisJSONledString);
+
+ let thiscurlString = curlStart + document.getElementById('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;
+
+ //Aggregated Strings That should be returned to the user
+ if (i > 0){
+ JSONledString = JSONledString + '\n';
+ curlString = curlString + ' && ';
+ }
+ JSONledString = JSONledString + thisJSONledString;
+ curlString = curlString + thiscurlString;
+ }
+
+
+ haString = haStart + document.getElementById('haID').value + haMid1 + document.getElementById('haName').value + haMid2 + document.getElementById('haUID').value + haMid3 +curlString + haMid3 + document.getElementById('curlUrl').value + haEnd;
+
+ if (formatSelection == 'wled'){
+ JSONled.value = JSONledString;
+ } else if (formatSelection == 'curl'){
+ JSONled.value = curlString;
+ } else if (formatSelection == 'ha'){
+ JSONled.value = haString;
+ } else {
+ JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.'
+ }
+
+ fileJSON = fileJSON + JSONledStringEnd;
+
+ let infoDiv = document.getElementById('image-info');
+ let canvasDiv = document.getElementById('image-info');
+ 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 000000000..e2fd330b8
--- /dev/null
+++ b/wled00/data/pixart/pixart.css
@@ -0,0 +1,266 @@
+
+.box {
+ border: 2px solid white;
+}
+body {
+ font-family: 'Arcade', Arial, sans-serif;
+ background-color: #151515;
+}
+
+.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: rgb(126, 76, 128);
+ margin: 1px 0;
+ font-family: 'Arcade', Arial, sans-serif;
+ line-height: 0.5;
+ /*text-align: center;*/
+}
+h2 {
+ font-size: 1.1em;
+ color: rgba(126, 76, 128, 0.61);
+ margin: 1px 0;
+ font-family: 'Arcade', Arial, sans-serif;
+ line-height: 0.5;
+ text-align: center;
+}
+h3 {
+ font-size: 0.7em;
+ color: rgba(126, 76, 128, 0.61);
+ margin: 1px 0;
+ font-family: 'Arcade', Arial, sans-serif;
+ line-height: 1.4;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+
+p {
+ font-size: 1.2em;
+ color: rgb(119, 119, 119);
+ line-height: 1.5;
+ font-family: 'Arcade', Arial, sans-serif;
+}
+
+#fieldTable {
+ font-size: 1 em;
+ color: #777;
+ line-height: 1;
+ font-family: 'Arcade', Arial, sans-serif;
+}
+
+#scaleTable {
+ font-size: 1 em;
+ color: #777;
+ line-height: 1;
+ font-family: 'Arcade', Arial, sans-serif;
+}
+
+#drop-zone {
+ display: block;
+ width: 100%-40px;
+ border: 3px dashed #7E4C80;
+ border-radius: 0px;
+ text-align: center;
+ padding: 20px;
+ margin: 0px;
+ cursor: pointer;
+
+ font-family: 'Arcade', Arial, sans-serif;
+ font-size: 15px;
+ color: #777;
+}
+
+#file-picker {
+ display: none;
+}
+
+* select {
+ background-color: #333333;
+ color: #C0C0C0;
+ border: 1px solid #C0C0C0;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ padding: 0em;
+ width: 100%;
+ height: 27px;
+ font-size: 15px;
+ color: rgb(119, 119, 119);
+ border-radius: 0;
+}
+
+* input[type=range] {
+ -webkit-appearance:none;
+ flex-grow: 1;
+ border-radius: 0px;
+ background: linear-gradient(to right, #333333 0%, #333333 100%);
+ color: #C0C0C0;
+ border: 1px solid #C0C0C0;
+ margin-top: 0.5em;
+ margin-left: 0em;
+}
+
+input[type="range"]::-webkit-slider-thumb{
+ -webkit-appearance:none;
+ width: 25px;
+ height:25px;
+ background:#7E4C80;
+ position:relative;
+ z-index:3;
+}
+
+.rangeNumber{
+ width: 20px;
+ vertical-align: middle;
+}
+
+.fullTextField[type=text] {
+ background-color: #333333;
+ border: 1px solid #C0C0C0;
+ padding-inline-start: 5px;
+ margin-top: 10px;
+ width: 100%;
+ height: 24px;
+ border-radius: 0px;
+ font-family: 'Arcade', Arial, sans-serif;
+ font-size: 15px;
+ color: rgb(119, 119, 119);
+}
+
+* input[type=submit] {
+ background-color: #333333;
+ border: 1px solid #C0C0C0;
+ padding: 0.5em;
+ width: 100%;
+ border-radius: 0px;
+ font-family: 'Arcade', Arial, sans-serif;
+ font-size: 1.3em;
+ color: rgb(119, 119, 119);
+}
+
+* button {
+ background-color: #333333;
+ border: 1px solid #C0C0C0;
+ padding-inline: 5px;
+ width: 100%;
+ border-radius: 0px;
+ font-family: 'Arcade', Arial, sans-serif;
+ font-size: 1em;
+ color: rgb(119, 119, 119);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+textarea {
+ grid-row: 1 / 2;
+ width: 100%;
+ height: 200px;
+ background-color: #333333;
+ border: 1px solid #C0C0C0;
+
+ color: #777;
+}
+.hide {
+ display: none;
+}
+.grids-class{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 20px);
+ grid-template-rows: repeat(auto-fill, 20px);
+ grid-gap: 0px;
+}
+.svg-icon {
+ vertical-align: middle;
+}
+.buttondiv-class {
+ flex: 1;
+ display: inline-block;
+}
+
+.buttondivmid-class {
+ width: 10px;
+ display: inline-block;
+}
+#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, WLED Pixel Art Converter
+
+
+
+
+
+ WLED Pixel Art Converter
+
+
+
Convert image to WLED JSON (pixel art on WLED matrix)
+
+
+
+
+
+
+
+
+ Drop image here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ WARNING! File does not appear to be a valid image
'
+ infoDiv.innerHTML = imageInfo;
+ infoDiv.style.display = "block"
+ document.getElementById('image-container').style.display = "none";
+ document.getElementById('JSONled').value = '';
+ console.log("The string '" + base64Image + "' is not a valid base64 image.");
+ }
+
+});
+
+// Code for copying the generated string to clipboard
+
+copyJSONledbutton.addEventListener('click', async () => {
+ let JSONled = document.getElementById('JSONled');
+ JSONled.select();
+ try {
+ await navigator.clipboard.writeText(JSONled.value);
+ } catch (err) {
+ try {
+ await document.execCommand("copy");
+ } catch (err) {
+ console.error('Failed to copy text: ', err);
+ }
+ }
+});
+
+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();
+ }
+});
+
+fileJSONledbutton.addEventListener('click', async () => {
+ if (window.location.protocol === "https:") {
+ alert('Will only be available when served over http (or WLED is run over https)');
+ } else {
+ let JSONFileName = 'TheName.json'
+ let urlString = 'http://'+document.getElementById('curlUrl').value+'/upload'
+
+ sendAsFile(fileJSON, JSONFileName, urlString);
+ }
+});
+
+async function postPixels() {
+ for (let i of httpArray) {
+ try {
+ console.log(i);
+ console.log(i.length);
+ const response = await fetch('http://'+document.getElementById('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();
+ console.log(data);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+}
+//File uploader code
+const dropZone = document.getElementById('drop-zone');
+const filePicker = document.getElementById('file-picker');
+const preview = document.getElementById('preview');
+
+// 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 = function() {
+ // Update the preview image
+ preview.src = reader.result;
+ document.getElementById("submitConvertDiv").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;
+ }
+}
+
+document.getElementById("brightnessNumber").oninput = function() {
+ document.getElementById("brightnessValue").textContent = this.value;
+}
+
+document.getElementById("colorLimitNumber").oninput = function() {
+ document.getElementById("colorLimitValue").textContent = this.value;
+}
+
+var formatSelector = document.getElementById("formatSelector");
+var hideableRows = document.querySelectorAll(".ha-hide");
+for (var i = 0; i < hideableRows.length; i++) {
+ hideableRows[i].classList.add("hide");
+}
+formatSelector.addEventListener("change", function() {
+ for (var i = 0; i < hideableRows.length; i++) {
+ hideableRows[i].classList.toggle("hide", this.value !== "ha");
+ }
+ });
+
+function switchScale() {
+ let scalePath = document.getElementById("scalePath");
+ let scaleTogglePath = document.getElementById("scaleTogglePath");
+ let color = scalePath.getAttribute("fill");
+ let d = ''
+ if (color === accentColor) {
+ color = accentTextColor;
+ d = scaleToggleOffd
+ document.getElementById("sizeDiv").style.display = "none";
+ // Set values to actual XY of image, if possible
+ } else {
+ color = accentColor;
+ d = scaleToggleOnd
+ document.getElementById("sizeDiv").style.display = "";
+ }
+ scalePath.setAttribute("fill", color);
+ scaleTogglePath.setAttribute("fill", color);
+ scaleTogglePath.setAttribute("d", d);
+}
+
+
+function sendAsFile(jsonStringInput, fileName, urlString) {
+ //var jsonString = JSON.stringify({name: "value"});
+ var file = new Blob([jsonStringInput], {type: 'application/json'});
+ console.log(jsonStringInput)
+ console.log(fileName);
+ console.log(urlString);
+
+ var formData = new FormData();
+ formData.append('file', file, fileName);
+
+ var xhr = new XMLHttpRequest();
+ xhr.open('POST', urlString, true);
+ xhr.onload = function() {
+ if (xhr.status === 200) {
+ console.log('File uploaded successfully!');
+ } else {
+ console.log('File upload failed!');
+ }
+ };
+ xhr.send(formData);
+}
+
+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
+ var select = document.getElementById("targetSegment");
+ select.innerHTML = "";
+ for (var i = 0; i < array.length; i++) {
+ var option = document.createElement("option");
+ option.value = array[i].value;
+ option.text = array[i].text;
+ select.appendChild(option);
+ if(i === 0) {
+ option.selected = true;
+ }
+ }
+}
+
+//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;
+}
+
+
+//Animate matrix
+var matrixcircles = document.querySelectorAll("#logomatrix path");
+var intervalId;
+// Function that changes the color of a random circle to a lighter purple
+function changeColorOfDot() {
+ // Get a random number between 0 and the number of circles
+ var randomIndex = Math.floor(Math.random() * matrixcircles.length);
+ // Get the circle at the random index
+ var randomCircle = matrixcircles[randomIndex];
+
+
+ // Store the current fill color
+ var currentColor = randomCircle.getAttribute("fill");
+ // Change the color of the circle
+ randomCircle.setAttribute("fill", "#bb8fbc");
+ setTimeout(() => {
+ randomCircle.setAttribute("fill", currentColor);
+ clearInterval(intervalId);
+ intervalId = setInterval(changeColorOfDot, randomInterval());
+ }, 500);
+}
+
+function randomInterval() {
+ var interval = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
+ return interval * 1000;
+}
+
+// call the function changeColorOfDot every 10 seconds
+intervalId = setInterval(changeColorOfDot, randomInterval());
+
+var segmentData = generateSegmentArray(10);
+
+generateSegmentOptions(segmentData);
+
+document.getElementById("fileJSONledbutton").innerHTML =
+' Copy to clipboard';
+ document.getElementById("sendJSONledbutton").innerHTML =
+' Send to device';
\ No newline at end of file
diff --git a/wled00/data/pixart/site.webmanifest b/wled00/data/pixart/site.webmanifest
new file mode 100644
index 000000000..82452af2e
--- /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 000000000..15607cb9b
--- /dev/null
+++ b/wled00/data/pixart/statics.js
@@ -0,0 +1,25 @@
+var curlStart = 'curl -X POST "http://';
+var curlMid1 = '/json/state" -d \'';
+var curlEnd = '\' -H "Content-Type: application/json"';
+
+const haStart = '#Uncomment if you don\'t allready have these defined in your switch section of your configuration.yaml\n#- platform: command_line\n #switches:\n ';
+const haMid1 = '\n friendly_name: ';
+const haMid2 = '\n unique_id: ';
+const haMid3= '\n command_on: >\n ';
+const haMid4 = '\n command_off: >\n curl -X POST "http://';
+const haEnd = '/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"';
+const haCommandLeading = ' ';
+
+const JSONledStringStart = '{"on":true,"bri":';
+const JSONledStringMid1 = ',"seg":{"id":';
+const JSONledStringMid2 = ',"i":[';
+// const JSONledShortStringStart = '{';
+// const JSONledShortStringMid1 = '"seg":{"i":[';
+const JSONledStringEnd = ']}}';
+
+var accentColor = '#7E4C80';
+var accentTextColor = '#777';
+
+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";
+
diff --git a/wled00/data/pixartmin.htm b/wled00/data/pixartmin.htm
deleted file mode 100644
index 3c58a0207..000000000
--- a/wled00/data/pixartmin.htm
+++ /dev/null
@@ -1,233 +0,0 @@
-
-
-
- Led Matrix Pixel Art Converter
-
-
-
-
-
-
-
-
-
-
- Led Matrix Pixel Art Converter
-
-
-
Convert image to WLED JSON (pixel art on WLED matrix)
-
-
-
-
-
-
-
-
- Drop image here
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-