Skip to content

Commit

Permalink
Moved the preview controls into a collapsible section.
Browse files Browse the repository at this point in the history 
Removed the margin from the canvas.
  • Loading branch information
@jasoncoon
jasoncoon committed Feb 12, 2022
1 parent f89b8fc commit ab2cbf0
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 99 deletions.
1 change: 1 addition & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
#canvasPreview {
border: 1px solid black;
margin: 0px !important;
}

pre {
Expand Down
217 changes: 118 additions & 99 deletions index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,120 +480,139 @@ <h6 class="mb-2 text-muted">
</div>
</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>
<div class="accordion-item">
<h2 class="accordion-header" id="headingPreview">
<button
class="accordion-button text-decoration-none text-body"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsePreview"
aria-expanded="true"
aria-controls="collapsePreview"
>
4. Preview Controls
</button>
</div>
</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-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="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" 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="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>
</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>
</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>

<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">
<option selected>rainbow</option>
<option>rainbow stripe</option>
<option>cloud</option>
<option>lava</option>
<option>ocean</option>
<option>forest</option>
<option>party</option>
<option>heat</option>
<option>temperature</option>
<option>ib_jul01</option>
</select>
<button id="buttonPreviousPalette" type="button" class="btn btn-sm btn-outline-secondary" title="Previous Palette">
<i class="bi bi-skip-backward-fill"></i>
</button>
<button id="buttonNextPalette" type="button" class="btn btn-sm btn-outline-secondary" title="Next Palette">
<i class="bi bi-skip-forward-fill"></i>
</button>
<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">
<option selected>rainbow</option>
<option>rainbow stripe</option>
<option>cloud</option>
<option>lava</option>
<option>ocean</option>
<option>forest</option>
<option>party</option>
<option>heat</option>
<option>temperature</option>
<option>ib_jul01</option>
</select>
<button id="buttonPreviousPalette" type="button" class="btn btn-sm btn-outline-secondary" title="Previous Palette">
<i class="bi bi-skip-backward-fill"></i>
</button>
<button id="buttonNextPalette" type="button" class="btn btn-sm btn-outline-secondary" title="Next Palette">
<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"></textarea>
</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 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>

<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>
</div>
</div>
</div>

<canvas id="canvasPreview" class="mt-2 m-sm-3"></canvas>

Expand Down

0 comments on commit ab2cbf0

Please sign in to comment.