Added render scale toggle.

Added some control titles/tooltips.
jclark2019 · Feb 13, 2022 · cfba016 · cfba016
1 parent 3057436
commit cfba016
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/index.htm b/index.htm
@@ -527,7 +527,7 @@ <h2 class="accordion-header" id="headingPreview">
                 </button>
               </div>
 
-              <div class="btn-group" role="group">
+              <div class="btn-group" role="group" title="Show/Hide LEDs">
                 <input type="checkbox" class="btn-check" id="checkboxShowPreviewLEDs" checked />
                 <label class="btn btn-outline-secondary" for="checkboxShowPreviewLEDs">
                   <i id="iconShowPreviewLEDs" class="bi bi-check-square"></i>
@@ -543,7 +543,7 @@ <h2 class="accordion-header" id="headingPreview">
                 >
               </div>
 
-              <div class="btn-group" role="group">
+              <div class="btn-group" role="group" title="Show/Hide LED Borders">
                 <input type="checkbox" class="btn-check" id="checkboxShowPreviewBorders" checked />
                 <label class="btn btn-outline-secondary" for="checkboxShowPreviewBorders">
                   <i id="iconShowPreviewBorders" class="bi bi-check-square"></i>
@@ -552,8 +552,8 @@ <h2 class="accordion-header" id="headingPreview">
               </div>
 
               <div class="btn-group" role="group">
-                <input type="checkbox" class="btn-check" id="checkboxShowPreviewNumbers" checked />
-                <label class="btn btn-outline-secondary" for="checkboxShowPreviewNumbers">
+                <input type="checkbox" class="btn-check" id="checkboxShowPreviewNumbers" title="Show/Hide LED Numbers" checked />
+                <label class="btn btn-outline-secondary" for="checkboxShowPreviewNumbers" title="Show/Hide LED Numbers">
                   <i id="iconShowPreviewNumbers" class="bi bi-check-square"></i>
                   Numbers</label
                 >
@@ -563,7 +563,7 @@ <h2 class="accordion-header" id="headingPreview">
                 </div>
               </div>
 
-              <div class="btn-group" role="group">
+              <div class="btn-group" role="group" title="Pattern Speed">
                 <div class="input-group" title="Pattern Speed">
                   <div class="input-group-text">Speed</div>
                   <input id="inputPreviewSpeed" class="form-control" type="number" step="0.1" min="0.1" max="1.0" value="1" style="width: 5rem" />
@@ -593,9 +593,17 @@ <h2 class="accordion-header" id="headingPreview">
                   <i class="bi bi-skip-forward-fill"></i>
                 </button>
               </div>
-              <canvas id="canvasSelectedPalette" width="256" height="38" style="width: 256px; height: 38px; border-radius: 4px"></canvas>
+              <canvas
+                id="canvasSelectedPalette"
+                width="256"
+                height="38"
+                style="width: 256px; height: 38px; border-radius: 4px"
+                title="Selected Palette"
+              ></canvas>
+
+              <button id="buttonReset" class="btn btn-outline-secondary" title="Reset Pan/Zoom"><i class="bi bi-aspect-ratio"></i> Reset</button>
 
-              <button id="buttonReset" class="btn btn-outline-secondary">Reset</button>
+              <button id="buttonToggleScale" class="btn btn-outline-secondary" title="Toggle LED preview scale between input and 256">Scale</button>
             </div>
 
             <div class="row mt-3 gap-2">

diff --git a/index.js b/index.js
@@ -42,13 +42,15 @@ let offset = 0;
 let offsetIncrement = 1.0;
 
 let running = true;
-let showPreviewBorders = true;
-let showPreviewNumbers = true;
+let showPreviewBorders = false;
+let showPreviewNumbers = false;
 let showPreviewLEDs = true;
 let darkMode = true;
 
 let renderFunction = undefined;
 
+let renderScale = false;
+
 const currentPalette = null;
 
 // event handlers
@@ -246,6 +248,13 @@ function onTextLayoutChange() {
   generateCode();
 }
 
+function onToggleScale() {
+  renderScale = !renderScale;
+  const scale = renderScale ? 256 : width > height ? width : height;
+  document.getElementById("buttonToggleScale").innerText = `Scale: ${scale}`;
+  if (!running) window.requestAnimationFrame(render);
+}
+
 function onWindowResize() {
   const min = window.innerWidth - 48;
 
@@ -288,6 +297,7 @@ function addEventHandlers() {
   document.getElementById("buttonParsePixelblaze").onclick = onParsePixelblazeClick;
   document.getElementById("buttonPreviousPalette").onclick = onPreviousPaletteClick;
   document.getElementById("buttonPreviousPattern").onclick = onPreviousPatternClick;
+  document.getElementById("buttonToggleScale").onclick = onToggleScale;
 
   document.getElementById("checkboxFlipX").onchange = flipX;
   document.getElementById("checkboxFlipY").onchange = flipY;
@@ -438,13 +448,19 @@ function render() {
 
   offset += offsetIncrement;
   if (offset > 255) offset = 0;
+
   const canvasWidth = canvasPreview.width;
   const canvasHeight = canvasPreview.height;
 
-  const max = width > height ? width : height;
+  let max;
+  if (renderScale) {
+    max = 255;
+  } else {
+    max = width > height ? width : height;
+  }
 
-  const ledWidth = canvasWidth / (max + 1);
-  const ledHeight = canvasHeight / (max + 1);
+  let ledWidth = canvasWidth / (max + 1);
+  let ledHeight = canvasHeight / (max + 1);
 
   context.clearRect(0, 0, canvasWidth, canvasHeight);
   context.fillStyle = darkMode ? "black" : "white";
@@ -460,8 +476,14 @@ function render() {
       return;
     }
 
-    const x = (led.x - minX) * ledWidth;
-    const y = (led.y - minY) * ledHeight;
+    let x, y;
+    if (renderScale) {
+      x = led.x256 * ledWidth;
+      y = led.y256 * ledHeight;
+    } else {
+      x = (led.x - minX) * ledWidth;
+      y = (led.y - minY) * ledHeight;
+    }
 
     if (showPreviewBorders) {
       context.strokeStyle = darkMode ? "white" : "black";