lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Segment selection and touch ups

Browse Source
This commit is contained in:
Henrik 2023-01-21 16:33:59 +01:00
parent ec9a092751
commit bb72b8cc93
5 changed files with 167 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wled00/data/pixart/getPixelValues.js
View File

@ -2,6 +2,18 @@ function getPixelRGBValues(base64Image) {
httpArray = []; httpArray = [];
fileJSON = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2; 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 copyJSONledbutton = gId('copyJSONledbutton');
const JSONled = gId('JSONled'); const JSONled = gId('JSONled');
const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value; const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value;
@ -60,7 +72,7 @@ function getPixelRGBValues(base64Image) {
// Wait for the image to load before drawing it onto the canvas // Wait for the image to load before drawing it onto the canvas
image.onload = function() { 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 color = scalePath.getAttribute("fill");
let sizeX = gId("sizeX").value; let sizeX = gId("sizeX").value;
let sizeY = gId("sizeY").value; let sizeY = gId("sizeY").value;
@ -258,7 +270,7 @@ function getPixelRGBValues(base64Image) {
//For evry commandString in the array //For evry commandString in the array
for (let i = 0; i < commandArray.length; i++) { 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); httpArray.push(thisJSONledString);
let thiscurlString = curlStart + gId('curlUrl').value + curlMid1 + thisJSONledString + curlEnd; let thiscurlString = curlStart + gId('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;

136
wled00/data/pixart/pixart.css
View File

@ -3,7 +3,7 @@
border: 2px solid #fff; border: 2px solid #fff;
} }
body { body {
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #111; background-color: #111;
} }
@ -21,7 +21,7 @@ h1 {
font-size: 2.3em; font-size: 2.3em;
color: #ddd; color: #ddd;
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 0.5; line-height: 0.5;
/*text-align: center;*/ /*text-align: center;*/
} }
@ -29,7 +29,7 @@ h2 {
font-size: 1.1em; font-size: 1.1em;
color: rgba(221, 221, 221, 0.61); color: rgba(221, 221, 221, 0.61);
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 0.5; line-height: 0.5;
text-align: center; text-align: center;
} }
@ -37,7 +37,7 @@ h3 {
font-size: 0.7em; font-size: 0.7em;
color: rgba(221, 221, 221, 0.61); color: rgba(221, 221, 221, 0.61);
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 1.4; line-height: 1.4;
text-align: center; text-align: center;
align-items: center; align-items: center;
@ -49,21 +49,21 @@ p {
font-size: 1em; font-size: 1em;
color: #777; color: #777;
line-height: 1.5; line-height: 1.5;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
} }
#fieldTable { #fieldTable {
font-size: 1 em; font-size: 1 em;
color: #777; color: #777;
line-height: 1; line-height: 1;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
} }
#scaleTable { #scaleTable {
font-size: 1 em; font-size: 1 em;
color: #777; color: #777;
line-height: 1; line-height: 1;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
} }
#drop-zone { #drop-zone {
@ -75,7 +75,7 @@ p {
padding: 20px; padding: 20px;
margin: 0px; margin: 0px;
cursor: pointer; cursor: pointer;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: #777; color: #777;
} }
@ -83,37 +83,70 @@ p {
#file-picker { #file-picker {
display: none; display: none;
} }
.adaptiveTD{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
* select { }
.mainSelector {
background-color: #222; background-color: #222;
color: #ddd; color: #ddd;
border: 1px solid #333; border: 1px solid #333;
margin-top: 0.5em; margin-top: 4px;
margin-bottom: 0.5em; margin-bottom: 4px;
padding: 0 8px; padding: 0 8px;
width: 100%; height: 28px;
height: 32px;
font-size: 15px; 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] { * input[type=range] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
width: 250px; flex-grow: 1;
padding: 0; padding: 0;
margin: 0 8px 0 0; margin: 4px 8px 4px 0;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
background: linear-gradient(to right, #bbb 50%, #333 50%); background: linear-gradient(to right, #bbb 50%, #333 50%);
border-radius: 7px;
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
height: 30px; height: 28px;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border-radius: 7px;
} }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
height: 16px; height: 16px;
@ -122,17 +155,19 @@ input[type=range]::-webkit-slider-thumb {
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: 7px; margin-top: 4px;
border-radius: 7px;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
height: 30px; height: 28px;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border-radius: 7px;
} }
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
border: 0px solid rgba(0, 0, 0, 0); border: 0px solid rgba(0, 0, 0, 0);
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 50%; border-radius: 7px;
background: #fff; background: #fff;
} }
@ -145,14 +180,33 @@ input[type=range]::-moz-range-thumb {
background-color: #222; background-color: #222;
border: 1px solid #333; border: 1px solid #333;
padding-inline-start: 5px; padding-inline-start: 5px;
margin-top: 10px; margin-top: 4px;
width: 100%; margin-bottom: 4px;
height: 24px; height: 24px;
border-radius: 0px; border-radius: 0px;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: #ddd; color: #ddd;
border-radius: 7px; 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] { * input[type=submit] {
@ -161,7 +215,7 @@ input[type=range]::-moz-range-thumb {
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border-radius: 24px; border-radius: 24px;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 1.3em; font-size: 1.3em;
color: #ddd; color: #ddd;
} }
@ -172,7 +226,7 @@ input[type=range]::-moz-range-thumb {
padding-inline: 5px; padding-inline: 5px;
width: 100%; width: 100%;
border-radius: 24px; border-radius: 24px;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 1em; font-size: 1em;
color: #ddd; color: #ddd;
display: flex; display: flex;
@ -181,6 +235,12 @@ input[type=range]::-moz-range-thumb {
cursor: pointer; cursor: pointer;
} }
#scaleDiv {
display: flex;
align-items: center;
vertical-align: middle;
}
textarea { textarea {
grid-row: 1 / 2; grid-row: 1 / 2;
width: 100%; width: 100%;
@ -192,32 +252,10 @@ textarea {
.hide { .hide {
display: none; 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 { .svg-icon {
vertical-align: middle; vertical-align: middle;
} }
/*
.buttondiv-class {
flex: 1;
display: inline-block;
}
.buttondivmid-class {
width: 10px;
display: inline-block;
}
*/
#image-container { #image-container {
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -257,7 +295,7 @@ textarea {
margin-top: -5px; margin-top: -5px;
height: 24px; height: 24px;
border-radius: 7px; border-radius: 7px;
font-family: 'Arcade', Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: #ddd; color: #ddd;
} }

44
wled00/data/pixart/pixart.htm
View File

@ -34,8 +34,8 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="ledSetupSelector">Led setup:</label> <label for="ledSetupSelector">Led setup:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<select id="ledSetupSelector"> <select id="ledSetupSelector" class="mainSelector">
<option value="matrix" selected>2D Matrix</option> <option value="matrix" selected>2D Matrix</option>
<option value="r2l">Serpentine, first row right to left &lt;-</option> <option value="r2l">Serpentine, first row right to left &lt;-</option>
<option value="l2r">Serpentine, first row left to right -&gt;</option> <option value="l2r">Serpentine, first row left to right -&gt;</option>
@ -46,8 +46,8 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="formatSelector">Output format:</label> <label for="formatSelector">Output format:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<select id="formatSelector"> <select id="formatSelector" class="mainSelector">
<option value="wled" selected>WLED JSON</option> <option value="wled" selected>WLED JSON</option>
<option value="curl">CURL</option> <option value="curl">CURL</option>
<option value="ha">Home Assistant YAML</option> <option value="ha">Home Assistant YAML</option>
@ -58,8 +58,8 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="colorFormatSelector">Color code format:</label> <label for="colorFormatSelector">Color code format:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<select id="colorFormatSelector"> <select id="colorFormatSelector" class="mainSelector">
<option value="hex" selected>HEX (#f4f4f4)</option> <option value="hex" selected>HEX (#f4f4f4)</option>
<option value="dec">DEC (244,244,244)</option> <option value="dec">DEC (244,244,244)</option>
</select> </select>
@ -69,8 +69,8 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="addressingSelector">Addressing:</label> <label for="addressingSelector">Addressing:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<select id="addressingSelector"> <select id="addressingSelector" class="mainSelector">
<option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option> <option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
<option value="range">Range (10, 17, #f4f4f4)</option> <option value="range">Range (10, 17, #f4f4f4)</option>
<option value="single">Single (#f4f4f4)</option> <option value="single">Single (#f4f4f4)</option>
@ -99,7 +99,7 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="haID">HA Device ID:</label> <label for="haID">HA Device ID:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001"> <input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001">
</td> </td>
</tr> </tr>
@ -107,7 +107,7 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="haUID">HA Device Unique ID:</label> <label for="haUID">HA Device Unique ID:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a"> <input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a">
</td> </td>
</tr> </tr>
@ -115,7 +115,7 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="haName">HA Device Name:</label> <label for="haName">HA Device Name:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen"> <input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen">
</td> </td>
</tr> </tr>
@ -123,7 +123,7 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="curlUrl">Device IP/host name:</label> <label for="curlUrl">Device IP/host name:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<input class="fullTextField" type="text" id="curlUrl" value=""> <input class="fullTextField" type="text" id="curlUrl" value="">
</td> </td>
</tr> </tr>
@ -131,9 +131,11 @@
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<label for="targetSegment">Target segment id:</label> <label for="targetSegment">Target segment id:</label>
</td> </td>
<td style="vertical-align: middle;"> <td class="adaptiveTD">
<select id="targetSegment"> <input class="flxTFld" type="number" id="segID" value="0" min="0" max="63">
<select id="targetSegment" class="adaptiveSelector">
</select> </select>
<div id="getSegmentsDiv" class="segmentsDiv"></div>
</td> </td>
</tr> </tr>
</table> </table>
@ -141,19 +143,17 @@
<tr> <tr>
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<div id="scaleDiv"> <div id="scaleDiv">
<svg style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()"> <svg id="scaleToggle" style="width:36px;height:36px; cursor: pointer;" viewBox="0 0 24 24" onclick="switchScale()">
<path fill="currentColor" d="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" /> <path id="scaleTogglePath" fill="currentColor" d="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" />
</svg>
<svg style="width:36px;height:36px;margin-left:20px;" viewBox="0 0 24 24" onclick="switchScale()">
<path fill="currentColor" d="M21,15H23V17H21V15M21,11H23V13H21V11M23,19H21V21C22,21 23,20 23,19M13,3H15V5H13V3M21,7H23V9H21V7M21,3V5H23C23,4 22,3 21,3M1,7H3V9H1V7M17,3H19V5H17V3M17,19H19V21H17V19M3,3C2,3 1,4 1,5H3V3M9,3H11V5H9V3M5,3H7V5H5V3M1,11V19A2,2 0 0,0 3,21H15V11H1M3,19L5.5,15.79L7.29,17.94L9.79,14.72L13,19H3Z" />
</svg> </svg>
&nbsp;Scale image
</div> </div>
</td> </td>
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<div id="sizeDiv" style="display: none;"> <div id="sizeDiv" style="display: none;">
<label for="sizeX">X : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" value="0"> <label for="sizeX">W : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" value="0">
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<label for="sizeY">Y : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" value="0"> <label for="sizeY">H : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" value="0">
</div> </div>
</td> </td>
</tr> </tr>
@ -198,7 +198,7 @@
<button id="fileJSONledbutton" class="buttonclass"></button> <button id="fileJSONledbutton" class="buttonclass"></button>
</div> </div>
<div> <div>
<h3><div id="version">Version 1.0.4</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3> <h3><div id="version">Version 1.0.5</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
</div> </div>
</div> </div>
<div id=bottom-part style="display: none" class=bottom-part></div> <div id=bottom-part style="display: none" class=bottom-part></div>

44
wled00/data/pixart/pixart.js
View File

@ -208,9 +208,9 @@ gId("formatSelector").addEventListener("change", () => {
}); });
function switchScale() { 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 scaleTogglePath = gId("scaleDiv").children[0].children[0]
let color = scalePath.getAttribute("fill"); let color = scaleTogglePath.getAttribute("fill");
let d = ''; let d = '';
if (color === accentColor) { if (color === accentColor) {
color = accentTextColor; color = accentTextColor;
@ -222,7 +222,7 @@ function switchScale() {
d = scaleToggleOnd; d = scaleToggleOnd;
gId("sizeDiv").style.display = ""; gId("sizeDiv").style.display = "";
} }
scalePath.setAttribute("fill", color); //scalePath.setAttribute("fill", color);
scaleTogglePath.setAttribute("fill", color); scaleTogglePath.setAttribute("fill", color);
scaleTogglePath.setAttribute("d", d); 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 //Initial population of segment selection
function generateSegmentArray(noOfSegments) { function generateSegmentArray(noOfSegments) {
var arr = []; var arr = [];
@ -284,6 +320,8 @@ var segmentData = generateSegmentArray(10);
generateSegmentOptions(segmentData); generateSegmentOptions(segmentData);
gId("getSegmentsDiv").innerHTML =
'<svg id=getSegmentsSVG style="width:36px;height:36px;cursor:pointer" viewBox="0 0 24 24" onclick="getSegments()"><path id=getSegmentsSVGpath fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.68 7.35 7.38 5.73 9.07 4.1 11 4.1 11.83 4.1 12.41 4.69 13 5.28 13 6.1V12.15L14.6 10.6L16 12L12 16L8 12L9.4 10.6L11 12.15V6.1Q9.1 6.45 8.05 7.94 7 9.43 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 9.8 16.45 8.76 15.9 7.73 15 7V4.68Q16.85 5.55 17.93 7.26 19 9 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M12 11.05Z" /></svg>'
gId("fileJSONledbutton").innerHTML = gId("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' '<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'
gId("convertbutton").innerHTML = gId("convertbutton").innerHTML =

2
wled00/data/pixart/statics.js
View File

@ -19,6 +19,8 @@ const JSONledStringEnd = ']}}';
var accentColor = '#eee'; var accentColor = '#eee';
var accentTextColor = '#777'; 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 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"; 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";