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

Merge pull request #3296 from ajotanc/pxmagic

Browse Source 
Updating pxmagic and WLED UI
This commit is contained in:
Blaž Kristan 2023-10-21 20:22:06 +02:00 committed by GitHub
commit 107bb14555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 2716 additions and 2751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wled00/data/index.htm
View File

@ -198,12 +198,13 @@
</label> </label>
</div> </div>
</div> </div>
<div style="padding-bottom: 10px;"> </div>
<div style="padding-block: 10px;">
<button class="btn btn-xs" type="button" onclick="togglePixelMagicTool()"><i class="icons btn-icon">&#xe410;</i></button>
<button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button> <button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
<button class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button> <button class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
</div> </div>
</div> </div>
</div>
<div id="Effects" class="tabcontent"> <div id="Effects" class="tabcontent">
<div id="fx"> <div id="fx">
@ -392,6 +393,7 @@
<button class="btn" onclick="setLor(2)">Override until reboot</button><br> <button class="btn" onclick="setLor(2)">Override until reboot</button><br>
<span class="h">For best performance, it is recommended to turn off the streaming source when not in use.</span> <span class="h">For best performance, it is recommended to turn off the streaming source when not in use.</span>
</div> </div>
<i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br> <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

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

@ -7,13 +7,10 @@
<title>Pixel Magic Tool</title> <title>Pixel Magic Tool</title>
<!-- <link
rel="shortcut icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAK9JREFUeNqUUssNwyAMJZWVUw4dhRHakZA6RqWMFEbwKDnk1FNBekEWxOBYQggL/D68yXXq+M7PtHkcefn89vrOw/UrP96w/NUFGiDLRz71GyY0QJa1Yn+nFa0ShqUNYCAF0QvoceOB4naEZif6UTNRapYaTyauRi4DEspr4Hbs5YKsbmtMyeJ0LxeESV4gB+hlSy4oO2txWysyus0a0+lO6vBjxcTMlG4mt2H6F2AAhU5NWu4dorQAAAAASUVORK5CYII=
" /> -->
<style> <style>
:root { :root {
--s-thumb: #0006;
--s-background: #0003;
--overlay: rgba(0, 0, 0, 0.5); --overlay: rgba(0, 0, 0, 0.5);
--background: #111; --background: #111;
--text: #bbb; --text: #bbb;
@ -34,6 +31,24 @@
--warning-light: #f48c06; --warning-light: #f48c06;
} }
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--s-thumb);
opacity: 0.2;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--s-background);
}
::selection { ::selection {
background: var(--blue-light); background: var(--blue-light);
} }
@ -65,7 +80,7 @@
display: block; display: block;
font-weight: 400; font-weight: 400;
margin: 2px 0 5px; margin: 2px 0 5px;
color: var(--text); color: var(--gray-light);
font-size: 12px; font-size: 12px;
} }
@ -83,10 +98,19 @@
font-weight: 600; font-weight: 600;
} }
:is(a:hover, a:focus, a:active) { a:is(:hover, :focus, :active) {
color: var(--blue-medium); color: var(--blue-medium);
} }
#wledEdit {
padding: 4px 8px;
background: var(--blue-light);
margin-left: 6px;
display: inline-block;
border-radius: 4px;
color: var(--gray-light);
}
.m-zero { .m-zero {
margin: 0 !important; margin: 0 !important;
} }
@ -108,8 +132,7 @@
} }
.content { .content {
width: calc(100% - 40px); width: min(768px, calc(100% - 40px));
max-width: 768px;
margin: 20px; margin: 20px;
} }
@ -117,26 +140,43 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
margin: 20px 0 0; margin-top: 20px;
} }
.column { .column {
flex-basis: calc(50% - 10px); flex-basis: calc(50% - 10px);
position: relative; position: relative;
padding: 0 5px; padding-inline: 5px;
} }
.column-full { .column-full {
flex-basis: 100%; flex-basis: 100%;
position: relative; position: relative;
padding: 0 5px; padding-inline: 5px;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
}
.header .brand {
width: 100%;
max-width: 200px;
height: 100%;
display: block;
outline: none;
border: 0;
} }
label { label {
display: block; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
color: var(--text); color: var(--text);
align-items: center;
} }
input[type="text"], input[type="text"],
@ -157,7 +197,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
padding: 0px 1px; padding-inline: 1px;
outline: none; outline: none;
} }
@ -172,18 +212,19 @@
} }
.input-group .input-description { .input-group .input-description {
width: 38px; width: 100%;
max-width: 38px;
height: 38px; height: 38px;
padding: 10px 0; display: flex;
justify-content: center;
align-items: center;
color: var(--gray-dark); color: var(--gray-dark);
background: var(--gray-light); background: var(--gray-light);
border-radius: 0px 5px 5px 0; border-radius: 0px 8px 8px 0;
border: 1px solid var(--gray-light); border: 1px solid var(--gray-light);
border-left: 0; border-left: 0;
text-align: center;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
font-weight: 600;
} }
.input-group .square { .input-group .square {
@ -191,10 +232,19 @@
margin-left: 10px; margin-left: 10px;
} }
.input-group .square input {
text-align: center;
background: none;
padding: 0;
border: 0;
color: var(--gray-dark);
}
textarea { textarea {
resize: vertical; resize: none;
min-height: 200px; min-height: 200px;
border-radius: 8px; border-radius: 8px;
overflow-x: hidden;
} }
.custom-select { .custom-select {
@ -231,7 +281,7 @@
text-align: center; text-align: center;
padding: 40px 10px; padding: 40px 10px;
border-radius: 8px; border-radius: 8px;
margin: 20px 0 0; margin-top: 20px;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
@ -253,14 +303,15 @@
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
outline: none; outline: none;
margin: 16px 0; margin-block: 15px;
} }
.range-slider::-webkit-slider-thumb { .range-slider::-webkit-slider-thumb,
.range-slider::-moz-range-thumb {
appearance: none; appearance: none;
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: var(--gray-dark); background-color: var(--blue-light);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
@ -326,7 +377,7 @@
align-items: center; align-items: center;
width: auto; width: auto;
padding: 6px 12px; padding: 6px 12px;
margin: 10px 0 0; margin-top: 10px;
border-radius: 8px; border-radius: 8px;
transform: translateY(30px); transform: translateY(30px);
opacity: 0; opacity: 0;
@ -334,7 +385,7 @@
} }
.toast .toast-body { .toast .toast-body {
padding: 8px 0; padding-block: 8px;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -360,7 +411,7 @@
height: 3px; height: 3px;
transform: scaleX(0); transform: scaleX(0);
transform-origin: left; transform-origin: left;
border-radius: inherit; border-radius: 8px;
} }
.toast.success .toast-progress { .toast.success .toast-progress {
@ -387,22 +438,6 @@
); );
} }
.header {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 20px;
}
.header .brand {
width: 100%;
max-width: 200px;
height: 100%;
display: block;
outline: none;
border: 0;
}
.carousel { .carousel {
display: flex; display: flex;
height: 100%; height: 100%;
@ -410,18 +445,6 @@
cursor: pointer; cursor: pointer;
} }
.carousel img {
display: block;
width: 100%;
height: 100%;
margin-right: 20px;
border: 0;
}
.carousel img:last-child {
margin-right: 0;
}
.button { .button {
width: 100%; width: 100%;
border: 0; border: 0;
@ -429,7 +452,7 @@
border-radius: 50px; border-radius: 50px;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
margin: 0 0 10px; margin-bottom: 10px;
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;
@ -477,7 +500,7 @@
} }
#recreatedImage { #recreatedImage {
margin: 20px 0; margin-block: 20px;
} }
.invalid { .invalid {
@ -487,16 +510,12 @@
.error-message { .error-message {
display: block; display: block;
color: var(--error-dark); color: var(--error-dark);
padding: 4px 0; padding-block: 4px;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.header {
padding-bottom: 0;
}
.row { .row {
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@ -506,7 +525,7 @@
.column, .column,
.column-full { .column-full {
flex-basis: 100%; flex-basis: 100%;
margin: 20px 0 0; margin-top: 20px;
padding: 0; padding: 0;
} }
} }
@ -542,68 +561,7 @@
<div class="content"> <div class="content">
<form id="formGenerate" novalidate> <form id="formGenerate" novalidate>
<div class="header"> <div class="header">
<svg <img src=" data:image/png;base64,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" alt="Pixel Magic Tool" class="brand">
class="brand"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="200px"
height="130px"
viewBox="0 0 200 130"
enable-background="new 0 0 200 130"
xml:space="preserve">
<image
width="200"
height="130"
x="0"
y="0"
href="data:image/png;base64,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
ZVJlYWR5ccllPAAAAABJRU5ErkJggg==" />
</svg>
</div> </div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="column" validate>
@ -626,11 +584,11 @@
<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="">Select a choice</option>
<option value="1" title="['ffffff']" selected> <option value="1" title="['ffffff']">Individual</option>
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']">Range</option> <option value="3" title="[0, 5, 'ffffff']" selected>
Range
</option>
</select> </select>
</div> </div>
</div> </div>
@ -686,19 +644,25 @@
max="255" max="255"
value="128" value="128"
class="range-slider" /> class="range-slider" />
<div class="input-description square">
<input <input
type="text" type="text"
name="brightnessValue"
id="brightnessValue" id="brightnessValue"
class="input-description square"
value="128" /> value="128" />
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="column" validate> <div class="column" validate>
<label for="animation">Animation</label> <label for="animation">Animation</label>
<label class="switch"> <label class="switch">
<input type="checkbox" name="animation" id="animation" /> <input
type="checkbox"
name="animation"
id="animation"
data-parent="animation" />
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
</div> </div>
@ -708,19 +672,25 @@
<input <input
type="checkbox" type="checkbox"
name="transparentImage" name="transparentImage"
id="transparentImage" /> id="transparentImage"
data-parent="transparentImage" />
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
</div> </div>
<div class="column" validate> <div class="column" validate>
<label for="resizeImage">Resize Image</label> <label for="resizeImage">Resize Image</label>
<label class="switch"> <label class="switch">
<input type="checkbox" name="resizeImage" id="resizeImage" /> <input
type="checkbox"
name="resizeImage"
id="resizeImage"
data-parent="resizeImage"
checked />
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
</div> </div>
</div> </div>
<div class="row resizeImage" style="display: none"> <div class="row resizeImage">
<div class="column" validate> <div class="column" 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" />
@ -747,7 +717,9 @@
min="0" min="0"
step="0.1" step="0.1"
inputmode="numeric" /> inputmode="numeric" />
<div class="input-description">sec</div> <div class="input-description">
<span>sec</span>
</div>
</div> </div>
</div> </div>
<div class="column" validate> <div class="column" validate>
@ -762,7 +734,9 @@
min="0" min="0"
step="0.1" step="0.1"
inputmode="numeric" /> inputmode="numeric" />
<div class="input-description">sec</div> <div class="input-description">
<span>sec</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -773,30 +747,27 @@
Color that will replace the Color that will replace the
<strong>transparent pixels</strong> in the image <strong>transparent pixels</strong> in the image
</small> </small>
<input type="color" name="color" id="color" value="#eeeeee" /> <input type="color" name="color" id="color" value="#00BFFF" />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column-full" validate> <div class="column-full" validate>
<div class="custom-select"> <div class="custom-select">
<label for="images">Images</label> <label for="images">
<select name="images" id="images" required> <span>Images upload to WLED</span>
<option value="">Select a choice</option> <a id="wledEdit" href="http://[wled-ip]/edit" target="_blank">
<option value="upload">Upload</option> upload
</a>
</label>
<select name="images" id="images">
<option value="">Select image</option>
</select> </select>
</div> </div>
<small>
Images uploaded to
<a id="wledEdit" href="http://[wled-ip]/edit" target="_blank">
<strong>WLED</strong>
</a>
or upload image
</small>
</div> </div>
</div> </div>
<div id="dropzone" class="dropzone" validate style="display: none"> <div id="dropzone" class="dropzone" validate>
<p id="dropzoneLabel"> <p id="dropzoneLabel">
Drag and drop a file here or click to select a file Drag and drop a file here or click to select a local file
</p> </p>
<input <input
type="file" type="file"
@ -868,7 +839,7 @@
const hostname = element("hostname"); const hostname = element("hostname");
hostname.value = host; hostname.value = host;
hostname.addEventListener("change", async () => { hostname.addEventListener("blur", async () => {
WLED_URL = `${protocol}//${hostname.value}`; WLED_URL = `${protocol}//${hostname.value}`;
await segments(); await segments();
@ -893,7 +864,7 @@
function hostnameLabel() { function hostnameLabel() {
const link = element("wledEdit"); const link = element("wledEdit");
link.href = link.href.replace("[wled-ip]", hostname.value); link.href = WLED_URL + "/edit";
} }
async function playlist() { async function playlist() {
@ -999,6 +970,7 @@
if (success) { if (success) {
toast(`Preset "${item.n}" save successfully`); toast(`Preset "${item.n}" save successfully`);
window.parent.postMessage("loadPresets", WLED_URL);
} }
} catch (error) { } catch (error) {
toast(`Error saving preset: ${error}`, "error"); toast(`Error saving preset: ${error}`, "error");
@ -1047,12 +1019,9 @@
return mimeTypes.includes(mimetype); return mimeTypes.includes(mimetype);
}); });
const options = [ const options = [{ text: "Select image", value: "" }];
{ text: "Select a choice", value: "" },
{ text: "Upload", value: "upload" },
];
if (images) { if (images.length > 0) {
options.push( options.push(
...images.map(({ name }) => ({ ...images.map(({ name }) => ({
text: name, text: name,
@ -1064,6 +1033,11 @@
options.forEach(({ text, value }) => { options.forEach(({ text, value }) => {
const option = new Option(text, value); const option = new Option(text, value);
if (index === 0) {
option.selected = true;
}
select.appendChild(option); select.appendChild(option);
}); });
} }
@ -1076,7 +1050,6 @@
async function segments() { async function segments() {
const select = element("segments"); const select = element("segments");
const pattern = element("pattern");
const width = element("width"); const width = element("width");
const height = element("height"); const height = element("height");
@ -1114,7 +1087,6 @@
option.selected = true; option.selected = true;
width.value = w; width.value = w;
height.value = h; height.value = h;
pattern.value = w * h > 512 ? 3 : 1;
} }
select.add(option); select.add(option);
@ -1278,12 +1250,12 @@
const dropzone = element("dropzone"); const dropzone = element("dropzone");
const { value } = e.target.selectedOptions[0]; const { value } = e.target.selectedOptions[0];
if (value === "upload") { if (!value) {
const dropzoneLabel = element("dropzoneLabel"); const dropzoneLabel = element("dropzoneLabel");
const source = element("source"); const source = element("source");
dropzoneLabel.textContent = dropzoneLabel.textContent =
"Drag and drop a file here or click to select a file"; "Drag and drop a file here or click to select a local file";
source.value = ""; source.value = "";
dropzone.style.display = "block"; dropzone.style.display = "block";
@ -1293,43 +1265,35 @@
}); });
element("transparentImage").addEventListener("change", (e) => { element("transparentImage").addEventListener("change", (e) => {
const transparentImage = d.getElementsByClassName("transparentImage"); const transparentImage = d.getElementsByClassName("transparentImage")[0];
const { checked } = e.target; const { checked } = e.target;
Array.from(transparentImage).forEach(function (element) {
if (checked) { if (checked) {
element.style.display = "flex"; transparentImage.style.display = "flex";
} else { } else {
element.style.display = "none"; transparentImage.style.display = "none";
} }
}); });
});
element("resizeImage").addEventListener("change", (e) => { element("resizeImage").addEventListener("change", (e) => {
const resizeImage = d.getElementsByClassName("resizeImage"); const resizeImage = d.getElementsByClassName("resizeImage")[0];
const pattern = element("pattern"); const pattern = element("pattern");
const { checked } = e.target; const { checked } = e.target;
Array.from(resizeImage).forEach(function (element) {
if (checked) { if (checked) {
pattern.value = 3; resizeImage.style.display = "flex";
element.style.display = "flex";
} else { } else {
pattern.value = 1; resizeImage.style.display = "none";
element.style.display = "none";
} }
}); });
});
element("animation").addEventListener("change", (e) => { element("animation").addEventListener("change", (e) => {
const animation = d.getElementsByClassName("animation"); const animation = d.getElementsByClassName("animation")[0];
const pattern = element("pattern"); const pattern = element("pattern");
const source = element("source"); const source = element("source");
const { checked } = e.target; const { checked } = e.target;
Array.from(animation).forEach(function (element) {
if (checked) { if (checked) {
toast( toast(
'If you want all frames in the image, set it to "0"', 'If you want all frames in the image, set it to "0"',
@ -1338,18 +1302,15 @@
); );
source.setAttribute("accept", "image/gif"); source.setAttribute("accept", "image/gif");
element.style.display = "flex"; animation.style.display = "flex";
pattern.value = 3;
} else { } else {
source.setAttribute( source.setAttribute(
"accept", "accept",
"image/jpg,image/jpeg,image/png,image/gif" "image/jpg,image/jpeg,image/png,image/gif"
); );
element.style.display = "none"; animation.style.display = "none";
pattern.value = 1;
} }
}); });
});
element("btnGenerate").addEventListener("click", async (event) => { element("btnGenerate").addEventListener("click", async (event) => {
const { checked } = element("animation"); const { checked } = element("animation");
@ -1402,8 +1363,7 @@
const response = element("response"); const response = element("response");
const recreatedImage = element("recreatedImage"); const recreatedImage = element("recreatedImage");
const urlImage = const urlImage = !images ? URL.createObjectURL(file) : images;
images === "upload" ? URL.createObjectURL(file) : 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);

1079
wled00/html_pxmagic.h
View File

File diff suppressed because it is too large Load Diff

4006
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff