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

Size optimizations and cleanup

Browse Source
This commit is contained in:
Henrik 2023-01-23 21:30:55 +01:00
parent 219a3658d6
commit b0b68c695c
5 changed files with 168 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,6 @@
function drawBoxes(inputPixelArray, widthPixels, heightPixels) { function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
var w = window; var w = window;
// Get a reference to the canvas element
var canvas = gId('pixelCanvas');
// Get the canvas context // Get the canvas context
var ctx = canvas.getContext('2d', { willReadFrequently: true }); var ctx = canvas.getContext('2d', { willReadFrequently: true });

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

@ -1,45 +1,41 @@
function getPixelRGBValues(base64Image) { function getPixelRGBValues(base64Image) {
httpArray = []; httpArray = [];
fileJSON = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${gId('targetSegment').value},"i":[`; fileJSON = `{"on":true,"bri":${brgh.value},"seg":{"id":${tSg.value},"i":[`;
//Which object holds the secret to the segment ID //Which object holds the secret to the segment ID
const segm = gId('targetSegment');
let segID = 0; let segID = 0;
if(segm.style.display == "flex"){ if(tSg.style.display == "flex"){
segID = segm.value segID = tSg.value
} else { } else {
segID = gId('segID').value; segID = sID.value;
} }
//const copyJSONledbutton = gId('copyJSONledbutton'); //const copyJSONledbutton = gId('copyJSONledbutton');
const JSONled = gId('JSONled'); const maxNoOfColorsInCommandSting = parseInt(cLN.value);
const maxNoOfColorsInCommandSting = parseInt(gId('colorLimitNumber').value);
let hybridAddressing = false; let hybridAddressing = false;
let selectedIndex = -1; let selectedIndex = -1;
let selector = gId("formatSelector"); selectedIndex = frm.selectedIndex;
selectedIndex = selector.selectedIndex; const formatSelection = frm.options[selectedIndex].value;
const formatSelection = selector.options[selectedIndex].value;
selector = gId("ledSetupSelector");
selectedIndex = selector.selectedIndex; selectedIndex = lSS.selectedIndex;
const ledSetupSelection = selector.options[selectedIndex].value; const ledSetupSelection = lSS.options[selectedIndex].value;
selector = gId("colorFormatSelector"); selectedIndex = cFS.selectedIndex;
selectedIndex = selector.selectedIndex;
let hexValueCheck = true; let hexValueCheck = true;
if (selector.options[selectedIndex].value == 'dec'){ if (cFS.options[selectedIndex].value == 'dec'){
hexValueCheck = false hexValueCheck = false
} }
selector = gId("addressingSelector"); selectedIndex = aS.selectedIndex;
selectedIndex = selector.selectedIndex;
let segmentValueCheck = true; //If Range or Hybrid let segmentValueCheck = true; //If Range or Hybrid
if (selector.options[selectedIndex].value == 'single'){ if (aS.options[selectedIndex].value == 'single'){
segmentValueCheck = false segmentValueCheck = false
} else if (selector.options[selectedIndex].value == 'hybrid'){ } else if (aS.options[selectedIndex].value == 'hybrid'){
hybridAddressing = true; hybridAddressing = true;
} }
@ -67,10 +63,10 @@ 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[0].children[0]; let scalePath = scDiv.children[0].children[0];
let color = scalePath.getAttribute("fill"); let color = scalePath.getAttribute("fill");
let sizeX = gId("sizeX").value; let sizeX = szX.value;
let sizeY = gId("sizeY").value; let sizeY = szY.value;
if (color != accentColor || sizeX < 1 || sizeY < 1){ if (color != accentColor || sizeX < 1 || sizeY < 1){
//image will not be rezised Set desitred size to original size //image will not be rezised Set desitred size to original size
@ -270,10 +266,10 @@ function getPixelRGBValues(base64Image) {
//For every commandString in the array //For every commandString in the array
for (let i = 0; i < commandArray.length; i++) { for (let i = 0; i < commandArray.length; i++) {
let thisJSONledString = `{"on":true,"bri":${gId('brightnessNumber').value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`; let thisJSONledString = `{"on":true,"bri":${brgh.value},"seg":{"id":${segID},"i":[${commandArray[i]}]}}`;
httpArray.push(thisJSONledString); httpArray.push(thisJSONledString);
let thiscurlString = `curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'${thisJSONledString}\' -H "Content-Type: application/json"`; let thiscurlString = `curl -X POST "http://${gurl.value}/json/state" -d \'${thisJSONledString}\' -H "Content-Type: application/json"`;
//Aggregated Strings That should be returned to the user //Aggregated Strings That should be returned to the user
if (i > 0){ if (i > 0){
@ -288,28 +284,28 @@ function getPixelRGBValues(base64Image) {
haString = `#Uncomment if you don\'t allready have these defined in your switch section of your configuration.yaml haString = `#Uncomment if you don\'t allready have these defined in your switch section of your configuration.yaml
#- platform: command_line #- platform: command_line
#switches: #switches:
${gId('haID').value} ${haIDe.value}
friendly_name: ${gId('haName').value} friendly_name: ${haNe.value}
unique_id: ${gId('haUID').value} unique_id: ${haUe.value}
command_on: > command_on: >
${curlString} ${curlString}
command_off: > command_off: >
curl -X POST "http://${gId('curlUrl').value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`; curl -X POST "http://${gurl.value}/json/state" -d \'{"on":false}\' -H "Content-Type: application/json"`;
if (formatSelection == 'wled'){ if (formatSelection == 'wled'){
JSONled.value = JSONledString; JLD.value = JSONledString;
} else if (formatSelection == 'curl'){ } else if (formatSelection == 'curl'){
JSONled.value = curlString; JLD.value = curlString;
} else if (formatSelection == 'ha'){ } else if (formatSelection == 'ha'){
JSONled.value = haString; JLD.value = haString;
} else { } else {
JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.' JLD.value = 'ERROR!/n' + formatSelection + ' is an unknown format.'
} }
fileJSON += ']}}'; fileJSON += ']}}';
let infoDiv = gId('image-info'); let infoDiv = imin;
let canvasDiv = gId('image-info'); let canvasDiv = imin;
if (hasTransparency){ if (hasTransparency){
imageInfo = imageInfo + '<p><b>WARNING!</b> Transparency info detected in image. Transparency (alpha) has been ignored. To ensure you get the result you desire, use only solid colors in your image.</p>' imageInfo = imageInfo + '<p><b>WARNING!</b> Transparency info detected in image. Transparency (alpha) has been ignored. To ensure you get the result you desire, use only solid colors in your image.</p>'
} }

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

@ -194,11 +194,9 @@
<button id="copyJSONledbutton" class="buttonclass"></button> <button id="copyJSONledbutton" class="buttonclass"></button>
<div id="gap1" class="gap"></div> <div id="gap1" class="gap"></div>
<button id="sendJSONledbutton" class="buttonclass"></button> <button id="sendJSONledbutton" class="buttonclass"></button>
<div id = "gap2" class="gap"></div>
<button id="fileJSONledbutton" class="buttonclass"></button>
</div> </div>
<div> <div>
<h3><div id="version">Version 1.0.6</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.7</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>

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

@ -3,71 +3,55 @@
// let locip = prompt("File Mode. Please enter WLED IP!"); // let locip = prompt("File Mode. Please enter WLED IP!");
// gId('curlUrl').value = locip; // gId('curlUrl').value = locip;
//} else //} else
gId('curlUrl').value = location.host; //
//Start up code
let devMode = false; //Remove
gurl.value = location.host;
let devMode = false;
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
if(urlParams.has('dev')){ if (gurl.value.length < 1){
devMode = true; gurl.value = "Missing_Host";
} }
if(devMode){
console.log('Developer mode active. Experimental and unstable functions active.')
} else{
console.log('Developer mode inactive. Append "?dev" to the URL.')
}
if(devMode){
gId("fileJSONledbutton").style.display = 'buttonclass'
gId("gap2").style.display = 'gap'
} else {
gId("fileJSONledbutton").style.display = 'none'
gId("gap2").style.display = 'none'
}
let httpArray = [];
let fileJSON = '';
function gen(){ function gen(){
//Generate image if enough info is in place //Generate image if enough info is in place
//Is host non empty //Is host non empty
//Is image loaded //Is image loaded
//is scale > 0 //is scale > 0
if (((gId("sizeX").value > 0 && gId("sizeY").value > 0) || gId("sizeDiv").style.display == 'none') && gId("curlUrl").value.length > 0 && gId("preview").style.display != 'none'){ if (((szX.value > 0 && szY.value > 0) || szDiv.style.display == 'none') && gurl.value.length > 0 && prw.style.display != 'none'){
//regenerate //regenerate
let base64Image = gId('preview').src; let base64Image = prw.src;
if (isValidBase64Gif(base64Image)) { if (isValidBase64Gif(base64Image)) {
gId('image').src = base64Image; im.src = base64Image;
getPixelRGBValues(base64Image); getPixelRGBValues(base64Image);
gId('image-container').style.display = "block"; imcn.style.display = "block";
gId("button-container").style.display = ""; bcn.style.display = "";
} else { } else {
let infoDiv = gId('image-info');
let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>'; let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>';
infoDiv.innerHTML = imageInfo; imin.innerHTML = imageInfo;
infoDiv.style.display = "block"; imin.style.display = "block";
gId('image-container').style.display = "none"; imcn.style.display = "none";
gId('JSONled').value = ''; JLD.value = '';
if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image."); if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image.");
} }
} }
var svg = gId("getSegmentsSVGpath");
if(gId("curlUrl").value.length > 0){ if(gurl.value.length > 0){
svg.setAttribute("fill", accentColor); gId("sSg").setAttribute("fill", accentColor);
} else{ } else{
svg.setAttribute("fill", accentTextColor); gId("sSg").setAttribute("fill", accentTextColor);
let ts = gId('targetSegment'); let ts = tSg;
ts.style.display = "none"; ts.style.display = "none";
ts.innerHTML = ""; ts.innerHTML = "";
gId('segID').style.display = "flex"; sID.style.display = "flex";
} }
} }
// Code for copying the generated string to clipboard // Code for copying the generated string to clipboard
gId("copyJSONledbutton").addEventListener('click', async () => { cjb.addEventListener('click', async () => {
let JSONled = gId('JSONled'); let JSONled = JLD;
JSONled.select(); JSONled.select();
try { try {
await navigator.clipboard.writeText(JSONled.value); await navigator.clipboard.writeText(JSONled.value);
@ -82,26 +66,26 @@ gId("copyJSONledbutton").addEventListener('click', async () => {
// Event listeners ======================= // Event listeners =======================
gId("ledSetupSelector").addEventListener("change", gen); lSS.addEventListener("change", gen);
gId("sizeY").addEventListener("change", gen); szY.addEventListener("change", gen);
gId("sizeX").addEventListener("change", gen); szX.addEventListener("change", gen);
gId("formatSelector").addEventListener("change", gen); //frm.addEventListener("change", gen);
gId("colorFormatSelector").addEventListener("change", gen); cFS.addEventListener("change", gen);
gId("addressingSelector").addEventListener("change", gen); aS.addEventListener("change", gen);
gId("brightnessNumber").addEventListener("change", gen); brgh.addEventListener("change", gen);
gId("colorLimitNumber").addEventListener("change", gen); cLN.addEventListener("change", gen);
gId("haID").addEventListener("change", gen); haIDe.addEventListener("change", gen);
gId("haUID").addEventListener("change", gen); haUe.addEventListener("change", gen);
gId("haName").addEventListener("change", gen); haNe.addEventListener("change", gen);
gId("curlUrl").addEventListener("change", gen); gurl.addEventListener("change", gen);
gId("segID").addEventListener("change", gen); sID.addEventListener("change", gen);
gId("preview").addEventListener("load", gen); prw.addEventListener("load", gen);
//gId("convertbutton").addEventListener("click", gen); //gId("convertbutton").addEventListener("click", gen);
gId("targetSegment").addEventListener("change", () => { tSg.addEventListener("change", () => {
sop = this.options[this.selectedIndex]; sop = tSg.options[tSg.selectedIndex];
gId("sizeX").value = sop.dataset.x; szX.value = sop.dataset.x;
gId("sizeY").value = sop.dataset.y; szY.value = sop.dataset.y;
gen(); gen();
}); });
@ -113,20 +97,30 @@ gId("sendJSONledbutton").addEventListener('click', async () => {
} }
}); });
gId("fileJSONledbutton").addEventListener('click', async () => { brgh.oninput = () => {
if (window.location.protocol === "https:") { brgV.textContent = brgh.value;
alert('Will only be available when served over http (or WLED is run over https)'); let perc = parseInt(brgh.value)*100/255;
} else { var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
let JSONFileName = 'TheName.json'; brgh.style.backgroundImage = val;
let urlString = 'http://'+gId('curlUrl').value+'/upload'; }
sendAsFile(fileJSON, JSONFileName, urlString); cLN.oninput = () => {
let cln = cLN;
cLV.textContent = cln.value;
let perc = parseInt(cln.value)*100/512;
var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
cln.style.backgroundImage = val;
}
frm.addEventListener("change", () => {
for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.toggle("hide", frm.value !== "ha");
} }
}); });
async function postPixels() { async function postPixels() {
svg = gId("sendSvgP"); let ss = gId("sendSvgP");
svg.setAttribute("fill", prsCol); ss.setAttribute("fill", prsCol);
let er = false; let er = false;
for (let i of httpArray) { for (let i of httpArray) {
try { try {
@ -149,58 +143,23 @@ async function postPixels() {
} }
if(er){ if(er){
//Something went wrong //Something went wrong
svg.setAttribute("fill", redColor); ss.setAttribute("fill", redColor);
setTimeout(function(){ setTimeout(function(){
svg.setAttribute("fill", accentTextColor); ss.setAttribute("fill", accentTextColor);
}, 1000); }, 1000);
} else { } else {
// A, OK // A, OK
svg.setAttribute("fill", greenColor); ss.setAttribute("fill", greenColor);
setTimeout(function(){ setTimeout(function(){
svg.setAttribute("fill", accentColor); ss.setAttribute("fill", accentColor);
}, 1000); }, 1000);
} }
} }
function sendAsFile(jsonStringInput, fileName, urlString) {
svg = gId("fileSvgP");
svg.setAttribute("fill", prsCol);
var file = new Blob([jsonStringInput], {type: 'application/json'});
if (devMode) {
console.log(jsonStringInput);
console.log(fileName);
console.log(urlString);
}
var formData = new FormData();
formData.append('file', file, fileName);
var xhr = new XMLHttpRequest();
xhr.open('POST', urlString, true);
xhr.onload = () => {
if (xhr.status === 200) {
// A, OK
svg.setAttribute("fill", greenColor);
setTimeout(function(){
svg.setAttribute("fill", accentTextColor);
}, 1000);
if (devMode) console.log('File uploaded successfully!');
} else {
//Something went wrong
svg.setAttribute("fill", redColor);
setTimeout(function(){
svg.setAttribute("fill", accentColor);
}, 1000);
if (devMode) console.log('File upload failed!');
}
};
xhr.send(formData);
}
//File uploader code //File uploader code
const dropZone = gId('drop-zone'); const dropZone = gId('drop-zone');
const filePicker = gId('file-picker'); const filePicker = gId('file-picker');
const preview = gId('preview'); const preview = prw;
// Listen for dragenter, dragover, and drop events // Listen for dragenter, dragover, and drop events
dropZone.addEventListener('dragenter', dragEnter); dropZone.addEventListener('dragenter', dragEnter);
@ -255,7 +214,7 @@ function updatePreview(file) {
// Update the preview image // Update the preview image
preview.src = reader.result; preview.src = reader.result;
//gId("submitConvertDiv").style.display = ""; //gId("submitConvertDiv").style.display = "";
gId("preview").style.display = ""; prw.style.display = "";
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@ -277,46 +236,30 @@ function isValidBase64Gif(string) {
} }
} }
gId("brightnessNumber").oninput = () => {
let bn = gId("brightnessNumber");
gId("brightnessValue").textContent = bn.value;
let perc = parseInt(bn.value)*100/255;
var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
bn.style.backgroundImage = val;
}
gId("colorLimitNumber").oninput = () => {
let cln = gId("colorLimitNumber");
gId("colorLimitValue").textContent = cln.value;
let perc = parseInt(cln.value)*100/512;
var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
cln.style.backgroundImage = val;
}
var hideableRows = d.querySelectorAll(".ha-hide"); var hideableRows = d.querySelectorAll(".ha-hide");
for (var i = 0; i < hideableRows.length; i++) { for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.add("hide"); hideableRows[i].classList.add("hide");
} }
gId("formatSelector").addEventListener("change", () => { frm.addEventListener("change", () => {
for (var i = 0; i < hideableRows.length; i++) { for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.toggle("hide", gId("formatSelector").value !== "ha"); hideableRows[i].classList.toggle("hide", frm.value !== "ha");
} }
}); });
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 = scDiv.children[0].children[0]
let color = scaleTogglePath.getAttribute("fill"); let color = scaleTogglePath.getAttribute("fill");
let d = ''; let d = '';
if (color === accentColor) { if (color === accentColor) {
color = accentTextColor; color = accentTextColor;
d = scaleToggleOffd; d = scaleToggleOffd;
gId("sizeDiv").style.display = "none"; szDiv.style.display = "none";
// Set values to actual XY of image, if possible // Set values to actual XY of image, if possible
} else { } else {
color = accentColor; color = accentColor;
d = scaleToggleOnd; d = scaleToggleOnd;
gId("sizeDiv").style.display = ""; szDiv.style.display = "";
} }
//scalePath.setAttribute("fill", color); //scalePath.setAttribute("fill", color);
scaleTogglePath.setAttribute("fill", color); scaleTogglePath.setAttribute("fill", color);
@ -327,15 +270,14 @@ function switchScale() {
function generateSegmentOptions(array) { function generateSegmentOptions(array) {
//This function is prepared for a name property on each segment for easier selection //This function is prepared for a name property on each segment for easier selection
//Currently the name is generated generically based on index //Currently the name is generated generically based on index
var select = gId("targetSegment"); tSg.innerHTML = "";
select.innerHTML = "";
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
var option = cE("option"); var option = cE("option");
option.value = array[i].value; option.value = array[i].value;
option.text = array[i].text; option.text = array[i].text;
option.dataset.x = array[i].x; option.dataset.x = array[i].x;
option.dataset.y = array[i].y; option.dataset.y = array[i].y;
select.appendChild(option); tSg.appendChild(option);
if(i === 0) { if(i === 0) {
option.selected = true; option.selected = true;
} }
@ -344,8 +286,7 @@ function generateSegmentOptions(array) {
// Get segments from device // Get segments from device
async function getSegments() { async function getSegments() {
cv = gId('curlUrl').value; cv = gurl.value;
var sp = gId("getSegmentsSVGpath");
if (cv.length > 0 ){ if (cv.length > 0 ){
try { try {
var arr = []; var arr = [];
@ -361,29 +302,29 @@ async function getSegments() {
}); });
} }
generateSegmentOptions(arr); generateSegmentOptions(arr);
gId('targetSegment').style.display = "flex"; tSg.style.display = "flex";
gId('segID').style.display = "none"; sID.style.display = "none";
sp.setAttribute("fill", greenColor); gId("sSg").setAttribute("fill", greenColor);
setTimeout(function(){ setTimeout(function(){
sp.setAttribute("fill", accentColor); gId("sSg").setAttribute("fill", accentColor);
}, 1000); }, 1000);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
sp.setAttribute("fill", redColor); gId("sSg").setAttribute("fill", redColor);
setTimeout(function(){ setTimeout(function(){
sp.setAttribute("fill", accentColor); gId("sSg").setAttribute("fill", accentColor);
}, 1000); }, 1000);
gId('targetSegment').style.display = "none"; tSg.style.display = "none";
gId('segID').style.display = "flex"; sID.style.display = "flex";
} }
} else{ } else{
sp.setAttribute("fill", redColor); gId("sSg").setAttribute("fill", redColor);
setTimeout(function(){ setTimeout(function(){
sp.setAttribute("fill", accentTextColor); gId("sSg").setAttribute("fill", accentTextColor);
}, 1000); }, 1000);
gId('targetSegment').style.display = "none"; tSg.style.display = "none";
gId('segID').style.display = "flex"; sID.style.display = "flex";
} }
} }
@ -403,20 +344,19 @@ var segmentData = generateSegmentArray(10);
generateSegmentOptions(segmentData); generateSegmentOptions(segmentData);
gId("getSegmentsDiv").innerHTML = seDiv.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>' '<svg id=getSegmentsSVG style="width:36px;height:36px;cursor:pointer" viewBox="0 0 24 24" onclick="getSegments()"><path id=sSg 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 id=fileSvgP 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 =
'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON '; '<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON ';
*/ */
gId("copyJSONledbutton").innerHTML = cjb.innerHTML =
'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> </svg>&nbsp; Copy to clipboard'; '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> </svg>&nbsp; Copy to clipboard';
gId("sendJSONledbutton").innerHTML = gId("sendJSONledbutton").innerHTML =
'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path id=sendSvgP 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.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 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 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.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 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 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 18H9V20M12 13Z" /> </svg>&nbsp; Send to device'; '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path id=sendSvgP 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.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 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 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.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 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 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 18H9V20M12 13Z" /> </svg>&nbsp; Send to device';
//After everything is loaded, check if we hav a possible IP/host //After everything is loaded, check if we have a possible IP/host
var svg = gId("getSegmentsSVGpath");
if(gId("curlUrl").value.length > 0){ if(gurl.value.length > 0){
svg.setAttribute("fill", accentColor); // Needs to be addressed directly here so the object actually exists
gId("sSg").setAttribute("fill", accentColor);
} }

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

@ -1,3 +1,44 @@
//elements
var gurl = gId('curlUrl');
var szX = gId("sizeX");
var szY = gId("sizeY");
var szDiv = gId("sizeDiv");
var prw = gId("preview");
var sID = gId('segID');
var JLD = gId('JSONled');
var tSg = gId('targetSegment');
var brgh = gId("brightnessNumber");
var seDiv = gId("getSegmentsDiv")
var cjb = gId("copyJSONledbutton");
var frm = gId("formatSelector");
var cLN = gId("colorLimitNumber");
var haIDe = gId("haID");
var haUe = gId("haUID");
var haNe = gId("haName");
var aS = gId("addressingSelector");
var cFS = gId("colorFormatSelector");
var lSS = gId("ledSetupSelector");
var imin = gId('image-info');
var imcn = gId('image-container');
var bcn = gId("button-container");
var im = gId('image');
//var ss = gId("sendSvgP");
var scDiv = gId("scaleDiv");
var w = window;
var canvas = gId('pixelCanvas');
var brgV = gId("brightnessValue");
var cLV = gId("colorLimitValue")
//vars
var httpArray = [];
var fileJSON = '';
var hideableRows = d.querySelectorAll(".ha-hide");
for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.add("hide");
}
var accentColor = '#eee'; var accentColor = '#eee';
var accentTextColor = '#777'; var accentTextColor = '#777';
var prsCol = '#ccc'; var prsCol = '#ccc';
@ -7,3 +48,4 @@ 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";
var sSg = gId("getSegmentsSVGpath");