Allow hex strings for palette
This commit is contained in:
Blaz Kristan
parent
16373919d4
commit
e42836b07f
@ -542,95 +542,105 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generatePaletteDivs() {
|
function generatePaletteDivs() {
|
||||||
const palettesDiv = document.getElementById("palettes");
|
const palettesDiv = document.getElementById("palettes");
|
||||||
const paletteDivs = Array.from(palettesDiv.children).filter((child) => {
|
const paletteDivs = Array.from(palettesDiv.children).filter((child) => {
|
||||||
return child.id.match(/^palette\d$/); // match only elements with id starting with "palette" followed by a single digit
|
return child.id.match(/^palette\d$/); // match only elements with id starting with "palette" followed by a single digit
|
||||||
});
|
});
|
||||||
if (paletteArray.length < 10){
|
if (paletteArray.length < 10){
|
||||||
//Room for one more :)
|
//Room for one more :)
|
||||||
paletteArray.push({"palette":[0,70,70,70,255,70,70,70]});
|
paletteArray.push({"palette":[0,70,70,70,255,70,70,70]});
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const div of paletteDivs) {
|
||||||
|
palettesDiv.removeChild(div); // remove each div that matches the above selector
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < paletteArray.length; i++) {
|
||||||
|
const palette = paletteArray[i];
|
||||||
|
const paletteDiv = document.createElement("div");
|
||||||
|
paletteDiv.id = `palette${i}`;
|
||||||
|
paletteDiv.classList.add("palette");
|
||||||
|
paletteDiv.dataset.colarray = JSON.stringify(palette.palette);
|
||||||
|
|
||||||
|
const gradientDiv = document.createElement("div");
|
||||||
|
gradientDiv.id = `paletteGradient${i}`
|
||||||
|
const buttonsDiv = document.createElement("div");
|
||||||
|
buttonsDiv.id = `buttonsDiv${i}`;
|
||||||
|
buttonsDiv.classList.add("buttonsDiv")
|
||||||
|
|
||||||
|
const sendSpan = document.createElement("span");
|
||||||
|
sendSpan.id = `sendSpan${i}`;
|
||||||
|
sendSpan.onclick = function() {initiateUpload(i)};
|
||||||
|
sendSpan.setAttribute('title', `Send current editor to slot ${i}`); // perhaps Save instead of Send?
|
||||||
|
sendSpan.innerHTML = svgSave;
|
||||||
|
sendSpan.classList.add("sendSpan")
|
||||||
|
const editSpan = document.createElement("span");
|
||||||
|
editSpan.id = `editSpan${i}`;
|
||||||
|
editSpan.onclick = function() {loadForEdit(i)};
|
||||||
|
editSpan.setAttribute('title', `Copy slot ${i} palette to editor`);
|
||||||
|
editSpan.innerHTML = svgEdit;
|
||||||
|
editSpan.classList.add("editSpan")
|
||||||
|
|
||||||
|
gradientDiv.classList.add("paletteGradients");
|
||||||
|
let gradientColors = "";
|
||||||
|
for (let j = 0; j < palette.palette.length; j += 2) {
|
||||||
|
const position = palette.palette[j];
|
||||||
|
if (typeOf(palette.palette[j+1]) === "string") {
|
||||||
|
gradientColors += `#${palette.palette[j+1]} ${position/255*100}%, `;
|
||||||
|
} else {
|
||||||
|
const red = palette.palette[j + 1];
|
||||||
|
const green = palette.palette[j + 2];
|
||||||
|
const blue = palette.palette[j + 3];
|
||||||
|
gradientColors += `rgba(${red}, ${green}, ${blue}, 1) ${position/255*100}%, `;
|
||||||
|
j += 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gradientColors = gradientColors.slice(0, -2); // remove the last comma and space
|
||||||
|
gradientDiv.style.backgroundImage = `linear-gradient(to right, ${gradientColors})`;
|
||||||
|
paletteDiv.className = "palGradientParent";
|
||||||
|
buttonsDiv.appendChild(sendSpan);
|
||||||
|
if(i<cpalc){
|
||||||
|
buttonsDiv.appendChild(editSpan); //Dont offer to edit the empty spot
|
||||||
|
}
|
||||||
|
paletteDiv.appendChild(gradientDiv);
|
||||||
|
paletteDiv.appendChild(buttonsDiv);
|
||||||
|
|
||||||
|
palettesDiv.appendChild(paletteDiv);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const div of paletteDivs) {
|
function loadForEdit(i){
|
||||||
palettesDiv.removeChild(div); // remove each div that matches the above selector
|
console.log("Lets edit no: ", i);
|
||||||
}
|
document.querySelectorAll('input[id^="colorPicker"]').forEach((input) => {
|
||||||
|
input.parentNode.removeChild(input);
|
||||||
for (let i = 0; i < paletteArray.length; i++) {
|
});
|
||||||
const palette = paletteArray[i];
|
document.querySelectorAll('span[id^="colorMarker"], span[id^="colorPickerMarker"], span[id^="deleteMarker"]').forEach((span) => {
|
||||||
const paletteDiv = document.createElement("div");
|
span.parentNode.removeChild(span);
|
||||||
paletteDiv.id = `palette${i}`;
|
});
|
||||||
paletteDiv.classList.add("palette");
|
|
||||||
paletteDiv.dataset.colarray = JSON.stringify(palette.palette);
|
|
||||||
|
|
||||||
const gradientDiv = document.createElement("div");
|
|
||||||
gradientDiv.id = `paletteGradient${i}`
|
|
||||||
const buttonsDiv = document.createElement("div");
|
|
||||||
buttonsDiv.id = `buttonsDiv${i}`;
|
|
||||||
buttonsDiv.classList.add("buttonsDiv")
|
|
||||||
|
|
||||||
const sendSpan = document.createElement("span");
|
|
||||||
sendSpan.id = `sendSpan${i}`;
|
|
||||||
sendSpan.onclick = function() {initiateUpload(i)};
|
|
||||||
sendSpan.setAttribute('title', `Send current editor to slot ${i}`);
|
|
||||||
sendSpan.innerHTML = svgSave;
|
|
||||||
sendSpan.classList.add("sendSpan")
|
|
||||||
const editSpan = document.createElement("span");
|
|
||||||
editSpan.id = `editSpan${i}`;
|
|
||||||
editSpan.onclick = function() {loadForEdit(i)};
|
|
||||||
editSpan.setAttribute('title', `Copy slot ${i} palette to editor`);
|
|
||||||
editSpan.innerHTML = svgEdit;
|
|
||||||
editSpan.classList.add("editSpan")
|
|
||||||
|
|
||||||
gradientDiv.classList.add("paletteGradients");
|
let colArray = JSON.parse(gId(`palette${i}`).getAttribute("data-colarray"));
|
||||||
let gradientColors = "";
|
|
||||||
for (let j = 0; j < palette.palette.length; j += 4) {
|
for (let j = 0; j < colArray.length; j += 2) {
|
||||||
const position = palette.palette[j];
|
const position = colArray[j];
|
||||||
const red = palette.palette[j + 1];
|
if (typeof(colArray[j+1]) === "string") {
|
||||||
const green = palette.palette[j + 2];
|
const hex = `#${colArray[j+1]}`;
|
||||||
const blue = palette.palette[j + 3];
|
} else {
|
||||||
gradientColors += `rgba(${red}, ${green}, ${blue}, 1) ${position/255*100}%, `;
|
const red = colArray[j + 1];
|
||||||
|
const green = colArray[j + 2];
|
||||||
|
const blue = colArray[j + 3];
|
||||||
|
const hex = rgbToHex(red, green, blue);
|
||||||
|
j += 2;
|
||||||
|
}
|
||||||
|
console.log(position, hex)
|
||||||
|
addC(position, hex);
|
||||||
}
|
}
|
||||||
|
|
||||||
gradientColors = gradientColors.slice(0, -2); // remove the last comma and space
|
|
||||||
gradientDiv.style.backgroundImage = `linear-gradient(to right, ${gradientColors})`;
|
|
||||||
paletteDiv.className = "palGradientParent";
|
|
||||||
buttonsDiv.appendChild(sendSpan);
|
|
||||||
if(i<cpalc){
|
|
||||||
buttonsDiv.appendChild(editSpan); //Dont offer to edit the empty spot
|
|
||||||
}
|
|
||||||
paletteDiv.appendChild(gradientDiv);
|
|
||||||
paletteDiv.appendChild(buttonsDiv);
|
|
||||||
|
|
||||||
palettesDiv.appendChild(paletteDiv);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function loadForEdit(i){
|
function rgbToHex(r, g, b) {
|
||||||
console.log("Lets edit no: ", i);
|
const hex = ((r << 16) | (g << 8) | b).toString(16);
|
||||||
document.querySelectorAll('input[id^="colorPicker"]').forEach((input) => {
|
return "#" + "0".repeat(6 - hex.length) + hex;
|
||||||
input.parentNode.removeChild(input);
|
|
||||||
});
|
|
||||||
document.querySelectorAll('span[id^="colorMarker"], span[id^="colorPickerMarker"], span[id^="deleteMarker"]').forEach((span) => {
|
|
||||||
span.parentNode.removeChild(span);
|
|
||||||
});
|
|
||||||
|
|
||||||
let colArray = JSON.parse(gId(`palette${i}`).getAttribute("data-colarray"));
|
|
||||||
|
|
||||||
for (let j = 0; j < colArray.length; j += 4) {
|
|
||||||
const position = colArray[j];
|
|
||||||
const red = colArray[j + 1];
|
|
||||||
const green = colArray[j + 2];
|
|
||||||
const blue = colArray[j + 3];
|
|
||||||
const hex = rgbToHex(red, green, blue);
|
|
||||||
console.log(position, hex)
|
|
||||||
addC(position, hex);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function rgbToHex(r, g, b) {
|
|
||||||
const hex = ((r << 16) | (g << 8) | b).toString(16);
|
|
||||||
return "#" + "0".repeat(6 - hex.length) + hex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLocalStorageData(){
|
function getLocalStorageData(){
|
||||||
// Retrieve the "wledPalx" JSON from local storage
|
// Retrieve the "wledPalx" JSON from local storage
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user