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>Koppel een CYD of Guition</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 · Koppelen</b><span
            >Kies <b>Nieuw scherm</b> voor de installatie-YAML met eigen
            sleutels. Eén keer via USB flashen, 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 en kleur.</span
          >
        </li>
        <li>
          <b>3 · Opslaan</b><span
            >Met <b>Opslaan & naar scherm</b> staat het direct op je scherm.
            Nieuwe schermfuncties installeer je via <b>Firmware & USB</b>.</span
          >
        </li>
      </ol>
      <div class="workspace">
        <aside>
          <h2>Mijn schermen</h2>
          <div id="screens"></div>
          <p class="hint">
            Nieuw scherm gekoppeld? 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 aan. We maken de installatie-YAML voor je
            en helpen je met de eerste flash.
          </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 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">
        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" 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>
          Nieuwe firmware bouw en installeer je via <b>Firmware & USB</b> met
          de ingebouwde ESPHome CLI: kies je eigen profiel, dan een USB-poort of
          wifi, en klik op <b>Bouwen & installeren</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>Van USB naar aan de muur.</h2>
          </div>
          <button
            type="button"
            class="quiet"
            id="close-install"
            aria-label="Sluiten"
          >
            ✕
          </button>
        </div>
        <p>
          Kies je scherm. Elk bestand krijgt eigen sleutels voor een veilige
          koppeling en draadloze updates.
        </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
          >Herkenbare naam<input
            name="friendly_name"
            required
            maxlength="60"
            placeholder="Scherm woonkamer" /></label
        ><label
          >Unieke apparaatnaam<input
            name="name"
            required
            pattern="[a-z][a-z0-9-]{0,29}"
            maxlength="30"
            placeholder="scherm-woonkamer"
          /><small
            >Kleine letters, cijfers en streepjes. Elk scherm een andere
            naam.</small
          ></label>
        <p id="wifi-status" role="status"></p>
        <fieldset id="wifi-fields" hidden disabled>
          <legend>Wifi voor je eerste ESPHome-apparaat</legend>
        <label
          >Wifi-naam<input
            name="wifi_ssid"
            autocomplete="off"
        /></label>
        <label
          >Wifiwachtwoord<input
            name="wifi_password"
            type="password"
            autocomplete="new-password"
        /></label>
        </fieldset>
        <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
            >Je eigen ESPHome-YAML<textarea
              id="yaml-output"
              readonly
              rows="9"
              spellcheck="false"
            ></textarea>
          </label>
          <div class="yaml-actions">
            <button type="button" id="copy-yaml">Kopieer YAML</button
            ><button type="button" class="quiet" id="download-yaml">
              Download bestand
            </button>
          </div>
        </div>
        <ol class="steps">
          <li>
            <b>Bewaar je profiel.</b> Bestaande wifi-secrets worden behouden;
            bij een eerste installatie vul je wifi hierboven in.
          </li>
          <li>
            <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>Koppel in HA → Apparaten & diensten → ESPHome.</b> Gebruik de
            API-sleutel uit je eigen YAML en sta HA-acties toe.
          </li>
          <li>
            <b>Kies hier je tegels.</b> CYD vraagt bij de eerste start om
            kalibratie; Guition niet.
          </li>
          <li>
            <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 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">
        <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>