Code compression.

wled00/data/pixart/boxdraw.js

@@ -1,5 +1,6 @@
 function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
  
+    var w = window;
     // Get a reference to the canvas element
     var canvas = gId('pixelCanvas');
 
@@ -7,17 +8,17 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
     var ctx = canvas.getContext('2d', { willReadFrequently: true });
 
     // Set the width and height of the canvas
-    if (window.innerHeight < window.innerWidth) {
-        canvas.width = Math.floor(window.innerHeight * 0.98);
+    if (w.innerHeight < w.innerWidth) {
+        canvas.width = Math.floor(w.innerHeight * 0.98);
     }
     else{
-        canvas.width = Math.floor(window.innerWidth * 0.98);
+        canvas.width = Math.floor(w.innerWidth * 0.98);
     }
-    //canvas.height = window.innerWidth;
+    //canvas.height = w.innerWidth;
 
     let pixelSize = Math.floor(canvas.width/widthPixels);
 
-    let xOffset = (window.innerWidth - (widthPixels * pixelSize))/2
+    let xOffset = (w.innerWidth - (widthPixels * pixelSize))/2
 
     //Set the canvas height to fit the right number of pixelrows
     canvas.height = (pixelSize * heightPixels) + 10
@@ -33,10 +34,6 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
             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)';
 
@@ -56,12 +53,12 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
             ctx.fillStyle = textColor;
             ctx.textAlign = "center";
             ctx.textBaseline = 'middle';
-            ctx.fillText((pos + 1), (x * pixelSize) + (pixelSize /2), (y * pixelSize) + (pixelSize /2));
+            ctx.fillText((pixel[4] + 1), (x * pixelSize) + (pixelSize /2), (y * pixelSize) + (pixelSize /2));
         }
     }
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    canvas.width = window.innerWidth;
+    canvas.width = w.innerWidth;
     ctx.putImageData(imageData, xOffset, 0);
 }
 

wled00/data/pixart/getPixelValues.js

@@ -1,6 +1,6 @@
 function getPixelRGBValues(base64Image) {
   httpArray = [];
-  fileJSON = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2;
+  fileJSON = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${gId('targetSegment').value},"i":[`;
 
   //Which object holds the secret to the segment ID
   const segm = gId('targetSegment');
@@ -14,7 +14,7 @@ function getPixelRGBValues(base64Image) {
 
   //const copyJSONledbutton = gId('copyJSONledbutton');
   const JSONled = gId('JSONled');
-  const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value;
+  const maxNoOfColorsInCommandSting = parseInt(gId('colorLimitNumber').value);
   
   let hybridAddressing = false;
   let selectedIndex = -1;
@@ -43,14 +43,11 @@ function getPixelRGBValues(base64Image) {
     hybridAddressing = true;
   }
 
-  let segmentString = ''
   let curlString = ''
   let haString = ''
-  let haCommandCurlString = '';
 
-
-  let colorSeparatorStart = '\'';
-  let colorSeparatorEnd = '\'';
+  let colorSeparatorStart = '"';
+  let colorSeparatorEnd = '"';
   if (!hexValueCheck){
     colorSeparatorStart = '[';
     colorSeparatorEnd = ']';
@@ -153,7 +150,6 @@ function getPixelRGBValues(base64Image) {
     
     //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;
@@ -250,7 +246,7 @@ function getPixelRGBValues(base64Image) {
 
         // Check if start and end is the same, in which case remove
 
-        JSONledString = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd;
+        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
@@ -272,24 +268,33 @@ function getPixelRGBValues(base64Image) {
     
     JSONledString = ''
 
-    //For evry commandString in the  array
+    //For every commandString in the array
     for (let i = 0; i < commandArray.length; i++) {
-      let thisJSONledString = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + segID + JSONledStringMid2 + commandArray[i] + JSONledStringEnd;
+      let thisJSONledString = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`;
       httpArray.push(thisJSONledString);
 
-      let thiscurlString = curlStart + gId('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;
+      let thiscurlString = `curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'${thisJSONledString}\' -H "Content-Type: application/json"`;
       
       //Aggregated Strings That should be returned to the user
       if (i > 0){
         JSONledString = JSONledString + '\n';
         curlString = curlString + ' && ';
       }
-      JSONledString = JSONledString + thisJSONledString;
-      curlString = curlString + thiscurlString;
+      JSONledString += thisJSONledString;
+      curlString += thiscurlString;
     }
 
     
-    haString = haStart + gId('haID').value + haMid1 + gId('haName').value + haMid2 + gId('haUID').value + haMid3 +curlString + haMid3 + gId('curlUrl').value + haEnd;
+    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}
+      command_on: >
+        ${curlString}
+      command_off: >
+        curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`;
 
     if (formatSelection == 'wled'){
       JSONled.value = JSONledString;
@@ -301,7 +306,7 @@ function getPixelRGBValues(base64Image) {
       JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.'
     }
     
-    fileJSON = fileJSON + JSONledStringEnd;
+    fileJSON += ']}}';
 
     let infoDiv = gId('image-info');
     let canvasDiv = gId('image-info');

wled00/data/pixart/pixart.js

@@ -1,4 +1,8 @@
 //Start up code
+//if (window.location.protocol == "file:") {
+//  let locip = prompt("File Mode. Please enter WLED IP!");
+//  gId('curlUrl').value = locip;
+//} else
 gId('curlUrl').value = location.host;
 
 let devMode = false;
@@ -78,75 +82,29 @@ gId("copyJSONledbutton").addEventListener('click', async () => {
 
 // Event listeners =======================
 
-gId("ledSetupSelector").addEventListener("change", () => {
-  gen();
-});
+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);
+//gId("convertbutton").addEventListener("click", 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() {
+gId("targetSegment").addEventListener("change", () => {
   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)');

wled00/data/pixart/statics.js

@@ -1,22 +1,3 @@
-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 = '#eee';
 var accentTextColor = '#777';
 var prsCol = '#ccc';