Skip to content

Commit

Permalink
Fixies
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@ajotanc
ajotanc committed Oct 24, 2023
1 parent a1f28ca commit 309dbd7
Show file tree
Hide file tree
Showing 2 changed files with 604 additions and 604 deletions.
106 changes: 53 additions & 53 deletions wled00/data/pxmagic/pxmagic.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,29 +143,27 @@
margin-top: 20px;
}

.column {
.col {
flex-basis: calc(50% - 10px);
position: relative;
padding-inline: 5px;
}

.column-full {
.col-full {
flex-basis: 100%;
position: relative;
padding-inline: 5px;
}

.header {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
.col-small {
flex-basis: 33.3333%;
position: relative;
padding-inline: 5px;
}

.header {
display: flex;
flex-direction: column;
align-items: start;
padding-bottom: 20px;
}

Expand Down Expand Up @@ -551,8 +549,8 @@
margin: 0;
}

.column,
.column-full {
.col,
.col-full {
flex-basis: 100%;
margin-top: 20px;
padding: 0;
Expand Down Expand Up @@ -609,11 +607,11 @@
>
</div>
<div class="row">
<div class="column" validate>
<div class="col" validate>
<label for="hostname">Hostname</label>
<input type="text" name="hostname" id="hostname" required />
</div>
<div class="column" validate>
<div class="col" validate>
<label for="name">Preset Name</label>
<input
type="text"
Expand All @@ -624,7 +622,7 @@
</div>
</div>
<div class="row">
<div class="column" validate>
<div class="col" validate>
<div class="custom-select">
<label for="pattern">Pattern</label>
<select name="pattern" id="pattern" required>
Expand All @@ -637,7 +635,7 @@
</select>
</div>
</div>
<div class="column" validate>
<div class="col" validate>
<div class="custom-select">
<label for="output">Output</label>
<select name="output" id="output" required>
Expand All @@ -650,15 +648,15 @@
</div>
</div>
<div class="row output" style="display: none">
<div class="column" validate>
<div class="col" validate>
<label for="device">Device</label>
<input type="text" name="device" id="device" required />
</div>
<div class="column" validate>
<div class="col" validate>
<label for="uniqueId">Unique Id</label>
<input type="text" name="uniqueId" id="uniqueId" required />
</div>
<div class="column" validate>
<div class="col" validate>
<label for="friendlyName">Friendly Name</label>
<input
type="text"
Expand All @@ -668,7 +666,7 @@
</div>
</div>
<div class="row">
<div class="column" validate>
<div class="col" validate>
<div class="custom-select">
<label for="segments">Segment Id</label>
<select name="segments" id="segments">
Expand All @@ -678,7 +676,7 @@
</select>
</div>
</div>
<div class="column" validate>
<div class="col" validate>
<label for="brightness">Brightness</label>
<div class="input-group">
<input
Expand All @@ -700,7 +698,7 @@
</div>
</div>
<div class="row">
<div class="column" validate>
<div class="col" validate>
<label for="animation">Animation</label>
<label class="switch">
<input
Expand All @@ -711,7 +709,7 @@
<span class="switch-slider"></span>
</label>
</div>
<div class="column" validate>
<div class="col" validate>
<label for="transparentImage">Transparent Image</label>
<label class="switch">
<input
Expand All @@ -722,7 +720,7 @@
<span class="switch-slider"></span>
</label>
</div>
<div class="column" validate>
<div class="col" validate>
<label for="resizeImage">Resize Image</label>
<label class="switch">
<input
Expand All @@ -736,21 +734,21 @@
</div>
</div>
<div class="row resizeImage">
<div class="column" validate>
<div class="col" validate>
<label for="width">Width</label>
<input type="number" name="width" id="width" value="16" />
</div>
<div class="column" validate>
<div class="col" validate>
<label for="height">Height</label>
<input type="number" name="height" id="height" value="16" />
</div>
</div>
<div class="row animation" style="display: none">
<div class="column" validate>
<div class="col" validate>
<label for="frames">Frames</label>
<input type="number" name="frames" id="frames" value="4" />
</div>
<div class="column" validate>
<div class="col" validate>
<label for="duration">Duration</label>
<div class="input-group">
<input
Expand All @@ -767,7 +765,7 @@
</div>
</div>
</div>
<div class="column" validate>
<div class="col" validate>
<label for="transition">Transition</label>
<div class="input-group">
<input
Expand All @@ -786,7 +784,7 @@
</div>
</div>
<div class="row transparentImage" style="display: none">
<div class="column-full" validate>
<div class="col-full" validate>
<label for="color">Choose a color</label>
<small>
Color that will replace the
Expand All @@ -796,7 +794,7 @@
</div>
</div>
<div class="row">
<div class="column-full" validate>
<div class="col-full" validate>
<div class="custom-select">
<label for="images">
<span>Images upload to WLED</span>
Expand All @@ -822,11 +820,19 @@
style="display: none" />
</div>
<div class="row">
<div class="column-full">
<div class="col-full">
<button type="button" class="button" id="btnGenerate">
Generate
</button>
</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>
</form>
<div id="preview" style="display: none">
Expand All @@ -835,22 +841,22 @@
</textarea>
<div class="buttons">
<div class="row">
<div class="column">
<div class="col">
<button type="button" class="button" id="btnCopyToClipboard">
Copy to Clipboard
</button>
</div>
<div class="column">
<div class="col">
<button type="button" class="button" id="btnSave">Save</button>
</div>
<div class="column">
<div class="col">
<button type="button" class="button" id="btnDownloadPreset">
Download
</button>
</div>
</div>
<div class="row" id="simulate" style="display: none">
<div class="column-full">
<div class="col-full">
<button type="button" class="button" id="btnSimulatePreset">
Simulate
</button>
Expand Down Expand Up @@ -893,6 +899,9 @@
hostnameLabel();
});

gId("gbth").style.display =
window.location.protocol === "http:" ? "flex" : "none";

let jsonSaveWLED = [];
let jsonSendWLED = {};

Expand Down Expand Up @@ -1143,14 +1152,11 @@
}
}

