Skip to content

Commit

Permalink
Fixed the center x & y controls.
Browse files Browse the repository at this point in the history
Added links & instructions to the app.
  • Loading branch information
jasoncoon committed Feb 4, 2022
1 parent f6f9781 commit 1bfaed5
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 85 deletions.
92 changes: 53 additions & 39 deletions index.htm
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,13 @@
</nav>

<div class="container-fluid">
Instructions, examples, and more information:
<a
href="https://github.com/jasoncoon/led-mapper/blob/main/README.md"
target="_blank"
rel="noopener noreferrer"
>https://github.com/jasoncoon/led-mapper/blob/main/README.md</a
>
<div class="accordion mt-1" id="accordionLayout">
<div class="accordion-item">
<h2 class="accordion-header" id="headingLayout">
Expand All @@ -111,7 +118,7 @@ <h2 class="accordion-header" id="headingLayout">
aria-expanded="true"
aria-controls="collapseLayout"
>
Tab Delimited Text Input
1. Tab Delimited Text Input
</button>
</h2>
<div
Expand All @@ -122,7 +129,7 @@ <h2 class="accordion-header" id="headingLayout">
>
<div class="accordion-body">
<h6 class="mb-2 text-muted">
Paste in either an LED layout or coordinates, copied from
Paste either an LED layout or coordinates, copied from
<a
href="https://sheets.google.com"
target="_blank"
Expand Down Expand Up @@ -368,7 +375,7 @@ <h2 class="accordion-header" id="headingMapInfo">
aria-expanded="false"
aria-controls="collapseMapInfo"
>
Map Info
2. Map Configuration
</button>
</h2>
<div
Expand All @@ -378,6 +385,9 @@ <h2 class="accordion-header" id="headingMapInfo">
data-bs-parent="#accordionMapInfo"
>
<div class="accordion-body">
<h6 class="mb-2 text-muted">
Adjust the map's center coordinates, if needed.
</h6>
<form class="row g-2" id="form">
<div class="col-sm-2">
<label for="inputWidth" class="form-label">Width</label>
Expand Down Expand Up @@ -452,10 +462,28 @@ <h2 class="accordion-header" id="headingFastLedMaps">
data-bs-parent="#accordionFastLedMaps"
>
<div class="accordion-body">
Copy this into your Arduino sketch for FastLED (<a
href="fastled-map-demo/fastled-map-demo.ino"
>example</a
>).
<h6 class="mb-2 text-muted">
Copy and paste this into your
<a
href="https://www.arduino.cc/en/software"
target="_blank"
rel="noopener noreferrer"
>Arduino</a
>
sketch for
<a
href="https://github.com/FastLED/FastLED"
target="_blank"
rel="noopener noreferrer"
>FastLED</a
>. Here's an
<a
href="https://github.com/jasoncoon/led-mapper/blob/main/fastled-map-demo/fastled-map-demo.ino"
target="_blank"
rel="noopener noreferrer"
>example sketch</a
>.
</h6>
<pre><code id="codeFastLED"></code></pre>
<div class="btn-toolbar mt-1" role="toolbar">
<button
Expand Down Expand Up @@ -498,6 +526,16 @@ <h2 class="accordion-header" id="headingPixelblazeMaps">
data-bs-parent="#accordionPixelblazeMaps"
>
<div class="accordion-body">
<h6 class="mb-2 text-muted">
Copy and paste this into your
<a
href="https://www.bhencke.com/mapping-in-pixelblaze"
target="_blank"
rel="noopener noreferrer"
>Pixelblaze</a
>
Mapper tab.
</h6>
<pre><code id="codePixelblaze"></code></pre>
<div class="btn-toolbar mt-1" role="toolbar">
<button
Expand Down Expand Up @@ -605,37 +643,6 @@ <h2 class="accordion-header" id="headingPixelblazeMaps">
<canvas id="canvasPreview" class="mt-2 m-sm-3"></canvas>

<div class="container-fluid">
<div class="accordion mt-2" id="accordionParsedData">
<div class="accordion-item">
<h2 class="accordion-header" id="headingParsedData">
<button
class="accordion-button collapsed text-decoration-none text-body"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseParsedData"
aria-expanded="true"
aria-controls="collapseParsedData"
>
Parsed Data
</button>
</h2>
<div
id="collapseParsedData"
class="accordion-collapse collapse"
aria-labelledby="headingParsedData"
data-bs-parent="#accordionParsedData"
>
<div class="accordion-body">
Layout:
<pre><code id="codeParsedLayout"></code></pre>

