jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-23 10:46:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes

Browse Source
This commit is contained in:
Henrik 2023-04-12 09:15:38 +02:00
parent e74dfb2ba6
commit e964c62907
1 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
wled00/data/cpal/cpal.htm
View File

@ -26,11 +26,13 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 20px; height: 20px;
} }
#bottomContainer { #bottomContainer {
position: absolute; position: absolute;
margin-top: 50px; margin-top: 50px;
} }
#gradient-box { #gradient-box {
@ -94,7 +96,7 @@
vertical-align: middle; vertical-align: middle;
} }
#info { #info {
display: block; display: "";
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -102,10 +104,12 @@
position: relative; position: relative;
margin-top: 100px; margin-top: 100px;
line-height: 1; line-height: 1;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="wrap" style="max-width: 800px;">
<div style="display: flex; justify-content: center;"> <div style="display: flex; justify-content: center;">
<h1 style="display: flex; align-items: center;"> <h1 style="display: flex; align-items: center;">
<svg style="width:36px;height:36px;margin-right:6px;" viewBox="0 0 32 32"> <svg style="width:36px;height:36px;margin-right:6px;" viewBox="0 0 32 32">
@ -114,7 +118,7 @@
<rect style="fill:#003FFF" x="18" y="10" width="4" height="8"/> <rect style="fill:#003FFF" x="18" y="10" width="4" height="8"/>
<rect style="fill:#003FFF" x="22" y="6" width="8" height="4"/> <rect style="fill:#003FFF" x="22" y="6" width="8" height="4"/>
</svg> </svg>
WLED Custom Palette Creator <span id="head">WLED Custom Palette Creator</span>
</h1> </h1>
</div> </div>
@ -139,7 +143,7 @@
Currently in use Custom Palette IDs are 0 to <span id="cpaltx">-1</span>. Note!, IDs <u>must</u> be in uninterupted sequece from 0 and cannot excede 9. This number will only be updated on WLED reboot (or equivalent). Currently in use Custom Palette IDs are 0 to <span id="cpaltx">-1</span>. Note!, IDs <u>must</u> be in uninterupted sequece from 0 and cannot excede 9. This number will only be updated on WLED reboot (or equivalent).
</div> </div>
<div style="display: flex; justify-content: center;"></div> <div style="display: flex; justify-content: center;"></div>
</div>
</body> </body>
@ -162,7 +166,8 @@
//Initiation //Initiation
getInfo(); getInfo();
window.addEventListener('load', chkW);
window.addEventListener('resize', chkW);
gradientBox.addEventListener("click", clikOnGradient); gradientBox.addEventListener("click", clikOnGradient);
gId("sendSpan").innerHTML = gId("sendSpan").innerHTML =
@ -177,6 +182,7 @@
updateGradient(); //Sets the gradient at startup updateGradient(); //Sets the gradient at startup
function clikOnGradient(e){ function clikOnGradient(e){
removeTrashcan(e);
addC(Math.round((e.offsetX/gradientLength)*256)); addC(Math.round((e.offsetX/gradientLength)*256));
} }
@ -238,7 +244,7 @@
colorPickerMarker.style.left = colorMarker.style.left; colorPickerMarker.style.left = colorMarker.style.left;
colorPicker.style.left = colorMarker.style.left; colorPicker.style.left = colorMarker.style.left;
const deleteMarker = cE('span'); // create a marker for the color position const deleteMarker = cE('span'); // create a delete marker for the color position
if(position > 0 && position < 255){ if(position > 0 && position < 255){
deleteMarker.className = 'delete-marker'; deleteMarker.className = 'delete-marker';
deleteMarker.id = 'deleteMarker' + position.toString(); deleteMarker.id = 'deleteMarker' + position.toString();
@ -295,15 +301,18 @@
} }
function colClk(e){ function colClk(e){
removeTrashcan(e)
e.stopPropagation(); e.stopPropagation();
let cp = gId(e.srcElement.id.replace("Marker","")); let cp = gId(e.srcElement.id.replace("Marker",""));
cp.click(); cp.click();
} }
function cpClk(e){ function cpClk(e){
removeTrashcan(event)
e.stopPropagation(); e.stopPropagation();
console.log(e); console.log(e);
} }
//This neat little function makes any element draggable on the X-axis. //This neat little function makes any element draggable on the X-axis.
//Just call: makeMeDrag(myElement); And you are good to go. //Just call: makeMeDrag(myElement); And you are good to go.
function makeMeDrag(elmnt) { function makeMeDrag(elmnt) {
@ -318,6 +327,7 @@
elmnt.onmousedown = dragMouseDown; elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) { function dragMouseDown(e) {
removeTrashcan(event)
e = e || window.event; e = e || window.event;
e.preventDefault(); e.preventDefault();
// get the mouse cursor position at startup: // get the mouse cursor position at startup:
@ -400,6 +410,17 @@
} }
} }
function chkW() {
//Possibly add more code that recalculates the gradient... Massive job ;)
const wrap = gId('wrap');
const head = gId('head');
if (wrap.offsetWidth < 600) {
head.style.display = 'none';
} else {
head.style.display = 'inline';
}
}
function calcJSON(){ function calcJSON(){
let rStr = '{"palette":[' let rStr = '{"palette":['
Object.entries(tCol).forEach(([p, c]) => { Object.entries(tCol).forEach(([p, c]) => {
@ -443,23 +464,22 @@
return false; return false;
} }
// Get segments from device async function getInfo() {
async function getInfo() { hst = location.host;
hst = location.host; if (hst.length > 0 ){
if (hst.length > 0 ){ try {
try { var arr = [];
var arr = []; const response = await fetch('http://'+hst+'/json/info');
const response = await fetch('http://'+hst+'/json/info'); const json = await response.json();
const json = await response.json(); cpalc = json.cpalcount;
cpalc = json.cpalcount; gId('cpaltx').innerHTML = cpalc-1;
gId('cpaltx').innerHTML = cpalc-1; console.log('cpalc: ', cpalc);
console.log('cpalc: ', cpalc); } catch (error) {
} catch (error) { console.error(error);
console.error(error); }
} else{
console.error('cannot identify host');
} }
} else{
console.error('cannot identify host');
} }
}
</script> </script>