Segment selection and touch ups
This commit is contained in:
Henrik
parent
ec9a092751
commit
bb72b8cc93
@ -2,6 +2,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');
|
||||
const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value;
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="ledSetupSelector">Led setup:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<select id="ledSetupSelector">
|
||||
<td class="adaptiveTD">
|
||||
<select id="ledSetupSelector" class="mainSelector">
|
||||
<option value="matrix" selected>2D Matrix</option>
|
||||
<option value="r2l">Serpentine, first row right to left <-</option>
|
||||
<option value="l2r">Serpentine, first row left to right -></option>
|
||||
@ -46,8 +46,8 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="formatSelector">Output format:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<select id="formatSelector">
|
||||
<td class="adaptiveTD">
|
||||
<select id="formatSelector" class="mainSelector">
|
||||
<option value="wled" selected>WLED JSON</option>
|
||||
<option value="curl">CURL</option>
|
||||
<option value="ha">Home Assistant YAML</option>
|
||||
@ -58,8 +58,8 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="colorFormatSelector">Color code format:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<select id="colorFormatSelector">
|
||||
<td class="adaptiveTD">
|
||||
<select id="colorFormatSelector" class="mainSelector">
|
||||
<option value="hex" selected>HEX (#f4f4f4)</option>
|
||||
<option value="dec">DEC (244,244,244)</option>
|
||||
</select>
|
||||
@ -69,8 +69,8 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="addressingSelector">Addressing:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<select id="addressingSelector">
|
||||
<td class="adaptiveTD">
|
||||
<select id="addressingSelector" class="mainSelector">
|
||||
<option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
|
||||
<option value="range">Range (10, 17, #f4f4f4)</option>
|
||||
<option value="single">Single (#f4f4f4)</option>
|
||||
@ -99,7 +99,7 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="haID">HA Device ID:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<td class="adaptiveTD">
|
||||
<input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001">
|
||||
</td>
|
||||
</tr>
|
||||
@ -107,7 +107,7 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="haUID">HA Device Unique ID:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<td class="adaptiveTD">
|
||||
<input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a">
|
||||
</td>
|
||||
</tr>
|
||||
@ -115,7 +115,7 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="haName">HA Device Name:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<td class="adaptiveTD">
|
||||
<input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen">
|
||||
</td>
|
||||
</tr>
|
||||
@ -123,7 +123,7 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="curlUrl">Device IP/host name:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<td class="adaptiveTD">
|
||||
<input class="fullTextField" type="text" id="curlUrl" value="">
|
||||
</td>
|
||||
</tr>
|
||||
@ -131,9 +131,11 @@
|
||||
<td style="vertical-align: middle;">
|
||||
<label for="targetSegment">Target segment id:</label>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<select id="targetSegment">
|
||||
<td class="adaptiveTD">
|
||||
<input class="flxTFld" type="number" id="segID" value="0" min="0" max="63">
|
||||
<select id="targetSegment" class="adaptiveSelector">
|
||||
</select>
|
||||
<div id="getSegmentsDiv" class="segmentsDiv"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -141,19 +143,17 @@
|
||||
<tr>
|
||||
<td style="vertical-align: middle;">
|
||||
<div id="scaleDiv">
|
||||
<svg style="width:36px;height:36px" 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" />
|
||||
</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 id="scaleToggle" style="width:36px;height:36px; cursor: pointer;" viewBox="0 0 24 24" onclick="switchScale()">
|
||||
<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>
|
||||
Scale image
|
||||
</div>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
<div id="sizeDiv" style="display: none;">
|
||||
<label for="sizeX">X : </label> <input class="sizeInputFields" type="number" id="sizeX" value="0">
|
||||
<label for="sizeX">W : </label> <input class="sizeInputFields" type="number" id="sizeX" value="0">
|
||||
|
||||
<label for="sizeY">Y : </label> <input class="sizeInputFields" type="number" id="sizeY" value="0">
|
||||
<label for="sizeY">H : </label> <input class="sizeInputFields" type="number" id="sizeY" value="0">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -198,7 +198,7 @@
|
||||
<button id="fileJSONledbutton" class="buttonclass"></button>
|
||||
</div>
|
||||
<div>
|
||||
<h3><div id="version">Version 1.0.4</div> - <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> - <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>
|
||||
|
||||
@ -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 =
|
||||
'<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 =
|
||||
'<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> File to device'
|
||||
gId("convertbutton").innerHTML =
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user