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

Merge pull request #3483 from ajotanc/pxm_update

Browse Source 
Update Pixel Magic Tool
This commit is contained in:
Blaž Kristan 2023-11-18 18:34:55 +01:00 committed by GitHub
commit de245c08ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 775 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,6 +61,7 @@
} }
body { body {
margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -72,29 +73,24 @@
width: 100%; width: 100%;
} }
form {
margin-bottom: 20px;
}
small { small {
display: block; display: block;
font-weight: 400; font-weight: 400;
margin: 2px 0 5px; margin: 2px 0 5px;
color: var(--gray-light); color: var(--gray-light);
font-size: 12px; font-size: 0.75rem;
} }
footer { footer {
width: 100%; display: flex;
margin: 0 auto 20px; justify-content: center;
display: block; margin-block: 20px;
text-align: center;
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--blue-light); color: var(--blue-light);
font-size: 12px; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
} }
@ -103,26 +99,13 @@
} }
#wledEdit { #wledEdit {
padding: 4px 8px; padding: 1.5px 8px;
background: var(--blue-light); background: var(--blue-light);
margin-left: 6px; margin-left: 6px;
display: inline-block;
border-radius: 4px; border-radius: 4px;
color: var(--gray-light); color: var(--gray-light);
} }
.m-zero {
margin: 0 !important;
}
.m-bottom {
margin-bottom: 10px !important;
}
.m-top {
margin-top: 10px !important;
}
.container { .container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -133,7 +116,7 @@
.content { .content {
width: min(768px, calc(100% - 40px)); width: min(768px, calc(100% - 40px));
margin: 20px; margin-inline: 20px;
} }
.row { .row {
@ -143,32 +126,61 @@
margin-top: 20px; margin-top: 20px;
} }
.column { .col {
flex-basis: calc(50% - 10px); flex-basis: calc(50% - 10px);
position: relative; position: relative;
padding-inline: 5px; padding-inline: 5px;
} }
.column-full { .col-full {
flex-basis: 100%; flex-basis: 100%;
position: relative; position: relative;
padding-inline: 5px; padding-inline: 5px;
} }
.col-small {
flex-basis: 33.3333%;
position: relative;
padding-inline: 5px;
}
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; padding-block: 20px;
padding-bottom: 20px;
} }
.header .brand { .header .title {
width: 100%; font-size: 2.5rem;
max-width: 200px; line-height: 2.5rem;
height: 100%; font-weight: 800;
display: block; color: var(--gray-light);
outline: none; padding-bottom: 5px;
border: 0; }
.header .subtitle {
font-size: 0.75rem;
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 {
@ -190,15 +202,7 @@
border: 1px solid var(--gray-medium); border: 1px solid var(--gray-medium);
outline: none; outline: none;
color: var(--gray-light); color: var(--gray-light);
font-size: 14px; font-size: 0.875rem;
}
input[type="color"] {
width: 32px;
height: 32px;
cursor: pointer;
padding-inline: 1px;
outline: none;
} }
.input-group { .input-group {
@ -208,7 +212,7 @@
} }
.input-group input:not([type="range"]) { .input-group input:not([type="range"]) {
border-radius: 8px 0 0 8px; border-radius: 50px 0 0 50px;
} }
.input-group .input-description { .input-group .input-description {
@ -220,15 +224,15 @@
align-items: center; align-items: center;
color: var(--gray-dark); color: var(--gray-dark);
background: var(--gray-light); background: var(--gray-light);
border-radius: 0px 8px 8px 0; border-radius: 0px 50px 50px 0;
border: 1px solid var(--gray-light); border: 1px solid var(--gray-light);
border-left: 0; border-left: 0;
font-size: 14px; font-size: 0.875rem;
line-height: 16px; line-height: 1rem;
} }
.input-group .square { .input-group .square {
border-radius: 8px !important; border-radius: 50px !important;
margin-left: 10px; margin-left: 10px;
} }
@ -242,13 +246,7 @@
textarea { textarea {
resize: none; resize: none;
min-height: 200px;
border-radius: 8px; border-radius: 8px;
overflow-x: hidden;
}
.custom-select {
position: relative;
} }
.custom-select select { .custom-select select {
@ -256,7 +254,7 @@
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
background-image: none; background-image: none;
padding-right: 20px; padding-right: 39px;
cursor: pointer; cursor: pointer;
} }
@ -264,7 +262,7 @@
content: ""; content: "";
position: absolute; position: absolute;
top: calc(50% + 6px); top: calc(50% + 6px);
right: 16px; right: 21px;
transform: rotate(135deg); transform: rotate(135deg);
width: 6px; width: 6px;
height: 6px; height: 6px;
@ -456,7 +454,7 @@
background: var(--gray-medium); background: var(--gray-medium);
border: 1px solid var(--gray-dark); border: 1px solid var(--gray-dark);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
font-size: 14px; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
} }
@ -512,7 +510,7 @@
color: var(--error-dark); color: var(--error-dark);
padding-block: 4px; padding-block: 4px;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 0.75rem;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -522,8 +520,9 @@
margin: 0; margin: 0;
} }
.column, .col,
.column-full { .col-full,
.col-small {
flex-basis: 100%; flex-basis: 100%;
margin-top: 20px; margin-top: 20px;
padding: 0; padding: 0;
@ -554,6 +553,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,15 +569,21 @@
<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,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" 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="col" validate>
<label for="hostname">Hostname</label> <label for="hostname">Hostname</label>
<input type="text" name="hostname" id="hostname" required /> <input type="text" name="hostname" id="hostname" required />
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="name">Preset Name</label> <label for="name">Preset Name</label>
<input <input
type="text" type="text"
@ -580,11 +594,10 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="col" validate>
<div class="custom-select"> <div class="custom-select">
<label for="pattern">Pattern</label> <label for="pattern">Pattern</label>
<select name="pattern" id="pattern" required> <select name="pattern" id="pattern" required>
<option value="">Select a choice</option>
<option value="1" title="['ffffff']">Individual</option> <option value="1" title="['ffffff']">Individual</option>
<option value="2" title="[0, 'ffffff']">Index</option> <option value="2" title="[0, 'ffffff']">Index</option>
<option value="3" title="[0, 5, 'ffffff']" selected> <option value="3" title="[0, 5, 'ffffff']" selected>
@ -593,11 +606,10 @@
</select> </select>
</div> </div>
</div> </div>
<div class="column" validate> <div class="col" validate>
<div class="custom-select"> <div class="custom-select">
<label for="output">Output</label> <label for="output">Output</label>
<select name="output" id="output" required> <select name="output" id="output" required>
<option value="">Select a choice</option>
<option value="json" selected>WLED JSON</option> <option value="json" selected>WLED JSON</option>
<option value="ha">Home Assistant</option> <option value="ha">Home Assistant</option>
<option value="curl">CURL</option> <option value="curl">CURL</option>
@ -606,15 +618,15 @@
</div> </div>
</div> </div>
<div class="row output" style="display: none"> <div class="row output" style="display: none">
<div class="column" validate> <div class="col" validate>
<label for="device">Device</label> <label for="device">Device</label>
<input type="text" name="device" id="device" required /> <input type="text" name="device" id="device" required />
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="uniqueId">Unique Id</label> <label for="uniqueId">Unique Id</label>
<input type="text" name="uniqueId" id="uniqueId" required /> <input type="text" name="uniqueId" id="uniqueId" required />
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="friendlyName">Friendly Name</label> <label for="friendlyName">Friendly Name</label>
<input <input
type="text" type="text"
@ -624,7 +636,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="col" validate>
<div class="custom-select"> <div class="custom-select">
<label for="segments">Segment Id</label> <label for="segments">Segment Id</label>
<select name="segments" id="segments"> <select name="segments" id="segments">
@ -634,7 +646,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="brightness">Brightness</label> <label for="brightness">Brightness</label>
<div class="input-group"> <div class="input-group">
<input <input
@ -656,7 +668,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="col" validate>
<label for="animation">Animation</label> <label for="animation">Animation</label>
<label class="switch"> <label class="switch">
<input <input
@ -667,7 +679,7 @@
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="transparentImage">Transparent Image</label> <label for="transparentImage">Transparent Image</label>
<label class="switch"> <label class="switch">
<input <input
@ -678,7 +690,7 @@
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="resizeImage">Resize Image</label> <label for="resizeImage">Resize Image</label>
<label class="switch"> <label class="switch">
<input <input
@ -692,21 +704,21 @@
</div> </div>
</div> </div>
<div class="row resizeImage"> <div class="row resizeImage">
<div class="column" validate> <div class="col" validate>
<label for="width">Width</label> <label for="width">Width</label>
<input type="number" name="width" id="width" value="16" /> <input type="number" name="width" id="width" value="16" />
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="height">Height</label> <label for="height">Height</label>
<input type="number" name="height" id="height" value="16" /> <input type="number" name="height" id="height" value="16" />
</div> </div>
</div> </div>
<div class="row animation" style="display: none"> <div class="row animation" style="display: none">
<div class="column" validate> <div class="col" validate>
<label for="frames">Frames</label> <label for="frames">Frames</label>
<input type="number" name="frames" id="frames" value="4" /> <input type="number" name="frames" id="frames" value="4" />
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="duration">Duration</label> <label for="duration">Duration</label>
<div class="input-group"> <div class="input-group">
<input <input
@ -723,7 +735,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="column" validate> <div class="col" validate>
<label for="transition">Transition</label> <label for="transition">Transition</label>
<div class="input-group"> <div class="input-group">
<input <input
@ -742,7 +754,7 @@
</div> </div>
</div> </div>
<div class="row transparentImage" style="display: none"> <div class="row transparentImage" style="display: none">
<div class="column-full" validate> <div class="col-full" validate>
<label for="color">Choose a color</label> <label for="color">Choose a color</label>
<small> <small>
Color that will replace the Color that will replace the
@ -752,7 +764,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column-full" validate> <div class="col-full" validate>
<div class="custom-select"> <div class="custom-select">
<label for="images"> <label for="images">
<span>Images upload to WLED</span> <span>Images upload to WLED</span>
@ -774,39 +786,47 @@
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">
<div class="column-full"> <div class="col-full">
<button type="button" class="button" id="btnGenerate"> <button type="button" class="button" id="btnGenerate">
Generate Generate
</button> </button>
</div> </div>
<div class="col-small" id="gbth" style="display: none">
<button
type="button"
class="button"
onclick="window.location.href = WLED_URL;">
Back
</button>
</div>
</div> </div>
</form> </form>
<div id="preview" style="display: none"> <div id="preview" style="display: none">
<div id="recreatedImage"></div> <div id="recreatedImage"></div>
<textarea name="response" id="response" readonly="readonly"> <textarea name="response" id="response" rows="8" readonly="readonly">
</textarea> </textarea>
<div class="buttons"> <div class="buttons">
<div class="row"> <div class="row">
<div class="column"> <div class="col">
<button type="button" class="button" id="btnCopyToClipboard"> <button type="button" class="button" id="btnCopyToClipboard">
Copy to Clipboard Copy to Clipboard
</button> </button>
</div> </div>
<div class="column"> <div class="col">
<button type="button" class="button" id="btnSave">Save</button> <button type="button" class="button" id="btnSave">Save</button>
</div> </div>
<div class="column"> <div class="col">
<button type="button" class="button" id="btnDownloadPreset"> <button type="button" class="button" id="btnDownloadPreset">
Download Download
</button> </button>
</div> </div>
</div> </div>
<div class="row" id="simulate" style="display: none"> <div class="row" id="simulate" style="display: none">
<div class="column-full"> <div class="col-full">
<button type="button" class="button" id="btnSimulatePreset"> <button type="button" class="button" id="btnSimulatePreset">
Simulate Simulate
</button> </button>
@ -837,7 +857,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 () => {
@ -849,6 +869,9 @@
hostnameLabel(); hostnameLabel();
}); });
gId("gbth").style.display =
window.location.protocol === "http:" ? "flex" : "none";
let jsonSaveWLED = []; let jsonSaveWLED = [];
let jsonSendWLED = {}; let jsonSendWLED = {};
@ -859,19 +882,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 +1027,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 +1073,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,32 +1122,27 @@
} }
} }
const dropzone = element("dropzone"); gId("dropzone").addEventListener("dragover", (e) => {
const source = element("source");
dropzone.addEventListener("dragover", (e) => {
e.preventDefault(); e.preventDefault();
}); });
dropzone.addEventListener("drop", (e) => { gId("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);
}); });
dropzone.addEventListener("click", () => { gId("dropzone").addEventListener("click", () => {
source.click(); source.click();
}); });
source.addEventListener("change", (e) => { gId("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 +1156,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 +1180,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 +1197,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 +1215,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 +1225,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;
const bri = value <= 255 ? value : 255;
let bri = value <= 255 ? value : 255; gId("brightness").value = bri;
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 +1270,23 @@
} }
}); });
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 ? "flex" : "none";
resizeImage.style.display = "flex";
} else {
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;
@ -1303,26 +1300,21 @@
source.setAttribute("accept", "image/gif"); source.setAttribute("accept", "image/gif");
animation.style.display = "flex"; animation.style.display = "flex";
} else { } else {
source.setAttribute( source.setAttribute("accept", "image/*");
"accept",
"image/jpg,image/jpeg,image/png,image/gif"
);
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";
@ -1334,35 +1326,40 @@
} }
}); });
function loadImage(src) { async function createObjectURL(url) {
return fetch(url)
.then((response) => response.arrayBuffer())
.then((buffer) => {
const binaryData = new Uint8Array(buffer);
const base64 = btoa(String.fromCharCode(...binaryData));
return `data:image/png;base64,${base64}`;
});
}
function loadImage(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const image = new Image(); const img = new Image();
img.onload = () => resolve(img);
image.addEventListener("load", function () { img.onerror = (error) => reject(error);
resolve(image); img.src = url;
});
image.addEventListener("error", function () {
reject(new Error("Error loading image"));
});
image.src = src;
}); });
} }
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)
: await createObjectURL(images);
const image = await loadImage(urlImage); const image = await loadImage(urlImage);
const { canvas, bri, id, i } = recreate(image); const { canvas, bri, id, i } = recreate(image);
@ -1393,14 +1390,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];
@ -1409,7 +1406,7 @@
try { try {
const body = new FormData(); const body = new FormData();
if (imageValue === "upload") { if (!imageValue) {
body.append("image", file); body.append("image", file);
} else { } else {
const responseImage = await fetch(imageValue); const responseImage = await fetch(imageValue);
@ -1480,18 +1477,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 +1632,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 +1729,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 +1751,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 +1789,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 +1815,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 +1843,7 @@
} }
}); });
const container = element(id); const container = gId(id);
container.innerHTML = ""; container.innerHTML = "";
container.appendChild(carousel); container.appendChild(carousel);
@ -1894,7 +1891,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 +1900,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 +1911,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