From 3625f2d8c98e985165619578e41151969041c642 Mon Sep 17 00:00:00 2001
From: werkstrom <henrik@werkstrom.com>
Date: Fri, 20 Jan 2023 16:52:36 +0000
Subject: [PATCH] Add pixartmin.htm

---
 pixartmin.htm | 262 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 pixartmin.htm
diff --git a/pixartmin.htm b/pixartmin.htm
new file mode 100644
index 0000000..9fd23de
--- /dev/null
+++ b/pixartmin.htm
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>Led Matrix Pixel Art Converter</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+  </head>
+
+  <body>
+    <div class="top-part" >
+      <div style="display: flex; justify-content: center;">
+        <h1 style="display: flex; align-items: center;">
+          <svg style="width:36px;height:36px" id="logomatrix" viewBox="0 0 24 24">
+            <path fill="#7e4c80" d="M6,5
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc1"/>
+            <path fill="#7e4c80" d="M12,5
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc2"/>
+            <path fill="#7e4c80" d="M18,5
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc3"/>
+            <path fill="#7e4c80" d="M6,11
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc4"/>
+            <path fill="#7e4c80" d="M12,11
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc5"/>
+            <path fill="#7e4c80" d="M18,11
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc6"/>
+            <path fill="#7e4c80" d="M6,17
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc7"/>
+            <path fill="#7e4c80" d="M12,17
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc8"/>
+            <path fill="#7e4c80" d="M18,17
+                    a2,2 0 1,0 4,0
+                    a2,2 0 1,0 -4,0" id="sc9"/>
+          </svg>
+
+            Led Matrix Pixel Art Converter
+        </h1>
+      </div>
+      <h2>Convert image to WLED JSON (pixel art on WLED matrix)</h2>
+      <p>
+        <table id="fieldTable"  style="width: 100%; table-layout: fixed; align-content: center;">
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="ledSetupSelector">Led setup:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="ledSetupSelector">
+                <option value="matrix" selected>2D Matrix</option>
+                <option value="r2l">Serpentine, first row right to left &lt;-</option>
+                <option value="l2r">Serpentine, first row left to right -&gt;</option>
+              </select>
+            </td>
+          </tr>        
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="formatSelector">Output format:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="formatSelector">
+                <option value="wled" selected>WLED JSON</option>
+                <option value="curl">CURL</option>
+                <option value="ha">Home Assistant YAML</option>
+              </select>
+            </td>
+          </tr>        
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="colorFormatSelector">Color code format:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="colorFormatSelector">
+                <option value="hex" selected>HEX (#f4f4f4)</option>
+                <option value="dec">DEC (244,244,244)</option>
+              </select>
+          </td>
+          </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="addressingSelector">Addressing:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="addressingSelector">
+                <option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
+                <option value="range">Range (10, 17, #f4f4f4)</option>
+                <option value="single">Single (#f4f4f4)</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="brightnessNumber">Brightness:</label>
+            </td>
+            <td style="vertical-align: middle; display: flex; align-items: center;">
+              <input type="range" id="brightnessNumber" min="1" max="255" value="255">
+              <span id="brightnessValue">255</span>
+            </td>
+          </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="colorLimitNumber">Max no of colors/JSON:</label>
+            </td>
+            <td style="vertical-align: middle; display: flex; align-items: center;">
+              <input type="range" id="colorLimitNumber" min="1" max="512" value="256">
+              <span id="colorLimitValue" >256</span>
+            </td>
+          </tr>
+          <tr class="ha-hide">
+            <td style="vertical-align: middle;">
+              <label for="haID">HA Device ID:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001">
+            </td>
+          </tr>
+          <tr class="ha-hide">
+            <td style="vertical-align: middle;">
+              <label for="haUID">HA Device Unique ID:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a">
+            </td>
+          </tr>
+          <tr class="ha-hide">
+            <td style="vertical-align: middle;">
+              <label for="haName">HA Device Name:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen">
+            </td>
+          </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="curlUrl">Device IP/host name:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <input class="fullTextField" type="text" id="curlUrl" value="">
+            </td>
+          </tr>
+          <tr>
+            <td style="vertical-align: middle;">
+              <label for="targetSegment">Target segment id:</label>
+            </td>
+            <td style="vertical-align: middle;">
+              <select id="targetSegment">
+              </select>
+            </td>
+          </tr>
+        </table>
+        <table  class= "scaleTableClass" id="scaleTable"  style="width: 100%; table-layout: fixed; align-content: center;">
+          <tr>
+            <td style="vertical-align: middle;">
+              <div id="scaleDiv">
+                <svg id="scaleToggle" style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()">
+                  <path id="scaleTogglePath" fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" />
+                </svg>
+                &nbsp;&nbsp;&nbsp;
+                <svg id="scaleSvg" style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()">
+                  <path id="scalePath" fill="currentColor" d="M21,15H23V17H21V15M21,11H23V13H21V11M23,19H21V21C22,21 23,20 23,19M13,3H15V5H13V3M21,7H23V9H21V7M21,3V5H23C23,4 22,3 21,3M1,7H3V9H1V7M17,3H19V5H17V3M17,19H19V21H17V19M3,3C2,3 1,4 1,5H3V3M9,3H11V5H9V3M5,3H7V5H5V3M1,11V19A2,2 0 0,0 3,21H15V11H1M3,19L5.5,15.79L7.29,17.94L9.79,14.72L13,19H3Z" />
+                </svg>
+              </div>
+            </td>
+            <td style="vertical-align: middle;">
+              <div id="sizeDiv" style="display: none;">
+                <label for="sizeX">X : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" value="0">
+                &nbsp;&nbsp;&nbsp;
+                <label for="sizeY">Y : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" value="0">
+              </div>
+            </td>
+          </tr>
+        </table>
+      </p>
+
+      <p>
+        <label for="file-picker">
+          <div id="drop-zone">    
+              Drop image here <br>or <br>
+              Click to select a file
+          </div>
+        </label>
+      </p>
+      
+      <p>
+        <input type="file" id="file-picker" style="display: none;">
+        <div style="width: 100%; text-align: center;">
+          <img id="preview" style="display: block; margin: 0 auto;">
+          <img id="newimage" style="display: block; margin: 0 auto;"><br>
+        </div>
+        
+        <div id="submitConvertDiv" style="display: none;">
+          <button id="convertbutton" class="buttonclass"></button>
+        </div>
+        
+        <div id="raw-image-container" style="display: none">
+          <img id="image" src="" alt="RawImage image">
+        </div>
+        
+      </p>
+      
+      <div id="image-container" style="display: none;">
+        <div id="image-info" style="display: none"></div>
+        <textarea id="JSONled"></textarea>
+      </div>
+
+      <div id="button-container" style="display: none;">
+        <button id="copyJSONledbutton" class="buttonclass"></button>
+        <div id="gap1" class="gap"></div>
+        <button id="sendJSONledbutton" class="buttonclass"></button>
+        <div id = "gap2" class="gap"></div>
+        <button id="fileJSONledbutton" class="buttonclass"></button>
+      </div>
+      <div>
+        <h3><div id="version">Version 1.0.4</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
+      </div>
+    </div>
+    <div id=bottom-part style="display: none" class=bottom-part></div>
+          <canvas id="pixelCanvas"></canvas>
+    </div>
+        
+
+    <script>
+      function loadFiles(fileNames, index) {
+          if (index === fileNames.length) {
+              return;
+          }
+
+          var fileName = fileNames[index];
+          var fileExt = fileName.split('.').pop();
+          var element;
+          if (fileExt === 'js') {
+              element = document.createElement('script');
+              element.type = 'text/javascript';
+              element.src = fileName + '?time=' + new Date().getTime();
+          } else if (fileExt === 'css') {
+              element = document.createElement('link');
+              element.rel = 'stylesheet';
+              element.href = fileName + '?time=' + new Date().getTime();
+          }
+
+          element.onload = function() {
+              loadFiles(fileNames, index + 1);
+          }
+
+          document.getElementsByTagName('head')[0].appendChild(element);
+      }
+
+      var files = ["statics.js", "getPixelValues.js", "boxdraw.js", "index.js", "styles.css"];
+      loadFiles(files, 0);
+
+    </script>
+  </body>
+</html>
\ No newline at end of file

+ Led setup: +	+ +
+ Output format: +	+ +
+ Color code format: +	+ +
+ Addressing: +	+ +
+ Brightness: +	+ + 255 +
+ Max no of colors/JSON: +	+ + 256 +
+ HA Device ID: +	+ +
+ HA Device Unique ID: +	+ +
+ HA Device Name: +	+ +
+ Device IP/host name: +	+ +
+ Target segment id: +	+ +