osiu97/ESP32-WijiBoard
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Idle animations. Closes #14

Browse Source
This commit is contained in:
PROFERIS - Mi³osz Stocki
2026-07-09 14:01:00 +02:00
parent 79e0be007e
commit dd8f6b2277
6 changed files with 244 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/sections/board-control.js
+21
View File
@@ -4,6 +4,7 @@ import IK from '../kinematics.js';
import Settings from '../settings.js';
import Motion from '../motion.js';
import { buildQuickSequencesHTML, initQuickSequences } from '../quick-sequences.js';
import { IdleEffects } from '../idle-effects.js';
let eventCleanup = [];
let isHomed = false;
@@ -161,6 +162,16 @@ function buildHTML() {
</select>
</div>
<div class="form-group" style="margin-bottom: 12px;">
<label class="form-label">Idle Animation</label>
<select id="bc-idle-mode-select" class="form-input idle-mode-select" style="width:100%;">
<option value="none">None</option>
<option value="circles">Circles</option>
<option value="erratic">Erratic</option>
<option value="park-bounce">Park Bounce</option>
</select>
</div>
<div class="form-group" style="flex:1; display:flex; flex-direction:column;">
<label class="form-label">Available Spots</label>
<select id="spot-list" size="10" class="form-input" style="flex:1; width: 100%; margin-bottom: 12px; font-family: monospace; font-size: 1rem; padding: 8px;">
@@ -248,6 +259,7 @@ async function loadSpots() {
if (!parsedSpots.find(s => s.id === 'PARK')) {
parsedSpots.push({ id: 'PARK', label: 'Park Position', x: parkPosition.x, y: parkPosition.y });
}
IdleEffects.setParkPosition(parkPosition.x, parkPosition.y);
spots = parsedSpots;
document.getElementById('bg-image').src = `web/assets/backgrounds/${currentBg}/bg.svg?v=${Date.now()}`;
renderSpots();
@@ -325,6 +337,15 @@ export default {
updateHomingUI();
loadSpots();
// ── Idle Effects Selection ──────────────────────────────────
const idleSelect = document.getElementById('bc-idle-mode-select');
if (idleSelect) {
idleSelect.value = IdleEffects.getMode();
idleSelect.addEventListener('change', () => {
IdleEffects.setMode(idleSelect.value);
});
}
// ── Background Selection ──────────────────────────────────
const bgSelect = document.getElementById('bg-select');
if (bgSelect) {
web/js/sections/input-text.js
+21
View File
@@ -4,6 +4,7 @@ import IK from '../kinematics.js';
import Settings from '../settings.js';
import Motion from '../motion.js';
import { buildQuickSequencesHTML, initQuickSequences } from '../quick-sequences.js';
import { IdleEffects } from '../idle-effects.js';
let eventCleanup = [];
let isHomed = false;
@@ -149,6 +150,16 @@ function buildHTML() {
</select>
</div>
<div class="form-group" style="margin-bottom: 12px;">
<label class="form-label">Idle Animation</label>
<select id="it-idle-mode-select" class="form-input idle-mode-select" style="width:100%;">
<option value="none">None</option>
<option value="circles">Circles</option>
<option value="erratic">Erratic</option>
<option value="park-bounce">Park Bounce</option>
</select>
</div>
<!-- Settings -->
<div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); margin-bottom: 12px;">
<div class="setting-row">
@@ -266,6 +277,7 @@ async function loadSpots() {
if (!parsedSpots.find(s => s.id === 'PARK')) {
parsedSpots.push({ id: 'PARK', label: 'Park Position', x: parkPosition.x, y: parkPosition.y });
}
IdleEffects.setParkPosition(parkPosition.x, parkPosition.y);
spots = parsedSpots;
document.getElementById('bg-image').src = `web/assets/backgrounds/${currentBg}/bg.svg?v=${Date.now()}`;
@@ -355,6 +367,15 @@ export default {
updateHomingUI();
loadSpots();
// ── Idle Effects Selection ──────────────────────────────────
const idleSelect = document.getElementById('it-idle-mode-select');
if (idleSelect) {
idleSelect.value = IdleEffects.getMode();
idleSelect.addEventListener('change', () => {
IdleEffects.setMode(idleSelect.value);
});
}
// ── Background Selection ──────────────────────────────────
const bgSelect = document.getElementById('bg-select');
if (bgSelect) {
web/js/sections/sequence-editor.js
+21
View File
@@ -4,6 +4,7 @@ import IK from '../kinematics.js';
import Settings from '../settings.js';
import SequenceRunner from '../sequence-runner.js';
import Motion from '../motion.js';
import { IdleEffects } from '../idle-effects.js';
let eventCleanup = [];
let isHomed = false;
@@ -282,6 +283,16 @@ function buildHTML() {
</select>
</div>
<div class="form-group" style="margin-bottom: 12px;">
<label class="form-label">Idle Animation</label>
<select id="se-idle-mode-select" class="form-input idle-mode-select" style="width:100%;">
<option value="none">None</option>
<option value="circles">Circles</option>
<option value="erratic">Erratic</option>
<option value="park-bounce">Park Bounce</option>
</select>
</div>
<div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm);">
<div class="setting-row">
<label class="form-label" style="margin:0;">Speed</label>
@@ -432,6 +443,7 @@ async function loadSpots() {
if (!parsedSpots.find(s => s.id === 'PARK')) {
parsedSpots.push({ id: 'PARK', label: 'Park Position', x: parkPosition.x, y: parkPosition.y });
}
IdleEffects.setParkPosition(parkPosition.x, parkPosition.y);
spots = parsedSpots;
document.getElementById('text-input-row').style.display = hasAlphabet ? 'grid' : 'none';
@@ -578,6 +590,15 @@ export default {
});
}
// ── Idle Effects Selection ──────────────────────────────────
const idleSelect = document.getElementById('se-idle-mode-select');
if (idleSelect) {
idleSelect.value = IdleEffects.getMode();
idleSelect.addEventListener('change', () => {
IdleEffects.setMode(idleSelect.value);
});
}
// ── Settings Sliders ──────────────────────────────────────
const sSpeed = document.getElementById('slider-speed');
const sAccel = document.getElementById('slider-accel');