From 39b31aec34024dcd0657544fbedbc586e39a6df6 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 28 Feb 2026 18:16:21 +0300 Subject: [PATCH] Move Scenes into Automations tab, smaller Capture button, scene crosslinks - Merge Scenes tab into Automations tab as a second CardSection below automations - Make dashboard Capture button match Stop All sizing - Dashboard scene cards navigate to automations tab on click (crosslink) - Add scene steps to automations tutorial - Fix tour.tgt.devices to say "LED controllers" instead of "WLED controllers" - Update command palette and navigation for new scene location Co-Authored-By: Claude Opus 4.6 --- server/src/wled_controller/static/js/app.js | 8 +-- .../static/js/core/command-palette.js | 2 +- .../static/js/core/navigation.js | 1 - .../static/js/features/automations.js | 18 +++-- .../static/js/features/scene-presets.js | 66 +++---------------- .../static/js/features/tabs.js | 4 -- .../static/js/features/tutorials.js | 5 +- .../wled_controller/static/locales/en.json | 5 +- .../wled_controller/static/locales/ru.json | 5 +- .../wled_controller/static/locales/zh.json | 5 +- .../src/wled_controller/templates/index.html | 6 -- 11 files changed, 39 insertions(+), 86 deletions(-) diff --git a/server/src/wled_controller/static/js/app.js b/server/src/wled_controller/static/js/app.js index 16c3891..558497f 100644 --- a/server/src/wled_controller/static/js/app.js +++ b/server/src/wled_controller/static/js/app.js @@ -83,7 +83,6 @@ import { expandAllAutomationSections, collapseAllAutomationSections, } from './features/automations.js'; import { - loadScenes, expandAllSceneSections, collapseAllSceneSections, openScenePresetCapture, editScenePreset, saveScenePreset, closeScenePresetEditor, activateScenePreset, recaptureScenePreset, deleteScenePreset, } from './features/scene-presets.js'; @@ -312,9 +311,6 @@ Object.assign(window, { collapseAllAutomationSections, // scene presets - loadScenes, - expandAllSceneSections, - collapseAllSceneSections, openScenePresetCapture, editScenePreset, saveScenePreset, @@ -438,9 +434,9 @@ document.addEventListener('keydown', (e) => { return; } - // Tab shortcuts: Ctrl+1..5 (skip when typing in inputs) + // Tab shortcuts: Ctrl+1..4 (skip when typing in inputs) if (!inInput && e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { - const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams', '5': 'scenes' }; + const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams' }; const tab = tabMap[e.key]; if (tab) { e.preventDefault(); diff --git a/server/src/wled_controller/static/js/core/command-palette.js b/server/src/wled_controller/static/js/core/command-palette.js index c706263..69782a9 100644 --- a/server/src/wled_controller/static/js/core/command-palette.js +++ b/server/src/wled_controller/static/js/core/command-palette.js @@ -101,7 +101,7 @@ function _buildItems(results) { _mapEntities(scenePresets, sp => items.push({ name: sp.name, detail: sp.description || '', group: 'scenes', icon: ICON_SCENE, - nav: ['scenes', null, 'scenes', 'data-scene-id', sp.id], + nav: ['automations', null, 'scenes', 'data-scene-id', sp.id], })); return items; diff --git a/server/src/wled_controller/static/js/core/navigation.js b/server/src/wled_controller/static/js/core/navigation.js index 1ddadf0..d67bdde 100644 --- a/server/src/wled_controller/static/js/core/navigation.js +++ b/server/src/wled_controller/static/js/core/navigation.js @@ -90,7 +90,6 @@ function _triggerTabLoad(tab) { else if (tab === 'automations' && typeof window.loadAutomations === 'function') window.loadAutomations(); else if (tab === 'streams' && typeof window.loadPictureSources === 'function') window.loadPictureSources(); else if (tab === 'targets' && typeof window.loadTargetsTab === 'function') window.loadTargetsTab(); - else if (tab === 'scenes' && typeof window.loadScenes === 'function') window.loadScenes(); } function _showDimOverlay(duration) { diff --git a/server/src/wled_controller/static/js/features/automations.js b/server/src/wled_controller/static/js/features/automations.js index 87bf0f3..e72fb8a 100644 --- a/server/src/wled_controller/static/js/features/automations.js +++ b/server/src/wled_controller/static/js/features/automations.js @@ -10,6 +10,7 @@ import { Modal } from '../core/modal.js'; import { CardSection } from '../core/card-sections.js'; import { updateTabBadge } from './tabs.js'; import { ICON_SETTINGS, ICON_START, ICON_PAUSE, ICON_CLOCK, ICON_AUTOMATION, ICON_HELP, ICON_OK, ICON_TIMER, ICON_MONITOR, ICON_RADIO, ICON_SCENE } from '../core/icons.js'; +import { csScenes, createSceneCard } from './scene-presets.js'; // ===== Scene presets cache (shared by both selectors) ===== let _scenesCache = []; @@ -80,22 +81,25 @@ export async function loadAutomations() { } export function expandAllAutomationSections() { - CardSection.expandAll([csAutomations]); + CardSection.expandAll([csAutomations, csScenes]); } export function collapseAllAutomationSections() { - CardSection.collapseAll([csAutomations]); + CardSection.collapseAll([csAutomations, csScenes]); } function renderAutomations(automations, sceneMap) { const container = document.getElementById('automations-content'); - const items = csAutomations.applySortOrder(automations.map(a => ({ key: a.id, html: createAutomationCard(a, sceneMap) }))); - const toolbar = `
`; - container.innerHTML = toolbar + csAutomations.render(items); - csAutomations.bind(); + const autoItems = csAutomations.applySortOrder(automations.map(a => ({ key: a.id, html: createAutomationCard(a, sceneMap) }))); + const sceneItems = csScenes.applySortOrder(_scenesCache.map(s => ({ key: s.id, html: createSceneCard(s) }))); - // Localize data-i18n elements within the automations container only + const toolbar = `
`; + container.innerHTML = toolbar + csAutomations.render(autoItems) + csScenes.render(sceneItems); + csAutomations.bind(); + csScenes.bind(); + + // Localize data-i18n elements within the container container.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.getAttribute('data-i18n')); }); diff --git a/server/src/wled_controller/static/js/features/scene-presets.js b/server/src/wled_controller/static/js/features/scene-presets.js index 51a3015..6b00a62 100644 --- a/server/src/wled_controller/static/js/features/scene-presets.js +++ b/server/src/wled_controller/static/js/features/scene-presets.js @@ -1,22 +1,19 @@ /** * Scene Presets — capture, activate, edit, delete system state snapshots. - * Renders as a dedicated tab and also provides dashboard section rendering. + * Rendered as a CardSection inside the Automations tab, plus dashboard compact cards. */ -import { apiKey } from '../core/state.js'; import { fetchWithAuth, escapeHtml } from '../core/api.js'; import { t } from '../core/i18n.js'; import { showToast, showConfirm } from '../core/ui.js'; import { Modal } from '../core/modal.js'; import { CardSection } from '../core/card-sections.js'; -import { updateTabBadge } from './tabs.js'; import { ICON_SCENE, ICON_CAPTURE, ICON_START, ICON_EDIT, ICON_REFRESH, ICON_TARGET, ICON_SETTINGS, } from '../core/icons.js'; let _presetsCache = []; let _editingId = null; -let _scenesLoading = false; class ScenePresetEditorModal extends Modal { constructor() { super('scene-preset-editor-modal'); } @@ -30,59 +27,14 @@ class ScenePresetEditorModal extends Modal { } const scenePresetModal = new ScenePresetEditorModal(); -const csScenes = new CardSection('scenes', { +export const csScenes = new CardSection('scenes', { titleKey: 'scenes.title', gridClass: 'devices-grid', addCardOnclick: "openScenePresetCapture()", keyAttr: 'data-scene-id', }); -// Re-render scenes when language changes (only if tab is active) -document.addEventListener('languageChanged', () => { - if (apiKey && (localStorage.getItem('activeTab') || 'dashboard') === 'scenes') loadScenes(); -}); - -// ===== Tab rendering ===== - -export async function loadScenes() { - if (_scenesLoading) return; - _scenesLoading = true; - - try { - const resp = await fetchWithAuth('/scene-presets'); - if (!resp.ok) { _scenesLoading = false; return; } - const data = await resp.json(); - _presetsCache = data.presets || []; - } catch { - _scenesLoading = false; - return; - } - - const container = document.getElementById('scenes-content'); - const items = csScenes.applySortOrder(_presetsCache.map(p => ({ key: p.id, html: _createSceneCard(p) }))); - - updateTabBadge('scenes', _presetsCache.length); - - if (csScenes.isMounted()) { - csScenes.reconcile(items); - } else { - const toolbar = `
`; - container.innerHTML = toolbar + csScenes.render(items); - csScenes.bind(); - } - - _scenesLoading = false; -} - -export function expandAllSceneSections() { - CardSection.expandAll([csScenes]); -} - -export function collapseAllSceneSections() { - CardSection.collapseAll([csScenes]); -} - -function _createSceneCard(preset) { +export function createSceneCard(preset) { const targetCount = (preset.targets || []).length; const deviceCount = (preset.devices || []).length; const automationCount = (preset.automations || []).length; @@ -133,7 +85,7 @@ export async function loadScenePresets() { export function renderScenePresetsSection(presets) { if (!presets || presets.length === 0) return ''; - const captureBtn = ``; + const captureBtn = ``; const cards = presets.map(p => _renderDashboardPresetCard(p)).join(''); return { headerExtra: captureBtn, content: `
${cards}
` }; @@ -151,8 +103,8 @@ function _renderDashboardPresetCard(preset) { automationCount > 0 ? `${automationCount} ${t('scenes.automations_count')}` : null, ].filter(Boolean).join(' \u00b7 '); - return `
-
+ return `
+
${ICON_SCENE}
${escapeHtml(preset.name)}
@@ -327,9 +279,9 @@ export async function deleteScenePreset(presetId) { // ===== Helpers ===== function _reloadScenesTab() { - // Reload the scenes tab if it's active - if ((localStorage.getItem('activeTab') || 'dashboard') === 'scenes') { - loadScenes(); + // Reload automations tab (which includes scenes section) + if ((localStorage.getItem('activeTab') || 'dashboard') === 'automations') { + if (typeof window.loadAutomations === 'function') window.loadAutomations(); } // Also refresh dashboard (scene presets section) if (typeof window.loadDashboard === 'function') window.loadDashboard(true); diff --git a/server/src/wled_controller/static/js/features/tabs.js b/server/src/wled_controller/static/js/features/tabs.js index c114ffb..733b39e 100644 --- a/server/src/wled_controller/static/js/features/tabs.js +++ b/server/src/wled_controller/static/js/features/tabs.js @@ -60,8 +60,6 @@ export function switchTab(name, { updateHash = true, skipLoad = false } = {}) { if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab(); } else if (name === 'automations') { if (typeof window.loadAutomations === 'function') window.loadAutomations(); - } else if (name === 'scenes') { - if (typeof window.loadScenes === 'function') window.loadScenes(); } } } @@ -82,8 +80,6 @@ export function initTabs() { saved = localStorage.getItem('activeTab'); } - // Migrate legacy 'devices' tab to 'targets' - if (saved === 'devices') saved = 'targets'; if (!saved || !document.getElementById(`tab-${saved}`)) saved = 'dashboard'; switchTab(saved); } diff --git a/server/src/wled_controller/static/js/features/tutorials.js b/server/src/wled_controller/static/js/features/tutorials.js index c81a37d..09f7287 100644 --- a/server/src/wled_controller/static/js/features/tutorials.js +++ b/server/src/wled_controller/static/js/features/tutorials.js @@ -62,7 +62,10 @@ const sourcesTourSteps = [ const automationsTutorialSteps = [ { selector: '[data-card-section="automations"]', textKey: 'tour.auto.list', position: 'bottom' }, { selector: '[data-cs-add="automations"]', textKey: 'tour.auto.add', position: 'bottom' }, - { selector: '.card[data-automation-id]', textKey: 'tour.auto.card', position: 'bottom' } + { selector: '.card[data-automation-id]', textKey: 'tour.auto.card', position: 'bottom' }, + { selector: '[data-card-section="scenes"]', textKey: 'tour.auto.scenes_list', position: 'bottom' }, + { selector: '[data-cs-add="scenes"]', textKey: 'tour.auto.scenes_add', position: 'bottom' }, + { selector: '.card[data-scene-id]', textKey: 'tour.auto.scenes_card', position: 'bottom' }, ]; const _fixedResolve = (step) => { diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json index 21ef584..9cd960a 100644 --- a/server/src/wled_controller/static/locales/en.json +++ b/server/src/wled_controller/static/locales/en.json @@ -236,7 +236,7 @@ "tour.dash.stopped": "Stopped targets — ready to start with one click.", "tour.dash.automations": "Automations — active automation status and quick enable/disable toggle.", "tour.tgt.led_tab": "LED tab — standard LED strip targets with device and color strip configuration.", - "tour.tgt.devices": "Devices — your WLED controllers discovered on the network.", + "tour.tgt.devices": "Devices — your LED controllers discovered on the network.", "tour.tgt.css": "Color Strips — define how screen regions map to LED segments.", "tour.tgt.targets": "LED Targets — combine a device, color strip, and capture source for streaming.", "tour.tgt.kc_tab": "Key Colors — alternative target type using color-matching instead of pixel mapping.", @@ -249,6 +249,9 @@ "tour.auto.list": "Automations — automate scene activation based on time, audio, or value conditions.", "tour.auto.add": "Click + to create a new automation with conditions and a scene to activate.", "tour.auto.card": "Each card shows automation status, conditions, and quick controls to edit or toggle.", + "tour.auto.scenes_list": "Scenes — saved system states that automations can activate or you can apply manually.", + "tour.auto.scenes_add": "Click + to capture the current system state as a new scene preset.", + "tour.auto.scenes_card": "Each scene card shows target/device counts. Click to edit, recapture, or activate.", "calibration.tutorial.start": "Start tutorial", "calibration.overlay_toggle": "Overlay", "calibration.start_position": "Starting Position:", diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json index c6ff3d4..265d5cc 100644 --- a/server/src/wled_controller/static/locales/ru.json +++ b/server/src/wled_controller/static/locales/ru.json @@ -236,7 +236,7 @@ "tour.dash.stopped": "Остановленные цели — готовы к запуску одним нажатием.", "tour.dash.automations": "Автоматизации — статус активных автоматизаций и быстрое включение/выключение.", "tour.tgt.led_tab": "LED — стандартные LED-цели с настройкой устройств и цветовых полос.", - "tour.tgt.devices": "Устройства — ваши WLED-контроллеры, найденные в сети.", + "tour.tgt.devices": "Устройства — ваши LED-контроллеры, найденные в сети.", "tour.tgt.css": "Цветовые полосы — определите, как области экрана соответствуют сегментам LED.", "tour.tgt.targets": "LED-цели — объедините устройство, цветовую полосу и источник захвата для стриминга.", "tour.tgt.kc_tab": "Key Colors — альтернативный тип цели с подбором цветов вместо пиксельного маппинга.", @@ -249,6 +249,9 @@ "tour.auto.list": "Автоматизации — автоматизируйте активацию сцен по времени, звуку или значениям.", "tour.auto.add": "Нажмите + для создания новой автоматизации с условиями и сценой для активации.", "tour.auto.card": "Каждая карточка показывает статус автоматизации, условия и кнопки управления.", + "tour.auto.scenes_list": "Сцены — сохранённые состояния системы, которые автоматизации могут активировать или вы можете применить вручную.", + "tour.auto.scenes_add": "Нажмите + для захвата текущего состояния системы как нового пресета сцены.", + "tour.auto.scenes_card": "Каждая карточка сцены показывает количество целей/устройств. Нажмите для редактирования, перезахвата или активации.", "calibration.tutorial.start": "Начать обучение", "calibration.overlay_toggle": "Оверлей", "calibration.start_position": "Начальная Позиция:", diff --git a/server/src/wled_controller/static/locales/zh.json b/server/src/wled_controller/static/locales/zh.json index 967eac4..749b441 100644 --- a/server/src/wled_controller/static/locales/zh.json +++ b/server/src/wled_controller/static/locales/zh.json @@ -236,7 +236,7 @@ "tour.dash.stopped": "已停止的目标 — 一键启动。", "tour.dash.automations": "自动化 — 活动自动化状态和快速启用/禁用切换。", "tour.tgt.led_tab": "LED 标签 — 标准 LED 灯带目标，包含设备和色带配置。", - "tour.tgt.devices": "设备 — 在网络中发现的 WLED 控制器。", + "tour.tgt.devices": "设备 — 在网络中发现的 LED 控制器。", "tour.tgt.css": "色带 — 定义屏幕区域如何映射到 LED 段。", "tour.tgt.targets": "LED 目标 — 将设备、色带和捕获源组合进行流式传输。", "tour.tgt.kc_tab": "Key Colors — 使用颜色匹配代替像素映射的替代目标类型。", @@ -249,6 +249,9 @@ "tour.auto.list": "自动化 — 基于时间、音频或数值条件自动激活场景。", "tour.auto.add": "点击 + 创建包含条件和要激活场景的新自动化。", "tour.auto.card": "每张卡片显示自动化状态、条件和快速编辑/切换控制。", + "tour.auto.scenes_list": "场景 — 保存的系统状态，自动化可以激活或您可以手动应用。", + "tour.auto.scenes_add": "点击 + 将当前系统状态捕获为新的场景预设。", + "tour.auto.scenes_card": "每个场景卡片显示目标/设备数量。点击编辑、重新捕获或激活。", "calibration.tutorial.start": "开始教程", "calibration.overlay_toggle": "叠加层", "calibration.start_position": "起始位置：", diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html index 33bebaa..bc3ef68 100644 --- a/server/src/wled_controller/templates/index.html +++ b/server/src/wled_controller/templates/index.html @@ -85,7 +85,6 @@ -
@@ -112,11 +111,6 @@
-
-
- -
-