Skip to content

Commit e0be518

Browse files
koosolikoosoli
committed
UI tweaks, deep sleep logic, and assets update
Bump frontend asset and version, refine UI, and improve deep sleep/update behavior. - Updated built frontend asset reference and app version (index.html). - Refined header/action buttons: added icon-only variants, AI assistant icon, separate copy buttons for full YAML and lambda (C++), OEPL/ODP copy buttons, fullscreen/import icons, and updated Dark Mode label. - Increased deep_sleep run_duration from 30s to 120s to allow more time for OTA on boot (yaml_generator.js). - Added conditional component.update before deep sleep: only refresh display when outside configured no-refresh/sleep window. Now reads noRefreshStartHour/noRefreshEndHour (falling back to sleepStartHour/sleepEndHour) and treats both sleepEnabled and deepSleepEnabled in multiple truthy formats. Also adjusted time-check variables accordingly. - UI logic (device_settings.js): show sleep settings row when either regular sleep or deep sleep mode is active. These changes improve OTA reliability, avoid unwanted refreshes during configured sleep windows, and enhance the code panel and copy UX.
1 parent 01c7203 commit e0be518

File tree

3 files changed

+68
-17
lines changed

3 files changed

+68
-17
lines changed

‎custom_components/esphome_designer/frontend/dist/index.html‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@
2525

2626
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
2727
<link rel="icon" href="./assets/favicon-BFR8sXii.png" type="image/x-icon">
28-
<script type="module" crossorigin src="./assets/main-Dr6l1TYF.js"></script>
28+
<script type="module" crossorigin src="./assets/main-B2dJ33k7.js"></script>
2929
<link rel="stylesheet" crossorigin href="./assets/main-1OkGAQ6K.css">
3030
</head>
3131

3232
<body>
3333
<header class="main-header" role="banner">
3434
<div class="main-header-title">
3535
<img src="./assets/logo_header-CUGdaeC6.png" alt="ESPHome Designer" class="logo-image">
36-
<span><small style="opacity: 0.5; margin-left: 8px;">v1.0.0 RC2.3</small> <span id="currentLayoutDevice"
36+
<span><small style="opacity: 0.5; margin-left: 8px;">v1.0.0 RC3</small> <span id="currentLayoutDevice"
3737
style="margin-left:8px; color:var(--accent);"></span></span>
3838
</div>
3939
<div class="main-header-actions desktop-only">
@@ -203,15 +203,32 @@
203203
style="width: auto; padding: 0 6px; border-radius: 4px;">
204204
<span class="mdi mdi-palette-outline" style="font-size: 14px;"></span>
205205
</button>
206-
<button id="aiPromptBtn" class="btn btn-secondary btn-xs">AI Assistant</button>
207-
<button id="copySnippetBtn" class="btn btn-secondary btn-xs">Copy</button>
206+
<button id="aiPromptBtn" class="btn btn-secondary btn-xs btn-icon" title="AI Assistant"
207+
style="width: auto; padding: 0 6px; border-radius: 4px;">
208+
<span class="mdi mdi-robot-outline" style="font-size: 14px;"></span>
209+
</button>
210+
<button id="copySnippetBtn" class="btn btn-secondary btn-xs" title="Copy full YAML output">
211+
<span class="mdi mdi-content-copy" style="font-size: 12px; margin-right: 4px;"></span>All
212+
</button>
213+
<button id="copyLambdaBtn" class="btn btn-secondary btn-xs" title="Copy display lambda only (C++ code)">
214+
<span class="mdi mdi-content-copy" style="font-size: 12px; margin-right: 4px;"></span>λ
215+
</button>
208216
<button id="copyOEPLServiceBtn" class="btn btn-secondary btn-xs" style="display:none;"
209-
title="Copy full HA Service Call">HA Service (OEPL)</button>
217+
title="Copy full HA Service Call">
218+
<span class="mdi mdi-content-copy" style="font-size: 12px; margin-right: 4px;"></span>OEPL
219+
</button>
210220
<button id="copyODPServiceBtn" class="btn btn-secondary btn-xs" style="display:none;"
211-
title="Copy full HA Service Call">HA Service (ODP)</button>
212-
<button id="fullscreenSnippetBtn" class="btn btn-secondary btn-xs">Full</button>
213-
<button id="updateLayoutBtn" class="btn btn-secondary btn-xs"
214-
title="Import YAML back to canvas">Update</button>
221+
title="Copy full HA Service Call">
222+
<span class="mdi mdi-content-copy" style="font-size: 12px; margin-right: 4px;"></span>ODP
223+
</button>
224+
<button id="fullscreenSnippetBtn" class="btn btn-secondary btn-xs btn-icon" title="Expand code panel"
225+
style="width: auto; padding: 0 6px; border-radius: 4px;">
226+
<span class="mdi mdi-fullscreen" style="font-size: 14px;"></span>
227+
</button>
228+
<button id="updateLayoutBtn" class="btn btn-secondary btn-xs btn-icon" title="Import YAML back to canvas"
229+
style="width: auto; padding: 0 6px; border-radius: 4px;">
230+
<span class="mdi mdi-import" style="font-size: 14px;"></span>
231+
</button>
215232
</div>
216233
</div>
217234
<div id="oeplNotice" class="oepl-notice hidden"
@@ -850,7 +867,7 @@
850867
<div class="field" style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle);">
851868
<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
852869
<input id="deviceDarkMode" type="checkbox" />
853-
<span style="font-size:var(--fs-xs); font-weight:600;">Dark mode (Canvas Preview)</span>
870+
<span style="font-size:var(--fs-xs); font-weight:600;">Dark Mode</span>
854871
</label>
855872
</div>
856873
<div class="field" id="deviceExtendedLatinGlyphsField">

