UI, simpler process, get more data from device

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);
 }
 

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

wled00/data/pixart/pixart.htm

@@ -151,9 +151,9 @@
               </td>
               <td style="vertical-align: middle;">
                 <div id="sizeDiv" style="display: none;">
-                  <label for="sizeX">W : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" value="0">
+                  <label for="sizeX">W : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" min="1" value="16">
                   &nbsp;&nbsp;&nbsp;
-                  <label for="sizeY">H : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" value="0">
+                  <label for="sizeY">H : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" min="1" value="16">
                 </div>
               </td>
             </tr>
@@ -174,11 +174,11 @@
           <div style="width: 100%; text-align: center;">
             <img id="preview" style="display: none; margin: 0 auto;">
           </div>
-          
+          <!--
           <div id="submitConvertDiv" style="display: none;">
             <button id="convertbutton" class="buttonclass"></button>
           </div>
-          
+          -->
           <div id="raw-image-container" style="display: none">
             <img id="image" src="" alt="RawImage image">
           </div>
@@ -187,7 +187,7 @@
         
         <div id="image-container" style="display: none;">
           <div id="image-info" style="display: none"></div>
-          <textarea id="JSONled"></textarea>
+          <textarea id="JSONled" readonly></textarea>
         </div>
   
         <div id="button-container" style="display: none;">
@@ -198,7 +198,7 @@
           <button id="fileJSONledbutton" class="buttonclass"></button>
         </div>
         <div>
-          <h3><div id="version">Version 1.0.5</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
+          <h3><div id="version">Version 1.0.6</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
         </div>
       </div>
       <div id=bottom-part style="display: none" class=bottom-part></div>

wled00/data/pixart/pixart.js

@@ -24,27 +24,41 @@ if(devMode){
 let httpArray = [];
 let fileJSON = '';
 
-
+function gen(){
-//On submit button pressed =======================
+  //Generate image if enough info is in place
-
+  //Is host non empty
-
+  //Is image loaded
-gId("convertbutton").addEventListener("click", () => {
+  //is scale > 0
-  let base64Image = gId('preview').src;
+  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 (isValidBase64Gif(base64Image)) {
+    //regenerate
-    gId('image').src = base64Image;
+    let base64Image = gId('preview').src;
-    getPixelRGBValues(base64Image);
+    if (isValidBase64Gif(base64Image)) {
-    gId('image-container').style.display = "block";
+      gId('image').src = base64Image;
-    gId("button-container").style.display = "";
+      getPixelRGBValues(base64Image);
-  } else {
+      gId('image-container').style.display = "block";
-    let infoDiv = gId('image-info');
+      gId("button-container").style.display = "";
-    let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>';
+    } else {
-    infoDiv.innerHTML = imageInfo;
+      let infoDiv = gId('image-info');
-    infoDiv.style.display = "block";
+      let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>';
-    gId('image-container').style.display = "none";
+      infoDiv.innerHTML = imageInfo;
-    gId('JSONled').value = '';
+      infoDiv.style.display = "block";
-    if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image.");
+      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);
-}
+  gen();
-
-
-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);
 }
 
 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 {
+  cv = gId('curlUrl').value;
-    var arr = [];
+  var sp = gId("getSegmentsSVGpath");
-    const response = await fetch('http://'+gId('curlUrl').value+'/json/state');
+  if (cv.length > 0 ){
-    const json = await response.json();
+    try {
-    console.log(json);
+      var arr = [];
-    let ids = json.seg.map(segment => segment.id);
+      const response = await fetch('http://'+cv+'/json/state');
-    console.log(ids); 
+      const json = await response.json();
-    for (var i = 0; i < ids.length; i++) {
+      let ids = json.seg.map(sg => ({id: sg.id, n: sg.n, xs: sg.start, xe: sg.stop, ys: sg.startY, ye: sg.stopY}));
-      arr.push({
+      for (var i = 0; i < ids.length; i++) {
-          value: ids[i],
+        arr.push({
-          text: "Segment index " + ids[i]
+            value: ids[i]["id"],
-      });
+            text: ids[i]["n"] + ' (index: ' + ids[i]["id"] + ')',
-    generateSegmentOptions(arr);
+            x: ids[i]["xe"] - ids[i]["xs"],
-    gId('targetSegment').style.display = "flex";
+            y: ids[i]["ye"] - ids[i]["ys"]
-    gId('segID').style.display = "none";
+        });
-    var svg = gId("getSegmentsSVGpath");
+      }
+      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);
+      sp.setAttribute("fill", accentTextColor);
-    }, 1000);
-  }
-  } catch (error) {
-    console.error(error);
-    var svgr = gId("getSegmentsSVGpath");
-    svgr.setAttribute("fill", redColor);
-    setTimeout(function(){ 
-      svgr.setAttribute("fill", accentTextColor);
     }, 1000);
     gId('targetSegment').style.display = "none";
     gId('segID').style.display = "flex";
@@ -323,10 +448,17 @@ generateSegmentOptions(segmentData);
 gId("getSegmentsDiv").innerHTML =
 '<svg id=getSegmentsSVG style="width:36px;height:36px;cursor:pointer" viewBox="0 0 24 24" onclick="getSegments()"><path id=getSegmentsSVGpath fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.68 7.35 7.38 5.73 9.07 4.1 11 4.1 11.83 4.1 12.41 4.69 13 5.28 13 6.1V12.15L14.6 10.6L16 12L12 16L8 12L9.4 10.6L11 12.15V6.1Q9.1 6.45 8.05 7.94 7 9.43 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 9.8 16.45 8.76 15.9 7.73 15 7V4.68Q16.85 5.55 17.93 7.26 19 9 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M12 11.05Z" /></svg>'
 gId("fileJSONledbutton").innerHTML = 
-'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8H20M20 6H12L10 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6M16 17H14V13H11L15 9L19 13H16Z" /></svg>&nbsp; File to device'
+'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path id=fileSvgP fill="currentColor" d="M20 18H4V8H20M20 6H12L10 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6M16 17H14V13H11L15 9L19 13H16Z" /></svg>&nbsp; File to device'
-gId("convertbutton").innerHTML = 
+/*gId("convertbutton").innerHTML = 
 '<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON '; 
+*/
 gId("copyJSONledbutton").innerHTML = 
 '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> </svg>&nbsp; Copy to clipboard'; 
 gId("sendJSONledbutton").innerHTML = 
-'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H9V20M12 13Z" /> </svg>&nbsp; Send to device';
+'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path id=sendSvgP fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H9V20M12 13Z" /> </svg>&nbsp; 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);
+}

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';