Küche HUD

Eigenständige Info-Display-Web-App (Küchen-HUD) für ein 43"-Display im Hochformat. Zieht Live-Daten aus Home Assistant über die WebSocket-API und rendert ein animiertes „Glass-Cockpit"-HUD: Uhr, Wetter (wechselt animiert zwischen Heute im Detail und Nächste Tage), Haus-Status, Familien-Agenda, Aufgaben und ein Türklingel-Kamera-Overlay.

Stack

• Vite + React + TypeScript
• Tailwind CSS + Framer Motion (Animationen)
• home-assistant-js-websocket (Live-Daten)

Konfiguration (config.js) – kein Rebuild nötig

Der HA-Zugang steht in config.js (im fertigen Build direkt neben index.html). Nach dem Hochladen dort eintragen:

window.HUD_CONFIG = {
  haUrl: "https://ha.thiel.tools",
  haToken: "<dein-long-lived-token>",
  tasksEntity: "todo.allgemein_6"
};

Token anlegen: HA → dein Name (unten links) → Tab Sicherheit → Long-Lived Access Tokens → Token erstellen.

Sicherheitshinweis: Der Token liegt clientseitig und ist im Browser sichtbar – unvermeidbar bei einer reinen Frontend-App. Nur auf privatem/lokalem Webspace betreiben, idealerweise per HTTPS (HA läuft über HTTPS → Seite ebenfalls per HTTPS ausliefern, sonst blockiert der Browser als „Mixed Content").

Weitere Entitäten (Kalender, Status-Sensoren, Klingel/Kamera) stehen in src/config.ts und werden beim Build eingebacken.

CORS in Home Assistant erlauben

Die Kalender werden per REST geladen. In der HA-configuration.yaml die HUD-Adresse freigeben:

http:
  cors_allowed_origins:
    - https://hud.deinedomain.de   # bzw. http://<server-ip>:port

Danach HA neu starten. (Status, Wetter, Aufgaben, Kamera laufen über WebSocket und brauchen kein CORS – nur die Kalender-REST-Abfrage.)

---

Weg A – Statisch auf den Webspace (am einfachsten)

1. Fertigen Build erzeugen (oder das mitgelieferte dist/ nehmen):

   npm install
   npm run build      # Ergebnis in dist/
   

2. Inhalt von dist/ auf den Webspace laden (index.html, assets/, config.js). Läuft auch in einem Unterordner (Pfade sind relativ).
3. Auf dem Webspace config.js öffnen und haUrl + haToken eintragen. Fertig – kein Rebuild nötig, wenn sich nur URL/Token/Aufgabenliste ändern.

Weg B – Docker (lokal hosten)

docker compose up -d --build

Läuft auf http://:8095. Den HA-Zugang setzt du in config.js (vor dem Build in public/config.js, oder das Volume in docker-compose.yml einkommentieren, um config.js ohne Rebuild zu überschreiben).

Entwicklung

cp .env.example .env.local   # VITE_HA_URL / VITE_HA_TOKEN fuer Dev
npm install
npm run dev                  # http://localhost:5173

Raspberry Pi 4 als Kiosk

• Monitor an HDMI-0 (neben USB-C), HDMI-2.0-Kabel; 4K@30 im Hochformat reicht.
• Anzeige in Screen Configuration auf Hochformat drehen.
• Bildschirm aus verhindern: sudo raspi-config → Display Options → Screen Blanking → Off.
• Chromium im Kiosk auf die HUD-URL:

  chromium-browser --kiosk --noerrdialogs --disable-infobars \
    --incognito --check-for-update-interval=31536000 \
    http://<server-ip>:8095
  

Auf Forgejo pushen

git init
git add .
git commit -m "Küche HUD – Grundgerüst"
git branch -M main
git remote add origin https://forgejo.thiel.tools/thiel/kueche-hud.git
git push -u origin main

Roadmap

• Aufgaben abhakbar am Display (todo.update_item), falls Touch nachgerüstet wird.
• Kamera-Overlay als echtes HLS-Livebild statt Standbild-Refresh.
• Dedizierte „Schule (Elisa)"-Kachel; Feinschliff der Höhen auf die reale Auflösung.