iot/spore-ledlab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pattern editor

Browse Source
This commit is contained in:
0x1d
2025-10-12 12:28:33 +02:00
parent 9a75b23169
commit 3c06f5e587
16 changed files with 4830 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
public/index.html
View File

@@ -12,6 +12,7 @@
<div class="main-navigation">
<div class="nav-left">
<button class="nav-tab active" data-view="stream">📺 Stream</button>
<button class="nav-tab" data-view="editor">🎨 Editor</button>
<button class="nav-tab" data-view="settings">⚙️ Settings</button>
</div>
<div class="nav-right">
@@ -83,6 +84,98 @@
</main>
</div>
<!-- Editor View -->
<div id="editor-view" class="view-content">
<div class="editor-container-modern">
<div class="editor-layout-modern">
<!-- Left Panel: Preset Info & Layers -->
<div class="editor-left-panel">
<!-- Preset Info -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Preset Info</h3>
<div class="editor-input-wrapper">
<label>Name</label>
<input type="text" id="editor-preset-name" value="New Custom Preset" />
</div>
<div class="editor-input-wrapper">
<label>Description</label>
<textarea id="editor-preset-desc" rows="3">A custom configurable preset</textarea>
</div>
</div>
<!-- Add Layer Section -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Add Layer</h3>
<div class="editor-input-wrapper">
<label>Layer Type</label>
<select id="editor-layer-type">
<option value="shape">Shape</option>
<option value="pattern">Pattern</option>
</select>
</div>
<button class="btn btn-primary btn-full-width" id="editor-add-layer">➕ Add Layer</button>
</div>
<!-- Layers List -->
<div class="editor-section-compact editor-layers-section">
<h3 class="section-title-compact">Layers</h3>
<div id="editor-layer-list" class="editor-layer-list-expandable">
<p class="editor-empty-state">No layers yet. Click "Add Layer" to get started!</p>
</div>
</div>
<!-- Manage Section -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Manage</h3>
<div class="editor-actions">
<button class="btn btn-primary" id="editor-new-preset">📄 New</button>
<button class="btn btn-success" id="editor-save-preset">💾 Save</button>
<button class="btn btn-danger" id="editor-delete-preset">🗑️ Delete</button>
</div>
<div class="editor-actions">
<select class="preset-select" id="editor-load-preset">
<option value="">Load saved preset...</option>
</select>
</div>
<div class="editor-actions">
<button class="btn btn-secondary" id="editor-export-json">📤 Export JSON</button>
<label class="btn btn-secondary" style="margin: 0; text-align: center;">
📥 Import JSON
<input type="file" id="editor-import-json" accept=".json" style="display: none;" />
</label>
</div>
</div>
</div>
<!-- Right Panel: Preview & Controls -->
<div class="editor-right-panel">
<!-- Preview Controls Bar -->
<div class="editor-preview-bar">
<div class="preview-bar-controls">
<select id="editor-node-select" class="node-select-compact">
<option value="">Canvas Only</option>
</select>
<button class="btn-preview" id="editor-preview-toggle">
<span class="preview-icon">▶️</span>
<span class="preview-text">Start</span>
</button>
<span class="preview-status-compact" id="editor-preview-status">Ready</span>
</div>
<div class="preview-bar-info">
<span id="editor-canvas-size" class="info-badge">16×16</span>
<span id="editor-canvas-fps" class="info-badge">0 fps</span>
</div>
</div>
<!-- Canvas Preview -->
<div class="editor-preview-main">
<canvas id="editor-preview-canvas" class="editor-canvas-modern"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Settings View -->
<div id="settings-view" class="view-content">
<div class="settings-section">
@@ -130,6 +223,8 @@
<script src="scripts/matrix-display.js"></script>
<script src="scripts/node-canvas-grid.js"></script>
<script src="scripts/preset-controls.js"></script>
<script src="scripts/canvas-renderer.js"></script>
<script src="scripts/preset-editor.js"></script>
<script src="scripts/ledlab-app.js"></script>
</body>
</html>