diff --git a/html/getPixelValues.js b/html/getPixelValues.js
index 93ba3c7..76ded2e 100644
--- a/html/getPixelValues.js
+++ b/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;
diff --git a/html/index.html b/html/index.html
index b7a2b04..ba96a8e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -21,6 +21,7 @@
Convert image to WLED JSON (pixel art on WLED matrix)
+ Version 1.0.3 - Help/About
@@ -184,7 +194,9 @@
-
+
diff --git a/html/index.js b/html/index.js
index 3dc8ba3..387d0c5 100644
--- a/html/index.js
+++ b/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 =
' File to device'
document.getElementById("convertbutton").innerHTML =
diff --git a/html/pixartmin.html b/html/pixartmin.html
new file mode 100644
index 0000000..07f7f2e
--- /dev/null
+++ b/html/pixartmin.html
@@ -0,0 +1,206 @@
+
+
+
+
+
+
+ Led Matrix Pixel Art Converter
+
+
+
+
+
+
+
+ Led Matrix Pixel Art Converter
+
+
+
Convert image to WLED JSON (pixel art on WLED matrix)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
![]()
+
+
+
+
+
+
+
+
![RawImage image]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/statics.js b/html/statics.js
index b25f73e..15607cb 100644
--- a/html/statics.js
+++ b/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';
diff --git a/html/styles.css b/html/styles.css
index 35759ab..088c79a 100644
--- a/html/styles.css
+++ b/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;
}
\ No newline at end of file