Coordinates:
<pre><code id="codeParsedCoordinates"></code></pre>
</div>
</div>
</div>
</div>

<div class="accordion mt-2" id="accordionStats">
<div class="accordion-item">
<h2 class="accordion-header" id="headingStats">
Expand All @@ -647,7 +654,7 @@ <h2 class="accordion-header" id="headingStats">
aria-expanded="true"
aria-controls="collapseStats"
>
Stats
Stats & Debug Info
</button>
</h2>
<div
Expand All @@ -657,6 +664,13 @@ <h2 class="accordion-header" id="headingStats">
data-bs-parent="#accordionStats"
>
<div class="accordion-body">
Layout:
<pre><code id="codeParsedLayout"></code></pre>

Coordinates:
<pre><code id="codeParsedCoordinates"></code></pre>

Stats:
<pre><code id="codeStats"></code></pre>
</div>
</div>
Expand Down
80 changes: 34 additions & 46 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,8 @@ function onFormSubmit(event) {
}

function onGenerateCodeClick() {
centerX = inputCenterX.value;
centerY = inputCenterY.value;
generateCode();
}

Expand Down Expand Up @@ -232,19 +234,6 @@ function parseCoordinates() {
codeParsedCoordinates.innerText = JSON.stringify(rows);

leds = [];
// [
// {
// index: string,
// x: number,
// y: number,
// angle: number,
// radius: number,
// x256: number,
// y256: number,
// angle256: number,
// radius256: number
// }
// }

minX = minY = minAngle = minRadius = 1000000;
maxX = maxY = maxAngle = maxRadius = -1000000;
Expand All @@ -254,7 +243,7 @@ function parseCoordinates() {
for (let r = 0; r < rows.length; r++) {
const row = rows[r];

if (row[0] == "i") continue;
if (row[0] == "i" || row[1] == "x" || row[2] == "y") continue;

const index = parseInt(row[0]);
const x = parseInt(row[1]);
Expand Down Expand Up @@ -315,28 +304,17 @@ function parseLayout() {

width = rows?.[0]?.length;
height = rows?.length;
const centerX = (width - 1) / 2;
const centerY = (height - 1) / 2;

inputWidth.value = width;
inputHeight.value = height;

// calculate the center based on the layout's calculated width & height
const centerX = (width - 1) / 2;
const centerY = (height - 1) / 2;
inputCenterX.value = centerX;
inputCenterY.value = centerY;

leds = [];
// [
// {
// index: string,
// x: number,
// y: number,
// angle: number,
// radius: number,
// x256: number,
// y256: number,
// angle256: number,
// radius256: number
// }
// }

minX = minY = minAngle = minRadius = 1000000;
maxX = maxY = maxAngle = maxRadius = -1000000;
Expand All @@ -352,33 +330,16 @@ function parseLayout() {

const index = parseInt(cell);

const radius = Math.sqrt(
Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)
);
const radians = Math.atan2(centerY - y, centerX - x);

let angle = radians * (180 / Math.PI);
while (angle < 0) angle += 360;
while (angle > 360) angle -= 360;

if (x < minX) minX = x;
if (x > maxX) maxX = x;

if (y < minY) minY = y;
if (y > maxY) maxY = y;

if (angle < minAngle) minAngle = angle;
if (angle > maxAngle) maxAngle = angle;

if (radius < minRadius) minRadius = radius;
if (radius > maxRadius) maxRadius = radius;

leds.push({
index,
x,
y,
angle,
radius,
});
}
}
Expand All @@ -388,6 +349,33 @@ function generateCode() {
let minX256 = (minY256 = minAngle256 = minRadius256 = 1000000);
let maxX256 = (maxY256 = maxAngle256 = maxRadius256 = -1000000);

// use the center defined by the user
const centerX = inputCenterX.value;
const centerY = inputCenterY.value;

// calculate the angle and radius for each LED, using the defined center
for (led of leds) {
const { index, x, y } = led;

const radius = Math.sqrt(
Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)
);
const radians = Math.atan2(centerY - y, centerX - x);

let angle = radians * (180 / Math.PI);
while (angle < 0) angle += 360;
while (angle > 360) angle -= 360;

if (angle < minAngle) minAngle = angle;
if (angle > maxAngle) maxAngle = angle;

if (radius < minRadius) minRadius = radius;
if (radius > maxRadius) maxRadius = radius;

led.angle = angle;
led.radius = radius;
}

for (led of leds) {
const { x, y, angle, radius } = led;

Expand Down

0 comments on commit 1bfaed5

Please sign in to comment.