Add files via upload

html/getPixelValues.js

@@ -1,6 +1,6 @@
 function getPixelRGBValues(base64Image) {
   httpArray = [];
-  fileJSON = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1;
+  fileJSON = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2;
 
   //const copyJSONledbutton = document.getElementById('copyJSONledbutton');
   const JSONled = document.getElementById('JSONled');
@@ -258,7 +258,7 @@ function getPixelRGBValues(base64Image) {
 
     //For evry commandString in the  array
     for (let i = 0; i < commandArray.length; i++) {
-      let thisJSONledString = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + commandArray[i] + JSONledStringEnd;
+      let thisJSONledString = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd;
       httpArray.push(thisJSONledString);
 
       let thiscurlString = curlStart + document.getElementById('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;

html/index.html

@@ -21,6 +21,7 @@
         </h1>
     </div>
       <h2>Convert image to WLED JSON (pixel art on WLED matrix)</h2>
+      <h3>Version 1.0.3 - Help/About</h3>
       <p>
         <table id="fieldTable"  style="width: 100%; table-layout: fixed; align-content: center;">
           <tr>
@@ -120,6 +121,15 @@
               <input class="fullTextField" type="text" id="curlUrl" value="">
             </td>
           </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="targetSegment">Target segment id:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="targetSegment">
+              </select>
+            </td>
+          </tr>
         </table>
         <table  class= "scaleTableClass" id="scaleTable"  style="width: 100%; table-layout: fixed; align-content: center;">
           <tr>
@@ -184,7 +194,9 @@
         <div id = "gap2" class="gap"></div>
         <button id="fileJSONledbutton" class="buttonclass"></button>
       </div>
-
+      <div>
+        <h3>Version 1.0.3 - <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>
           <canvas id="pixelCanvas"></canvas>

html/index.js

@@ -247,6 +247,39 @@ function sendAsFile(jsonStringInput, fileName, urlString) {
   xhr.send(formData);
 }
 
+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 = document.getElementById("targetSegment");
+  select.innerHTML = "";
+  for (var i = 0; i < array.length; i++) {
+      var option = document.createElement("option");
+      option.value = array[i].value;
+      option.text = array[i].text;
+      select.appendChild(option);
+      if(i === 0) {
+        option.selected = true;
+      }
+    }
+}
+
+//Initial population of segment selection
+function generateSegmentArray(noOfSegments) {
+  var arr = [];
+  for (var i = 0; i < noOfSegments; i++) {
+      arr.push({
+          value: i,
+          text: "Segment index " + i
+      });
+  }
+  return arr;
+}
+
+var segmentData = generateSegmentArray(10);
+// [{"value":0, "text": "Segment index 0"},{"value":1, "text": "Segment index 1"},{"value":2, "text": "Segment index 2"},{"value":3, "text": "Segment index 3"}];
+
+generateSegmentOptions(segmentData);
+
 document.getElementById("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'
  document.getElementById("convertbutton").innerHTML = 

html/statics.js

@@ -10,10 +10,11 @@ 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":{"i":[';
-const JSONledShortStringStart = '{';
-const JSONledShortStringMid1 = '"seg":{"i":[';
+const JSONledStringStart = '{"on":true,"bri":';
+const JSONledStringMid1 = ',"seg":{"id":';
+const JSONledStringMid2 = ',"i":[';
+// const JSONledShortStringStart = '{';
+// const JSONledShortStringMid1 = '"seg":{"i":[';
 const JSONledStringEnd = ']}}';
 
 var accentColor = '#7E4C80';

html/styles.css

@@ -33,6 +33,14 @@ h2 {
   line-height: 0.5;
   text-align: center;
 }
+h3 {
+  font-size: 0.7em;
+  color: rgba(126, 76, 128, 0.61);
+  margin: 1px 0;
+  font-family: 'Arcade', Arial, sans-serif;
+  line-height: 1.4;
+  text-align: center;
+}
 
 p {
   font-size: 1.2em;
@@ -229,4 +237,27 @@ textarea {
   font-family: 'Arcade', Arial, sans-serif;
   font-size: 15px;
   color: rgb(119, 119, 119);
+}
+a:link {
+  color: rgba(126, 76, 128, 0.61);
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:visited {
+  color: rgba(126, 76, 128, 0.61);
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover {
+  color: rgb(126, 76, 128);
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:active {
+  color: rgba(126, 76, 128, 0.61);
+  background-color: transparent;
+  text-decoration: none;
 }