From bb72b8cc93288274ced338bd104710a573a4e799 Mon Sep 17 00:00:00 2001 From: Henrik Date: Sat, 21 Jan 2023 16:33:59 +0100 Subject: [PATCH] Segment selection and touch ups --- wled00/data/pixart/getPixelValues.js | 16 +++- wled00/data/pixart/pixart.css | 138 +++++++++++++++++---------- wled00/data/pixart/pixart.htm | 44 ++++----- wled00/data/pixart/pixart.js | 44 ++++++++- wled00/data/pixart/statics.js | 2 + 5 files changed, 167 insertions(+), 77 deletions(-) diff --git a/wled00/data/pixart/getPixelValues.js b/wled00/data/pixart/getPixelValues.js index 21f27a8a..849ae74d 100644 --- a/wled00/data/pixart/getPixelValues.js +++ b/wled00/data/pixart/getPixelValues.js @@ -1,6 +1,18 @@ function getPixelRGBValues(base64Image) { httpArray = []; fileJSON = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2; + + //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'); const JSONled = gId('JSONled'); @@ -60,7 +72,7 @@ function getPixelRGBValues(base64Image) { // Wait for the image to load before drawing it onto the canvas image.onload = function() { - let scalePath = gId("scaleDiv").children[1].children[0]; + let scalePath = gId("scaleDiv").children[0].children[0]; let color = scalePath.getAttribute("fill"); let sizeX = gId("sizeX").value; let sizeY = gId("sizeY").value; @@ -258,7 +270,7 @@ function getPixelRGBValues(base64Image) { //For evry commandString in the array for (let i = 0; i < commandArray.length; i++) { - let thisJSONledString = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd; + let thisJSONledString = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + segID + JSONledStringMid2 + commandArray[i] + JSONledStringEnd; httpArray.push(thisJSONledString); let thiscurlString = curlStart + gId('curlUrl').value + curlMid1 + thisJSONledString + curlEnd; diff --git a/wled00/data/pixart/pixart.css b/wled00/data/pixart/pixart.css index 1fdd4239..39ba1f28 100644 --- a/wled00/data/pixart/pixart.css +++ b/wled00/data/pixart/pixart.css @@ -3,7 +3,7 @@ border: 2px solid #fff; } body { - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; background-color: #111; } @@ -21,7 +21,7 @@ h1 { font-size: 2.3em; color: #ddd; margin: 1px 0; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; line-height: 0.5; /*text-align: center;*/ } @@ -29,7 +29,7 @@ h2 { font-size: 1.1em; color: rgba(221, 221, 221, 0.61); margin: 1px 0; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; line-height: 0.5; text-align: center; } @@ -37,7 +37,7 @@ h3 { font-size: 0.7em; color: rgba(221, 221, 221, 0.61); margin: 1px 0; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; line-height: 1.4; text-align: center; align-items: center; @@ -49,21 +49,21 @@ p { font-size: 1em; color: #777; line-height: 1.5; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; } #fieldTable { font-size: 1 em; color: #777; line-height: 1; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; } #scaleTable { font-size: 1 em; color: #777; line-height: 1; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; } #drop-zone { @@ -75,7 +75,7 @@ p { padding: 20px; margin: 0px; cursor: pointer; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 15px; color: #777; } @@ -83,37 +83,70 @@ p { #file-picker { display: none; } +.adaptiveTD{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; -* select { +} + +.mainSelector { background-color: #222; color: #ddd; border: 1px solid #333; - margin-top: 0.5em; - margin-bottom: 0.5em; + margin-top: 4px; + margin-bottom: 4px; padding: 0 8px; - width: 100%; - height: 32px; + height: 28px; font-size: 15px; - border-radius: 14px; + border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.adaptiveSelector { + background-color: #222; + color: #ddd; + border: 1px solid #333; + margin-top: 4px; + margin-bottom: 4px; + padding: 0 8px; + height: 28px; + font-size: 15px; + border-radius: 7px; + flex-grow: 1; + display: none; +} + +.segmentsDiv{ + width: 36px; + padding-left: 5px; } * input[type=range] { - -webkit-appearance: none; - width: 250px; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + flex-grow: 1; padding: 0; - margin: 0 8px 0 0; + margin: 4px 8px 4px 0; background-color: transparent; cursor: pointer; background: linear-gradient(to right, #bbb 50%, #333 50%); + border-radius: 7px; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { - height: 30px; + height: 28px; cursor: pointer; background: transparent; + border-radius: 7px; } input[type=range]::-webkit-slider-thumb { height: 16px; @@ -122,17 +155,19 @@ input[type=range]::-webkit-slider-thumb { background: #fff; cursor: pointer; -webkit-appearance: none; - margin-top: 7px; + margin-top: 4px; + border-radius: 7px; } input[type=range]::-moz-range-track { - height: 30px; + height: 28px; background-color: rgba(0, 0, 0, 0); + border-radius: 7px; } input[type=range]::-moz-range-thumb { border: 0px solid rgba(0, 0, 0, 0); height: 16px; width: 16px; - border-radius: 50%; + border-radius: 7px; background: #fff; } @@ -145,14 +180,33 @@ input[type=range]::-moz-range-thumb { background-color: #222; border: 1px solid #333; padding-inline-start: 5px; - margin-top: 10px; - width: 100%; + margin-top: 4px; + margin-bottom: 4px; height: 24px; border-radius: 0px; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 15px; color: #ddd; border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} +.flxTFld{ + background-color: #222; + border: 1px solid #333; + padding-inline-start: 5px; + height: 24px; + border-radius: 0px; + font-family: Arial, sans-serif; + font-size: 15px; + color: #ddd; + border-radius: 7px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; } * input[type=submit] { @@ -161,7 +215,7 @@ input[type=range]::-moz-range-thumb { padding: 0.5em; width: 100%; border-radius: 24px; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 1.3em; color: #ddd; } @@ -172,7 +226,7 @@ input[type=range]::-moz-range-thumb { padding-inline: 5px; width: 100%; border-radius: 24px; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 1em; color: #ddd; display: flex; @@ -181,6 +235,12 @@ input[type=range]::-moz-range-thumb { cursor: pointer; } +#scaleDiv { + display: flex; + align-items: center; + vertical-align: middle; +} + textarea { grid-row: 1 / 2; width: 100%; @@ -192,32 +252,10 @@ textarea { .hide { display: none; } -/* -.grids-class{ - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - display: grid; - grid-template-columns: repeat(auto-fill, 20px); - grid-template-rows: repeat(auto-fill, 20px); - grid-gap: 0px; -} -*/ + .svg-icon { vertical-align: middle; } -/* -.buttondiv-class { - flex: 1; - display: inline-block; -} -.buttondivmid-class { - width: 10px; - display: inline-block; -} -*/ #image-container { display: grid; grid-template-rows: 1fr 1fr; @@ -257,7 +295,7 @@ textarea { margin-top: -5px; height: 24px; border-radius: 7px; - font-family: 'Arcade', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 15px; color: #ddd; } diff --git a/wled00/data/pixart/pixart.htm b/wled00/data/pixart/pixart.htm index cc168153..0aa497a8 100644 --- a/wled00/data/pixart/pixart.htm +++ b/wled00/data/pixart/pixart.htm @@ -34,8 +34,8 @@ - - @@ -46,8 +46,8 @@ - - @@ -58,8 +58,8 @@ - - @@ -69,8 +69,8 @@ - - @@ -99,7 +99,7 @@ - + @@ -107,7 +107,7 @@ - + @@ -115,7 +115,7 @@ - + @@ -123,7 +123,7 @@ - + @@ -131,9 +131,11 @@ - - + +
@@ -141,19 +143,17 @@
- - - - - + + +  Scale image
@@ -198,7 +198,7 @@
-

Version 1.0.4
 -  Help/About

+

Version 1.0.5
 -  Help/About

diff --git a/wled00/data/pixart/pixart.js b/wled00/data/pixart/pixart.js index b782cb67..409f591e 100644 --- a/wled00/data/pixart/pixart.js +++ b/wled00/data/pixart/pixart.js @@ -208,9 +208,9 @@ gId("formatSelector").addEventListener("change", () => { }); function switchScale() { - let scalePath = gId("scaleDiv").children[1].children[0] + //let scalePath = gId("scaleDiv").children[1].children[0] let scaleTogglePath = gId("scaleDiv").children[0].children[0] - let color = scalePath.getAttribute("fill"); + let color = scaleTogglePath.getAttribute("fill"); let d = ''; if (color === accentColor) { color = accentTextColor; @@ -222,7 +222,7 @@ function switchScale() { d = scaleToggleOnd; gId("sizeDiv").style.display = ""; } - scalePath.setAttribute("fill", color); + //scalePath.setAttribute("fill", color); scaleTogglePath.setAttribute("fill", color); scaleTogglePath.setAttribute("d", d); } @@ -268,6 +268,42 @@ function generateSegmentOptions(array) { } } +// Get segments from device +async function getSegments() { + try { + var arr = []; + const response = await fetch('http://'+gId('curlUrl').value+'/json/state'); + const json = await response.json(); + console.log(json); + let ids = json.seg.map(segment => segment.id); + console.log(ids); + for (var i = 0; i < ids.length; i++) { + arr.push({ + value: ids[i], + text: "Segment index " + ids[i] + }); + generateSegmentOptions(arr); + gId('targetSegment').style.display = "flex"; + gId('segID').style.display = "none"; + var svg = gId("getSegmentsSVGpath"); + + svg.setAttribute("fill", greenColor); + setTimeout(function(){ + svg.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"; + } +} + //Initial population of segment selection function generateSegmentArray(noOfSegments) { var arr = []; @@ -284,6 +320,8 @@ var segmentData = generateSegmentArray(10); generateSegmentOptions(segmentData); +gId("getSegmentsDiv").innerHTML = +'' gId("fileJSONledbutton").innerHTML = '  File to device' gId("convertbutton").innerHTML = diff --git a/wled00/data/pixart/statics.js b/wled00/data/pixart/statics.js index b929c269..2fdac4c0 100644 --- a/wled00/data/pixart/statics.js +++ b/wled00/data/pixart/statics.js @@ -19,6 +19,8 @@ const JSONledStringEnd = ']}}'; var accentColor = '#eee'; var accentTextColor = '#777'; +var greenColor = '#056b0a'; +var redColor = '#6b050c'; var scaleToggleOffd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z"; var scaleToggleOnd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z";