‎custom_components/esphome_designer/frontend/js/io/adapters/yaml_generator.js‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export class YamlGenerator {
202202
lines.push("");
203203
lines.push("deep_sleep:");
204204
lines.push(" id: deep_sleep_control");
205-
lines.push(" run_duration: 30s # Stay awake 30s on boot for OTA");
205+
lines.push(" run_duration: 120s # Stay awake 120s on boot for OTA");
206206
lines.push(` sleep_duration: ${layout.deepSleepInterval || 600}s`);
207207
}
208208

@@ -280,8 +280,39 @@ export class YamlGenerator {
280280
lines.push(" lambda: 'return id(ha_time).now().is_valid() && api_is_connected();'");
281281
lines.push(" timeout: 60s");
282282
lines.push(" - delay: 5s");
283-
lines.push(` - component.update: ${displayId}`);
284-
lines.push(" - delay: 5s # Ensure refresh starts before sleep");
283+
284+
const sStart = parseInt(payload.noRefreshStartHour ?? payload.sleepStartHour) || 0;
285+
const sEnd = parseInt(payload.noRefreshEndHour ?? payload.sleepEndHour) || 0;
286+
287+
288+
const sEnabled = (
289+
payload.sleepEnabled === true || payload.sleepEnabled === "true" || payload.sleepEnabled === 1 || payload.sleepEnabled === "1" ||
290+
payload.deepSleepEnabled === true || payload.deepSleepEnabled === "true" || payload.deepSleepEnabled === 1 || payload.deepSleepEnabled === "1"
291+
);
292+
293+
if (sEnabled) {
294+
lines.push(" - if:");
295+
lines.push(" condition:");
296+
lines.push(" lambda: |-");
297+
lines.push(" auto time = id(ha_time).now();");
298+
lines.push(" if (time.is_valid()) {");
299+
lines.push(` int hour = time.hour;`);
300+
lines.push(` int start = ${sStart};`);
301+
lines.push(` int end = ${sEnd};`);
302+
lines.push(" if (start < end) {");
303+
lines.push(" if (hour >= start && hour < end) return false;");
304+
lines.push(" } else {");
305+
lines.push(" if (hour >= start || hour < end) return false;");
306+
lines.push(" }");
307+
lines.push(" }");
308+
lines.push(" return true;");
309+
lines.push(" then:");
310+
lines.push(` - component.update: ${displayId}`);
311+
lines.push(" - delay: 5s # Ensure refresh starts before sleep");
312+
} else {
313+
lines.push(` - component.update: ${displayId}`);
314+
lines.push(" - delay: 5s # Ensure refresh starts before sleep");
315+
}
285316
lines.push(" - logger.log: \"Entering Deep Sleep now...\"");
286317
lines.push(" - deep_sleep.enter: deep_sleep_control");
287318
}
@@ -312,9 +343,12 @@ export class YamlGenerator {
312343
lines.push(" bool is_sleep_time = false;");
313344

314345
// Date/Time Check
315-
const sStart = parseInt(payload.sleepStartHour) || 0;
316-
const sEnd = parseInt(payload.sleepEndHour) || 0;
317-
const sEnabled = !!payload.sleepEnabled;
346+
const sStart = parseInt(payload.noRefreshStartHour ?? payload.sleepStartHour) || 0;
347+
const sEnd = parseInt(payload.noRefreshEndHour ?? payload.sleepEndHour) || 0;
348+
const sEnabled = (
349+
payload.sleepEnabled === true || payload.sleepEnabled === "true" || payload.sleepEnabled === 1 || payload.sleepEnabled === "1" ||
350+
payload.deepSleepEnabled === true || payload.deepSleepEnabled === "true" || payload.deepSleepEnabled === 1 || payload.deepSleepEnabled === "1"
351+
);
318352

319353
lines.push(" auto time = id(ha_time).now();");
320354
lines.push(" if (time.is_valid()) {");

‎custom_components/esphome_designer/frontend/js/ui/device_settings.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -871,7 +871,7 @@ export class DeviceSettings {
871871
const isDeepSleep = this.modeDeepSleep && this.modeDeepSleep.checked;
872872
const isManual = this.modeManual && this.modeManual.checked;
873873

874-
if (this.sleepRow) this.sleepRow.style.display = isSleep ? 'flex' : 'none';
874+
if (this.sleepRow) this.sleepRow.style.display = (isSleep || isDeepSleep) ? 'flex' : 'none';
875875
if (this.dailyRefreshRow) this.dailyRefreshRow.style.display = isDaily ? 'flex' : 'none';
876876
if (this.deepSleepRow) this.deepSleepRow.style.display = isDeepSleep ? 'block' : 'none';
877877

0 commit comments

Comments
 (0)