Added ability to link to specific layout/map data.

Added copy link buttons for layout, coords, Pixelblaze inputs. Fixed single column or row (1D) maps.
jclark2019 · Apr 10, 2022 · 8fe4b6c · 8fe4b6c
1 parent b5f78d8
commit 8fe4b6c
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 18 deletions.
diff --git a/index.htm b/index.htm
@@ -174,9 +174,10 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and paste in your input
                     <div class="btn-group" role="group">
                       <button id="buttonParseLayout" type="submit" class="btn btn-sm btn-outline-secondary">Parse Layout</button>
                       <button id="buttonCopyLayout" type="button" class="btn btn-sm btn-outline-secondary">Copy</button>
+                      <button id="buttonLinkLayout" type="button" class="btn btn-sm btn-outline-secondary">Link</button>
                     </div>
                     <div class="input-group ms-2">
-                      <div class="invisible input-group-text" id="divCopyLayout"></div>
+                      <div class="invisible input-group-text" id="divCopyLayoutInput"></div>
                     </div>
                   </div>
                 </div>
@@ -303,9 +304,10 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and paste in your input
                     <div class="btn-group" role="group">
                       <button id="buttonParseCoordinates" type="submit" class="btn btn-sm btn-outline-secondary">Parse Coordinates</button>
                       <button id="buttonCopyCoordinates" type="button" class="btn btn-sm btn-outline-secondary">Copy</button>
+                      <button id="buttonLinkCoordinates" type="button" class="btn btn-sm btn-outline-secondary">Link</button>
                     </div>
                     <div class="input-group ms-2">
-                      <div class="invisible input-group-text" id="divCopyCoordinates"></div>
+                      <div class="invisible input-group-text" id="divCopyCoordinatesInput"></div>
                     </div>
                   </div>
                 </div>
@@ -324,6 +326,7 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and paste in your input
                     <div class="btn-group" role="group">
                       <button id="buttonParsePixelblaze" type="submit" class="btn btn-sm btn-outline-secondary">Parse Pixelblaze Map</button>
                       <button id="buttonCopyPixelblazeInput" type="button" class="btn btn-sm btn-outline-secondary">Copy</button>
+                      <button id="buttonLinkPixelblaze" type="button" class="btn btn-sm btn-outline-secondary">Link</button>
                     </div>
                     <div class="input-group ms-2">
                       <div class="invisible input-group-text" id="divCopyPixelblazeInput"></div>

