homeassistant_espscreen/screen_manager/app/static/index.html

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ESP Screens</title>
    <link rel="stylesheet" href="static/style.css" />
    <script src="static/app.js" defer></script>
  </head>
  <body>
    <header>
      <div class="brand">
        <span class="mark">▦</span>
        <div>
          <strong>ESP Screens</strong
          ><small>Tegels voor je CYD en Guition, zonder opnieuw flashen</small>
        </div>
      </div>
      <nav class="toolbar" aria-label="Acties">
        <button id="new-screen" class="tool tool-primary">
          <span class="tool-icon" aria-hidden="true">＋</span>
          <span class="tool-text"
            ><b>Nieuw scherm</b><small>Aansluiten en installeren</small></span
          >
        </button>
        <button id="open-firmware" class="tool">
          <span class="tool-icon" aria-hidden="true">⇪</span>
          <span class="tool-text"
            ><b>Firmware & USB</b
            ><small>Bouwen en installeren via USB of wifi</small></span
          >
        </button>
        <button id="open-help" class="tool">
          <span class="tool-icon" aria-hidden="true">?</span>
          <span class="tool-text"><b>Uitleg</b><small>Hoe werkt het</small></span>
        </button>
      </nav>
    </header>
    <main>
      <div class="intro">
        <div>
          <p class="eyebrow">HOME ASSISTANT</p>
          <h1>Een plek voor je favorieten.</h1>
          <p>Kies wat je wilt bedienen. Je scherm verandert met je mee.</p>
        </div>
        <span id="connection" role="status" class="badge">Verbinden…</span>
      </div>
      <ol class="howto" aria-label="Zo werkt het">
        <li>
          <b>1 · Installeren</b><span
            >Sluit het scherm via USB aan op de Home Assistant-machine en kies
            <b>Nieuw scherm</b>: naam, wifi en klaar. Eén keer via USB, daarna
            gaat alles draadloos.</span
          >
        </li>
        <li>
          <b>2 · Tegels kiezen</b><span
            >Sleep entiteiten uit de lijst rechts in de schermmockup, of tik
            op +. Klik op een tegel voor weergave, breedte, bediening en kleur.</span
          >
        </li>
        <li>
          <b>3 · Opslaan</b><span
            >Met <b>Opslaan & naar scherm</b> staat het direct op je scherm.
            Nieuwe schermfuncties komen met <b>Bijwerken</b> draadloos op je
            scherm.</span
          >
        </li>
      </ol>
      <div class="workspace">
        <aside>
          <h2>Mijn schermen</h2>
          <div id="screens"></div>
          <div id="pending"></div>
          <p class="hint">
            Nieuw scherm gekoppeld in Home Assistant? Het verschijnt hier
            automatisch binnen 30 seconden.
          </p>
          <button class="quiet" id="refresh">↻ Vernieuwen</button>
          <div class="updates" id="updates" hidden>
            <h2>Firmware-updates</h2>
            <p class="hint" id="updates-hint"></p>
            <button id="update-all" hidden>Alle schermen bijwerken</button>
            <label class="check">
              <input type="checkbox" id="auto-update" />
              <span
                >Elke nacht automatisch bijwerken<small
                  >Tussen 03:00 en 06:00, één scherm tegelijk. Stopt bij een
                  fout en meldt dat in Home Assistant.</small
                ></span
              >
            </label>
          </div>
        </aside>
        <section id="empty" class="empty">
          <span class="empty-icon">▦</span>
          <h2>Begin met een scherm</h2>
          <p>
            Sluit een CYD of Guition via USB aan op je Home Assistant-machine.
            Profiel, firmware en de eerste flash gebeuren in één venster.
          </p>
          <button id="start">Nieuw scherm installeren</button>
        </section>
        <section id="editor" hidden>
          <div class="editor-head">
            <div>
              <p class="eyebrow" id="screen-name"></p>
              <h2>Maak het jouw scherm</h2>
            </div>
            <span id="delivery" class="badge"></span>
          </div>
          <label
            >Naam bovenaan het scherm<input
              id="title"
              maxlength="60"
              placeholder="Bijvoorbeeld: Woonkamer"
          /></label>
          <nav class="editor-nav" aria-label="Scherm beheren">
            <button id="nav-tiles" class="quiet">Tegels instellen</button>
            <button id="nav-settings" class="quiet">
              Algemene instellingen
            </button>
            <button id="nav-inspector" class="quiet">Inspector</button>
          </nav>
          <div class="columns" id="tile-section">
            <div class="tile-editor">
              <div class="section-title">
                <h3>Je tegels</h3>
                <span id="count">0 / 10</span>
              </div>
              <p class="hint">
                Klik op een tegel voor naam, weergave, breedte, directe
                bediening en kleur; het kruisje verwijdert. Sleep om te ordenen of sleep entiteiten uit
                de lijst hierheen. Zes vakjes per pagina; een dubbelbrede tegel
                telt voor twee en begint altijd links.
              </p>
              <div id="layout-preview" aria-label="Schermindeling"></div>
              <p id="no-tiles" class="hint">
                Voeg je eerste lamp, scène of apparaat toe via de kiezer.
              </p>
            </div>
            <div class="picker">
              <label for="search">Voeg een entiteit toe</label
              ><input
                id="search"
                type="search"
                placeholder="Zoek op naam, apparaat of ruimte…"
                autocomplete="off"
              />
              <div class="filters" id="filters"></div>
              <div id="results" aria-live="polite"></div>
            </div>
          </div>
          <details class="screen-settings" id="general-settings" open>
            <summary>
              Scherminstellingen
              <span class="hint">Helderheid, rustmomenten en weergave</span>
            </summary>
            <p class="hint" id="settings-support"></p>
            <div class="settings-grid" id="settings-fields"></div>
            <p class="hint">
              Nachturen gelden voor de helderheid tijdens standby. De eerste
              aanraking maakt het scherm wakker; de volgende bedient je huis.
              Gelijke begin- en eindtijd schakelen het nachtvenster uit.
            </p>
          </details>
          <details class="screen-settings" id="inspector-section">
            <summary>
              Inspector
              <span class="hint"
                >Verbinding, status en ondersteunde eigenschappen</span
              >
            </summary>
            <button id="inspect" class="quiet">Lees actuele gegevens</button>
            <div id="inspection-summary"></div>
            <pre id="inspection">Selecteer een scherm en lees de gegevens.</pre>
          </details>
          <footer class="savebar">
            <div>
              <strong id="dirty">Alles opgeslagen</strong
              ><small id="save-detail"
                >Aanpassen kan zonder opnieuw flashen.</small
              >
            </div>
            <button id="save">Opslaan & naar scherm</button>
          </footer>
        </section>
      </div>
      <p class="firmware-link">
        Een bestaand profiel opnieuw bouwen of via USB of wifi installeren kan
        via <b>Firmware & USB</b> bovenaan. Je eigen YAML en secrets blijven
        bewaard.
      </p>
      <details class="help" id="help">
        <summary>Hoe werkt het dagelijks?</summary>
        <p>
          Zoek een entiteit, voeg deze toe en klik op
          <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
          openen hun HA-geschiedenis met één tik. Per tegel kies je een grote
          waarde, mini-schuif of klikgedrag.
        </p>
        <p>
          Speciale kaarten: de <b>Klok</b> staat bovenaan de kiezer; een
          weerentiteit toont de vijfdaagse voorspelling, <code>sun.sun</code>
          de zonnebaan, een sensor een trendgrafiek, een <code>timer</code>
          telt live af en een <code>person</code> toont thuis/weg. Zet een
          tegel op <b>Dubbelbreed</b> voor meer ruimte.
        </p>
        <p>
          Een nieuw scherm installeer je via <b>Nieuw scherm</b>: het profiel
          met eigen sleutels, ontbrekende wifi in ESPHome secrets.yaml, de build
          en de USB-flash gebeuren in één venster, met de API-sleutel voor de
          koppeling aan het eind. Nieuwe firmware voor bestaande schermen komt
          via <b>Bijwerken</b> in de lijst, of handmatig via
          <b>Firmware & USB</b>. Je tegels blijven in deze app bewaard; een
          offline scherm krijgt de wijzigingen zodra het terug is.
        </p>
      </details>
    </main>
    <dialog id="installer">
      <form id="install-form">
        <div class="dialog-head">
          <div>
            <p class="eyebrow">NIEUW SCHERM</p>
            <h2 id="install-title">Aansluiten en installeren.</h2>
          </div>
          <button
            type="button"
            class="quiet"
            id="close-install"
            aria-label="Sluiten"
          >
            ✕
          </button>
        </div>
        <div id="install-setup">
          <p>
            Sluit het scherm met een USB-datakabel aan op de machine waarop Home
            Assistant draait. ESP Screens maakt een eigen profiel met unieke
            sleutels, bouwt de firmware en zet die direct op het scherm.
          </p>
          <fieldset>
            <legend>Welk scherm heb je?</legend>
            <label class="board"
              ><input type="radio" name="board" value="cyd" checked /><span
                ><b>CYD · 2,8 inch</b
                ><small>ESP32-2432S028 · 320 × 240</small></span
              ></label
            ><label class="board"
              ><input type="radio" name="board" value="guition" /><span
                ><b>Guition · 4 inch</b
                ><small>ESP32-S3-4848S040 · 480 × 480 · GT911</small></span
              ></label
            >
          </fieldset>
          <label
            >Naam<input
              name="friendly_name"
              required
              maxlength="60"
              placeholder="Scherm woonkamer"
              autocomplete="off" /><small class="node-line"
              >Apparaatnaam <code id="node-preview">scherm</code
              ><button type="button" class="link" id="edit-node">
                aanpassen
              </button></small
            ><small
              >Elk scherm krijgt een eigen profiel met eigen sleutels. Vier
              schermen? Doorloop dit vier keer met een andere naam.</small
            ></label
          >
          <label id="node-label" hidden
            >Apparaatnaam<input
              name="name"
              pattern="[a-z][a-z0-9-]{0,29}"
              maxlength="30"
              autocomplete="off" /><small
              >Kleine letters, cijfers en streepjes. Elk scherm een andere
              naam.</small
            ></label
          >
          <fieldset id="wifi-fields" class="wifi" hidden disabled>
            <legend>Wifi</legend>
            <p class="hint" id="wifi-status"></p>
            <label id="wifi-ssid-label"
              >Wifi-naam (2,4 GHz)<input name="wifi_ssid" autocomplete="off"
            /></label>
            <label id="wifi-password-label"
              >Wifiwachtwoord<input
                name="wifi_password"
                type="password"
                autocomplete="new-password"
            /></label>
          </fieldset>
          <label
            >Installeren via<select name="target" id="install-target"></select
            ><small id="target-hint"></small
          ></label>
          <p class="hint" id="install-note"></p>
          <div class="install-actions">
            <button type="submit" id="install-go">Installeren</button>
            <span id="install-status" role="status"></span>
          </div>
        </div>
        <div id="install-progress" hidden>
          <div class="progress-head">
            <span class="spin" id="progress-spin"></span>
            <span class="outcome" id="progress-mark" hidden></span>
            <strong id="progress-title"></strong>
          </div>
          <p id="progress-detail"></p>
          <div id="install-result" hidden>
            <div class="key-box">
              <span>API-sleutel</span><code id="api-key"></code>
              <button type="button" class="mini" id="copy-key">Kopieer</button>
            </div>
            <ol class="steps" id="install-steps"></ol>
          </div>
          <details id="install-log-wrap">
            <summary>Log van ESPHome</summary>
            <pre id="install-log"></pre>
          </details>
          <div class="install-actions">
            <button type="button" id="install-retry" hidden>
              Opnieuw proberen
            </button>
            <button type="button" class="quiet" id="install-close">
              Sluiten
            </button>
          </div>
        </div>
      </form>
    </dialog>
    <dialog id="firmware-dialog">
      <div class="dialog-head">
        <div>
          <p class="eyebrow">FIRMWARE & USB</p>
          <h2>Schermfirmware bouwen en installeren</h2>
        </div>
        <button id="close-firmware" class="quiet" aria-label="Sluiten">✕</button>
      </div>
      <p>
        De ingebouwde ESPHome CLI gebruikt je eigen profiel (YAML met sleutels)
        en secrets. Kies het profiel van het scherm, dan een USB-poort (scherm
        aan de Home Assistant-machine) of <b>Wifi / OTA</b> met de hostnaam.
        <b>Controleren</b> valideert alleen, <b>Alleen bouwen</b> compileert,
        <b>Bouwen & installeren</b> zet de firmware op het scherm. Je tegels
        blijven in ESP Screens staan. De eerste build duurt enkele minuten.
      </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>
    <dialog id="tile-sheet" class="tile-sheet" aria-label="Tegel instellen"></dialog>
    <div id="toast" role="status" hidden></div>
  </body>
</html>