Bezoekerslogboek in Home Assistant – slimme voordeur snapshots in een eigen gallery

In deze blog laat ik zien hoe ik een bezoekerslogboek heb gebouwd in Home Assistant. Bij beweging aan de voordeur maakt mijn Reolink-camera automatisch een snapshot, die wordt opgeslagen in een map /www/visitors. Op mijn tablet heb ik een mooi fullscreen gallery-overzicht met een datumselector en een lightbox om door de foto’s te bladeren. Inclusief volledige YAML en HTML, zodat je alles één-op-één kunt overnemen. Gevoelige gegevens (zoals IP-adressen en wachtwoorden) laat ik bewust weg of verwijs ik via !secret.

Waarom ik een bezoekerslogboek wilde

Bij iedere beweging aan de voordeur maakte mijn camera al een snapshot en kreeg ik een melding op mijn telefoon. Handig, maar ik wilde méér:

Alle bezoekers van de dag in één visueel logboek.
Op mijn Home Assistant-tablet gewoon even door de dag heen kunnen scrollen.
Makkelijk een paar dagen terugkijken (maximaal enkele dagen, geen NAS-achtige oplossing).
Een nette, fullscreen gallery met lightbox en toetsenbordnavigatie.

In deze setup combineer ik:

Een automation die snapshots maakt bij beweging aan de voordeur.
Twee helpers om datum en index bij te houden.
Een custom HTML-pagina die alle snapshots per dag toont in een mooie gallery.
Een aparte view op mijn tablet-dashboard met een iframe naar die gallery.

Wat je nodig hebt

Home Assistant (met toegang tot configuration.yaml en het Automations-scherm).
Een werkende voordeurcamera als camera-entiteit (bijvoorbeeld Reolink).
Toegang tot de /config/www-map (via Samba, Studio Code Server, SSH, …).
Een dashboard (bijv. tablet-dashboard) waar je een iframe of aparte view kunt toevoegen.

Ik ga er in de voorbeelden vanuit dat je camera camera.voordeur_fluent heet. Pas dit aan naar de naam van jouw camera.

Stap 1 – Map `/www/visitors` aanmaken

Ga in Home Assistant naar je configuratiemap en maak (als die nog niet bestaat) de volgende map aan:

/config/www/visitors

Alles wat straks in /config/www/visitors terechtkomt, is via de browser bereikbaar als:

/local/visitors/...

Daar gaat onze gallery straks mee werken.

Stap 2 – Helpers voor datum en index

We gebruiken twee helpers:

input_text.bezoekerslog_datum: laatste datum waarop een snapshot is gemaakt.
input_number.bezoekerslog_index: oplopend nummer (slot) voor die dag.

Maak ze aan via:

Instellingen → Apparaten & Diensten → Helpers → + Helper

2.1 – Tekst-helper voor datum

Type: Tekst
Naam: Bezoekerslog datum
Entiteit-id: input_text.bezoekerslog_datum
Optioneel: max. lengte bijvoorbeeld 10 (voor YYYY-MM-DD)

2.2 – Nummer-helper voor index

Type: Nummer
Naam: Bezoekerslog index
Entiteit-id: input_number.bezoekerslog_index
Minimum: 0
Maximum: bijvoorbeeld 500 (meer dan genoeg voor één dag)
Stapgrootte: 1

Stap 3 – Automatisering: snapshot bij beweging

Nu komt de kern: een automatisering die bij beweging aan de voordeur een snapshot maakt en opslaat in de map /config/www/visitors, met een bestandsnaam als:

2025-11-16_slot_07.jpg

Maak een nieuwe automatisering:

Instellingen → Automatiseringen & Scènes → Automatiseringen → + → Lege automatisering en kies daarna Bewerken in YAML.

Plak onderstaande YAML en pas de entity_id aan naar jouw sensor/camera:

Copy to Clipboard

Opslaan, automatiseringen herladen (of gewoon Home Assistant herstarten) en je basis is klaar. Bij elke beweging krijg je nu een nieuw bestand in /config/www/visitors.
Tip: gebruik desnoods eerst een testactie via Ontwikkelaarstools → Services → camera.snapshot om te checken of de camera en het pad werken.

Stap 4 – Optioneel: index dagelijks resetten

Je hoeft dit niet per se te doen (de gallery scant gewoon alle slot-nummers), maar ik vind het netjes om de teller elke nacht te resetten.
Maak een tweede automatisering:

Copy to Clipboard

Vanaf dat moment begin je iedere dag weer bij _slot_01, _slot_02, enzovoorts.

Stap 5 – HTML-pagina `bezoekers_gallery.html`

Nu komt het leuke deel: de gallery. Deze HTML-pagina:

Zoekt alle bestanden met naam YYYY-MM-DD_slot_XX.jpg in /local/visitors.
Toont ze in een mooie grid, nieuwste bovenaan.
Laat je per dag bladeren (◀ / ▶ / Vandaag-knop).
Heeft een lightbox met toetsenbordnavigatie (← → Esc).

Maak in Home Assistant het bestand /config/www/bezoekers_gallery.html aan en plak onderstaande code één-op-één:

Copy to Clipboard

<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Bezoekerslogboek</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></p>
<style>
:root {
color-scheme: dark;
--bg: #020617;
--accent: #38bdf8;
--accent-soft: rgba(56,189,248,0.18);
--border-soft: rgba(148,163,184,0.4);
--text-main: #e5e7eb;
--text-soft: #9ca3af;
}
* {
  box-sizing: border-box;
}</p>
<p>body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
  color: var(--text-main);
}</p>
<p>.page {
  max-width: 1280px;
  margin: 0 auto;
}</p>
<p>header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}</p>
<p>.title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}</p>
<p>h1 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}</p>
<p>.subtitle {
  font-size: 0.8rem;
  color: var(--text-soft);
}</p>
<p>.date-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(120deg, rgba(15,118,110,0.15), rgba(56,189,248,0.16));
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.9);
}</p>
<p>.date-label {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}</p>
<p>.date-nav {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
}</p>
<p>.chip-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(15,23,42,0.9);
  color: var(--text-soft);
  font-size: 0.75rem;
  padding: 4px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
}</p>
<p>.chip-btn.primary {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(56,189,248,0.7);
}</p>
<p>.chip-btn span.icon {
  font-size: 0.9rem;
  line-height: 1;
}</p>
<p>.chip-btn:hover {
  background: rgba(15,23,42,1);
  border-color: var(--accent);
  color: #e0f2fe;
  transform: translateY(-1px);
}</p>
<p>main {
  margin-top: 12px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.12) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(34,197,94,0.12) 0, transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.98));
  border-radius: 22px;
  padding: 12px 12px 16px;
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow:
    0 22px 55px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,0.9);
  position: relative;
  overflow: hidden;
}</p>
<p>.hint-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--text-soft);
}</p>
<p>.hint-bar span.key {
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  background: rgba(15,23,42,0.9);
  font-size: 0.7rem;
  margin-right: 2px;
}</p>
<p>.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  background: rgba(15,23,42,0.85);
  font-size: 0.75rem;
  color: var(--text-soft);
}</p>
<p>.pill .dot-green {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
}</p>
<p>.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}</p>
<p>@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}</p>
<p>.thumb {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at top, #020617 0, #020617 35%, #000 100%);
  border: 1px solid rgba(30,64,175,0.9);
  box-shadow:
    0 18px 38px rgba(15,23,42,0.84),
    inset 0 0 0 1px rgba(15,23,42,0.9);
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}</p>
<p>.thumb:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 28px 55px rgba(15,23,42,0.98),
    0 0 0 1px rgba(56,189,248,0.55);
  border-color: rgba(56,189,248,0.9);
}</p>
<p>.thumb img {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
}</p>
<p>@media (min-width: 900px) {
  .thumb img {
    height: 180px;
  }
}</p>
<p>.badge {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(15,23,42,0.92);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.7rem;
  color: var(--text-soft);
  border: 1px solid rgba(148,163,184,0.6);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}</p>
<p>.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
}</p>
<p>.empty {
  margin-top: 16px;
  background: radial-gradient(circle at left, rgba(56,189,248,0.10) 0, transparent 55%),
              linear-gradient(120deg, rgba(15,23,42,0.96), rgba(15,23,42,0.99));
  border-radius: 18px;
  padding: 16px 14px;
  border: 1px dashed rgba(148,163,184,0.55);
  color: var(--text-soft);
  font-size: 0.85rem;
}</p>
<p>.empty strong {
  color: var(--text-main);
}</p>
<p>/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15,23,42,0.96) 0, rgba(0,0,0,0.98) 55%, #000 100%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}</p>
<p>.lightbox.visible {
  display: flex;
}</p>
<p>.lightbox-inner {
  position: relative;
  max-width: 96vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}</p>
<p>.lightbox-img-wrap {
  position: relative;
  max-width: 96vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.7);
  box-shadow:
    0 45px 80px rgba(0,0,0,0.96),
    0 0 0 1px rgba(15,23,42,1);
  background: #000;
}</p>
<p>.lightbox-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}</p>
<p>.lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.8);
  background: rgba(15,23,42,0.9);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8);
  transition: background 0.12s ease, transform 0.1s ease, border-color 0.12s ease;
}</p>
<p>.lightbox-close:hover {
  background: rgba(30,64,175,0.95);
  border-color: rgba(129,140,248,0.95);
  transform: translateY(-1px);
}</p>
<p>.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.8);
  background: radial-gradient(circle at center, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,0.9);
  transition: background 0.12s ease, transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}</p>