diff --git a/index.js b/index.js
@@ -63,7 +63,7 @@ function onCopyCodeClick() {
 }
 
 function onCopyCoordinatesClick() {
-  copyLayoutValueToClipboard(textAreaCoordinates);
+  copyElementValueToClipboard(textAreaCoordinates);
   const div = document.getElementById("divCopyCoordinates");
   div.innerText = "Copied to clipboard";
   div.className = "visible input-group-text";
@@ -72,7 +72,7 @@ function onCopyCoordinatesClick() {
 }
 
 function onCopyLayoutClick() {
-  copyLayoutValueToClipboard(textAreaLayout);
+  copyElementValueToClipboard(textAreaLayout);
   const div = document.getElementById("divCopyLayout");
   div.innerText = "Copied to clipboard";
   div.className = "visible input-group-text";
@@ -108,6 +108,18 @@ function onGenerateCode() {
   generateCode();
 }
 
+function onLinkCoordinates() {
+  copyLinkToClipboard(textAreaCoordinates, 'c', 'Coordinates');
+}
+
+function onLinkLayout() {
+  copyLinkToClipboard(textAreaLayout, 'l', 'Layout');
+}
+
+function onLinkPixelblaze() {
+  copyLinkToClipboard(textAreaPixelblaze, 'p', 'Pixelblaze');
+}
+
 function onNextPaletteClick() {
   selectPalette.selectedIndex = (selectPalette.selectedIndex + 1) % selectPalette.options.length;
   onPaletteChange();
@@ -288,6 +300,9 @@ function addEventHandlers() {
   document.getElementById("buttonCopyLayout").onclick = onCopyLayoutClick;
   document.getElementById("buttonCopyPixelblaze").onclick = onCopyPixelblazeClick;
   document.getElementById("buttonCopyPixelblazeInput").onclick = onCopyPixelblazeInputClick;
+  document.getElementById("buttonLinkCoordinates").onclick = onLinkCoordinates;
+  document.getElementById("buttonLinkLayout").onclick = onLinkLayout;
+  document.getElementById("buttonLinkPixelblaze").onclick = onLinkPixelblaze;
   document.getElementById("buttonNextPalette").onclick = onNextPaletteClick;
   document.getElementById("buttonNextPattern").onclick = onNextPatternClick;
   document.getElementById("buttonParseCoordinates").onclick = onParseCoordinatesClick;
@@ -347,7 +362,7 @@ function copyElementToClipboard(element) {
   document.execCommand("copy");
 }
 
-function copyLayoutValueToClipboard(element) {
+function copyElementValueToClipboard(element) {
   element.select();
 
   element.select();
@@ -357,6 +372,21 @@ function copyLayoutValueToClipboard(element) {
   navigator.clipboard.writeText(element.value);
 }
 
+function copyLinkToClipboard(element, queryParam, name) {
+  element.select();
+  element.select();
+  element.setSelectionRange(0, 99999); /* For mobile devices */
+  const text = element.value;
+  const data = btoa(text);
+  console.log({location: location.toString(), search: location.search, data});
+  navigator.clipboard.writeText(`${location.toString().replace(location.search, "")}?${queryParam}=${data}`);
+
+  const div = document.getElementById(`divCopy${name}Input`);
+  div.innerText = `${name} link copied to clipboard`;
+  div.className = "visible input-group-text";
+  setTimeout(() => (div.className = "invisible input-group-text"), 1000);
+}
+
 function flipX() {
   for (const led of leds) {
     led.x = mapNumber(led.x, maxX, minX, minX, maxX);
@@ -398,8 +428,9 @@ function generatePixelblazeMap() {
   codePixelblaze.innerText = `[${map}]`;
 }
 
-function parseCoordinates() {
-  const results = parseCoordinatesText(textAreaCoordinates.value);
+function parseCoordinates(value) {
+  if (!value) value = textAreaCoordinates.value
+  const results = parseCoordinatesText(value);
 
   // destructure the results into our global variables
   ({ height, leds, maxX, maxY, minX, minY, rows, width } = results);
@@ -412,8 +443,9 @@ function parseCoordinates() {
   inputCenterY.value = height / 2;
 }
 
-function parseLayout() {
-  const results = parseLayoutText(textAreaLayout.value);
+function parseLayout(value) {
+  if (!value) value = textAreaLayout.value;
+  const results = parseLayoutText(value);
 
   // destructure the results into our global variables
   ({ height, leds, maxX, maxY, minX, minY, rows, width } = results);
@@ -426,8 +458,10 @@ function parseLayout() {
   inputCenterY.value = height / 2;
 }
 
-function parsePixelblaze() {
-  const results = parsePixelblazeText(textAreaPixelblaze.value);
+function parsePixelblaze(value) {
+  if (!value) value = textAreaPixelblaze.value;
+
+  const results = parsePixelblazeText(value);
 
   // destructure the results into our global variables
   ({ height, leds, maxX, maxY, minX, minY, rows, width } = results);
@@ -440,6 +474,57 @@ function parsePixelblaze() {
   inputCenterY.value = height / 2;
 }
 
+function parseQueryString() {
+  if (!location.search) return;
+  const params = new URLSearchParams(location.search);
+  const coordinates = params.get('c');
+  const layout = params.get('l');
+  const pixelblaze = params.get('p');
+
+  let data;
+  let tabName;
+  if (coordinates) {
+    data = atob(coordinates);
+    textAreaCoordinates.value = data;
+    tabName = 'coordinates';
+    parseCoordinates();
+  } else if (layout) {
+    data = atob(layout);
+    textAreaLayout.value = data;
+    tabName = 'layout';
+    parseLayout();
+  } else if (pixelblaze) { 
+    data = atob(pixelblaze);
+    console.log({data});
+    textAreaPixelblaze.value = data;
+    tabName = 'pixelblaze';
+    parsePixelblaze();
+  }
+
+  console.log({search: location.search, data, tabName});
+
+  const tabNames = ['coordinates', 'layout', 'pixelblaze'];
+
+  if (tabName) {
+    for (const t of tabNames) {
+      let e = document.getElementById(`${t}-input-tab`);
+      e.setAttribute('aria-selected', 'false');
+      e.setAttribute('class', 'nav-link');
+
+      e = document.getElementById(`${t}-input`);
+      e.setAttribute('class', 'tab-pane fade');
+    }
+
+    let e = document.getElementById(`${tabName}-input-tab`);
+    e.setAttribute('aria-selected', 'true');
+    e.setAttribute('class', 'nav-link active');
+
+    e = document.getElementById(`${tabName}-input`);
+    e.setAttribute('class', 'tab-pane fade show active');
+    return true;
+  }
+}
+
 function handleRenderFunctionError(error) {
   renderFunction = undefined;
   console.error({ error });
@@ -523,7 +608,9 @@ function setRunning(value) {
 // initial setup function calls
 addEventHandlers();
 configureCanvas2dContext();
-parseLayout();
+if (!parseQueryString()) {
+  parseLayout();
+}
 generateCode();
 onPatternChange();
 onPaletteChange();

diff --git a/js/coordinates.js b/js/coordinates.js
@@ -36,8 +36,8 @@ export function parseCoordinatesText(text) {
     });
   }
 
-  width = maxX - minX;
-  height = maxY - minY;
+  width = maxX - minX + 1;
+  height = maxY - minY + 1;
 
   return {
     height,

diff --git a/js/layout.js b/js/layout.js
@@ -40,8 +40,8 @@ export function parseLayoutText(text) {
     }
   }
 
-  width = maxX - minX;
-  height = maxY - minY;
+  width = maxX - minX + 1;
+  height = maxY - minY + 1;
 
   return {
     height,

diff --git a/js/math.js b/js/math.js
@@ -1,3 +1,5 @@
 export function mapNumber(l, inMin, inMax, outMin, outMax) {
+  if (inMax - inMin + outMin === 0) return 0;
+
   return ((l - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
 }
diff --git a/js/pixelblaze.js b/js/pixelblaze.js
@@ -28,8 +28,8 @@ export function parsePixelblazeText(text) {
     });
   }
 
-  width = maxX - minX;
-  height = maxY - minY;
+  width = maxX - minX + 1;
+  height = maxY - minY + 1;
 
   return {
     height,