Merge pull request #3296 from ajotanc/pxmagic

Updating pxmagic and WLED UI
2023-10-21 20:22:06 +02:00 · 2023-10-21 20:22:06 +02:00 · 107bb14555
commit 107bb14555
parent 0d66bc49c2 5820792013
4 changed files with 2716 additions and 2751 deletions
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@ -198,10 +198,11 @@
 					</label>
 				</div>
 			</div>
-			<div style="padding-bottom: 10px;">
-				<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>
+		<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="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>
--- a/wled00/data/pxmagic/pxmagic.htm
+++ b/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);
-        max-width: 768px;
+        width: min(768px, calc(100% - 40px));
        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
-              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>
+            <img src=" data:image/png;base64,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" alt="Pixel Magic Tool" class="brand">
          </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>
-                    Individual
-                  </option>
+                  <option value="1" title="['ffffff']">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
-                  type="text"
-                  id="brightnessValue"
-                  class="input-description square"
-                  value="128" />
+                <div class="input-description square">
+                  <input
+                    type="text"
+                    name="brightnessValue"
+                    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>
-                <select name="images" id="images" required>
-                  <option value="">Select a choice</option>
-                  <option value="upload">Upload</option>
+                <label for="images">
+                  <span>Images upload to WLED</span>
+                  <a id="wledEdit" href="http://[wled-ip]/edit" target="_blank">
+                    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 = [
-          { text: "Select a choice", value: "" },
-          { text: "Upload", value: "upload" },
-        ];
+        const options = [{ text: "Select image", value: "" }];

-        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) {
-          element.style.display = "flex";
-        } else {
-          element.style.display = "none";
-        }
-      });
+      if (checked) {
+        transparentImage.style.display = "flex";
+      } else {
+        transparentImage.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) {
-          pattern.value = 3;
-          element.style.display = "flex";
-        } else {
-          pattern.value = 1;
-          element.style.display = "none";
-        }
-      });
+      if (checked) {
+        resizeImage.style.display = "flex";
+      } else {
+        resizeImage.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) {
-          toast(
-            'If you want all frames in the image, set it to "0"',
-            "warning",
-            5000
-          );
+      if (checked) {
+        toast(
+          'If you want all frames in the image, set it to "0"',
+          "warning",
+          5000
+        );

-          source.setAttribute("accept", "image/gif");
-          element.style.display = "flex";
-          pattern.value = 3;
-        } else {
-          source.setAttribute(
-            "accept",
-            "image/jpg,image/jpeg,image/png,image/gif"
-          );
-          element.style.display = "none";
-          pattern.value = 1;
-        }
-      });
+        source.setAttribute("accept", "image/gif");
+        animation.style.display = "flex";
+      } else {
+        source.setAttribute(
+          "accept",
+          "image/jpg,image/jpeg,image/png,image/gif"
+        );
+        animation.style.display = "none";
+      }
    });

    element("btnGenerate").addEventListener("click", async (event) => {
@ -1402,8 +1363,7 @@
        const response = element("response");
        const recreatedImage = element("recreatedImage");

-        const urlImage =
-          images === "upload" ? URL.createObjectURL(file) : images;
+        const urlImage = !images ? URL.createObjectURL(file) : images;

        const image = await loadImage(urlImage);
        const { canvas, bri, id, i } = recreate(image);
--- a/wled00/html_pxmagic.h
+++ b/wled00/html_pxmagic.h
--- a/wled00/html_ui.h
+++ b/wled00/html_ui.h