Drop image here
or
\n Click to select a file
Version 1.0.5
\n WLED Pixel Art Converter
\nConvert image to WLED JSON (pixel art on WLED matrix)
| \n | |
| \n | |
| \n | |
| 256 | |
| \n | |
| \n | |
| \n | |
| \n \n |
| Scale image | \n \n |
\n
\n
Version 1.0.6 - Help/About
\n WLED Pixel Art Converter
\nConvert image to WLED JSON (pixel art on WLED matrix)
| \n | |
| 128 | |
| 256 | |
| \n | |
| \n | |
| \n | |
| \n \n |
| Scale image | \n \n |
| Generate flow file | \n |
| |
\n
Version 1.1.0.b - Help/About
Original image
Width: ' + sizeX + ', Height: ' + sizeY + ' (make sure this matches your led matrix setup)
'\n\n // Draw the image onto the canvas\n context.drawImage(image, 0, 0, sizeX, sizeY);\n\n // Get the pixel data from the canvas\n var pixelData = context.getImageData(0, 0, sizeX, sizeY).data;\n \n // Create an array to hold the RGB values of each pixel\n var pixelRGBValues = [];\n\n // If the first row of the led matrix is right -> left\n let right2leftAdjust = 1;\n \n if (ledSetupSelection == 'l2r'){\n right2leftAdjust = 0;\n }\n\n // Loop through the pixel data and get the RGB values of each pixel\n for (var i = 0; i < pixelData.length; i += 4) {\n var r = pixelData[i];\n var g = pixelData[i + 1];\n var b = pixelData[i + 2];\n var a = pixelData[i + 3];\n\n let pixel = i/4\n let row = Math.floor(pixel/sizeX);\n let led = pixel;\n if (ledSetupSelection == 'matrix'){\n //Do nothing, the matrix is set upp like the index in the image\n //Every row starts from the left, i.e. no zigzagging\n }\n else if ((row + right2leftAdjust) % 2 === 0) {\n //Setup is traditional zigzag\n //right2leftAdjust basically flips the row order if = 1\n //Row is left to right\n //Leave led index as pixel index\n \n } else {\n //Setup is traditional zigzag\n //Row is right to left\n //Invert index of row for led\n let indexOnRow = led - (row * sizeX);\n let maxIndexOnRow = sizeX - 1;\n let reversedIndexOnRow = maxIndexOnRow - indexOnRow;\n led = (row * sizeX) + reversedIndexOnRow;\n }\n\n // Add the RGB values to the pixel RGB values array\n pixelRGBValues.push([r, g, b, a, led, pixel, row]);\n }\n \n pixelRGBValues.sort((a, b) => a[5] - b[5]);\n\n //Copy the values to a new array for resorting\n let ledRGBValues = [... pixelRGBValues];\n \n //Sort the array based on led index\n ledRGBValues.sort((a, b) => a[4] - b[4]);\n \n //Generate JSON in WLED format\n let JSONledString = '';\n let JSONledStringShort = '';\n\n //Set starting values for the segment check to something that is no color\n let segmentStart = -1;\n let maxi = ledRGBValues.length;\n let curentColorIndex = 0\n let commandArray = [];\n\n //For evry pixel in the LED array\n for (let i = 0; i < maxi; i++) {\n let pixel = ledRGBValues[i];\n let r = pixel[0];\n let g = pixel[1];\n let b = pixel[2];\n let a = pixel[3];\n let segmentString = '';\n let segmentEnd = -1;\n\n if(segmentValueCheck){\n if (segmentStart < 0){\n //This is the first led of a new segment\n segmentStart = i;\n } //Else we allready have a start index\n \n if (i < maxi - 1){ \n \n let iNext = i + 1;\n let nextPixel = ledRGBValues[iNext];\n\n if (nextPixel[0] != r || nextPixel[1] != g || nextPixel[2] != b ){\n //Next pixel has new color\n //The current segment ends with this pixel\n segmentEnd = i + 1 //WLED wants the NEXT LED as the stop led...\n if (segmentStart == i && hybridAddressing){\n //If only one led/pixel, no segment info needed\n if (JSONledString == ''){\n //If addressing is single, we need to start every command with a starting possition\n segmentString = '' + i + ',';\n //Fixed to b2\n } else{\n segmentString = ''\n }\n }\n else {\n segmentString = segmentStart + ',' + segmentEnd + ',';\n }\n }\n\n } else {\n //This is the last pixel, so the segment must end\n segmentEnd = i + 1;\n\n if (segmentStart + 1 == segmentEnd && hybridAddressing){\n //If only one led/pixel, no segment info needed\n if (JSONledString == ''){\n //If addressing is single, we need to start every command with a starting possition\n segmentString = '' + i + ',';\n //Fixed to b2\n } else{\n segmentString = ''\n }\n }\n else {\n segmentString = segmentStart + ',' + segmentEnd + ','; \n }\n }\n } else{\n //Write every pixel\n if (JSONledString == ''){\n //If addressing is single, we need to start every command with a starting possition\n JSONledString = i\n //Fixed to b2\n }\n\n segmentStart = i\n segmentEnd = i \n //Segment string should be empty for when addressing single. So no need to set it again. \n }\n\n if (a < 255){\n hasTransparency = true; //If ANY pixel has alpha < 255 then this is set to true to warn the user\n }\n\n if (segmentEnd > -1){\n //This is the last pixel in the segment, write to the JSONledString\n //Return color value in selected format\n let colorValueString = r + ',' + g + ',' + b ;\n\n if (hexValueCheck){\n const [red, green, blue] = [r, g, b];\n colorValueString = `${[red, green, blue].map(x => x.toString(16).padStart(2, '0')).join('')}`;\n } else{\n //do nothing, allready set\n }\n\n // Check if start and end is the same, in which case remove\n\n JSONledString = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd;\n fileJSON = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd;\n\n curentColorIndex = curentColorIndex + 1; // We've just added a new color to the string so up the count with one\n\n if (curentColorIndex % maxNoOfColorsInCommandSting === 0 || i == maxi - 1) { \n\n //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\n commandArray.push(JSONledString);\n JSONledString = ''; //Start on an new command string\n } else\n {\n //Add a comma to continue the command string\n JSONledString = JSONledString + ','\n }\n //Reset segment values\n segmentStart = - 1;\n }\n }\n \n JSONledString = ''\n\n //For evry commandString in the array\n for (let i = 0; i < commandArray.length; i++) {\n let thisJSONledString = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd;\n httpArray.push(thisJSONledString);\n\n let thiscurlString = curlStart + document.getElementById('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;\n\n //Aggregated Strings That should be returned to the user\n if (i > 0){\n JSONledString = JSONledString + '\\n';\n curlString = curlString + ' && ';\n }\n JSONledString = JSONledString + thisJSONledString;\n curlString = curlString + thiscurlString;\n }\n\n \n haString = haStart + document.getElementById('haID').value + haMid1 + document.getElementById('haName').value + haMid2 + document.getElementById('haUID').value + haMid3 +curlString + haMid3 + document.getElementById('curlUrl').value + haEnd;\n\n if (formatSelection == 'wled'){\n JSONled.value = JSONledString;\n } else if (formatSelection == 'curl'){\n JSONled.value = curlString;\n } else if (formatSelection == 'ha'){\n JSONled.value = haString;\n } else {\n JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.'\n }\n \n fileJSON = fileJSON + JSONledStringEnd;\n\n let infoDiv = document.getElementById('image-info');\n let canvasDiv = document.getElementById('image-info');\n if (hasTransparency){\n 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.
'\n }\n \n infoDiv.innerHTML = imageInfo;\n canvasDiv.style.display = \"block\"\n\n\n //Drawing the image\n drawBoxes(pixelRGBValues, sizeX, sizeY);\n }\n}" }, { "path": "html/index.html", "content": "\n\n \n \n \n \n\n \n
\n \n
\n \n\n
\n \n \n \n \n\n \n \n"
},
{
"path": "html/index.js",
"content": "//Start up code\ndocument.getElementById('curlUrl').value = location.host;\n\nlet devMode = false;\nconst urlParams = new URLSearchParams(window.location.search);\nif(urlParams.has('dev')){\n devMode = true;\n}\nif(devMode){\n console.log('Developer mode active. Experimental and unstable functions active.')\n} else{\nconsole.log('Developer mode inactive. Append \"?dev\" to the URL.')\n}\n\nif(devMode){\n document.getElementById(\"fileJSONledbutton\").style.display = 'buttonclass'\n document.getElementById(\"gap2\").style.display = 'gap'\n} else {\n document.getElementById(\"fileJSONledbutton\").style.display = 'none'\n document.getElementById(\"gap2\").style.display = 'none'\n}\n\n\nlet httpArray = [];\nlet fileJSON = '';\n\n\n//On submit button pressed =======================\n\n\ndocument.getElementById(\"convertbutton\").addEventListener(\"click\", function() {\n \n let base64Image = document.getElementById('preview').src;\n if (isValidBase64Gif(base64Image)) {\n document.getElementById('image').src = base64Image;\n getPixelRGBValues(base64Image);\n document.getElementById('image-container').style.display = \"block\"\n document.getElementById(\"button-container\").style.display = \"\";\n\n } \n else {\n let infoDiv = document.getElementById('image-info');\n let imageInfo = '\n
\n \n \n\n Led Matrix Pixel Art Converter\n
\nConvert image to WLED JSON (pixel art on WLED matrix)
\n\n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n 255\n | \n
| \n \n | \n\n \n 256\n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n \n \n \n \n | \n \n \n \n \n \n \n | \n
\n \n
\n \n\n \n
\n ![]()
\n ![]()
\n
\n \n \n
\n \n
\n \n \n ![\"RawImage](\"\")
\n
\n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n
\n \n
\n
\n Version 1.0.4 - Help/About
\n WARNING! File does not appear to be a valid image
'\n infoDiv.innerHTML = imageInfo;\n infoDiv.style.display = \"block\"\n document.getElementById('image-container').style.display = \"none\";\n document.getElementById('JSONled').value = '';\n console.log(\"The string '\" + base64Image + \"' is not a valid base64 image.\");\n }\n\n});\n\n// Code for copying the generated string to clipboard\n\ncopyJSONledbutton.addEventListener('click', async () => {\n let JSONled = document.getElementById('JSONled');\n JSONled.select();\n try {\n await navigator.clipboard.writeText(JSONled.value);\n } catch (err) {\n try {\n await document.execCommand(\"copy\");\n } catch (err) {\n console.error('Failed to copy text: ', err);\n }\n }\n});\n\nsendJSONledbutton.addEventListener('click', async () => {\n if (window.location.protocol === \"https:\") {\n alert('Will only be available when served over http (or WLED is run over https)');\n } else {\n postPixels();\n }\n});\n\nfileJSONledbutton.addEventListener('click', async () => {\n if (window.location.protocol === \"https:\") {\n alert('Will only be available when served over http (or WLED is run over https)');\n } else {\n let JSONFileName = 'TheName.json'\n let urlString = 'http://'+document.getElementById('curlUrl').value+'/upload'\n\n sendAsFile(fileJSON, JSONFileName, urlString);\n }\n});\n\nasync function postPixels() {\n for (let i of httpArray) {\n try {\n console.log(i);\n console.log(i.length);\n const response = await fetch('http://'+document.getElementById('curlUrl').value+'/json/state', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n //'Content-Type': 'text/html; charset=UTF-8'\n },\n body: i\n });\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error(error);\n }\n }\n}\n//File uploader code\nconst dropZone = document.getElementById('drop-zone');\nconst filePicker = document.getElementById('file-picker');\nconst preview = document.getElementById('preview');\n\n// Listen for dragenter, dragover, and drop events\ndropZone.addEventListener('dragenter', dragEnter);\ndropZone.addEventListener('dragover', dragOver);\ndropZone.addEventListener('drop', dropped);\ndropZone.addEventListener('click', zoneClicked);\n\n// Listen for change event on file picker\nfilePicker.addEventListener('change', filePicked);\n\n// Handle zone click\nfunction zoneClicked(e) {\n e.preventDefault();\n //this.classList.add('drag-over');\n //alert('Hej');\n filePicker.click();\n}\n\n// Handle dragenter\nfunction dragEnter(e) {\n e.preventDefault();\n this.classList.add('drag-over');\n}\n\n// Handle dragover\nfunction dragOver(e) {\n e.preventDefault();\n}\n\n// Handle drop\nfunction dropped(e) {\n e.preventDefault();\n this.classList.remove('drag-over');\n\n // Get the dropped file\n const file = e.dataTransfer.files[0];\n updatePreview(file);\n}\n\n// Handle file picked\nfunction filePicked(e) {\n // Get the picked file\n const file = e.target.files[0];\n updatePreview(file);\n}\n\n// Update the preview image\nfunction updatePreview(file) {\n // Use FileReader to read the file\n const reader = new FileReader();\n reader.onload = function() {\n // Update the preview image\n preview.src = reader.result;\n document.getElementById(\"submitConvertDiv\").style.display = \"\";\n };\n reader.readAsDataURL(file);\n}\n\nfunction isValidBase64Gif(string) {\n // Use a regular expression to check that the string is a valid base64 string\n /*\n const base64gifPattern = /^data:image\\/gif;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/;\n const base64pngPattern = /^data:image\\/png;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/;\n const base64jpgPattern = /^data:image\\/jpg;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/;\n const base64webpPattern = /^data:image\\/webp;base64,([A-Za-z0-9+/:]{4})*([A-Za-z0-9+/:]{3}=|[A-Za-z0-9+/:]{2}==)?$/;\n */\n //REMOVED, Any image appear to work as long as it can be drawn to the canvas. Leaving code in for future use, possibly\n if (1==1 || base64gifPattern.test(string) || base64pngPattern.test(string) || base64jpgPattern.test(string) || base64webpPattern.test(string)) {\n return true;\n }\n else {\n //Not OK\n return false;\n }\n}\n\ndocument.getElementById(\"brightnessNumber\").oninput = function() {\n document.getElementById(\"brightnessValue\").textContent = this.value;\n}\n\ndocument.getElementById(\"colorLimitNumber\").oninput = function() {\n document.getElementById(\"colorLimitValue\").textContent = this.value;\n}\n\nvar formatSelector = document.getElementById(\"formatSelector\");\nvar hideableRows = document.querySelectorAll(\".ha-hide\");\nfor (var i = 0; i < hideableRows.length; i++) {\n hideableRows[i].classList.add(\"hide\");\n}\nformatSelector.addEventListener(\"change\", function() {\n for (var i = 0; i < hideableRows.length; i++) {\n hideableRows[i].classList.toggle(\"hide\", this.value !== \"ha\");\n }\n });\n\nfunction switchScale() {\n let scalePath = document.getElementById(\"scalePath\");\n let scaleTogglePath = document.getElementById(\"scaleTogglePath\");\n let color = scalePath.getAttribute(\"fill\");\n let d = ''\n if (color === accentColor) {\n color = accentTextColor;\n d = scaleToggleOffd\n document.getElementById(\"sizeDiv\").style.display = \"none\";\n // Set values to actual XY of image, if possible\n } else {\n color = accentColor;\n d = scaleToggleOnd\n document.getElementById(\"sizeDiv\").style.display = \"\";\n }\n scalePath.setAttribute(\"fill\", color);\n scaleTogglePath.setAttribute(\"fill\", color);\n scaleTogglePath.setAttribute(\"d\", d);\n}\n\n\nfunction sendAsFile(jsonStringInput, fileName, urlString) {\n //var jsonString = JSON.stringify({name: \"value\"});\n var file = new Blob([jsonStringInput], {type: 'application/json'});\n console.log(jsonStringInput)\n console.log(fileName);\n console.log(urlString);\n \n var formData = new FormData();\n formData.append('file', file, fileName);\n\n var xhr = new XMLHttpRequest();\n xhr.open('POST', urlString, true);\n xhr.onload = function() {\n if (xhr.status === 200) {\n console.log('File uploaded successfully!');\n } else {\n console.log('File upload failed!');\n }\n };\n xhr.send(formData);\n}\n\nfunction generateSegmentOptions(array) {\n //This function is prepared for a name property on each segment for easier selection\n //Currently the name is generated generically based on index\n var select = document.getElementById(\"targetSegment\");\n select.innerHTML = \"\";\n for (var i = 0; i < array.length; i++) {\n var option = document.createElement(\"option\");\n option.value = array[i].value;\n option.text = array[i].text;\n select.appendChild(option);\n if(i === 0) {\n option.selected = true;\n }\n }\n}\n\n//Initial population of segment selection\nfunction generateSegmentArray(noOfSegments) {\n var arr = [];\n for (var i = 0; i < noOfSegments; i++) {\n arr.push({\n value: i,\n text: \"Segment index \" + i\n });\n }\n return arr;\n}\n\n\n//Animate matrix\nvar matrixcircles = document.querySelectorAll(\"#logomatrix path\");\nvar intervalId;\n// Function that changes the color of a random circle to a lighter purple\nfunction changeColorOfDot() {\n // Get a random number between 0 and the number of circles\n var randomIndex = Math.floor(Math.random() * matrixcircles.length);\n // Get the circle at the random index\n var randomCircle = matrixcircles[randomIndex];\n\n \n // Store the current fill color\n var currentColor = randomCircle.getAttribute(\"fill\");\n // Change the color of the circle\n randomCircle.setAttribute(\"fill\", \"#bb8fbc\");\n setTimeout(() => {\n randomCircle.setAttribute(\"fill\", currentColor);\n clearInterval(intervalId);\n intervalId = setInterval(changeColorOfDot, randomInterval());\n }, 500);\n}\n\nfunction randomInterval() {\n var interval = Math.floor(Math.random() * (5 - 1 + 1)) + 1;\n return interval * 1000;\n}\n\n// call the function changeColorOfDot every 10 seconds\nintervalId = setInterval(changeColorOfDot, randomInterval());\n\nvar segmentData = generateSegmentArray(10);\n\ngenerateSegmentOptions(segmentData);\n\ndocument.getElementById(\"fileJSONledbutton\").innerHTML = \n' File to device'\n document.getElementById(\"convertbutton\").innerHTML = \n ' Convert to WLED JSON '; \n document.getElementById(\"copyJSONledbutton\").innerHTML = \n ' Copy to clipboard'; \n document.getElementById(\"sendJSONledbutton\").innerHTML = \n' Send to device';" }, { "path": "html/pixartmin.html", "content": "\n\n \n \n \n \n\n \n
\n \n
\n \n \n
\n \n \n \n \n \n"
},
{
"path": "html/site.webmanifest",
"content": "{\n \"name\": \"Led Matrix Pixel Art Convertor\",\n \"short_name\": \"ledconv\",\n \"icons\": [\n {\n \"src\": \"/favicon-32x32.png\",\n \"sizes\": \"32x322\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/favicon-32x32.png\",\n \"sizes\": \"32x32\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"display\": \"standalone\"\n }"
},
{
"path": "html/statics.js",
"content": "var curlStart = 'curl -X POST \"http://';\nvar curlMid1 = '/json/state\" -d \\'';\nvar curlEnd = '\\' -H \"Content-Type: application/json\"';\n\nconst 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 ';\nconst haMid1 = '\\n friendly_name: ';\nconst haMid2 = '\\n unique_id: ';\nconst haMid3= '\\n command_on: >\\n ';\nconst haMid4 = '\\n command_off: >\\n curl -X POST \"http://';\nconst haEnd = '/json/state\" -d \\'{\"on\":false}\\' -H \"Content-Type: application/json\"';\nconst haCommandLeading = ' ';\n\nconst JSONledStringStart = '{\"on\":true,\"bri\":';\nconst JSONledStringMid1 = ',\"seg\":{\"id\":';\nconst JSONledStringMid2 = ',\"i\":[';\n// const JSONledShortStringStart = '{';\n// const JSONledShortStringMid1 = '\"seg\":{\"i\":[';\nconst JSONledStringEnd = ']}}';\n\nvar accentColor = '#7E4C80';\nvar accentTextColor = '#777';\n\nvar 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\";\nvar 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\";\n\n"
},
{
"path": "html/styles.css",
"content": "\n.box {\n border: 2px solid white;\n}\nbody {\n font-family: 'Arcade', Arial, sans-serif;\n background-color: #151515;\n}\n\n.top-part {\n width: 600px;\n margin: 0 auto;\n}\n.container {\n max-width: 100% -40px;\n border-radius: 0px;\n padding: 20px;\n text-align: center;\n}\nh1 {\n font-size: 2.3em;\n color: rgb(126, 76, 128);\n margin: 1px 0;\n font-family: 'Arcade', Arial, sans-serif;\n line-height: 0.5;\n /*text-align: center;*/\n}\nh2 {\n font-size: 1.1em;\n color: rgba(126, 76, 128, 0.61);\n margin: 1px 0;\n font-family: 'Arcade', Arial, sans-serif;\n line-height: 0.5;\n text-align: center;\n}\nh3 {\n font-size: 0.7em;\n color: rgba(126, 76, 128, 0.61);\n margin: 1px 0;\n font-family: 'Arcade', Arial, sans-serif;\n line-height: 1.4;\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n}\n\np {\n font-size: 1.2em;\n color: rgb(119, 119, 119);\n line-height: 1.5;\n font-family: 'Arcade', Arial, sans-serif;\n}\n\n#fieldTable {\n font-size: 1 em;\n color: #777;\n line-height: 1;\n font-family: 'Arcade', Arial, sans-serif;\n}\n\n#scaleTable {\n font-size: 1 em;\n color: #777;\n line-height: 1;\n font-family: 'Arcade', Arial, sans-serif;\n}\n\n#drop-zone {\n display: block;\n width: 100%-40px;\n border: 3px dashed #7E4C80;\n border-radius: 0px;\n text-align: center;\n padding: 20px;\n margin: 0px;\n cursor: pointer;\n \n font-family: 'Arcade', Arial, sans-serif;\n font-size: 15px;\n color: #777;\n}\n\n#file-picker {\n display: none;\n}\n\n* select {\n background-color: #333333;\n color: #C0C0C0;\n border: 1px solid #C0C0C0;\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding: 0em;\n width: 100%;\n height: 27px;\n font-size: 15px;\n color: rgb(119, 119, 119);\n border-radius: 0;\n}\n\n* input[type=range] {\n -webkit-appearance:none;\n flex-grow: 1;\n border-radius: 0px;\n background: linear-gradient(to right, #333333 0%, #333333 100%);\n color: #C0C0C0;\n border: 1px solid #C0C0C0; \n margin-top: 0.5em; \n margin-left: 0em; \n}\n\ninput[type=\"range\"]::-webkit-slider-thumb{\n -webkit-appearance:none;\n width: 25px;\n height:25px;\n background:#7E4C80;\n position:relative;\n z-index:3;\n}\n\n.rangeNumber{\n width: 20px;\n vertical-align: middle;\n}\n\n.fullTextField[type=text] {\n background-color: #333333;\n border: 1px solid #C0C0C0;\n padding-inline-start: 5px;\n margin-top: 10px;\n width: 100%;\n height: 24px;\n border-radius: 0px;\n font-family: 'Arcade', Arial, sans-serif;\n font-size: 15px;\n color: rgb(119, 119, 119);\n}\n\n* input[type=submit] {\n background-color: #333333;\n border: 1px solid #C0C0C0;\n padding: 0.5em;\n width: 100%;\n border-radius: 0px;\n font-family: 'Arcade', Arial, sans-serif;\n font-size: 1.3em;\n color: rgb(119, 119, 119);\n}\n\n* button {\n background-color: #333333;\n border: 1px solid #C0C0C0;\n padding-inline: 5px;\n width: 100%;\n border-radius: 0px;\n font-family: 'Arcade', Arial, sans-serif;\n font-size: 1em;\n color: rgb(119, 119, 119);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\ntextarea {\n grid-row: 1 / 2;\n width: 100%;\n height: 200px;\n background-color: #333333;\n border: 1px solid #C0C0C0;\n \n color: #777;\n}\n.hide {\n display: none;\n}\n.grids-class{\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n display: grid;\n grid-template-columns: repeat(auto-fill, 20px);\n grid-template-rows: repeat(auto-fill, 20px);\n grid-gap: 0px;\n}\n.svg-icon {\n vertical-align: middle;\n}\n.buttondiv-class {\n flex: 1;\n display: inline-block;\n}\n\n.buttondivmid-class {\n width: 10px;\n display: inline-block;\n}\n#image-container {\n display: grid;\n grid-template-rows: 1fr 1fr;\n}\n#button-container {\n display: flex;\n padding-bottom: 10px;\n padding-top: 10px;\n}\n\n.buttonclass {\n flex: 1;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n.gap {\n width: 10px;\n}\n\n#submitConvert::before {\n content: \"\";\n display: inline-block;\n background-image: url('data:image/svg+xml;utf8, ');\n width: 36px;\n height: 36px;\n}\n\n#sizeDiv * {\n display: inline-block;\n}\n.sizeInputFields{\n width: 50px;\n background-color: #333333;\n border: 1px solid #C0C0C0;\n padding-inline-start: 5px;\n margin-top: -5px;\n height: 24px;\n border-radius: 0px;\n font-family: 'Arcade', Arial, sans-serif;\n font-size: 15px;\n color: rgb(119, 119, 119);\n}\na:link {\n color: rgba(126, 76, 128, 0.61);\n background-color: transparent;\n text-decoration: none;\n}\n\na:visited {\n color: rgba(126, 76, 128, 0.61);\n background-color: transparent;\n text-decoration: none;\n}\n\na:hover {\n color: rgb(126, 76, 128);\n background-color: transparent;\n text-decoration: none;\n}\n\na:active {\n color: rgba(126, 76, 128, 0.61);\n background-color: transparent;\n text-decoration: none;\n}"
},
{
"path": "infoFiles/FlowDesignDocument.md",
"content": "***WLED Command Runner*** \n**Design document**\n\nNaming conventions\nA flow is the “top level” object. It is the container of all other info and is the “thing” we call to start running a command flow.\nA step is the “timetable” that the command runner goes through, from top to bottom deciding what sets to call, in what order and how long to wait until running the next set.\nA set is what the flow internally handles. When the runner goes through the flow it runs one set and then waits until it is time to run the next set. A set is a (any) number of API commands that are to be run in sequence (without delaying in-between)\nA command is any WLED API command, following the standard. \nThe reason for arranging commands in sets is that WLED has a problem with running to massive commands, i.e. setting hundreds of leds. So the desired outcome needs to be split into several commands that can be run one after another.\n\nflows are uploaded as files (to /edit) with the template flow_[someID].JSON\n\nUsage:\nA Flow is made up off steps. Each step references a set (of commands)\nA flow runner should, when triggerd, \n1. find the file with the correct flow\n2. get the array of steps\n3. for each step find the set (of commands)\n4. Send the commands to WLED\n5. Sleep/Wait for the stipulated number of ms\n6. Move to next step (as per 4 above)\n7. repeat until end of steps\n8. If repeat = true start over from step 1\n"
},
{
"path": "infoFiles/runnerFlowTemplate.json",
"content": "{\n \"description\" : \"My first flow\",\n \"created\": \"2023-04-05 14:42\",\n \"repeat\": true,\n \"sets\": [\n {\n \"id\": \"numeroUno\",\n \"commands\": [\n {\n \"position\": 1,\n \"command\": \"{Valid WLED API COMMAND}\"\n },\n {\n \"position\": 2,\n \"command\": \"{Valid WLED API COMMAND}\"\n },\n {\n \"position\": 3,\n \"command\": \"{Valid WLED API COMMAND}\"\n }\n ]\n },{\n \"id\": \"SecondToNone\",\n \"commands\": [\n {\n \"position\": 1,\n \"command\": \"{Valid WLED API COMMAND}\"\n },\n {\n \"position\": 2,\n \"command\": \"{Valid WLED API COMMAND}\"\n }, \n {\n \"position\": 3,\n \"command\": \"{Valid WLED API COMMAND}\"\n }\n ]\n },{\n \"id\": \"4\",\n \"commands\": [\n {\n \"position\": 1,\n \"command\": \"{Valid WLED API COMMAND}\"\n }\n ]\n },{\n \"id\": \"2\",\n \"commands\": [\n {\n \"position\": 1,\n \"command\": \"{Valid WLED API COMMAND}\"\n },\n {\n \"position\": 2,\n \"command\": \"{Valid WLED API COMMAND}\"\n }\n ]\n }\n ],\n \"steps\":[\n {\n \"step\": 1,\n \"commandId\": \"SecondToNone\",\n \"duration\": 500\n },\n {\n \"step\": 2,\n \"commandId\": \"numeroUno\",\n \"duration\": 300\n },\n {\n \"step\": 3,\n \"commandId\": \"SecondToNone\",\n \"duration\": 800\n },\n {\n \"step\": 4,\n \"commandId\": \"4\",\n \"duration\": 1000\n },\n {\n \"step\": 5,\n \"commandId\": \"2\",\n \"duration\": 500\n },\n {\n \"step\": 6,\n \"commandId\": \"SecondToNone\",\n \"duration\": 500\n }\n ]\n}\n"
},
{
"path": "pixart.htm",
"content": " \n
\n \n \n \n Led Matrix Pixel Art Converter\n
\nConvert image to WLED JSON (pixel art on WLED matrix)
\n\n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n 255\n | \n
| \n \n | \n\n \n 256\n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n | \n\n \n | \n
| \n \n \n \n \n \n | \n \n \n \n \n \n \n | \n
\n \n
\n \n\n \n
\n ![]()
\n ![]()
\n
\n \n \n
\n \n
\n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n
\n
\n Version 1.0.4 - Help/About
\n \n WLED Pixel Art Converter
\nConvert image to WLED JSON (pixel art on WLED matrix)
| \n | |
| 128 | |
| 256 | |
| \n | |
| \n | |
| \n | |
| \n \n |
| Scale image | \n \n |
\n
\n
\n