Add rich runtime tiles and integrated ESPHome firmware management

screen_manager/app/static/index.html

@@ -15,6 +15,7 @@
           <strong>ESP Screens</strong><small>Je huis. Jouw bediening.</small>
         </div>
       </div>
+      <button id="open-firmware" class="quiet">Firmware & USB</button>
       <button id="new-screen">＋ Nieuw scherm</button>
     </header>
     <main>
@@ -99,6 +100,16 @@
               Gelijke begin- en eindtijd schakelen het nachtvenster uit.
             </p>
           </details>
+          <details class="screen-settings">
+            <summary>
+              Inspector
+              <span class="hint"
+                >Verbinding, status en ondersteunde eigenschappen</span
+              >
+            </summary>
+            <button id="inspect" class="quiet">Lees actuele gegevens</button>
+            <pre id="inspection">Selecteer een scherm en lees de gegevens.</pre>
+          </details>
           <footer class="savebar">
             <div>
               <strong id="dirty">Alles opgeslagen</strong
@@ -111,12 +122,9 @@
         </section>
       </div>
       <p class="firmware-link">
-        <a href="/5c53de3b_esphome" target="_top"
-          >Firmware bijwerken in ESPHome ↗</a
-        ><small
-          >Open je bestaande apparaat → Install → Wirelessly. Je tegels en
-          sleutels blijven behouden.</small
-        >
+        Firmware bouwen en via USB of wifi installeren kan via
+        <b>Firmware & USB</b> bovenaan. Je bestaande YAML en secrets blijven
+        bewaard.
       </p>
       <details class="help">
         <summary>Hoe werkt het dagelijks?</summary>
@@ -125,12 +133,13 @@
           <b>Opslaan & naar scherm</b>. De app houdt de status bij. Voor een
           kleurenlamp: houd de tegel ingedrukt voor kleur, temperatuur en
           helderheid. Climate, vacuum en cover openen hun kaart direct. Sensoren
-          tonen alleen hun waarde.
+          openen hun HA-geschiedenis met één tik. Per tegel kies je een grote
+          waarde, mini-schuif of klikgedrag.
         </p>
         <p>
-          Alleen nieuwe firmware vraagt om een installatie via ESPHome Device
-          Builder. Je tegels blijven in deze app bewaard. Een offline scherm
-          krijgt de wijzigingen zodra het terug is.
+          Nieuwe firmware bouw en installeer je hier met de ingebouwde ESPHome
+          CLI. Je tegels blijven in deze app bewaard. Een offline scherm krijgt
+          de wijzigingen zodra het terug is.
         </p>
       </details>
     </main>
@@ -185,7 +194,21 @@
             >Kleine letters, cijfers en streepjes. Elk scherm een andere
             naam.</small
           ></label
-        ><button type="submit" id="download">Maak installatie-YAML</button>
+        ><label
+          >Wifi-naam (alleen bij eerste installatie)<input
+            name="wifi_ssid"
+            autocomplete="off"
+        /></label>
+        <label
+          >Wifiwachtwoord<input
+            name="wifi_password"
+            type="password"
+            autocomplete="new-password"
+        /></label>
+        <button type="button" id="create-profile">
+          Bewaar profiel in ESP Screens
+        </button>
+        <button type="submit" id="download">Maak installatie-YAML</button>
         <p id="install-status" role="status"></p>
         <div id="yaml-result" hidden>
           <label
@@ -205,36 +228,62 @@
         </div>
         <ol class="steps">
           <li>
-            <b>Open ESPHome Device Builder.</b> Voeg een nieuw apparaat toe, sla
-            de eerste installatie over en vervang de inhoud via Edit door het
-            gedownloade bestand.
+            <b>Bewaar je profiel.</b> Bestaande wifi-secrets worden behouden;
+            bij een eerste installatie vul je wifi hierboven in.
           </li>
           <li>
-            <b>Vul wifi eenmalig in bij Secrets.</b> Gebruik
-            <code>wifi_ssid</code> en <code>wifi_password</code>.
+            <b>Open Firmware & USB.</b> Kies dit profiel, sluit het scherm op je
+            Raspberry aan en selecteer de juiste USB-poort. Kies Bouwen &
+            installeren.
           </li>
           <li>
-            <b>Sluit USB aan op je Home Assistant Raspberry.</b> Klik Install →
-            Plug into the computer running ESPHome Device Builder en kies de
-            USB-poort.
+            <b>Koppel in HA → Apparaten & diensten → ESPHome.</b> Gebruik de
+            API-sleutel uit je eigen YAML en sta HA-acties toe.
           </li>
           <li>
-            <b>Koppel in Instellingen → Apparaten & diensten → ESPHome.</b>
-            Gebruik de <code>api.encryption.key</code> uit je bestand en sta
-            Home Assistant-acties toe bij Configureren.
+            <b>Kies hier je tegels.</b> CYD vraagt bij de eerste start om
+            kalibratie; Guition niet.
           </li>
           <li>
-            <b>Open deze pagina en kies je tegels.</b> CYD toont bij de eerste
-            start een kalibratie: tik ieder kruisje drie keer. Guition hoeft
-            niet gekalibreerd.
+            <b>Later updaten?</b> Kies hetzelfde profiel en het IP-adres van je
+            scherm in Firmware & USB.
           </li>
         </ol>
         <p class="hint">
-          Bewaar je YAML met sleutels. Gebruik later Install → Wirelessly voor
-          firmware-updates. Tegels wijzigen doe je hier.
+          Bewaar je YAML met sleutels. Gebruik later Firmware & USB met het
+          IP-adres voor draadloze updates. Tegels wijzigen doe je hier.
         </p>
       </form>
     </dialog>
+    <dialog id="firmware-dialog">
+      <div class="dialog-head">
+        <h2>Firmware & USB</h2>
+        <button id="close-firmware" class="quiet">Sluiten</button>
+      </div>
+      <p>
+        De ingebouwde ESPHome CLI gebruikt je eigen YAML en secrets. Tegels
+        blijven in ESP Screens staan. Op de Raspberry kan de eerste build enkele
+        minuten duren.
+      </p>
+      <label>ESPHome-profiel<select id="firmware-file"></select></label>
+      <label
+        >Installeren naar<select id="firmware-port">
+          <option value="ota">Wifi / OTA</option>
+        </select></label
+      >
+      <label id="firmware-host-label"
+        >IP-adres of hostnaam<input
+          id="firmware-host"
+          placeholder="scherm-woonkamer.local"
+      /></label>
+      <div class="yaml-actions">
+        <button id="firmware-validate" class="quiet">Controleren</button
+        ><button id="firmware-build" class="quiet">Alleen bouwen</button
+        ><button id="firmware-install">Bouwen & installeren</button>
+      </div>
+      <p id="firmware-status" role="status"></p>
+      <pre id="firmware-log"></pre>
+    </dialog>
     <div id="toast" role="status" hidden></div>
   </body>
 </html>