Version 1.0.2

- Visual adjustments - Developer mode (append "?dev" to your url) - File upload to device (only in developer mode)
2023-01-17 20:15:10 +01:00
parent 82798fa1ba
commit 8544430ec5
4 changed files with 87 additions and 16 deletions
--- a/html/getPixelValues.js
+++ b/html/getPixelValues.js
@@ -1,8 +1,11 @@
 function getPixelRGBValues(base64Image) {
  httpArray = [];
-  const copyJSONledbutton = document.getElementById('copyJSONledbutton');
+  fileJSON = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1;
+
+  //const copyJSONledbutton = document.getElementById('copyJSONledbutton');
  const JSONled = document.getElementById('JSONled');
  const maxNoOfColorsInCommandSting = document.getElementById('colorLimitNumber').value;
+  
  let hybridAddressing = false;
  let selectedIndex = -1;

@@ -72,7 +75,7 @@ function getPixelRGBValues(base64Image) {
    canvas.width = sizeX;
    canvas.height = sizeY;

-    imageInfo = '<p>Width: ' + sizeX + ', Height: ' + image.height + ' (make sure this matches your led matrix setup)</p>'
+    imageInfo = '<p>Width: ' + sizeX + ', Height: ' + sizeY + ' (make sure this matches your led matrix setup)</p>'

    // Draw the image onto the canvas
    context.drawImage(image, 0, 0, sizeX, sizeY);
@@ -232,6 +235,7 @@ function getPixelRGBValues(base64Image) {
        // Check if start and end is the same, in which case remove

        JSONledString = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd;
+        fileJSON = JSONledString + segmentString + colorSeparatorStart + colorValueString + colorSeparatorEnd;

        curentColorIndex = curentColorIndex + 1; // We've just added a new color to the string so up the count with one

@@ -281,6 +285,8 @@ function getPixelRGBValues(base64Image) {
      JSONled.value = 'ERROR!/n' + formatSelection + ' is an unknown format.'
    }
    
+    fileJSON = fileJSON + JSONledStringEnd;
+
    let infoDiv = document.getElementById('image-info');
    let canvasDiv = document.getElementById('image-info');
    if (hasTransparency){
--- a/html/index.html
+++ b/html/index.html
@@ -4,17 +4,22 @@
    <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 Convertor</title>
+    <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>
-      <h1><svg style="width:32px;height:32px" viewBox="0 0 24 24">
-        <path fill="currentColor" d="M12 16C13.1 16 14 16.9 14 18S13.1 20 12 20 10 19.1 10 18 10.9 16 12 16M12 10C13.1 10 14 10.9 14 12S13.1 14 12 14 10 13.1 10 12 10.9 10 12 10M12 4C13.1 4 14 4.9 14 6S13.1 8 12 8 10 7.1 10 6 10.9 4 12 4M6 16C7.1 16 8 16.9 8 18S7.1 20 6 20 4 19.1 4 18 4.9 16 6 16M6 10C7.1 10 8 10.9 8 12S7.1 14 6 14 4 13.1 4 12 4.9 10 6 10M6 4C7.1 4 8 4.9 8 6S7.1 8 6 8 4 7.1 4 6 4.9 4 6 4M18 16C19.1 16 20 16.9 20 18S19.1 20 18 20 16 19.1 16 18 16.9 16 18 16M18 10C19.1 10 20 10.9 20 12S19.1 14 18 14 16 13.1 16 12 16.9 10 18 10M18 4C19.1 4 20 4.9 20 6S19.1 8 18 8 16 7.1 16 6 16.9 4 18 4Z" />
-    </svg>Led Matrix Pixel Art Converter</h1>
+    <div class="top-part" >
+      <div style="display: flex; justify-content: center;">
+        <h1 style="display: flex; align-items: center;">
+            <svg style="width:36px;height:36px" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M12 16C13.1 16 14 16.9 14 18S13.1 20 12 20 10 19.1 10 18 10.9 16 12 16M12 10C13.1 10 14 10.9 14 12S13.1 14 12 14 10 13.1 10 12 10.9 10 12 10M12 4C13.1 4 14 4.9 14 6S13.1 8 12 8 10 7.1 10 6 10.9 4 12 4M6 16C7.1 16 8 16.9 8 18S7.1 20 6 20 4 19.1 4 18 4.9 16 6 16M6 10C7.1 10 8 10.9 8 12S7.1 14 6 14 4 13.1 4 12 4.9 10 6 10M6 4C7.1 4 8 4.9 8 6S7.1 8 6 8 4 7.1 4 6 4.9 4 6 4M18 16C19.1 16 20 16.9 20 18S19.1 20 18 20 16 19.1 16 18 16.9 16 18 16M18 10C19.1 10 20 10.9 20 12S19.1 14 18 14 16 13.1 16 12 16.9 10 18 10M18 4C19.1 4 20 4.9 20 6S19.1 8 18 8 16 7.1 16 6 16.9 4 18 4Z" />
+            </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;">
@@ -59,9 +64,9 @@
            </td>
            <td style="vertical-align: middle;">
              <select id="addressingSelector">
-                <option value="range" selected>Range (10, 17, #f4f4f4)</option>
+                <option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
+                <option value="range">Range (10, 17, #f4f4f4)</option>
                <option value="single">Single (#f4f4f4)</option>
-                <option value="hybrid">Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
              </select>
            </td>
          </tr>
@@ -174,8 +179,10 @@

      <div id="button-container" style="display: none;">
        <button id="copyJSONledbutton" class="buttonclass"></button>
-        <div class="gap"></div>
+        <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>
--- a/html/index.js
+++ b/html/index.js
@@ -1,6 +1,28 @@
 //Start up code
 document.getElementById('curlUrl').value = location.host;
+
+let devMode = false;
+const urlParams = new URLSearchParams(window.location.search);
+if(urlParams.has('dev')){
+  devMode = true;
+}
+if(devMode){
+  console.log('Developer mode active. Experimental and unstable functions active.')
+} else{
+console.log('Developer mode inactive. Append "?dev" to the URL.')
+}
+
+if(devMode){
+  document.getElementById("fileJSONledbutton").style.display = 'buttonclass'
+  document.getElementById("gap2").style.display = 'gap'
+} else {
+  document.getElementById("fileJSONledbutton").style.display = 'none'
+  document.getElementById("gap2").style.display = 'none'
+}
+
+
 let httpArray = [];
+let fileJSON = '';


 //On submit button pressed =======================
@@ -52,6 +74,17 @@ sendJSONledbutton.addEventListener('click', async () => {
  }
 });

+fileJSONledbutton.addEventListener('click', async () => {
+  if (window.location.protocol === "https:") {
+    alert('Will only be available when served over http (or WLED is run over https)');
+  } else {
+    let JSONFileName = 'TheName.json'
+    let urlString = 'http://'+document.getElementById('curlUrl').value+'/upload'
+
+    sendAsFile(fileJSON, JSONFileName, urlString);
+  }
+});
+
 async function postPixels() {
  for (let i of httpArray) {
    try {
@@ -190,7 +223,32 @@ function switchScale() {
  scaleTogglePath.setAttribute("fill", color);
  scaleTogglePath.setAttribute("d", d);
 }
- 
+
+
+function sendAsFile(jsonStringInput, fileName, urlString) {
+  //var jsonString = JSON.stringify({name: "value"});
+  var file = new Blob([jsonStringInput], {type: 'application/json'});
+  console.log(jsonStringInput)
+  console.log(fileName);
+  console.log(urlString);
+  
+  var formData = new FormData();
+  formData.append('file', file, fileName);
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', urlString, true);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      console.log('File uploaded successfully!');
+    } else {
+      console.log('File upload failed!');
+    }
+  };
+  xhr.send(formData);
+}
+
+document.getElementById("fileJSONledbutton").innerHTML = 
+'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8H20M20 6H12L10 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6M16 17H14V13H11L15 9L19 13H16Z" /></svg>&nbsp; File to device'
 document.getElementById("convertbutton").innerHTML = 
 '<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON '; 
 document.getElementById("copyJSONledbutton").innerHTML = 
--- a/html/styles.css
+++ b/html/styles.css
@@ -20,15 +20,15 @@ body {
 h1 {
  font-size: 2.3em;
  color: rgb(126, 76, 128);
-  margin: 20px 0;
+  margin: 1px 0;
  font-family: 'Arcade', Arial, sans-serif;
  line-height: 0.5;
-  text-align: center;
+  /*text-align: center;*/
 }
 h2 {
-  font-size: 1.3em;
+  font-size: 1.1em;
  color: rgba(126, 76, 128, 0.61);
-  margin: 20px 0;
+  margin: 1px 0;
  font-family: 'Arcade', Arial, sans-serif;
  line-height: 0.5;
  text-align: center;
@@ -144,7 +144,7 @@ input[type="range"]::-webkit-slider-thumb{
  width: 100%;
  border-radius: 0px;
  font-family: 'Arcade', Arial, sans-serif;
-  font-size: 1.3em;
+  font-size: 1em;
  color: rgb(119, 119, 119);
  display: flex;
  align-items: center;