From 8fe4b6c5038ca2189813d16482813ae94c11f511 Mon Sep 17 00:00:00 2001 From: Jason Coon <3598755+jasoncoon@users.noreply.github.com> Date: Sun, 10 Apr 2022 09:46:49 -0500 Subject: [PATCH] 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. --- index.htm | 7 ++- index.js | 107 +++++++++++++++++++++++++++++++++++++++++----- js/coordinates.js | 4 +- js/layout.js | 4 +- js/math.js | 2 + js/pixelblaze.js | 4 +- 6 files changed, 110 insertions(+), 18 deletions(-) diff --git a/index.htm b/index.htm index 6b4ee41..df80e6c 100644 --- a/index.htm +++ b/index.htm @@ -174,9 +174,10 @@
Choose one of the tabs below and paste in your input
+
- +
@@ -303,9 +304,10 @@
Choose one of the tabs below and paste in your input
+
- +
@@ -324,6 +326,7 @@
Choose one of the tabs below and paste in your input
+
diff --git a/index.js b/index.js index a96dfe2..3d1301f 100644 --- 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 index f246f00..ccd3739 100644 --- 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 index 68b6d2d..7063454 100644 --- 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 index 3d41916..ee2b903 100644 --- 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 index 2fd9560..43a7fc0 100644 --- 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,