From f902ebadcc050459f50c76d192b007e8b46c1f82 Mon Sep 17 00:00:00 2001 From: Henrik Date: Sun, 22 Jan 2023 18:47:34 +0100 Subject: [PATCH] UI, simpler process, get more data from device --- wled00/data/pixart/boxdraw.js | 3 +- wled00/data/pixart/getPixelValues.js | 10 +- wled00/data/pixart/pixart.htm | 12 +- wled00/data/pixart/pixart.js | 286 +++++++++++++++++++-------- wled00/data/pixart/statics.js | 1 + 5 files changed, 224 insertions(+), 88 deletions(-) diff --git a/wled00/data/pixart/boxdraw.js b/wled00/data/pixart/boxdraw.js index f8366bc74..cc17ac036 100644 --- a/wled00/data/pixart/boxdraw.js +++ b/wled00/data/pixart/boxdraw.js @@ -4,7 +4,7 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) { var canvas = gId('pixelCanvas'); // Get the canvas context - var ctx = canvas.getContext('2d'); + var ctx = canvas.getContext('2d', { willReadFrequently: true }); // Set the width and height of the canvas if (window.innerHeight < window.innerWidth) { @@ -63,6 +63,5 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) { ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = window.innerWidth; ctx.putImageData(imageData, xOffset, 0); - console.log(xOffset); } diff --git a/wled00/data/pixart/getPixelValues.js b/wled00/data/pixart/getPixelValues.js index 849ae74dd..6eb438052 100644 --- a/wled00/data/pixart/getPixelValues.js +++ b/wled00/data/pixart/getPixelValues.js @@ -5,13 +5,11 @@ function getPixelRGBValues(base64Image) { //Which object holds the secret to the segment ID const segm = gId('targetSegment'); let segID = 0; - console.log(segm.style.display) if(segm.style.display == "flex"){ segID = segm.value } else { segID = gId('segID').value; } - console.log(segID) //const copyJSONledbutton = gId('copyJSONledbutton'); @@ -63,7 +61,7 @@ function getPixelRGBValues(base64Image) { // Create an off-screen canvas var canvas = cE('canvas'); - var context = canvas.getContext('2d'); + var context = canvas.getContext('2d', { willReadFrequently: true }); // Create an image element and set its src to the base64 image var image = new Image(); @@ -81,6 +79,12 @@ function getPixelRGBValues(base64Image) { //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 diff --git a/wled00/data/pixart/pixart.htm b/wled00/data/pixart/pixart.htm index 0aa497a8e..4c29a44a0 100644 --- a/wled00/data/pixart/pixart.htm +++ b/wled00/data/pixart/pixart.htm @@ -151,9 +151,9 @@ @@ -174,11 +174,11 @@
- + @@ -187,7 +187,7 @@
-

Version 1.0.5
 -  Help/About

+

Version 1.0.6
 -  Help/About

diff --git a/wled00/data/pixart/pixart.js b/wled00/data/pixart/pixart.js index 409f591e5..f63b9e1b9 100644 --- a/wled00/data/pixart/pixart.js +++ b/wled00/data/pixart/pixart.js @@ -24,27 +24,41 @@ if(devMode){ let httpArray = []; let fileJSON = ''; - -//On submit button pressed ======================= - - -gId("convertbutton").addEventListener("click", () => { - let base64Image = gId('preview').src; - if (isValidBase64Gif(base64Image)) { - gId('image').src = base64Image; - getPixelRGBValues(base64Image); - gId('image-container').style.display = "block"; - gId("button-container").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 = ''; - if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image."); +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'){ + //regenerate + let base64Image = gId('preview').src; + if (isValidBase64Gif(base64Image)) { + gId('image').src = base64Image; + getPixelRGBValues(base64Image); + gId('image-container').style.display = "block"; + gId("button-container").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 = ''; + 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); + } else{ + svg.setAttribute("fill", accentTextColor); + let ts = gId('targetSegment'); + ts.style.display = "none"; + ts.innerHTML = ""; + gId('segID').style.display = "flex"; + } +} + // Code for copying the generated string to clipboard @@ -62,6 +76,77 @@ 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("convertbutton").addEventListener("click", () => { + gen(); +}); +*/ +gId("targetSegment").addEventListener("change", function() { + sop = this.options[this.selectedIndex]; + gId("sizeX").value = sop.dataset.x; + gId("sizeY").value = sop.dataset.y; + gen(); +}); + +gId("segID").addEventListener("change", () => { + gen(); +}); + +gId("preview").addEventListener("load", function() { + 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)'); @@ -82,6 +167,9 @@ gId("fileJSONledbutton").addEventListener('click', async () => { }); async function postPixels() { + svg = gId("sendSvgP"); + svg.setAttribute("fill", prsCol); + let er = false; for (let i of httpArray) { try { if (devMode) console.log(i); @@ -98,9 +186,59 @@ async function postPixels() { if (devMode) console.log(data); } catch (error) { console.error(error); + er = true; } } + if(er){ + //Something went wrong + svg.setAttribute("fill", redColor); + setTimeout(function(){ + svg.setAttribute("fill", accentTextColor); + }, 1000); + } else { + // A, OK + svg.setAttribute("fill", greenColor); + setTimeout(function(){ + svg.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'); @@ -141,14 +279,14 @@ function dropped(e) { // Get the dropped file const file = e.dataTransfer.files[0]; - updatePreview(file); + updatePreview(file) } // Handle file picked function filePicked(e) { // Get the picked file const file = e.target.files[0]; - updatePreview(file); + updatePreview(file) } // Update the preview image @@ -158,7 +296,7 @@ function updatePreview(file) { reader.onload = () => { // Update the preview image preview.src = reader.result; - gId("submitConvertDiv").style.display = ""; + //gId("submitConvertDiv").style.display = ""; gId("preview").style.display = ""; }; reader.readAsDataURL(file); @@ -225,31 +363,7 @@ function switchScale() { //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'}); - 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) { - if (devMode) console.log('File uploaded successfully!'); - } else { - if (devMode) console.log('File upload failed!'); - } - }; - xhr.send(formData); + gen(); } function generateSegmentOptions(array) { @@ -261,6 +375,8 @@ function generateSegmentOptions(array) { 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); if(i === 0) { option.selected = true; @@ -270,34 +386,43 @@ function generateSegmentOptions(array) { // Get segments from device async function getSegments() { - try { - var arr = []; - const response = await fetch('http://'+gId('curlUrl').value+'/json/state'); - const json = await response.json(); - console.log(json); - let ids = json.seg.map(segment => segment.id); - console.log(ids); - for (var i = 0; i < ids.length; i++) { - arr.push({ - value: ids[i], - text: "Segment index " + ids[i] - }); - generateSegmentOptions(arr); - gId('targetSegment').style.display = "flex"; - gId('segID').style.display = "none"; - var svg = gId("getSegmentsSVGpath"); + cv = gId('curlUrl').value; + var sp = gId("getSegmentsSVGpath"); + 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); + gId('targetSegment').style.display = "flex"; + gId('segID').style.display = "none"; + sp.setAttribute("fill", greenColor); + setTimeout(function(){ + sp.setAttribute("fill", accentColor); + }, 1000); - svg.setAttribute("fill", greenColor); + } catch (error) { + console.error(error); + sp.setAttribute("fill", redColor); + setTimeout(function(){ + sp.setAttribute("fill", accentColor); + }, 1000); + gId('targetSegment').style.display = "none"; + gId('segID').style.display = "flex"; + } + } else{ + sp.setAttribute("fill", redColor); setTimeout(function(){ - svg.setAttribute("fill", accentTextColor); - }, 1000); - } - } catch (error) { - console.error(error); - var svgr = gId("getSegmentsSVGpath"); - svgr.setAttribute("fill", redColor); - setTimeout(function(){ - svgr.setAttribute("fill", accentTextColor); + sp.setAttribute("fill", accentTextColor); }, 1000); gId('targetSegment').style.display = "none"; gId('segID').style.display = "flex"; @@ -323,10 +448,17 @@ generateSegmentOptions(segmentData); gId("getSegmentsDiv").innerHTML = '' gId("fileJSONledbutton").innerHTML = -'  File to device' -gId("convertbutton").innerHTML = +'  File to device' +/*gId("convertbutton").innerHTML = '   Convert to WLED JSON '; +*/ gId("copyJSONledbutton").innerHTML = '   Copy to clipboard'; gId("sendJSONledbutton").innerHTML = -'   Send to device'; \ No newline at end of file +'   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); +} diff --git a/wled00/data/pixart/statics.js b/wled00/data/pixart/statics.js index 2fdac4c00..64da055de 100644 --- a/wled00/data/pixart/statics.js +++ b/wled00/data/pixart/statics.js @@ -19,6 +19,7 @@ const JSONledStringEnd = ']}}'; var accentColor = '#eee'; var accentTextColor = '#777'; +var prsCol = '#ccc'; var greenColor = '#056b0a'; var redColor = '#6b050c';