Pixelmagic optimisation

Filter tooltips
2023-10-14 20:44:11 +02:00 · 2023-10-14 20:44:11 +02:00 · 1be6223a31
commit 1be6223a31
parent 76178b423e
6 changed files with 2750 additions and 2760 deletions
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@ -337,7 +337,8 @@ button {
 	width: calc(100%/var(--n));
 	box-sizing: border-box;
 	border: 0px;
-	overflow: auto;
+	overflow-y: auto;
+	overflow-x: hidden;
 	height: 100%;
 	overscroll-behavior: none;
 	padding: 0 4px;
@ -461,11 +462,11 @@ button {

 .filter {
 	z-index: 1;
-	overflow: hidden;
+	/*overflow: visible;*/
 }

 /* Tooltip text */
-.slider .tooltiptext, .option .tooltiptext {
+.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext {
 	visibility: hidden;
 	background-color: var(--c-5);
 	/*border: 2px solid var(--c-2);*/
@ -490,11 +491,17 @@ button {
 	opacity: 0;
 	transition: opacity 0.75s;
 }
-.option .tooltiptext {
+.option .tooltiptext, .filter .tooltiptext {
 	bottom: 120%;
 }
+.filter .ttfirst {
+	margin-left: -40px;
+}
+.filter .ttlast {
+	margin-left: -140px;
+}
 /* Tooltip arrow */
-.slider .tooltiptext::after, .option .tooltiptext::after {
+.slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after {
 	content: "";
 	position: absolute;
 	top: 100%;
@ -504,8 +511,14 @@ button {
 	border-style: solid;
 	border-color: var(--c-5) transparent transparent transparent;
 }
+.filter .ttfirst::after {
+	left: 15%;
+}
+.filter .ttlast::after {
+	left: 75%;
+}
 /* Show the tooltip text when you mouse over the tooltip container */
-.slider:hover .tooltiptext, .option .check:hover .tooltiptext {
+.slider:hover .tooltiptext, .option .check:hover .tooltiptext, .filter .check:hover .tooltiptext {
 	visibility: visible;
 	opacity: 1;
 }
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@ -230,26 +230,32 @@
 				<label id="filterPal" class="check fchkl">&#x1F3A8;
 					<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext ttfirst">Uses palette</span>
 				</label>
 				<label id="filter0D" class="check fchkl hide">&#8226;
 					<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext">Single pixel</span>
 				</label>
 				<label id="filter1D" class="check fchkl">&#8942;
 					<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext">1D</span>
 				</label>
 				<label id="filter2D" class="check fchkl">&#9638;
 					<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext">2D</span>
 				</label>
 				<label id="filterVol" class="check fchkl">&#9834;
 					<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext">Volume</span>
 				</label>
 				<label id="filterFreq" class="check fchkl">&#9835;
 					<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
+					<span class="tooltiptext ttlast">Frequency</span>
 				</label>
 			</div>
 			<div id="slider0" class="slider">
--- a/wled00/data/pxmagic/pxmagic.htm
+++ b/wled00/data/pxmagic/pxmagic.htm
@ -564,12 +564,9 @@
              <div class="custom-select">
                <label for="pattern">Pattern</label>
                <select name="pattern" id="pattern" required>
-                  <option value="">Select a choice</option>
-                  <option value="1" title="['ffffff']">
-                    Individual
-                  </option>
-                  <option value="2" title="[0,'ffffff']">Index</option>
                  <option value="3" title="[0,5,'ffffff']" selected>Range</option>
+                  <option value="2" title="[0,'ffffff']">Index</option>
+                  <option value="1" title="['ffffff']">Individual</option>
                </select>
              </div>
            </div>
@ -577,7 +574,6 @@
              <div class="custom-select">
                <label for="output">Output</label>
                <select name="output" id="output" required>
-                  <option value="">Select a choice</option>
                  <option value="json" selected>WLED JSON</option>
                  <option value="ha">Home Assistant</option>
                  <option value="curl">CURL</option>
@ -718,24 +714,16 @@
          <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">Images uploaded to WLED [<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"
@ -832,7 +820,7 @@

    function hostnameLabel() {
      const link = element("wledEdit");
-      link.href = link.href.replace("[wled-ip]", hostname.value);
+      link.href = WLED_URL + "/edit";
    }

    async function playlist() {
@ -986,26 +974,23 @@
          return mimeTypes.includes(mimetype);
        });

-        const options = [
-          { text: "Select a choice", value: "" },
-          { text: "Upload", value: "upload" },
-        ];
+        const options = [];

-        if (images) {
+        if (images.length>0) {
          options.push(
            ...images.map(({ name }) => ({
              text: name,
              value: `${WLED_URL}/${name}`,
            }))
          );
-
-          select.innerHTML = "";
-
-          options.forEach(({ text, value }) => {
-            const option = new Option(text, value);
-            select.appendChild(option);
-          });
+        } else {
+          options.push({ text: "No images", value: "" });
        }
+        select.innerHTML = "";
+        options.forEach(({ text, value }) => {
+          const option = new Option(text, value);
+          select.appendChild(option);
+        });
      } catch (error) {
        toast(error, "error");
      } finally {
@ -1053,7 +1038,7 @@
            option.selected = true;
            width.value = w;
            height.value = h;
-            pattern.value = w * h > 512 ? 3 : 1;
+            pattern.value = w * h > 64 ? 3 : 1;
          }

          select.add(option);
@ -1216,19 +1201,6 @@
    element("images").addEventListener("change", (e) => {
      const dropzone = element("dropzone");
      const { value } = e.target.selectedOptions[0];
-
-      if (value === "upload") {
-        const dropzoneLabel = element("dropzoneLabel");
-        const source = element("source");
-
-        dropzoneLabel.textContent =
-          "Drag and drop a file here or click to select a file";
-        source.value = "";
-
-        dropzone.style.display = "block";
-      } else {
-        dropzone.style.display = "none";
-      }
    });

    element("transparentImage").addEventListener("change", (e) => {
@ -1251,10 +1223,10 @@

      Array.from(resizeImage).forEach(function (element) {
        if (checked) {
-          pattern.value = 3;
+          //pattern.value = 3;
          element.style.display = "flex";
        } else {
-          pattern.value = 1;
+          //pattern.value = 1;
          element.style.display = "none";
        }
      });
@ -1278,14 +1250,14 @@

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

        const urlImage =
-          images === "upload" ? URL.createObjectURL(file) : images;
+          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
--- a/wled00/wled.h
+++ b/wled00/wled.h
@ -8,7 +8,7 @@
 */

 // version code in format yymmddb (b = daily build)
-#define VERSION 2310140
+#define VERSION 2310141

 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG