Afvalmelding op je Home Assistant-tablet (met Fully Kiosk)

In deze post laat ik stap voor stap zien hoe ik een fullscreen pop-up maak op mijn Home Assistant-tablet met Fully Kiosk Browser. De pop-up verschijnt ’s ochtends/’s avonds, houdt het scherm wakker met een watchdog en verdwijnt pas als ik op Sluiten tik. Inclusief alle YAML, REST-commands en het HTML-bestand — copy/paste klaar. Alle gevoelige gegevens zijn geanonimiseerd met !secret.

Waarom ik dit bouwde

Ik wil ’s ochtends direct zien welke container(s) aan de straat moeten. Mijn Android-tablet draait Fully Kiosk als dashboard. Met een fullscreen pop-up mis ik niets meer, en dankzij een helper + watchdog blijft het scherm actief zolang de melding open staat.

Wat je nodig hebt

Home Assistant (toegang tot configuration.yaml en Automations UI)
Android-tablet met Fully Kiosk Browser (Remote Admin aan, poort 2323)
Afval-sensoren (bijv. via HACS Afvalinfo)
Een helper (toggle) in Home Assistant

Stap 1 — Fully Kiosk snel instellen

Remote Admin aan (poort 2323) + sterk wachtwoord.
Start URL = jouw HA-dashboard (bijv. https://hass.example.com).
Power: Keep Screen On = uit; Screen Off Timer = 120 sec (na sluiten mag scherm weer uit).
Screensaver: bijvoorbeeld Black Screen; “Delete cache on reload” aan.

Stap 2 — REST-commands in `configuration.yaml` (met `!secret`)

Gebruik !secret om IP's en wachtwoorden te verbergen. Voeg in secrets.yaml toe:

fully_tablet_ip: 172.16.xx.yy
fully_tablet_pass: SterkWachtwoordHier

De &v= bust de cache zodat je popup-HTML altijd de nieuwste versie is.

Copy to Clipboard

Na opslaan: Instellingen → Systeem → Serverbeheer → Controleer configuratie → Herstart.

Stap 3 — Helper aanmaken

Instellingen → Apparaten & diensten → Helpers → + → Schakelaar. Noem hem: Afval popup actief. Entiteit: input_boolean.afval_popup_actief.

Stap 4 — HTML-bestand (`/config/www/afval_popup.html`)

Dit is het fullscreen venster. De knop Sluiten stuurt een webhook en navigeert terug naar het dashboard. Deze versie leest ook de tekst uit ?msg= correct in (spaties i.p.v. +, ondersteunt meerdere regels met \n, en Esc = sluiten).

Copy to Clipboard

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Afvalmelding</title></p>
<style>
    html,body{height:100%;margin:0}
    body{
      background:#1E90FF; color:#fff; display:flex; flex-direction:column;
      align-items:center; justify-content:center; text-align:center;
      font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      user-select:none
    }
    .msg{
      font-size:clamp(28px, 6vw, 56px);
      line-height:1.2;
      max-width:92vw;
      margin:0 4vw 6vh;
      white-space:pre-wrap;         /* toont \n als nieuwe regels */
      word-wrap:break-word;
    }
    .btn{
      font-size:clamp(18px, 3.2vw, 28px);
      padding:18px 28px; background:#ffffff; color:#1E90FF;
      border:none; border-radius:16px; text-decoration:none; display:inline-block
    }
    .btn:active{transform:scale(0.98)}
  </style>
<p></head>
<body></p>
<div class="msg" id="msg">Afvalmelding</div>
<p>  <a class="btn" id="closeBtn" href="#" role="button" aria-label="Sluiten">Sluiten »</a></p>
<p>  <script>
    (function(){
      // Tekst uit ?msg= veilig ophalen
      const qs = new URLSearchParams(location.search);
      const raw = qs.get('msg');</p>
<p>      // Sommige encoders zetten spaties als '+'
      const decoded = raw
        ? decodeURIComponent(String(raw)).replace(/\+/g, ' ')
        : 'Vandaag is er geen inzameling';</p>
<p>      // Multi-line ondersteunen: \n → nieuwe regel (white-space: pre-wrap in CSS)
      const text = decoded.replace(/\\n/g, '\n');</p>
<p>      const msgEl = document.getElementById('msg');
      msgEl.textContent = text; // veilig (geen HTML-injectie)</p>
<p>      const DASHBOARD_URL = '/tablet-v2'; // pas aan naar jouw Lovelace route
      const WEBHOOK_URL   = `${location.origin}/api/webhook/afval_popup_close`;</p>
<p>      function closePopup(){
        fetch(WEBHOOK_URL, { method: 'POST', keepalive: true, mode: 'no-cors' })
          .catch(() => {})
          .finally(() => {
            setTimeout(() => { location.replace(DASHBOARD_URL); }, 300);
          });
      }</p>
<p>      document.getElementById('closeBtn').addEventListener('click', function(e){
        e.preventDefault();
        closePopup();
      });</p>
<p>      // Extra: Esc-toets sluit ook
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closePopup();
      });
    })();
  </script>
