*[Custom Card] AgentDVR Gallery Card – meine erste eigene Lovelace Card

Ich hab mich die letzten Tage mal daran versucht, eine eigene Custom Card für Lovelace zu bauen – und ich bin ehrlich gesagt selbst überrascht dass das was geworden ist 😄.
Mit Claude hat das wirklich gut geklappt.

Hintergrund:
Ich nutze AgentDVR für meine Überwachungskameras und wollte die Aufnahmen direkt in meinem Dashboard sehen, ohne immer in die AgentDVR-Oberfläche wechseln zu müssen. Die bisherige Lösung war ein iframe (hatte das Blockly hier mal gepostet), jedoch war mit das nicht mehr schön genug ^^.

Die Card kann folgendes:

• Thumbnail-Galerie der letzten X Aufnahmen
• Gruppierung nach Datum (Heute / Gestern / Wochentag)
• Klick öffnet einen Lightbox-Player, mit Vor/Zurück-Navigation durch die Aufnahmen
• Suche und Tag-Filter (klappt sich dezent ein, nervt nicht)
• Relative Zeitanzeige („vor 5 Min." usw.)
• Auto-Refresh – erkennt ob sich was geändert hat, baut das Grid also nicht unnötig neu auf
• Läuft mit HA und mit dem ioBroker Lovelace-Adapter
• Grafischer Editor funktioniert
• Farben kommen komplett aus dem Theme

Funktioniert bei mir problemlos, bin aber kein professioneller Entwickler – also wenn jemand Bugs findet oder Verbesserungsvorschläge hat, immer her damit!

Freue mich über Feedback! 🙂

Die Karte kann ohne yaml eingefügt und konfiguriert werden.

Manuell wurde es so aussehen:

type: custom:agentdvr-card
ip_agentdvr: "192.168.99.5"
oid: "8"
anzahl: 50
groesse: gross
show_tags: true
tag_position: bottom-left
refresh_interval: 30
title: "Kamera Einfahrt"

agentdvr-card.js