<p>.lightbox-nav.prev {
  left: -54px;
}</p>
<p>.lightbox-nav.next {
  right: -54px;
}</p>
<p>@media (max-width: 900px) {
  .lightbox-nav.prev {
    left: 8px;
  }
  .lightbox-nav.next {
    right: 8px;
  }
}</p>
<p>.lightbox-nav:hover {
  background: rgba(30,64,175,0.98);
  border-color: rgba(129,140,248,1);
  box-shadow: 0 22px 55px rgba(15,23,42,0.95);
  transform: translateY(-50%) translateY(-1px);
}</p>
<p>.lightbox-meta {
  font-size: 0.78rem;
  color: var(--text-soft);
  background: rgba(15,23,42,0.9);
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(148,163,184,0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}</p>
<p>.lightbox-meta span.tag {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(15,23,42,0.95);
  color: var(--text-main);
  font-size: 0.72rem;
}</p>
</style>
<p></head>
<body></p>
<div class="page">
<header>
<div class="title-block">
<h1>Bezoekerslogboek</h1>
<div class="subtitle">
Overzicht van snapshots bij de voordeur, gesorteerd op <strong>werkelijke bestandsdatum (nieuw → oud)</strong>.
</div>
</div>
<div class="date-bar">
<div class="date-label">
<span class="icon">📅</span>
<span id="dateLabel"></span>
</div>
<div class="date-nav">
<button class="chip-btn" type="button" id="prevDayBtn">
<span class="icon">◀</span><span>Vorige</span>
</button>
<button class="chip-btn primary" type="button" id="todayBtn">
<span class="icon">●</span><span>Vandaag</span>
</button>
<button class="chip-btn" type="button" id="nextDayBtn">
<span class="icon">▶</span><span>Volgende</span>
</button>
</div>
</div>
</header>
<p><main>
  <div class=”hint-bar”>
    <div>
      <span class=”key”>Klik</span> voor vergroting &nbsp;·&nbsp;
      gebruik <span class=”key”>←</span><span class=”key”>→</span> om te bladeren ·
      <span class=”key”>Esc</span> om af te sluiten
    </div>
    <div class=”pill”>
      <span class=”dot-green”></span>
      <span>Nieuwste snapshots staan bovenaan</span>
    </div>
  </div></p>
<p>  <div id=”emptyState” class=”empty” style=”display:none”>
    <strong>Geen snapshots voor deze dag</strong><br>
    Er zijn geen bezoekersfoto’s gevonden voor deze datum.<br>
    Tip: gebruik ◀ / ▶ om naar een andere dag te gaan.
  </div></p>
<p>  <div id=”grid” class=”grid”></div>
</main></p>
</div>
<p></p>
<div id="lightbox" class="lightbox" aria-hidden="true">
<div class="lightbox-inner">
<div class="lightbox-img-wrap">
<button class="lightbox-close" type="button" id="closeLightboxBtn" title="Sluiten (Esc)">
✕
</button>
<button class="lightbox-nav prev" type="button" id="prevImgBtn" title="Vorige (←)">
‹
</button>
<img decoding="async" id="lightboxImg" src="" alt="Bezoeker snapshot">
<button class="lightbox-nav next" type="button" id="nextImgBtn" title="Volgende (→)">
›
</button>
</div>
<div class="lightbox-meta" id="lightboxMeta">
<span class="tag" id="metaDate">—</span>
<span class="label" id="metaInfo">—</span>
</div>
</div>
</div>
<p><script>
// ===== CONFIG =====
const BASE_PATH = "/local/visitors";   // map met snapshots
const MAX_SLOTS = 200;                 // max. aantal slots per dag
let currentDate = new Date();
let currentList = [];  // {slot, url, base, ts}
let currentIndex = 0;</p>
<p>function pad(n) {
  return n.toString().padStart(2, "0");
}</p>
<p>function formatDateISO(d) {
  return d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
}</p>
<p>function formatDateHuman(d) {
  const dagen = ["zondag","maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag"];
  const maanden = ["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"];
  return `${dagen[d.getDay()]} ${d.getDate()} ${maanden[d.getMonth()]} ${d.getFullYear()}`;
}</p>
<p>function sameDay(a, b) {
  return a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate();
}</p>
<p>function setDateLabel() {
  const label = document.getElementById("dateLabel");
  const today = new Date();
  const iso = formatDateISO(currentDate);
  let prefix = "";</p>
<p>  if (sameDay(currentDate, today)) {
    prefix = "Vandaag · ";
  } else {
    const yesterday = new Date();
    yesterday.setDate(today.getDate() - 1);
    if (sameDay(currentDate, yesterday)) {
      prefix = "Gisteren · ";
    }
  }</p>
<p>  label.textContent = prefix + iso + " (" + formatDateHuman(currentDate) + ")";
}</p>
<p>function clearGrid() {
  document.getElementById("grid").innerHTML = "";
}</p>
<p>function showEmpty(visible) {
  document.getElementById("emptyState").style.display = visible ? "block" : "none";
}</p>
<p>function renderGrid(list, iso) {
  const grid = document.getElementById("grid");
  grid.innerHTML = "";
  currentList = list.slice();  // kopie</p>
<p>  list.forEach((item, idx) => {
    const thumb = document.createElement("div");
    thumb.className = "thumb";
    thumb.dataset.index = String(idx);</p>
<p>    const img = document.createElement("img");
    img.src = item.url;
    img.alt = `Bezoeker snapshot ${iso} slot ${item.slot}`;</p>
<p>    const badge = document.createElement("div");
    badge.className = "badge";
    const dot = document.createElement("span");
    dot.className = "dot";
    const txt = document.createElement("span");
    const timeStr = item.ts
      ? new Date(item.ts).toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" })
      : `slot ${item.slot}`;
    txt.textContent = timeStr;
    badge.appendChild(dot);
    badge.appendChild(txt);</p>
<p>    thumb.appendChild(img);
    thumb.appendChild(badge);</p>
<p>    thumb.addEventListener("click", () => {
      currentIndex = idx;
      openLightboxCurrent();
    });</p>
<p>    grid.appendChild(thumb);
  });
}</p>
<p>async function enrichWithTimestamps(found) {
  // Haal Last-Modified per bestand op en sorteer daarna
  const enriched = await Promise.all(
    found.map(async (item) => {
      try {
        const resp = await fetch(item.base, { method: "HEAD" });
        const lm = resp.headers.get("Last-Modified");
        if (lm) {
          item.ts = new Date(lm).getTime();
        } else {
          item.ts = 0;
        }
      } catch (e) {
        item.ts = 0;
      }
      return item;
    })
  );</p>
<p>  // Sorteer: eerst op timestamp desc, dan op slot desc als fallback
  enriched.sort((a, b) => {
    if (b.ts !== a.ts) return b.ts - a.ts;
    return (b.slot || 0) - (a.slot || 0);
  });</p>
<p>  return enriched;
}</p>
<p>function loadDay() {
  clearGrid();
  showEmpty(false);
  setDateLabel();
  currentList = [];</p>
<p>  const iso = formatDateISO(currentDate);
  const candidates = [];</p>
<p>  for (let slot = 0; slot <= MAX_SLOTS; slot++) {
    const base = `${BASE_PATH}/${iso}_slot_${slot}.jpg`;
    const url = `${base}?ts=${Date.now()}`;
    candidates.push({ slot, base, url, ts: 0 });
  }

if (!candidates.length) {
    showEmpty(true);
    return;
  }

let pending = candidates.length;
  const found = [];

Opslaan, en je gallery-pagina is klaar.

Stap 6 – Bezoekerslogboek op je tablet-dashboard

Nu moeten we de HTML-pagina nog tonen in Home Assistant, bijvoorbeeld als aparte view in je tablet-dashboard.
Onderstaande YAML is een simpel voorbeeld van een tweede view met alleen een iframe naar de gallery:

Copy to Clipboard

Belangrijk:

panel: true zorgt ervoor dat de iframe fullscreen in de view staat.
De ?v=1 achter de URL kun je verhogen (2, 3, 4, …) als je last hebt van cache in je browser.
Vanaf je hoofddashboard kun je een button maken met tap_action: navigate naar /tablet-v2/1 (of de juiste route) om snel naar het bezoekerslogboek te gaan.

Stap 7 – Testen

Controleer in de map /config/www/visitors of er bestanden verschijnen zoals 2025-11-16_slot_01.jpg als je naar de voordeur loopt.
Open de gallery in je browser: https://jouw-ha-url/local/bezoekers_gallery.html.
Blader met de knoppen Vorige / Vandaag / Volgende door de dagen.
Klik op een foto om de lightbox te openen; gebruik je toetsenbord:
- ← / → om door de snapshots te bladeren;
- Esc om de lightbox te sluiten.
Controleer of dezelfde gallery ook goed in je tablet-dashboard-view wordt getoond.

Veelvoorkomende issues (& oplossingen)

Geen foto’s in de gallery
Controleer of er wel bestanden in /config/www/visitors staan én of de bestandsnamen het patroon YYYY-MM-DD_slot_XX.jpg volgen.
Snapshots werken, maar je ziet oude volgorde
De HTML sorteert op bestandsdatum (Last-Modified). Als je bestanden handmatig kopieert, kan dat verwarrend zijn. Laat het systeem ze zelf aanmaken.
Cache-problemen
Als je wijzigingen aan de HTML hebt gedaan maar niets ziet:
- Verhoog de ?v=1 parameter in de iframe-URL naar ?v=2 etc.
- Force-refresh in je browser (Ctrl+F5 / Cmd+Shift+R).
Te veel snapshots per dag
Verklein eventueel MAX_SLOTS in de HTML (of beperk je voordeur-automation met cooldown / conditions). Standaard staat hij op 200.

Producten die ik gebruik

Voordeurcamera (Reolink) – Bewaking en snapshots voor het bezoekerslogboek.
Android-tablet – Als vast Home Assistant-dashboard aan de muur.
Wallmount – Om de tablet netjes weg te werken.
Home Assistant – Het hart van de automatisering en de gallery.

Slot

Met dit bezoekerslogboek heb ik mijn voordeurcamera écht geïntegreerd in mijn smart home:

Alle bezoekers netjes onder elkaar, per dag gegroepeerd.
Een stijlvolle gallery op mijn tablet-dashboard.
Bladeren door de tijd (en door de foto’s) zonder apps te hoeven openen.

Kopieer de YAML, plak de HTML in /config/www/bezoekers_gallery.html, pas je entiteiten aan en je hebt je eigen bezoekerslogboek draaien. En het mooie: de basis is nu gelegd voor een vervolg – bijvoorbeeld met gezichtsherkenning via een Google Coral USB, zodat je straks niet alleen ziet dát er iemand voor de deur stond, maar ook wie. 😄

Bezoekerslogboek in Home Assistant