Corrections

- CSS adjustments
- Removal of some html
- Correction of CORS error when using the file locally, it was unable to generate the images that are saved in WLED
- Among others that I don't remember now

wled00/data/pxmagic/pxmagic.htm

@@ -61,6 +61,7 @@
       }
 
       body {
+        margin: 0;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -72,29 +73,24 @@
         width: 100%;
       }
 
-      form {
-        margin-bottom: 20px;
-      }
-
       small {
         display: block;
         font-weight: 400;
         margin: 2px 0 5px;
         color: var(--gray-light);
-        font-size: 12px;
+        font-size: 0.75rem;
       }
 
       footer {
-        width: 100%;
+        display: flex;
-        margin: 0 auto 20px;
+        justify-content: center;
-        display: block;
+        margin-block: 20px;
-        text-align: center;
       }
 
       a {
         text-decoration: none;
         color: var(--blue-light);
-        font-size: 12px;
+        font-size: 0.75rem;
         font-weight: 600;
       }
 
@@ -103,26 +99,13 @@
       }
 
       #wledEdit {
-        padding: 4px 8px;
+        padding: 1.5px 8px;
         background: var(--blue-light);
         margin-left: 6px;
-        display: inline-block;
         border-radius: 4px;
         color: var(--gray-light);
       }
 
-      .m-zero {
-        margin: 0 !important;
-      }
-
-      .m-bottom {
-        margin-bottom: 10px !important;
-      }
-
-      .m-top {
-        margin-top: 10px !important;
-      }
-
       .container {
         width: 100%;
         display: flex;
@@ -133,7 +116,7 @@
 
       .content {
         width: min(768px, calc(100% - 40px));
-        margin: 20px;
+        margin-inline: 20px;
       }
 
       .row {
@@ -164,17 +147,19 @@
       .header {
         display: flex;
         flex-direction: column;
-        padding-bottom: 20px;
+        padding-block: 20px;
       }
 
       .header .title {
-        font-size: 36px;
+        font-size: 2.5rem;
-        font-weight: 600;
+        line-height: 2.5rem;
+        font-weight: 800;
         color: var(--gray-light);
+        padding-bottom: 5px;
       }
 
       .header .subtitle {
-        font-size: 12px;
+        font-size: 0.75rem;
         color: var(--text);
       }
 
@@ -217,15 +202,7 @@
         border: 1px solid var(--gray-medium);
         outline: none;
         color: var(--gray-light);
-        font-size: 14px;
+        font-size: 0.875rem;
-      }
-
-      input[type="color"] {
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-        padding-inline: 1px;
-        outline: none;
       }
 
       .input-group {
@@ -235,7 +212,7 @@
       }
 
       .input-group input:not([type="range"]) {
-        border-radius: 8px 0 0 8px;
+        border-radius: 50px 0 0 50px;
       }
 
       .input-group .input-description {
@@ -247,15 +224,15 @@
         align-items: center;
         color: var(--gray-dark);
         background: var(--gray-light);
-        border-radius: 0px 8px 8px 0;
+        border-radius: 0px 50px 50px 0;
         border: 1px solid var(--gray-light);
         border-left: 0;
-        font-size: 14px;
+        font-size: 0.875rem;
-        line-height: 16px;
+        line-height: 1rem;
       }
 
       .input-group .square {
-        border-radius: 8px !important;
+        border-radius: 50px !important;
         margin-left: 10px;
       }
 
@@ -269,13 +246,7 @@
 
       textarea {
         resize: none;
-        min-height: 200px;
         border-radius: 8px;
-        overflow-x: hidden;
-      }
-
-      .custom-select {
-        position: relative;
       }
 
       .custom-select select {
@@ -283,7 +254,7 @@
         -webkit-appearance: none;
         -moz-appearance: none;
         background-image: none;
-        padding-right: 20px;
+        padding-right: 39px;
         cursor: pointer;
       }
 
@@ -291,7 +262,7 @@
         content: "";
         position: absolute;
         top: calc(50% + 6px);
-        right: 16px;
+        right: 21px;
         transform: rotate(135deg);
         width: 6px;
         height: 6px;
@@ -483,7 +454,7 @@
         background: var(--gray-medium);
         border: 1px solid var(--gray-dark);
         transition: all 0.5s ease-in-out;
-        font-size: 14px;
+        font-size: 0.875rem;
         font-weight: 600;
       }
 
@@ -539,7 +510,7 @@
         color: var(--error-dark);
         padding-block: 4px;
         font-weight: 600;
-        font-size: 12px;
+        font-size: 0.75rem;
       }
 
       @media (max-width: 767px) {
@@ -550,7 +521,8 @@
         }
 
         .col,
-        .col-full {
+        .col-full,
+        .col-small {
           flex-basis: 100%;
           margin-top: 20px;
           padding: 0;
@@ -626,7 +598,6 @@
               <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>
@@ -639,7 +610,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>
@@ -837,7 +807,7 @@
         </form>
         <div id="preview" style="display: none">
           <div id="recreatedImage"></div>
-          <textarea name="response" id="response" readonly="readonly">
+          <textarea name="response" id="response" rows="8" readonly="readonly">
           </textarea>
           <div class="buttons">
             <div class="row">
@@ -1356,19 +1326,22 @@
       }
     });
 
-    function loadImage(src) {
+    async function createObjectURL(url) {
+      return fetch(url)
+        .then((response) => response.arrayBuffer())
+        .then((buffer) => {
+          const binaryData = new Uint8Array(buffer);
+          const base64 = btoa(String.fromCharCode(...binaryData));
+          return `data:image/png;base64,${base64}`;
+        });
+    }
+
+    function loadImage(url) {
       return new Promise((resolve, reject) => {
-        const image = new Image();
+        const img = new Image();
-
+        img.onload = () => resolve(img);
-        image.addEventListener("load", function () {
+        img.onerror = (error) => reject(error);
-          resolve(image);
+        img.src = url;
-        });
-
-        image.addEventListener("error", function () {
-          reject(new Error("Error loading image"));
-        });
-
-        image.src = src;
       });
     }
 
@@ -1384,7 +1357,9 @@
         const response = gId("response");
         const recreatedImage = gId("recreatedImage");
 
-        const urlImage = !images ? URL.createObjectURL(file) : images;
+        const urlImage = !images
+          ? URL.createObjectURL(file)
+          : await createObjectURL(images);
 					
         const image = await loadImage(urlImage);
         const { canvas, bri, id, i } = recreate(image);