.NET 10 · React · Raspberry Pi 4 · Home Assistant
.NET 10 · React · Raspberry Pi 4 · Home Assistant
Smart Kitchen Panel
An ordinary TV in the kitchen that knows what is happening at home.
Obyčajný televízor v kuchyni, ktorý vie, čo sa v dome deje.
A portrait kitchen display driven by a TV remote: clock, weather, home status from Home Assistant, kitchen timers, cameras, a photo frame, and online radio and Spotify on a WiiM streamer. A motion sensor turns the TV off when nobody is in the kitchen and wakes it when someone walks in. Nothing was bought for it — the TV was a dumb one, the Raspberry Pi 4 used to run Home Assistant, and the panel itself runs on the home lab server.
Zvislý kuchynský displej ovládaný diaľkovým ovládačom od TV: hodiny, počasie, stav domu z Home Assistanta, kuchynské časovače, kamery, fotorámik a internetové rádio so Spotify cez WiiM. Pohybový senzor vypne televízor, keď v kuchyni nikto nie je, a zobudí ho, keď niekto vojde. Nič sa preň nekupovalo — televízor bol obyčajný, Raspberry Pi 4 kedysi bežal Home Assistant a samotný panel beží na domácom serveri.
The public page runs the real panel as a demo with fictional data. Anything that is not live is labelled as such.
Verejná stránka spúšťa skutočný panel ako demo s vymyslenými dátami. Všetko, čo nie je živé, je tak označené.
// technical detail
- stack
- .NET 10 · SignalR · React 19 · TypeScript · Vite · PostgreSQL 17
- architecture
- architektúra
- Clean Architecture (Domain · Application · Infrastructure · Api · Web). One ASP.NET host serves the REST API, the SignalR hub and the built React app, so the whole panel is a single container.
- Clean Architecture (Domain · Application · Infrastructure · Api · Web). Jeden ASP.NET host servíruje REST API, SignalR hub aj zbuildované React UI, takže celý panel je jeden kontajner.
- real-time
- real-time
- SignalR pushes Home Assistant state changes to every screen the moment they happen. Presence arrives over a Server-Sent Events stream instead of the old 15 s polling.
- SignalR posiela zmeny stavu z Home Assistanta na každú obrazovku hneď, ako nastanú. Prítomnosť prichádza cez Server-Sent Events namiesto pôvodného dopytovania každých 15 s.
- presence
- prítomnosť
- Zigbee PIR sensor in Home Assistant. After 10 minutes of absence a watchdog on the Pi switches the HDMI output off (wlr-randr) and puts the TV to standby over HDMI-CEC. When someone returns it wakes the TV and calls POST /api/display/woke; the panel shows a wake flash, then Domov by day or the clock at night.
- Zigbee PIR senzor v Home Assistantovi. Po 10 minútach bez pohybu watchdog na Pi vypne HDMI výstup (wlr-randr) a uspí TV cez HDMI-CEC. Keď sa niekto vráti, TV sa zobudí, zavolá sa POST /api/display/woke a panel ukáže záblesk prebudenia, potom Domov cez deň alebo hodiny v noci.
- kiosk
- kiosk
- Raspberry Pi 4 · labwc (Wayland) · Chromium in kiosk mode · screen rotated in software (labwc output transform) because the TV hangs in portrait. A watchdog restarts Chromium after a crash and the SignalR client reconnects on its own.
- Raspberry Pi 4 · labwc (Wayland) · Chromium v kiosk režime · obraz otočený softvérovo (transform výstupu v labwc), lebo TV visí na výšku. Watchdog reštartuje Chromium po páde a SignalR klient sa pripojí späť sám.
- music
- hudba
- WiiM streamer over its HTTP API. Spotify cover art comes from getMetaInfo, radio track titles are read from the ICY metadata of the stream. A phone PWA is the same remote with a QR code on the panel. Fun facts about the music that is playing are generated only while someone is in the kitchen.
- WiiM streamer cez jeho HTTP API. Obal albumu zo Spotify prichádza cez getMetaInfo, názvy skladieb z rádia sa čítajú z ICY metadát streamu. Mobilná PWA je ten istý ovládač s QR kódom na paneli. Zaujímavosti o hudbe, ktorá hrá, sa generujú len vtedy, keď je v kuchyni niekto prítomný.
- photos
- fotky
- Google Photos Picker API: the app can only see the items the person picks on their phone, never the whole library. The QR code is drawn in the browser and never sent to a third party.
- Google Photos Picker API: aplikácia vidí len položky, ktoré človek vyberie v telefóne, nikdy celú knižnicu. QR kód sa kreslí v prehliadači a nikdy sa neposiela tretej strane.
- network
- sieť
- Local network only, TLS with a mkcert certificate, not routed through the Cloudflare Tunnel. Runs as a Docker stack (Node 22 + .NET 10 multi-stage build) on the home lab server.
- Len lokálna sieť, TLS s certifikátom z mkcert, bez smerovania cez Cloudflare Tunnel. Beží ako Docker stack (multi-stage build Node 22 + .NET 10) na domácom serveri.
- public demo
- verejné demo
- The same React app built with vite --mode demo: a virtual clock rebased to the visitor's wall clock, a fetch shim that answers /api from authored fixtures, and a fake SignalR hub. No request leaves the page for the home network.
- Tá istá React aplikácia zbuildovaná cez vite --mode demo: virtuálne hodiny prispôsobené času návštevníka, fetch shim, ktorý odpovedá na /api z vlastných fixtures, a falošný SignalR hub. Žiadna požiadavka z tejto stránky nejde do domácej siete.
- status
- running at home · public demo
- beží doma · verejné demo