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

Update Pixel Magic Tool

Browse Source 
Reducing the size of HTML/CSS/Javascript
This commit is contained in:
Alerson Jorge 2023-10-24 12:52:06 -03:00
parent 789e34702b
commit a1f28caa8e
2 changed files with 695 additions and 780 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
wled00/data/pxmagic/pxmagic.htm
View File

@ -162,13 +162,42 @@
padding-bottom: 20px; padding-bottom: 20px;
} }
.header .brand { .header {
width: 100%; display: flex;
max-width: 200px; flex-direction: column;
height: 100%; align-items: start;
display: block; padding-bottom: 20px;
outline: none; }
border: 0;
.header .title {
font-size: 36px;
font-weight: 600;
color: var(--gray-light);
}
.header .subtitle {
font-size: 12px;
color: var(--text);
}
.header .rainbow {
background: linear-gradient(
to right,
#ef5350,
#f48fb1,
#7e57c2,
#2196f3,
#26c6da,
#43a047,
#eeff41,
#f9a825,
#ff5722
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: rainbow 5s linear infinite;
transition: background-position 0.5s ease;
} }
label { label {
@ -554,6 +583,15 @@
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes rainbow {
0% {
background-position: 0% 0;
}
100% {
background-position: 200% 0;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -561,8 +599,14 @@
<div class="content"> <div class="content">
<form id="formGenerate" novalidate> <form id="formGenerate" novalidate>
<div class="header"> <div class="header">
<img alt="Pixel Magic Tool" width="200" height="130" src="data:image/gif;base64,R0lGODlhyACCAJEAAAAAAP///+7u7v///yH5BAEAAAMALAAAAADIAIIAAAL/nI+py+0Po5y02ouzEVz7D4biqHECiabqyjJmC8fy3Jh2R+f6/t02DwwKaz4csfgaXn5KZRKCZDYp0inw+YhirdAtN+dNaJGuMJj8bVUn42LZeEWnV2tJ2/c+CaNzlVwBt3G3xhfn1keitVAneDNweFC454g4ogho5gbZiDfUWRlyGbnJiUXKyPMJKsIoWgp3arajugrSKvmqlysm+2hEeyQLXFuSSepLuWvBNLyYjIlKTGf8fBzB/OzQjNwrjYK6aY08eojLPUje7Z2oC10lnuR63j7flh64bvjeHG9OOyhlWz4a4ToVsvcqF7qEXegNZKWq3J96/ehZgySQ3MMU/wUp+TsY6OKnjI02fjOI5uMdXtmUzdM2cZK8LGNY/oDXUiGhYXUEmpP5E6Y8TfxyUtyZs6dRnVYQ2qmJQCI4o06V/fQZM0jVhiqjOfNa7yu2aCTHfdlKc2jZew5thpEqbGlUfE6gPlUr1x3do1vg7n3Z0KZWu9cIh2VD1bC4YH+5Dp4ptKu6uVPxgtXb9m5mGWgjT1wsNuRCtpcZCsZc+iRkxrHyurXYN9tqzGJDu+ZoOK3kxrQpw0YK2jfdW1lhdGb9by3D1slXvhaedPK02babp15eFHjuiEGv46aOWrZywFfFO4cOnfjmGMfzfJZ++vVv3d16eU+V2zPzJW+b0//nbR98+ozG13u85VEdS/+tZxaClQBkCoQMmkThgtzlV2GGVFR1noYebkhYhx+OaGE17ZGIok77YLjMePpJuBWLhUGIQYciZhAcYjACJN99PYKH3IVAaibgizvudluQQ1YnZFD8JcnVkYot6d6NRP5h5ZM+VimlgcVdeaKRJsoI4pYqdulljmI6GSWWYaYnoY5oEljgmnNOSFqTX4ZHI5hyZXmmnXPKiQugfPLop1eGyngnlTa+mWefM7JZYGOMNrrnjys6iiahoC1KHaaZwtmlpzCa+ueJU4rKqaihQHrmeqAiudSOqJZqC6yVCornpKOSCh+rvbapZqy8vkrlron/Solsq5QaWuavkQbLarOUamqpriUKqKqw1/KaaqhkRlussUpGaN63ywYoLpR1Antgereiq12527L77HirqkvavLBYJy2xWGFKbroBH+ZrR/W6eC6+dxa8sLvlcgjwp642fKq/2A6LsMCbxtZuo/7Gu+7G5EL8sWghP7wuyQkbbG8xrjC3Z7Utc3yvyeyFWPHAIt8MEa1mtjhzz+H+/DLDDetsHM8w6+ktWZ1qDC/OOI5bddWyxskl1yVnvXOyFF8q6aF05gx202I7vTKgg1I9rcseaDt22+29/XXcVteItd5agys1wXZu7G4FdLOdb9lmZ9w1yIiqxq+5sQ4LLcYW/yeeLMrcIh5w5Y3brai2mstdd+SeM0l2zaKPPHo7p1e6N+w+X54567ZPzvliCh+JLeC8Y9y61rlvY2+MoAv+OenDl+22vvvS7q2gwetd+pfFPz+7sNLfLnvRLF5vGfTaA8893rCnnXTEDo+fPMfVM36+39y/2/7UXF4NZbdHH2x85N0XKS++5S9163Ne+Az4OKINbWIEzNbaDigxrykQgP1q2Yu2Z0F4tU5pLpmgy/QXugcKTXmKOxn+Ngee7CEwTbH7n9xSlD4U7gaG+TjcAWm4DhvOEIfS0CELedjDqNHMIX0zXAtpyL7QoI6CNAGiB823waAxEYdJnJ61jgjDKp9ejQVDQ6LNZIZF3TjxiczqwRQnNcaNBI4a+OhiGoHCmgT55o0DUQ/U/vVCOjbBjmMSkh5zyMY+9vGP3ijNGudISGIQRziCOI0bE0kQL6TMcZyAZC2UgkfrVNKSoMCk67y0SU4iwpOkcuQZRRk2InpEFGMJIyq52J+K4CAgsnxlH/g4yUzacg64pNcgd3kWBq2xLXkEJmeEGZf+GNOWBQAAOw==" /> <span class="title"
<!--img width="200" height="130" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACCCAYAAAADm4eUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACRBJREFUeNrsnYtx6joQhsWdWwBzGsAl0MGBSkILVABUQAtQCU4HLsG3gTN0kGvnyJmNIhnJT9n+vplMEr8f+q1dabVSCgCcrMa+gD9//uyKXw+xaP/r16+UVwMx8A+PAACBAEzLxCpMq49X2xSm1opXBNQgAJHy71xuxKdGMqAx4PvzOxe/TtTe8Qhkr39vi5+rWH4sfjJeDSxaINXXu/hymasyvuywGIEUAihriLX+91kU/qzDY3+02P1RibPOnLD001yK7c8TNqXM+4GRa5DSfNrpv1NhWn3VGMYyzCvAxBKm1lMLJ8YvbeUjSTZiXaavHxBIcOGqClEiViW6teSzNqnzNYrtDmLfvNj2ZtnsIv4+OQ5VnuO9+PktrsnLBHMsP+ifqqFhav5SLp7bRtwLDFiD7BwFNjGW1xWuN8M0u1lqn7MQlEsg7+V2Wpi7pb/w4lmUAjmLDxkCidnEisycUrSgQbQC0WbVm8X23xbrKpPn7jC3XnETNdab8eWU5tRKmE/VdVyN49xpUEAgbarxs6jGH9JUKtbta3ZNHGbQWix/b2Fa5GaNUbN9qrc1V/1HLYNAoJsa8Syd46rmM5Z/q+W0kNucp/XxYFiBZI6/beTCDPrWwSj2HfqFm/00Iec3GyRuluXK2KbJ/XV9PBhKIMUX7Biw7a0qRIZplr0wzfq8/ij7aQATK0aTKTGc+08Txuj3acOb8I9+mEc1ppTP8UwfESYukLtwyGMxExKL2ZQrd7+Pq1ZaicYC2YJ2eGEenQKv9+BYjkCmLpCGTbkAmFgDmVO2UJN1i0M26ssp9rmqn/FgkzE/Ech88fYpavp9THFVy119ObZRjlvH8Wr7lMwRgiOan5OGMekAoTWIT0+zQeOw7+Jc61AToklPthHGkphf4w6faeZRC51qgiv7oryuzkPzhdlomp/XYt1Tv6/9rASiwkectQn73jY4X5OEAomrwNpeYE1L0yvxHkXh+YjoXR97CpHZ1bzXyYOJBYCT/kmuhu8RTz2+tLlwZpuaqR8eZtWz53s0TeWsx3MikK6RYSwDnnPvUYjvPfZsH/uOPK7u0WKKHucQ9YyJBUANMg6eTrps0Wqa7fFSY74NacJe6s4dODYIgUBnZs45gmsoBXGe27NFIN3XGnIcS5+sRX9VHmtYhw5BSYQjP6nrRyDdIxPllS/9bqzvKtWO7D+6DPn1DjSVyns9xXT9CCQectP8IdUOJtYSzSqXGRFcK4gkESHhOxuP8KBWWSCnbiohkHFxmRHWWkW5MxvK9EJV+M5RFEifbI8u2maBbGoq3cR5Zeh+pu+teiYIBMIzG8ps+JYURFO531xfv6zBnlPoSEQg/SJzEeeMksTEioWyIN57qr7lsbMXZkQizJJUvQ51kbNrZQ4zSb0wt+T1ffNBPO6tbnavLkwlaS4+Ech49Jn98Mexa8yIUGpn15LrasytNvfuPH8XplKXkydNTSBXS8HIzJxYjvHVawUQKdaBR478S6Hza/zoQKoZr+08hrKM3yavE4xag9gK4Ejza7wjBhgTwt0BEAgAAgEYxgdZIjWDmwYb2DNCsjcn5tzxDeZX33fd1N7hHO/ec91TgwAgEAAEAoBAAHDSu3Xq2rJ2HKfV4KCaaIVFYQzEekVX6Uw3jpm30kUJRHXT4uHKHdx2HHVoa5VvpsLQpBFloXgf8R0d1PAtdwdlH4ezWppA5oRXpsIG8W6E8+CDACAQAAQCMCR9+iC7yCaQgZFxTIyaLFUgMRASQ/WgCPfOLnD7ujHyJXUtdp1ksJy1QEKC5aaYUmeEZ7ka+LTZi3eY1rzPXRcCwQcBQCAAHZpYjtCKzQjX5x0SwLXBkE56LA7rQXmGBHBtXtjEm3v6aKHz2bdKlh27QELZG0nNzsodX2Nuu4tBkOYIOo/7mKKj3WZkZOh89m2TZfeJ94hCYrGmw9azpY1EfBHWINA/Vx7B8NCKBbDUGsQxKCmE3xQRBDJnYnawbQ7zmwrr/ZVTD8B3cuWePz5FIJFj6y9pMET4Sb+L8/mWAmlrQeCDACAQAHyQRbIOMcswxxYqkJh6vB2DxC49JUYI7d1eUeQjEIguDOeI79u39acsgHTQIZDF8fRMoUMJwUkHAAQCgIkFL0xGm1+YRty69WZppStzIt8QSCS+irKHJYTmv/UlpKCGTstdcurgvF3fX6LcqX8OjmMgkBgovlRla9fe8iV+qB6mxNZfcq/COtK03G3vb++4j2hj5vBBABAIAAIBwAfpiK0jT6yNMjvHIGMuQpJddMipOO/J4i+sZvDuWvtISxXIemoOroWb8m99mlPIzKDvjlasiaIHBOWeNRMPDB8EAIEA4KQvAaaBRiBQz4lHMD+BXAaeMtjrfK4BWg2mgGvdlBpx82iUdPjuenkf+CAACAQAgQAgEIAYnPTWOU0DyHs836XBtfhwL37eKT6fuDLEZAO/u16gxWUkhmxhazKLl9n6U3OMtOXMVZhYAAgEYEE+CMTHtkVU7pbHh0DmzuTGcxSCvgaI8z5kOh9xjV9jZRgwFRERTTvtGz6UK3vLUv6i5tp5XsdYrYK1A7AQCPgKuhSCj5BChZ5qcaQD1hreaZsQCIzN+8ABsPggMDo3S40gx8XvPU20vjhq0+qBQGAscyw3TK6NWJ+OfH2Zvi5qkImRzvSckx0chkDi+vKmI4kkOlxNxHVhLcU+B/V3rnmTxk3ICARiJaSJuCJx7NO4CZlgRRiiNvgwaoFVzbZnH5NMHiMgGPNbwKfPdRGLBYCJBRPC5oOVLWCHmn1yZe/lPyEQmBu5FslTNMfuTIHoZdU2XzOBGSaUKZDPgM+QZmZMLIiNg/YnZHBmNdPXTSyT22z1/6YfUu4jRzteVeDAMWoQiMWRT7Q4flsc8s8awjKh549OSGO/tG3ibgQCsZA09Bl67YTExAJAIAAIBKZNrv421ab6/13ZkefIgi+5SOdd7/NAIDAryghgPS7EDAvZlM65dtA3lv3Kfe7G4rXYp9V4fJx0iJ2DsncSlk24T8c+VbOvSdnkmyEQWEKNkzbYLRt7LArAD7Rf8GHrx6jZ5yH289q39FeMfR5trwsfBAAAmvG/AAMAhiHUfzRdo4IAAAAASUVORK5CYII=" alt="Pixel Magic Tool" class="brand" /--> >PIXEL <span class="rainbow">MAGIC</span> TOOL</span
>
<span class="subtitle"
>It is a tool that converts any image into code in
<strong>JSON WLED</strong> format for
<strong>2D Matrix</strong> panels</span
>
</div> </div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="column" validate>
@ -774,7 +818,7 @@
type="file" type="file"
name="source" name="source"
id="source" id="source"
accept="image/jpg,image/jpeg,image/png,image/gif" accept="image/*"
style="display: none" /> style="display: none" />
</div> </div>
<div class="row"> <div class="row">
@ -837,7 +881,7 @@
let WLED_URL = `${protocol}//${host}`; let WLED_URL = `${protocol}//${host}`;
const hostname = element("hostname"); const hostname = gId("hostname");
hostname.value = host; hostname.value = host;
hostname.addEventListener("blur", async () => { hostname.addEventListener("blur", async () => {
@ -859,19 +903,19 @@
hostnameLabel(); hostnameLabel();
})(); })();
function element(id) { function gId(id) {
return d.getElementById(id); return d.getElementById(id);
} }
function hostnameLabel() { function hostnameLabel() {
const link = element("wledEdit"); const link = gId("wledEdit");
link.href = WLED_URL + "/edit"; link.href = WLED_URL + "/edit";
} }
async function playlist() { async function playlist() {
const { value: duration } = element("duration"); const { value: duration } = gId("duration");
const { value: transition } = element("transition"); const { value: transition } = gId("transition");
const { value: name } = element("name"); const { value: name } = gId("name");
const urlPreset = `${WLED_URL}/presets.json`; const urlPreset = `${WLED_URL}/presets.json`;
const url = `${WLED_URL}/json`; const url = `${WLED_URL}/json`;
@ -1004,7 +1048,7 @@
async function images() { async function images() {
const url = `${WLED_URL}/edit?list=/`; const url = `${WLED_URL}/edit?list=/`;
const select = element("images"); const select = gId("images");
show(); show();
@ -1050,9 +1094,9 @@
} }
async function segments() { async function segments() {
const select = element("segments"); const select = gId("segments");
const width = element("width"); const width = gId("width");
const height = element("height"); const height = gId("height");
show(); show();
@ -1099,8 +1143,8 @@
} }
} }
const dropzone = element("dropzone"); const dropzone = gId("dropzone");
const source = element("source"); const source = gId("source");
dropzone.addEventListener("dragover", (e) => { dropzone.addEventListener("dragover", (e) => {
e.preventDefault(); e.preventDefault();
@ -1109,12 +1153,10 @@
dropzone.addEventListener("drop", (e) => { dropzone.addEventListener("drop", (e) => {
e.preventDefault(); e.preventDefault();
const dropzoneLabel = element("dropzoneLabel");
source.files = e.dataTransfer.files; source.files = e.dataTransfer.files;
const { name } = source.files[0]; const { name } = source.files[0];
dropzoneLabel.textContent = `Image ${name} selected!`; gId("dropzoneLabel").textContent = `Image ${name} selected!`;
validate(e); validate(e);
}); });
@ -1124,7 +1166,7 @@
}); });
source.addEventListener("change", (e) => { source.addEventListener("change", (e) => {
const dropzoneLabel = element("dropzoneLabel"); const dropzoneLabel = gId("dropzoneLabel");
const { value } = e.target; const { value } = e.target;
if (value) { if (value) {
@ -1138,7 +1180,7 @@
validate(e); validate(e);
}); });
element("btnSimulatePreset").addEventListener("click", async () => { gId("btnSimulatePreset").addEventListener("click", async () => {
const url = `${WLED_URL}/json/state`; const url = `${WLED_URL}/json/state`;
const options = { const options = {
@ -1162,9 +1204,9 @@
} }
}); });
element("btnSave").addEventListener("click", async () => { gId("btnSave").addEventListener("click", async () => {
const { checked } = element("animation"); const { checked } = gId("animation");
const { value: name } = element("name"); const { value: name } = gId("name");
if (checked) { if (checked) {
await insert(jsonSaveWLED, true); await insert(jsonSaveWLED, true);
@ -1179,8 +1221,8 @@
} }
}); });
element("btnCopyToClipboard").addEventListener("click", async () => { gId("btnCopyToClipboard").addEventListener("click", async () => {
const response = element("response"); const response = gId("response");
response.select(); response.select();
@ -1197,9 +1239,9 @@
} }
}); });
element("btnDownloadPreset").addEventListener("click", () => { gId("btnDownloadPreset").addEventListener("click", () => {
const { value: response } = element("response"); const { value: response } = gId("response");
const { value: output } = element("output"); const { value: output } = gId("output");
const timestamp = new Date().getTime(); const timestamp = new Date().getTime();
const filename = `WLED_${timestamp}`; const filename = `WLED_${timestamp}`;
@ -1207,55 +1249,42 @@
downloadFile(response, filename, output); downloadFile(response, filename, output);
}); });
element("segments").addEventListener("change", (e) => { gId("segments").addEventListener("change", (e) => {
const width = element("width"); const { width, height } = e.target.selectedOptions[0].dataset;
const height = element("height");
const { width: w, height: h } = e.target.selectedOptions[0].dataset; gId("width").value = w;
gId("height").value = h;
width.value = w;
height.value = h;
}); });
element("output").addEventListener("change", (e) => { gId("output").addEventListener("change", (e) => {
const output = d.getElementsByClassName("output");
const { value } = e.target.selectedOptions[0]; const { value } = e.target.selectedOptions[0];
Array.from(output).forEach(function (element) { d.querySelector(".output").style.display =
if (value === "ha") { value === "ha" ? "flex" : "none";
element.style.display = "flex";
} else {
element.style.display = "none";
}
});
}); });
element("brightnessValue").addEventListener("input", (e) => { gId("brightnessValue").addEventListener("input", (e) => {
const brightness = element("brightness");
const { value } = e.target; const { value } = e.target;
let bri = value <= 255 ? value : 255; let bri = value <= 255 ? value : 255;
brightness.value = bri; gId("brightness").value = bri;
e.target.value = bri; e.target.value = bri;
}); });
element("brightness").addEventListener("input", (e) => { gId("brightness").addEventListener("input", (e) => {
const brightnessValue = element("brightnessValue");
const { value } = e.target; const { value } = e.target;
brightnessValue.value = value; gId("brightnessValue").value = value;
}); });
element("images").addEventListener("change", (e) => { gId("images").addEventListener("change", (e) => {
const dropzone = element("dropzone"); const dropzone = gId("dropzone");
const { value } = e.target.selectedOptions[0]; const { value } = e.target.selectedOptions[0];
if (!value) { if (!value) {
const dropzoneLabel = element("dropzoneLabel"); const source = gId("source");
const source = element("source");
dropzoneLabel.textContent = gId("dropzoneLabel").textContent =
"Drag and drop a file here or click to select a local file"; "Drag and drop a file here or click to select a local file";
source.value = ""; source.value = "";
@ -1265,31 +1294,25 @@
} }
}); });
element("transparentImage").addEventListener("change", (e) => { gId("transparentImage").addEventListener("change", (e) => {
const transparentImage = d.getElementsByClassName("transparentImage")[0];
const { checked } = e.target; const { checked } = e.target;
if (checked) { d.querySelector(".transparentImage").style.display = checked
transparentImage.style.display = "flex"; ? "flex"
} else { : "none";
transparentImage.style.display = "none";
}
}); });
element("resizeImage").addEventListener("change", (e) => { gId("resizeImage").addEventListener("change", (e) => {
const resizeImage = d.getElementsByClassName("resizeImage")[0];
const { checked } = e.target; const { checked } = e.target;
if (checked) { d.querySelector(".resizeImage").style.display = checked
resizeImage.style.display = "flex"; ? "flex"
} else { : "none";
resizeImage.style.display = "none";
}
}); });
element("animation").addEventListener("change", (e) => { gId("animation").addEventListener("change", (e) => {
const animation = d.getElementsByClassName("animation")[0]; const animation = d.querySelector(".animation");
const source = element("source"); const source = gId("source");
const { checked } = e.target; const { checked } = e.target;
@ -1305,24 +1328,23 @@
} else { } else {
source.setAttribute( source.setAttribute(
"accept", "accept",
"image/jpg,image/jpeg,image/png,image/gif" "image/*"
); );
animation.style.display = "none"; animation.style.display = "none";
} }
}); });
element("btnGenerate").addEventListener("click", async (event) => { gId("btnGenerate").addEventListener("click", async (event) => {
const { checked } = element("animation"); const { checked } = gId("animation");
const preview = element("preview");
const recreatedImage = element("recreatedImage");
const simulate = element("simulate");
if (validate(event)) { if (validate(event)) {
jsonSaveWLED.splice(0); jsonSaveWLED.splice(0);
preview.style.display = "block"; gId("preview").style.display = "block";
recreatedImage.innerHTML = ""; gId("recreatedImage").innerHTML = "";
const simulate = gId("simulate");
if (checked) { if (checked) {
simulate.style.display = "none"; simulate.style.display = "none";
@ -1351,16 +1373,16 @@
} }
async function generate() { async function generate() {
const file = element("source").files[0]; const file = gId("source").files[0];
const { value: images } = element("images"); const { value: images } = gId("images");
const { value: output } = element("output"); const { value: output } = gId("output");
show(); show();
try { try {
const response = element("response"); const response = gId("response");
const recreatedImage = element("recreatedImage"); const recreatedImage = gId("recreatedImage");
const urlImage = !images ? URL.createObjectURL(file) : images; const urlImage = !images ? URL.createObjectURL(file) : images;
@ -1393,14 +1415,14 @@
} }
async function generateAnimation() { async function generateAnimation() {
const file = element("source").files[0]; const file = gId("source").files[0];
const images = element("images"); const images = gId("images");
const response = element("response"); const response = gId("response");
const { value: presetName } = element("name"); const { value: presetName } = gId("name");
const { value: amount } = element("frames"); const { value: amount } = gId("frames");
const { value: output } = element("output"); const { value: output } = gId("output");
const { value: duration } = element("duration"); const { value: duration } = gId("duration");
const { text: imageName, value: imageValue } = images.selectedOptions[0]; const { text: imageName, value: imageValue } = images.selectedOptions[0];
@ -1480,18 +1502,18 @@
} }
function recreate(image) { function recreate(image) {
const { value: pattern } = element("pattern"); const { value: pattern } = gId("pattern");
const { value: segmentId } = element("segments"); const { value: segmentId } = gId("segments");
const { value: brightness } = element("brightness"); const { value: brightness } = gId("brightness");
const { value: inputWidth } = element("width"); const { value: inputWidth } = gId("width");
const { value: inputHeight } = element("height"); const { value: inputHeight } = gId("height");
const { checked: resizeImage } = element("resizeImage"); const { checked: resizeImage } = gId("resizeImage");
const resizeWidth = parseInt(inputWidth); const resizeWidth = parseInt(inputWidth);
const resizeHeight = parseInt(inputHeight); const resizeHeight = parseInt(inputHeight);
const { width: dataWidth, height: dataHeight } = const { width: dataWidth, height: dataHeight } =
element("segments").selectedOptions[0].dataset; gId("segments").selectedOptions[0].dataset;
const segmentWidth = parseInt(dataWidth); const segmentWidth = parseInt(dataWidth);
const segmentHeight = parseInt(dataHeight); const segmentHeight = parseInt(dataHeight);
@ -1635,8 +1657,8 @@
} }
function pixelColor(r, g, b, a) { function pixelColor(r, g, b, a) {
const { checked } = element("transparentImage"); const { checked } = gId("transparentImage");
const { value } = element("color"); const { value } = gId("color");
if (a === 0) { if (a === 0) {
if (checked) { if (checked) {
@ -1732,10 +1754,10 @@
} }
function yaml(jsonData) { function yaml(jsonData) {
const { value: device } = element("device"); const { value: device } = gId("device");
const { value: friendly_name } = element("friendlyName"); const { value: friendly_name } = gId("friendlyName");
const { value: unique_id } = element("uniqueId"); const { value: unique_id } = gId("uniqueId");
const { value: hostname } = element("hostname"); const { value: hostname } = gId("hostname");
if (device) { if (device) {
const yamlData = { const yamlData = {
@ -1754,7 +1776,7 @@
} }
function curl(jsonData) { function curl(jsonData) {
const { value: hostname } = element("hostname"); const { value: hostname } = gId("hostname");
return `curl -X POST "http://${hostname}/json/state" -d '${jsonData}' -H "Content-Type: application/json"`; return `curl -X POST "http://${hostname}/json/state" -d '${jsonData}' -H "Content-Type: application/json"`;
} }
@ -1792,7 +1814,7 @@
duration = 2000, duration = 2000,
hideElement = "preview" hideElement = "preview"
) { ) {
const hide = element(hideElement); const hide = gId(hideElement);
const toast = d.createElement("div"); const toast = d.createElement("div");
const wait = 100; const wait = 100;
@ -1818,7 +1840,7 @@
toast.appendChild(progress); toast.appendChild(progress);
element("toast-container").appendChild(toast); gId("toast-container").appendChild(toast);
setTimeout(() => { setTimeout(() => {
toast.style.opacity = 0; toast.style.opacity = 0;
@ -1846,7 +1868,7 @@
} }
}); });
const container = element(id); const container = gId(id);
container.innerHTML = ""; container.innerHTML = "";
container.appendChild(carousel); container.appendChild(carousel);
@ -1894,7 +1916,7 @@
} }
function show() { function show() {
const overlay = element("overlay"); const overlay = gId("overlay");
overlay.classList.add("loading"); overlay.classList.add("loading");
overlay.style.display = "block"; overlay.style.display = "block";
overlay.style.cursor = "not-allowed"; overlay.style.cursor = "not-allowed";
@ -1903,7 +1925,7 @@
} }
function hide() { function hide() {
const overlay = element("overlay"); const overlay = gId("overlay");
overlay.classList.remove("loading"); overlay.classList.remove("loading");
overlay.style.display = "none"; overlay.style.display = "none";
overlay.style.cursor = "default"; overlay.style.cursor = "default";
@ -1914,7 +1936,7 @@
function validate(event) { function validate(event) {
event.preventDefault(); event.preventDefault();
const form = element("formGenerate"); const form = gId("formGenerate");
const inputs = form.querySelectorAll("input, select, textarea"); const inputs = form.querySelectorAll("input, select, textarea");
let isValid = true; let isValid = true;

1209
wled00/html_pxmagic.h
View File

File diff suppressed because it is too large Load Diff