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

Fixies

Browse Source 
- Correction in animation generation that was actually breaking
- Button to return to WLED if pxmagic.htm is accessed via url (http://), if accessed via external (file://) the button will not show
- Adjustments to CSS and some features
This commit is contained in:
Alerson Jorge 2023-10-24 13:28:33 -03:00
parent a1f28caa8e
commit 309dbd7585
2 changed files with 606 additions and 606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,29 +143,27 @@
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-bottom: 20px;
}
.header {
display: flex;
flex-direction: column;
align-items: start;
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -551,8 +549,8 @@
margin: 0; margin: 0;
} }
.column, .col,
.column-full { .col-full {
flex-basis: 100%; flex-basis: 100%;
margin-top: 20px; margin-top: 20px;
padding: 0; padding: 0;
@ -609,11 +607,11 @@
> >
</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"
@ -624,7 +622,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="pattern">Pattern</label> <label for="pattern">Pattern</label>
<select name="pattern" id="pattern" required> <select name="pattern" id="pattern" required>
@ -637,7 +635,7 @@
</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>
@ -650,15 +648,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"
@ -668,7 +666,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">
@ -678,7 +676,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
@ -700,7 +698,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
@ -711,7 +709,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
@ -722,7 +720,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
@ -736,21 +734,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
@ -767,7 +765,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
@ -786,7 +784,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
@ -796,7 +794,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>
@ -822,11 +820,19 @@
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">
@ -835,22 +841,22 @@
</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>
@ -893,6 +899,9 @@
hostnameLabel(); hostnameLabel();
}); });
gId("gbth").style.display =
window.location.protocol === "http:" ? "flex" : "none";
let jsonSaveWLED = []; let jsonSaveWLED = [];
let jsonSendWLED = {}; let jsonSendWLED = {};
@ -1143,14 +1152,11 @@
} }
} }
const dropzone = gId("dropzone"); gId("dropzone").addEventListener("dragover", (e) => {
const source = gId("source");
dropzone.addEventListener("dragover", (e) => {
e.preventDefault(); e.preventDefault();
}); });
dropzone.addEventListener("drop", (e) => { gId("dropzone").addEventListener("drop", (e) => {
e.preventDefault(); e.preventDefault();
source.files = e.dataTransfer.files; source.files = e.dataTransfer.files;
@ -1161,11 +1167,11 @@
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 = gId("dropzoneLabel"); const dropzoneLabel = gId("dropzoneLabel");
const { value } = e.target; const { value } = e.target;
@ -1265,7 +1271,7 @@
gId("brightnessValue").addEventListener("input", (e) => { gId("brightnessValue").addEventListener("input", (e) => {
const { value } = e.target; const { value } = e.target;
let bri = value <= 255 ? value : 255; const bri = value <= 255 ? value : 255;
gId("brightness").value = bri; gId("brightness").value = bri;
e.target.value = bri; e.target.value = bri;
@ -1305,9 +1311,7 @@
gId("resizeImage").addEventListener("change", (e) => { gId("resizeImage").addEventListener("change", (e) => {
const { checked } = e.target; const { checked } = e.target;
d.querySelector(".resizeImage").style.display = checked d.querySelector(".resizeImage").style.display = checked ? "flex" : "none";
? "flex"
: "none";
}); });
gId("animation").addEventListener("change", (e) => { gId("animation").addEventListener("change", (e) => {
@ -1326,10 +1330,7 @@
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/*"
);
animation.style.display = "none"; animation.style.display = "none";
} }
}); });
@ -1338,13 +1339,12 @@
const { checked } = gId("animation"); const { checked } = gId("animation");
if (validate(event)) { if (validate(event)) {
jsonSaveWLED.splice(0);
jsonSaveWLED.splice(0);
gId("preview").style.display = "block"; gId("preview").style.display = "block";
gId("recreatedImage").innerHTML = ""; gId("recreatedImage").innerHTML = "";
const simulate = gId("simulate"); const simulate = gId("simulate");
if (checked) { if (checked) {
simulate.style.display = "none"; simulate.style.display = "none";
@ -1431,7 +1431,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);

1102
wled00/html_pxmagic.h
View File

File diff suppressed because it is too large Load Diff