technicalkiwi/led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update tab UI, presets interactions, and help

Browse Source 
Refine tab presets selection and editing, add per-tab removal, improve layout, and provide an in-app help modal.
This commit is contained in:
jimmy
2026-01-28 04:44:30 +13:00
parent 8503315bef
commit 1576383d09
5 changed files with 569 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/templates/index.html
View File

@@ -16,6 +16,7 @@
<button class="btn btn-secondary" id="presets-btn">Presets</button>
<button class="btn btn-secondary" id="patterns-btn">Patterns</button>
<button class="btn btn-secondary" id="profiles-btn">Profiles</button>
<button class="btn btn-secondary" id="help-btn">Help</button>
</div>
</header>
@@ -153,7 +154,9 @@
</div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" id="preset-save-btn">Save</button>
<button class="btn btn-secondary" id="preset-send-btn">Try</button>
<button class="btn btn-primary" id="preset-save-btn">Save &amp; Send</button>
<button class="btn btn-danger" id="preset-remove-from-tab-btn">Remove from Tab</button>
<button class="btn btn-secondary" id="preset-clear-btn">Clear</button>
<button class="btn btn-secondary" id="preset-editor-close-btn">Close</button>
</div>
@@ -187,6 +190,40 @@
</div>
</div>
<!-- Help Modal -->
<div id="help-modal" class="modal">
<div class="modal-content">
<h2>Help</h2>
<p class="muted-text">How to use the LED controller UI.</p>
<h3>Tabs & devices</h3>
<ul>
<li><strong>Select tab</strong>: left-click a tab button in the top bar.</li>
<li><strong>Edit tab</strong>: right-click a tab button, or click <strong>Edit</strong> in the Tabs modal.</li>
<li><strong>Send all presets</strong>: use the <strong>Send Presets</strong> button in the tab header to push every preset used in that tab to all devices.</li>
</ul>
<h3>Presets in a tab</h3>
<ul>
<li><strong>Select preset</strong>: left-click a preset tile to select it and send a <code>select</code> message to all devices in the tab.</li>
<li><strong>Edit preset</strong>: right-click a preset tile and choose <strong>Edit preset…</strong>.</li>
<li><strong>Remove from tab</strong>: right-click a preset tile and choose <strong>Remove from this tab</strong> (the preset itself is not deleted, only its link from this tab).</li>
<li><strong>Reorder presets</strong>: drag preset tiles to change their order; the new layout is saved automatically.</li>
</ul>
<h3>Presets, profiles & colors</h3>
<ul>
<li><strong>Presets</strong>: use the <strong>Presets</strong> button in the header to create and manage reusable presets.</li>
<li><strong>Profiles</strong>: use <strong>Profiles</strong> to save and recall groups of settings.</li>
<li><strong>Color Palette</strong>: use <strong>Color Palette</strong> to build a reusable set of colors you can pull into presets.</li>
</ul>
<div class="modal-actions">
<button class="btn btn-secondary" id="help-close-btn">Close</button>
</div>
</div>
</div>
<style>
.modal {
display: none;
@@ -322,11 +359,27 @@
/* Ensure presets list uses grid layout */
#presets-list-tab {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
width: 100%;
}
/* Help modal readability */
#help-modal .modal-content h2 {
margin-bottom: 0.5rem;
}
#help-modal .modal-content ul {
margin-top: 0.75rem;
margin-left: 1.5rem;
padding-left: 0;
text-align: left;
}
#help-modal .modal-content li {
margin: 0.25rem 0;
line-height: 1.4;
}
</style>
<script src="/static/tabs.js"></script>
<script src="/static/help.js"></script>
<script src="/static/color_palette.js"></script>
<script src="/static/profiles.js"></script>
<script src="/static/tab_palette.js"></script>