Skip to content

Commit

Permalink
Added pan/zoom to the preview.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasoncoon
jasoncoon committed Feb 13, 2022
1 parent 8562afb commit 3057436
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 104 deletions.
6 changes: 5 additions & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
#canvasPreview {
border: 1px solid black;
margin: 0px !important;
background: black;
}

#panzoom-parent {
background: black;
}

pre {
Expand Down
219 changes: 116 additions & 103 deletions index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,22 +374,17 @@ <h6 class="mb-2 text-muted">Adjust the map's center coordinates, if needed.</h6>

<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkboxFlipX">
<label class="form-check-label" for="checkboxFlipX">
Flip X
</label>
<input class="form-check-input" type="checkbox" id="checkboxFlipX" />
<label class="form-check-label" for="checkboxFlipX"> Flip X </label>
</div>
</div>

<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkboxFlipY">
<label class="form-check-label" for="checkboxFlipY">
Flip Y
</label>
<input class="form-check-input" type="checkbox" id="checkboxFlipY" />
<label class="form-check-label" for="checkboxFlipY"> Flip Y </label>
</div>
</div>

</form>
</div>
</div>
Expand Down Expand Up @@ -495,89 +490,88 @@ <h2 class="accordion-header" id="headingPreview">
</h2>
<div id="collapsePreview" class="accordion-collapse collapse show" aria-labelledby="headingPreview">
<div class="accordion-body">
<div class="btn-toolbar mt-3 gap-2" role="toolbar">
<div class="input-group">
<div class="input-group-text">Pattern</div>
<select id="selectPattern" class="form-control w-auto">
<option selected>physical order</option>
<option>clockwise palette</option>
<option>counter-clockwise palette</option>
<option>outward palette</option>
<option>inward palette</option>
<option>north palette</option>
<option>northeast palette</option>
<option>east palette</option>
<option>southeast palette</option>
<option>south palette</option>
<option>southwest palette</option>
<option>west palette</option>
<option>northwest palette</option>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>white</option>
<option>custom</option>
</select>
<button id="buttonPreviousPattern" type="button" class="btn btn-sm btn-outline-secondary" title="Previous Pattern">
<i class="bi bi-skip-backward-fill"></i>
</button>
<button id="buttonNextPattern" type="button" class="btn btn-sm btn-outline-secondary" title="Next Pattern">
<i class="bi bi-skip-forward-fill"></i>
</button>
</div>

<div class="btn-toolbar mt-3 gap-2" role="toolbar">
<div class="input-group">
<div class="input-group-text">Pattern</div>
<select id="selectPattern" class="form-control w-auto">
<option selected>physical order</option>
<option>clockwise palette</option>
<option>counter-clockwise palette</option>
<option>outward palette</option>
<option>inward palette</option>
<option>north palette</option>
<option>northeast palette</option>
<option>east palette</option>
<option>southeast palette</option>
<option>south palette</option>
<option>southwest palette</option>
<option>west palette</option>
<option>northwest palette</option>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>white</option>
<option>custom</option>
</select>
<button id="buttonPreviousPattern" type="button" class="btn btn-sm btn-outline-secondary" title="Previous Pattern">
<i class="bi bi-skip-backward-fill"></i>
</button>
<button id="buttonNextPattern" type="button" class="btn btn-sm btn-outline-secondary" title="Next Pattern">
<i class="bi bi-skip-forward-fill"></i>
</button>
</div>

<div class="btn-group" role="group">
<button id="buttonPlayPause" type="button" title="Pause" class="btn btn-sm btn-outline-secondary">
<i id="iconPlayPause" class="bi bi-pause-fill"></i>
</button>
</div>
<div class="btn-group" role="group">
<button id="buttonPlayPause" type="button" title="Pause" class="btn btn-sm btn-outline-secondary">
<i id="iconPlayPause" class="bi bi-pause-fill"></i>
</button>
</div>

<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxShowPreviewLEDs" autocomplete="off" checked />
<label class="btn btn-outline-secondary" for="checkboxShowPreviewLEDs">
<i id="iconShowPreviewLEDs" class="bi bi-check-square"></i>
LEDs</label
>
</div>
<div class="btn-group" role="group">
<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>
LEDs</label
>
</div>

<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxPreviewDarkMode" autocomplete="off" checked />
<label class="btn btn-outline-secondary" for="checkboxPreviewDarkMode">
<i id="iconPreviewDarkMode" class="bi bi-check-square"></i>
Dark Mode</label
>
</div>
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxPreviewDarkMode" checked />
<label class="btn btn-outline-secondary" for="checkboxPreviewDarkMode">
<i id="iconPreviewDarkMode" class="bi bi-check-square"></i>
Dark Mode</label
>
</div>

<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxShowPreviewBorders" autocomplete="off" checked />
<label class="btn btn-outline-secondary" for="checkboxShowPreviewBorders">
<i id="iconShowPreviewBorders" class="bi bi-check-square"></i>
Borders</label
>
</div>
<div class="btn-group" role="group">
<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>
Borders</label
>
</div>

<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxShowPreviewNumbers" autocomplete="off" checked />
<label class="btn btn-outline-secondary" for="checkboxShowPreviewNumbers">
<i id="iconShowPreviewNumbers" class="bi bi-check-square"></i>
Numbers</label
>
<div class="input-group" title="LED Numbers Font Size">
<div class="input-group-text">Size</div>
<input id="inputPreviewFontSize" class="form-control" type="number" step="0.25" min="0.25" value="10" style="width: 5rem" />
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="checkboxShowPreviewNumbers" checked />
<label class="btn btn-outline-secondary" for="checkboxShowPreviewNumbers">
<i id="iconShowPreviewNumbers" class="bi bi-check-square"></i>
Numbers</label
>
<div class="input-group" title="LED Numbers Font Size">
<div class="input-group-text">Size</div>
<input id="inputPreviewFontSize" class="form-control" type="number" step="0.25" min="0.25" value="10" style="width: 5rem" />
</div>
</div>
</div>

<div class="btn-group" role="group">
<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" />
<div class="btn-group" role="group">
<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" />
</div>
</div>
</div>
</div>

<div class="btn-toolbar mt-3 gap-2" role="toolbar">
<div class="btn-toolbar mt-3 gap-2" role="toolbar">
<div class="input-group">
<div class="input-group-text">Palette</div>
<select id="selectPalette" class="form-control w-auto">
Expand All @@ -599,29 +593,43 @@ <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"></textarea>
</div>
<canvas id="canvasSelectedPalette" width="256" height="38" style="width: 256px; height: 38px; border-radius: 4px"></canvas>

<div class="row mt-3 gap-2">
<div class="btn-group" role="group">
<div class="input-group" title="FastLED Code">
<div class="input-group-text">FastLED Code</div>
<textarea id="inputPreviewCode" class="form-control w-auto" rows="1"></textarea>
<button class="btn btn-outline-secondary" type="button" title="Code help" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
?
</button>
<button id="buttonReset" class="btn btn-outline-secondary">Reset</button>
</div>

<div class="row mt-3 gap-2">
<div class="btn-group" role="group">
<div class="input-group" title="FastLED Code">
<div class="input-group-text">FastLED Code</div>
<textarea id="inputPreviewCode" class="form-control w-auto" rows="1"></textarea>
<button
class="btn btn-outline-secondary"
type="button"
title="Code help"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
?
</button>
</div>
</div>
</div>
</div>

<div class="row mt-1">
<div id="renderError" class="col-12 text-danger"></div>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<div class="col-12">Input parameters: <code>i</code> (LED index), <code>offset</code> (incrementing counter), <code>coordsX</code>, <code>coordsY</code>, <code>angles</code>, <code>radii</code> (number arrays)</div>
<div class="col-12">
return <code>CHSV(hue, sat, val)</code>, <code>CRGB(r, g, b)</code>, <code>ColorFromPalette(currentPalette, index)</code>, or any
<a href="https://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank" rel="noopener noreferrer">CSS color</a>
<div class="row mt-1">
<div id="renderError" class="col-12 text-danger"></div>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<div class="col-12">
Input parameters: <code>i</code> (LED index), <code>offset</code> (incrementing counter), <code>coordsX</code>, <code>coordsY</code>,
<code>angles</code>, <code>radii</code> (number arrays)
</div>
<div class="col-12">
return <code>CHSV(hue, sat, val)</code>, <code>CRGB(r, g, b)</code>, <code>ColorFromPalette(currentPalette, index)</code>, or any
<a href="https://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank" rel="noopener noreferrer">CSS color</a>
</div>
</div>
</div>
</div>
Expand All @@ -630,10 +638,14 @@ <h2 class="accordion-header" id="headingPreview">
</div>
</div>

<canvas id="canvasPreview" class="mt-2 m-sm-3"></canvas>
<div id="panzoom-parent">
<div id="panzoom-element">
<canvas id="canvasPreview" class="mt-2 m-sm-3"></canvas>
</div>
</div>

<div class="container-fluid">
<div class="accordion mt-2" id="accordionStats">
<div class="accordion mt-1" id="accordionStats">
<div class="accordion-item">
<h2 class="accordion-header" id="headingStats">
<button
Expand Down Expand Up @@ -681,6 +693,7 @@ <h2 class="accordion-header" id="headingStats">
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/@panzoom/panzoom@4.4.4/dist/panzoom.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,8 @@ function onShowPreviewDarkModeChange() {

document.getElementById("iconPreviewDarkMode").className = showPreviewLEDs ? "bi bi-check-square" : "bi bi-square";

document.getElementById("panzoom-parent").style.background = darkMode ? "black" : "white";

if (!running) window.requestAnimationFrame(render);
}

Expand Down Expand Up @@ -296,6 +298,16 @@ function addEventHandlers() {
document.getElementById("checkboxShowPreviewNumbers").onchange = onShowPreviewNumbersChange;

document.getElementById("form").onsubmit = onFormSubmit;

const elem = document.getElementById("panzoom-element");
// eslint-disable-next-line no-undef
const panzoom = Panzoom(elem, {
canvas: true,
maxScale: 5,
});
elem.parentElement.addEventListener("wheel", panzoom.zoomWithWheel);

document.getElementById("buttonReset").onclick = panzoom.reset;
}

function configureCanvas2dContext() {
Expand Down Expand Up @@ -434,6 +446,7 @@ function render() {
const ledWidth = canvasWidth / (max + 1);
const ledHeight = canvasHeight / (max + 1);

context.clearRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = darkMode ? "black" : "white";
context.fillRect(0, 0, canvasWidth, canvasHeight);

Expand Down

0 comments on commit 3057436

Please sign in to comment.