From 43561c73d22cfdafb746dd6beea11dde728ec2b1 Mon Sep 17 00:00:00 2001 From: Henrik Date: Wed, 18 Jan 2023 20:22:46 +0100 Subject: [PATCH] Add files via upload --- html/getPixelValues.js | 4 +- html/index.html | 14 ++- html/index.js | 33 +++++++ html/pixartmin.html | 206 +++++++++++++++++++++++++++++++++++++++++ html/statics.js | 9 +- html/styles.css | 31 +++++++ 6 files changed, 290 insertions(+), 7 deletions(-) create mode 100644 html/pixartmin.html 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

@@ -120,6 +121,15 @@ + + + +
+ + + +
@@ -184,7 +194,9 @@
- +
+

Version 1.0.3 - Help/About

+
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)

+

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + 255 +
+ + + + 256 +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + +
+
+ + + +     + + + +
+ 		+ +
+

+ +

+

+

+ Drop image here
or
+ Click to select a file +
+ +

+ +

+ +

+ +
+
+ + + + + +

+ + + + +
+

Version 1.0.3 - Help/About

+
+ + + + + + + \ 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