Skip to content

Commit

Permalink
Fix default input tab.
Browse files Browse the repository at this point in the history 
Add image mapper undo keyboard shortcuts.
  • Loading branch information
@jasoncoon
jasoncoon committed Oct 2, 2023
1 parent 47e5de2 commit 85d8c2f
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 9 deletions.
16 changes: 8 additions & 8 deletions index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,14 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and follow the instruct
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" role="presentation">
<button
class="nav-link"
class="nav-link active"
id="layout-input-tab"
data-bs-toggle="tab"
data-bs-target="#layout-input"
type="button"
role="tab"
aria-controls="layout-input"
aria-selected="false"
aria-selected="true"
>
Layout
</button>
Expand Down Expand Up @@ -162,14 +162,14 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and follow the instruct
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link active"
class="nav-link"
id="image-input-tab"
data-bs-toggle="tab"
data-bs-target="#image-input"
type="button"
role="tab"
aria-controls="image-input"
aria-selected="true"
aria-selected="false"
>
Image
</button>
Expand All @@ -178,7 +178,7 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and follow the instruct
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade" id="layout-input" role="tabpanel" aria-labelledby="layout-input-tab">
<div class="tab-pane fade show active" id="layout-input" role="tabpanel" aria-labelledby="layout-input-tab">
<div class="text-muted">
Paste an LED layout copied from
<a href="https://sheets.google.com" target="_blank" rel="noopener noreferrer">Google Sheets</a>
Expand Down Expand Up @@ -238,7 +238,7 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and follow the instruct
</div>
</div>
</div>
<div class="tab-pane fade show active" id="image-input" role="tabpanel" aria-labelledby="image-input-tab">
<div class="tab-pane fade" id="image-input" role="tabpanel" aria-labelledby="image-input-tab">
<div>
<span class="text-muted mr-1">
Browse to an image or photo, then click to mark all the LEDs in the order they're wired physically. The Pixelblaze Map tab will be updated with the results.
Expand All @@ -248,12 +248,12 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and follow the instruct
<input id="inputImage" type="file" class="form-control" style="width: auto;"></input>
</div>
<div class="btn-group" role="group">
<button id="buttonImageInputUndo" type="button" class="btn btn-outline-secondary" title="Undo"><i class="bi bi-arrow-counterclockwise"></i></button>
<button id="buttonImageInputUndo" type="button" class="btn btn-outline-secondary" title="Undo (ctrl+z or cmd+z)"><i class="bi bi-arrow-counterclockwise"></i></button>
</div>
</div>
</div>
<div class="mt-1" style="width: 100%">
<canvas id="canvasImageInput" style="width: 100%" width="1024" height="768"></canvas>
<canvas id="canvasImageInput" style="width: 100%" width="1024" height="768" tabindex="1"></canvas>
</div>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,10 @@ function onGenerateCode() {
}

function onCanvasImageInputKeyDown(event) {
console.log(event);
console.log({key: event.key, ctrlKey: event.ctrlKey, metaKey: event.metaKey});
if (event.key === 'Backspace' || (event.key === 'z' && (event.ctrlKey || event.metaKey))) {
onImageInputUndo();
}
}

function onImageInputChange(event) {
Expand Down

0 comments on commit 85d8c2f

Please sign in to comment.