</body>
</html>

Stap 5 — Webhook-automation (helper uit, met debounce)

Zet dit via Automatiseringen → Lege automatisering → Bewerken in YAML.

Copy to Clipboard

Stap 6 — Watchdog (scherm wakker houden zolang helper aan staat)

Copy to Clipboard

Stap 7 — Popup-automation (07:00, 21:00 & test)

Pas de sensor-namen aan jouw setup aan (gft, restafval, pbd). De avondmelding (21:00) kijkt naar morgen; de ochtendmelding (07:00) kijkt naar vandaag. Hieronder staat ook de meerregelige boodschap (Optie A) direct in de actie.

Copy to Clipboard

Hoe werkt de ochtend/avond-logica precies?

07:00 → controleert vandaag → “Vandaag wordt … opgehaald”.
21:00 → controleert morgen → “Morgen wordt … opgehaald”.
De automation stuurt alleen een pop-up als er voor de gecontroleerde dag daadwerkelijk een inzameling is.

Testen

Herstart Home Assistant (na wijzigingen in configuration.yaml).
Ontwikkelaarstools → Gebeurtenissen → afvalpopup_test → Vuren.
Helper gaat AAN, pop-up verschijnt, watchdog houdt scherm aan.
Tik Sluiten → webhook zet helper UIT → watchdog stopt → scherm mag weer uit na je Screen Off Timer.

Veelvoorkomende issues (& oplossingen)

Popup gebruikt oude code: cache-buster zit al in het REST-commando; zet in Fully “Delete cache on reload” aan.
Webhook doet niks: maar één automation met webhook_id: afval_popup_close; methods GET/POST toegestaan; automation herladen.
Scherm gaat toch uit: controleer dat de helper ON is, de watchdog draait en Fully’s Screen Off Timer niet te kort staat.

Producten die ik gebruik

Android-tablet – Betrouwbaar als Home Assistant dashboard. Bekijk bij Amazon
Tablet wandhouder – Voor verschillende Samsung-types. Bekijk bij Amazon
Fully Kiosk Browser (Pro) – Remote Admin, motion/face-detectie, kiosk-modus. Bekijk bij Fully
Afvalinfo (HACS) – Sensoren voor inzameldagen. Meer info

Slot

Met deze setup mis ik geen enkele afvalinzameling meer. De pop-up is duidelijk, het scherm blijft wakker, en met één tik op Sluiten is alles weer netjes. Kopieer de code, pas je URL’s en sensoren aan en je bent in no-time klaar. Let op: bewaar altijd je IP’s en wachtwoorden in secrets.yaml en verwijs ernaar met !secret.

Bekijk ook mijn slimme airco automatisering.

Afvalmelding op je Home Assistant-tablet (met Fully Kiosk)