From b0b68c695ccddbff375b9394d8af488230d41851 Mon Sep 17 00:00:00 2001 From: Henrik Date: Mon, 23 Jan 2023 21:30:55 +0100 Subject: [PATCH] Size optimizations and cleanup --- wled00/data/pixart/boxdraw.js | 2 - wled00/data/pixart/getPixelValues.js | 66 ++++--- wled00/data/pixart/pixart.htm | 4 +- wled00/data/pixart/pixart.js | 248 ++++++++++----------------- wled00/data/pixart/statics.js | 42 +++++ 5 files changed, 168 insertions(+), 194 deletions(-) diff --git a/wled00/data/pixart/boxdraw.js b/wled00/data/pixart/boxdraw.js index 36642c0b..c000c2e6 100644 --- a/wled00/data/pixart/boxdraw.js +++ b/wled00/data/pixart/boxdraw.js @@ -1,8 +1,6 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) { var w = window; - // Get a reference to the canvas element - var canvas = gId('pixelCanvas'); // Get the canvas context var ctx = canvas.getContext('2d', { willReadFrequently: true }); diff --git a/wled00/data/pixart/getPixelValues.js b/wled00/data/pixart/getPixelValues.js index 300bccbc..ffbf94a7 100644 --- a/wled00/data/pixart/getPixelValues.js +++ b/wled00/data/pixart/getPixelValues.js @@ -1,45 +1,41 @@ function getPixelRGBValues(base64Image) { httpArray = []; - fileJSON = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${gId('targetSegment').value},"i":[`; + fileJSON = `{"on":true,"bri":${brgh.value},"seg":{"id":${tSg.value},"i":[`; //Which object holds the secret to the segment ID - const segm = gId('targetSegment'); + let segID = 0; - if(segm.style.display == "flex"){ - segID = segm.value + if(tSg.style.display == "flex"){ + segID = tSg.value } else { - segID = gId('segID').value; + segID = sID.value; } //const copyJSONledbutton = gId('copyJSONledbutton'); - const JSONled = gId('JSONled'); - const maxNoOfColorsInCommandSting = parseInt(gId('colorLimitNumber').value); + const maxNoOfColorsInCommandSting = parseInt(cLN.value); let hybridAddressing = false; let selectedIndex = -1; - let selector = gId("formatSelector"); - selectedIndex = selector.selectedIndex; - const formatSelection = selector.options[selectedIndex].value; + selectedIndex = frm.selectedIndex; + const formatSelection = frm.options[selectedIndex].value; - selector = gId("ledSetupSelector"); - selectedIndex = selector.selectedIndex; - const ledSetupSelection = selector.options[selectedIndex].value; + + selectedIndex = lSS.selectedIndex; + const ledSetupSelection = lSS.options[selectedIndex].value; - selector = gId("colorFormatSelector"); - selectedIndex = selector.selectedIndex; + selectedIndex = cFS.selectedIndex; let hexValueCheck = true; - if (selector.options[selectedIndex].value == 'dec'){ + if (cFS.options[selectedIndex].value == 'dec'){ hexValueCheck = false } - selector = gId("addressingSelector"); - selectedIndex = selector.selectedIndex; + selectedIndex = aS.selectedIndex; let segmentValueCheck = true; //If Range or Hybrid - if (selector.options[selectedIndex].value == 'single'){ + if (aS.options[selectedIndex].value == 'single'){ segmentValueCheck = false - } else if (selector.options[selectedIndex].value == 'hybrid'){ + } else if (aS.options[selectedIndex].value == 'hybrid'){ hybridAddressing = true; } @@ -67,10 +63,10 @@ function getPixelRGBValues(base64Image) { // Wait for the image to load before drawing it onto the canvas image.onload = function() { - let scalePath = gId("scaleDiv").children[0].children[0]; + let scalePath = scDiv.children[0].children[0]; let color = scalePath.getAttribute("fill"); - let sizeX = gId("sizeX").value; - let sizeY = gId("sizeY").value; + 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 @@ -270,10 +266,10 @@ function getPixelRGBValues(base64Image) { //For every commandString in the array for (let i = 0; i < commandArray.length; i++) { - let thisJSONledString = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`; + let thisJSONledString = `{"on":true,"bri":${brgh.value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`; httpArray.push(thisJSONledString); - let thiscurlString = `curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'${thisJSONledString}\' -H "Content-Type: application/json"`; + 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){ @@ -288,28 +284,28 @@ function getPixelRGBValues(base64Image) { haString = `#Uncomment if you don\'t allready have these defined in your switch section of your configuration.yaml #- platform: command_line #switches: - ${gId('haID').value} - friendly_name: ${gId('haName').value} - unique_id: ${gId('haUID').value} + ${haIDe.value} + friendly_name: ${haNe.value} + unique_id: ${haUe.value} command_on: > ${curlString} command_off: > - curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`; + curl -X POST "http://${gurl.value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`; if (formatSelection == 'wled'){ - JSONled.value = JSONledString; + JLD.value = JSONledString; } else if (formatSelection == 'curl'){ - JSONled.value = curlString; + JLD.value = curlString; } else if (formatSelection == 'ha'){ - JSONled.value = haString; + JLD.value = haString; } else { - JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.' + JLD.value = 'ERROR!/n' + formatSelection + ' is an unknown format.' } fileJSON += ']}}'; - let infoDiv = gId('image-info'); - let canvasDiv = gId('image-info'); + 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.

' } diff --git a/wled00/data/pixart/pixart.htm b/wled00/data/pixart/pixart.htm index 4c29a44a..889bd37d 100644 --- a/wled00/data/pixart/pixart.htm +++ b/wled00/data/pixart/pixart.htm @@ -194,11 +194,9 @@
-
-
-

Version 1.0.6
 -  Help/About

+

Version 1.0.7
 -  Help/About

diff --git a/wled00/data/pixart/pixart.js b/wled00/data/pixart/pixart.js index 3a048e2e..f32ebe12 100644 --- a/wled00/data/pixart/pixart.js +++ b/wled00/data/pixart/pixart.js @@ -3,71 +3,55 @@ // let locip = prompt("File Mode. Please enter WLED IP!"); // gId('curlUrl').value = locip; //} else -gId('curlUrl').value = location.host; +// +//Start up code +let devMode = false; //Remove +gurl.value = location.host; -let devMode = false; const urlParams = new URLSearchParams(window.location.search); -if(urlParams.has('dev')){ - devMode = true; +if (gurl.value.length < 1){ + gurl.value = "Missing_Host"; } -if(devMode){ - console.log('Developer mode active. Experimental and unstable functions active.') -} else{ - console.log('Developer mode inactive. Append "?dev" to the URL.') -} - -if(devMode){ - gId("fileJSONledbutton").style.display = 'buttonclass' - gId("gap2").style.display = 'gap' -} else { - gId("fileJSONledbutton").style.display = 'none' - gId("gap2").style.display = 'none' -} - - -let httpArray = []; -let fileJSON = ''; function gen(){ //Generate image if enough info is in place //Is host non empty //Is image loaded //is scale > 0 - if (((gId("sizeX").value > 0 && gId("sizeY").value > 0) || gId("sizeDiv").style.display == 'none') && gId("curlUrl").value.length > 0 && gId("preview").style.display != 'none'){ + if (((szX.value > 0 && szY.value > 0) || szDiv.style.display == 'none') && gurl.value.length > 0 && prw.style.display != 'none'){ //regenerate - let base64Image = gId('preview').src; + let base64Image = prw.src; if (isValidBase64Gif(base64Image)) { - gId('image').src = base64Image; + im.src = base64Image; getPixelRGBValues(base64Image); - gId('image-container').style.display = "block"; - gId("button-container").style.display = ""; + imcn.style.display = "block"; + bcn.style.display = ""; } else { - let infoDiv = gId('image-info'); let imageInfo = '

WARNING! File does not appear to be a valid image

'; - infoDiv.innerHTML = imageInfo; - infoDiv.style.display = "block"; - gId('image-container').style.display = "none"; - gId('JSONled').value = ''; + 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."); } } - var svg = gId("getSegmentsSVGpath"); - if(gId("curlUrl").value.length > 0){ - svg.setAttribute("fill", accentColor); + + if(gurl.value.length > 0){ + gId("sSg").setAttribute("fill", accentColor); } else{ - svg.setAttribute("fill", accentTextColor); - let ts = gId('targetSegment'); + gId("sSg").setAttribute("fill", accentTextColor); + let ts = tSg; ts.style.display = "none"; ts.innerHTML = ""; - gId('segID').style.display = "flex"; + sID.style.display = "flex"; } } // Code for copying the generated string to clipboard -gId("copyJSONledbutton").addEventListener('click', async () => { - let JSONled = gId('JSONled'); +cjb.addEventListener('click', async () => { + let JSONled = JLD; JSONled.select(); try { await navigator.clipboard.writeText(JSONled.value); @@ -82,26 +66,26 @@ gId("copyJSONledbutton").addEventListener('click', async () => { // Event listeners ======================= -gId("ledSetupSelector").addEventListener("change", gen); -gId("sizeY").addEventListener("change", gen); -gId("sizeX").addEventListener("change", gen); -gId("formatSelector").addEventListener("change", gen); -gId("colorFormatSelector").addEventListener("change", gen); -gId("addressingSelector").addEventListener("change", gen); -gId("brightnessNumber").addEventListener("change", gen); -gId("colorLimitNumber").addEventListener("change", gen); -gId("haID").addEventListener("change", gen); -gId("haUID").addEventListener("change", gen); -gId("haName").addEventListener("change", gen); -gId("curlUrl").addEventListener("change", gen); -gId("segID").addEventListener("change", gen); -gId("preview").addEventListener("load", gen); +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); -gId("targetSegment").addEventListener("change", () => { - sop = this.options[this.selectedIndex]; - gId("sizeX").value = sop.dataset.x; - gId("sizeY").value = sop.dataset.y; +tSg.addEventListener("change", () => { + sop = tSg.options[tSg.selectedIndex]; + szX.value = sop.dataset.x; + szY.value = sop.dataset.y; gen(); }); @@ -113,20 +97,30 @@ gId("sendJSONledbutton").addEventListener('click', async () => { } }); -gId("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://'+gId('curlUrl').value+'/upload'; +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; +} - sendAsFile(fileJSON, JSONFileName, urlString); +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() { - svg = gId("sendSvgP"); - svg.setAttribute("fill", prsCol); + let ss = gId("sendSvgP"); + ss.setAttribute("fill", prsCol); let er = false; for (let i of httpArray) { try { @@ -149,58 +143,23 @@ async function postPixels() { } if(er){ //Something went wrong - svg.setAttribute("fill", redColor); + ss.setAttribute("fill", redColor); setTimeout(function(){ - svg.setAttribute("fill", accentTextColor); + ss.setAttribute("fill", accentTextColor); }, 1000); } else { // A, OK - svg.setAttribute("fill", greenColor); + ss.setAttribute("fill", greenColor); setTimeout(function(){ - svg.setAttribute("fill", accentColor); + ss.setAttribute("fill", accentColor); }, 1000); } } -function sendAsFile(jsonStringInput, fileName, urlString) { - svg = gId("fileSvgP"); - svg.setAttribute("fill", prsCol); - var file = new Blob([jsonStringInput], {type: 'application/json'}); - if (devMode) { - 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 = () => { - if (xhr.status === 200) { - // A, OK - svg.setAttribute("fill", greenColor); - setTimeout(function(){ - svg.setAttribute("fill", accentTextColor); - }, 1000); - if (devMode) console.log('File uploaded successfully!'); - } else { - //Something went wrong - svg.setAttribute("fill", redColor); - setTimeout(function(){ - svg.setAttribute("fill", accentColor); - }, 1000); - if (devMode) console.log('File upload failed!'); - } - }; - xhr.send(formData); -} - //File uploader code const dropZone = gId('drop-zone'); const filePicker = gId('file-picker'); -const preview = gId('preview'); +const preview = prw; // Listen for dragenter, dragover, and drop events dropZone.addEventListener('dragenter', dragEnter); @@ -255,7 +214,7 @@ function updatePreview(file) { // Update the preview image preview.src = reader.result; //gId("submitConvertDiv").style.display = ""; - gId("preview").style.display = ""; + prw.style.display = ""; }; reader.readAsDataURL(file); } @@ -277,46 +236,30 @@ function isValidBase64Gif(string) { } } -gId("brightnessNumber").oninput = () => { - let bn = gId("brightnessNumber"); - gId("brightnessValue").textContent = bn.value; - let perc = parseInt(bn.value)*100/255; - var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`; - bn.style.backgroundImage = val; -} - -gId("colorLimitNumber").oninput = () => { - let cln = gId("colorLimitNumber"); - gId("colorLimitValue").textContent = cln.value; - let perc = parseInt(cln.value)*100/512; - var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`; - cln.style.backgroundImage = val; -} - var hideableRows = d.querySelectorAll(".ha-hide"); for (var i = 0; i < hideableRows.length; i++) { hideableRows[i].classList.add("hide"); } -gId("formatSelector").addEventListener("change", () => { +frm.addEventListener("change", () => { for (var i = 0; i < hideableRows.length; i++) { - hideableRows[i].classList.toggle("hide", gId("formatSelector").value !== "ha"); + hideableRows[i].classList.toggle("hide", frm.value !== "ha"); } }); function switchScale() { //let scalePath = gId("scaleDiv").children[1].children[0] - let scaleTogglePath = gId("scaleDiv").children[0].children[0] + let scaleTogglePath = scDiv.children[0].children[0] let color = scaleTogglePath.getAttribute("fill"); let d = ''; if (color === accentColor) { color = accentTextColor; d = scaleToggleOffd; - gId("sizeDiv").style.display = "none"; + szDiv.style.display = "none"; // Set values to actual XY of image, if possible } else { color = accentColor; d = scaleToggleOnd; - gId("sizeDiv").style.display = ""; + szDiv.style.display = ""; } //scalePath.setAttribute("fill", color); scaleTogglePath.setAttribute("fill", color); @@ -327,15 +270,14 @@ function switchScale() { 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 = gId("targetSegment"); - select.innerHTML = ""; + 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; - select.appendChild(option); + tSg.appendChild(option); if(i === 0) { option.selected = true; } @@ -344,8 +286,7 @@ function generateSegmentOptions(array) { // Get segments from device async function getSegments() { - cv = gId('curlUrl').value; - var sp = gId("getSegmentsSVGpath"); + cv = gurl.value; if (cv.length > 0 ){ try { var arr = []; @@ -361,29 +302,29 @@ async function getSegments() { }); } generateSegmentOptions(arr); - gId('targetSegment').style.display = "flex"; - gId('segID').style.display = "none"; - sp.setAttribute("fill", greenColor); + tSg.style.display = "flex"; + sID.style.display = "none"; + gId("sSg").setAttribute("fill", greenColor); setTimeout(function(){ - sp.setAttribute("fill", accentColor); + gId("sSg").setAttribute("fill", accentColor); }, 1000); } catch (error) { console.error(error); - sp.setAttribute("fill", redColor); + gId("sSg").setAttribute("fill", redColor); setTimeout(function(){ - sp.setAttribute("fill", accentColor); + gId("sSg").setAttribute("fill", accentColor); }, 1000); - gId('targetSegment').style.display = "none"; - gId('segID').style.display = "flex"; + tSg.style.display = "none"; + sID.style.display = "flex"; } } else{ - sp.setAttribute("fill", redColor); + gId("sSg").setAttribute("fill", redColor); setTimeout(function(){ - sp.setAttribute("fill", accentTextColor); + gId("sSg").setAttribute("fill", accentTextColor); }, 1000); - gId('targetSegment').style.display = "none"; - gId('segID').style.display = "flex"; + tSg.style.display = "none"; + sID.style.display = "flex"; } } @@ -403,20 +344,19 @@ var segmentData = generateSegmentArray(10); generateSegmentOptions(segmentData); -gId("getSegmentsDiv").innerHTML = -'' -gId("fileJSONledbutton").innerHTML = -'  File to device' +seDiv.innerHTML = +'' /*gId("convertbutton").innerHTML = '   Convert to WLED JSON '; */ -gId("copyJSONledbutton").innerHTML = +cjb.innerHTML = '   Copy to clipboard'; gId("sendJSONledbutton").innerHTML = '   Send to device'; -//After everything is loaded, check if we hav a possible IP/host -var svg = gId("getSegmentsSVGpath"); -if(gId("curlUrl").value.length > 0){ - svg.setAttribute("fill", accentColor); +//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/statics.js b/wled00/data/pixart/statics.js index 396edd3c..b4f3c407 100644 --- a/wled00/data/pixart/statics.js +++ b/wled00/data/pixart/statics.js @@ -1,3 +1,44 @@ +//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'; @@ -7,3 +48,4 @@ 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