Merge pull request #3296 from ajotanc/pxmagic

Updating pxmagic and WLED UI

wled00/data/index.htm

@@ -198,10 +198,11 @@
 					</label>
 				</div>
 			</div>
-			<div style="padding-bottom: 10px;">
+		</div>
-				<button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
+		<div style="padding-block: 10px;">
-				<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="togglePixelMagicTool()"><i class="icons btn-icon">&#xe410;</i></button>
-			</div>
+			<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>
 		</div>
 	</div>
 
@@ -392,6 +393,7 @@
 	<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>
 </div>
+
 <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
 <script src="index.js"></script>
 </body>

wled00/data/pxmagic/pxmagic.htm

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