const dropzone = gId("dropzone");
const source = gId("source");

dropzone.addEventListener("dragover", (e) => {
gId("dropzone").addEventListener("dragover", (e) => {
e.preventDefault();
});

dropzone.addEventListener("drop", (e) => {
gId("dropzone").addEventListener("drop", (e) => {
e.preventDefault();

source.files = e.dataTransfer.files;
Expand All @@ -1161,11 +1167,11 @@
validate(e);
});

dropzone.addEventListener("click", () => {
gId("dropzone").addEventListener("click", () => {
source.click();
});

source.addEventListener("change", (e) => {
gId("source").addEventListener("change", (e) => {
const dropzoneLabel = gId("dropzoneLabel");
const { value } = e.target;

Expand Down Expand Up @@ -1265,7 +1271,7 @@

gId("brightnessValue").addEventListener("input", (e) => {
const { value } = e.target;
let bri = value <= 255 ? value : 255;
const bri = value <= 255 ? value : 255;

gId("brightness").value = bri;
e.target.value = bri;
Expand Down Expand Up @@ -1305,9 +1311,7 @@
gId("resizeImage").addEventListener("change", (e) => {
const { checked } = e.target;

d.querySelector(".resizeImage").style.display = checked
? "flex"
: "none";
d.querySelector(".resizeImage").style.display = checked ? "flex" : "none";
});

gId("animation").addEventListener("change", (e) => {
Expand All @@ -1326,10 +1330,7 @@
source.setAttribute("accept", "image/gif");
animation.style.display = "flex";
} else {
source.setAttribute(
"accept",
"image/*"
);
source.setAttribute("accept", "image/*");
animation.style.display = "none";
}
});
Expand All @@ -1338,13 +1339,12 @@
const { checked } = gId("animation");

if (validate(event)) {

jsonSaveWLED.splice(0);
jsonSaveWLED.splice(0);

gId("preview").style.display = "block";
gId("recreatedImage").innerHTML = "";

const simulate = gId("simulate");
const simulate = gId("simulate");

if (checked) {
simulate.style.display = "none";
Expand Down Expand Up @@ -1431,7 +1431,7 @@
try {
const body = new FormData();

if (imageValue === "upload") {
if (!imageValue) {
body.append("image", file);
} else {
const responseImage = await fetch(imageValue);
Expand Down
Loading

0 comments on commit 309dbd7

Please sign in to comment.