Ich bin ja verliebt… lovelace ist endlich eine moderne Visualisierung für ioBroker. Diese stammt eigentlich von Homeassistant und wurde von schlauen Köpfen auch für ioBroker zu Verfügung gestellt… riesen Dank erstmal dafür. Aber zurück zu meinem Vorhaben. Die Installation von lovelace brauch ich nicht weiter erklären, dass ich Standard. Idealerweise installiert ihr von git, da dort zum jetzigen Zeitpunkt noch viel Entwicklungsarbeit drin steckt.

Fangen wir mit den Vorbereitungen an. Ihr braucht natürlich eine Fritzbox, sonst könnt ihr mit dem TR064 Adapter nichts anfangen. 

 

1. Fritzbox Benutzer anlegen

Ihr meldet euch auf eurer Fritzbox an und legt unter System / FRITZ!Box-Benutzer einen neuen Benutzer mit Kennwort an.

Mit anderen Fritzboxen und OS-Versionen kann der Punkt auch an anderer Stelle liegen.

Die ersten zwei Haken würde ich auch aktivieren:

  • FRITZ!Box Einstellungen (nicht vergessen)
  • Sprachnachrichten, Faxnachrichten,…

Neben Benutzer gibt es noch den Reiter „Anmeldung im Heimnetz“, dort solltet gleich auf „Anmeldung mit FRITZ!Box-Benutzernamen und Kennwort“ umstellen, der Sicherheit halber. Nicht vergessen einem eurer Benutzer die Berechtigung „FRITZ!Box Einstellungen“ zu geben. 

2. Zugriff auf Fritzbox Anrufmonitor

Damit wir überhaupt mitbekommen, dass ein Anruf eingeht, müssen wir den Anrufmonitor der Fritzbox aktivieren. Wir zücken ein angeschlossenes Telefon, egal ob direkt oder DECT und rufen die Nummer

 #96*5*

an. Einfach solange warten, bis euch die Fritzbox wieder rauswirft, dann ist der Anrufmonitor aktiviert (der Port 1012 offen).

Es soll Leute geben, die haben kein Telefon mehr. Man kann das auch über das interne Telefonbuch machen, das habe ich aber nicht getestet.

3. ioBroker TR064 community Adapter installieren und einrichten

Der normale TR064 Adapter wird nicht mehr weiterentwickelt, es gibt aber von der riesigen Community einen TR064 Community Adapter. Wir installieren wieder via Git: ioBroker / Adapter / Katze 😉

https://github.com/iobroker-community-adapters/ioBroker.tr-064-community

Auf INSTALLIEREN klicken, Adapter aktivieren und schon befindet ihr euch auf der Adapter-Einstellungsseite.

  • IP: fritz.box
  • Benutzer: Euren angelegten FRITZ!Box-Benutzer
  • Passwort: Euer angelegtes FRITZ!Box-Passwort.
  • Haken bei „Anrufmonitor aktivieren“ setzten

Speichern klicken, Adapter startet neu und ihr solltet in euren Objekten jetzt einen Ordner „tr-064-community.0“ haben. Wenn ihr den Reiter „callmonitor“ öffnet und es gibt einen Datenpunkt „ringing“ dann sieht das ganze bis hier hin schon sehr gut aus. Wenn ihr eure Fritzbox anruft, sollte der Status von „false“ auf „true“ springen (und danach natürlich wieder zurück).

 

Was nun?

Ab hier könnt ihr eigentlich machen, was ihr wollt. Ob tolle Skripte, die euch eine Nachricht per Telegram versenden oder wie ich, ein Popup auf dem Dashboard, dass mich benachrichtigt.

Als Dashboard verwende ich Lovelace, das sieht bei mir alles noch nicht so toll aus, da ich noch in der Test- und Designphase bin, aber die Funktion klappt soweit. 

Ab zu Lovelace

lovelace hat die Möglichkeit, wenn die Standard-Karten (Cards  sind wie Widgets) nicht reichen, Cusom Cards hinzuzufügen. Davon gibt es jede Menge in den Tiefen des Internets. Meistens funktionieren sie für HASS und für ioBroker. Ich verwende für das Popup die „Button Card“ oder wenn ihr die Button-Card nicht verwenden wollt, für fast alles andere „Card-Mod“. Das Zauberwort dabei heißt CSS. Die Button-Card bringt dieses Feature von Haus aus mit, Card-Mod bietet euch die Möglichkeit, CSS in jede Karte einzufügen.

https://github.com/custom-cards/button-card
oder
https://github.com/thomasloven/lovelace-card-mod

Die Custom Card werden über die Adapterkonfiguration von Lovelace installiert. Ihr braucht die JS von beiden Cards und zieht sie einfach in die Lovelace Adapterkonfig / Custom Cards (Kundenspezifische Karten)

Als nächstes bringen wir Lovelace bei, mit welchen Datenpunkten es arbeiten soll. In dem Fall interessieren zwei Stück:

tr-064-community.0.callmonitor.ringing
Objekte: tr-064-community.0 / callmonitor / ringing
und
tr-064-community.0.callmonitor.inbound.caller
Objekte: tr-064-community.0 / callmonitor / inbound / caller

Hinten auf dem Gabelschlüssel öffnen sich die Datenpunkt Einstellungen. Für beide Datenpunkte im Reiter „Einstellungen für Lovelace.0“ den Haken auf aktiv, als Entity Type: Sensor und optional einen Entity Namen vergeben.

Mit Speichern bestätigen und zurück in die Adapterconfig von Lovelace (Instanzen / Lovelace.0 / Gabelschlüssel). Im letzten Reiter auf Entitäten (sorry, bei mir ist das alles Deutsch), „Entitäten neu laden“ klicken, dann sollten eure zwei Datenpunkte hier schon auftauchen. 

Ab auf die Lovelace Oberfläche http://IP:8089

Lovelace-Oberfläche konfigurieren

Auf die drei Punkte rechts klicken, „Benutzeroberfläche konfigurieren“ klicken, dann seit ihr im Editor. Unten rechts erscheint das runde Plussymbol, dort fügt ihr eine neue Card hinzu.

„Manual Card“ oder ich glaub im englischen „Custom Card“ auswählen. An der Stelle könnt Ihr die Button-Card einfügen. Diese besitzt jede Menge Einstellmöglichkeiten was Design usw. angeht, am Besten schaut ihr mal auf Git vorbei und lest euch die Möglichkeiten durch.

https://github.com/custom-cards/button-card

Meine komplette Config sieht so aus:

type: 'custom:button-card'
layout: icon_name_state2nd
entity: sensor.ringing
name: Eingehender Anruf
show_state: false
show_label: true
debug_cardmod: true
icon: 'mdi:phone-ring-outline'
size: 35%
label: |
  [[[ return states["sensor.caller"].state ]]] 
styles:
  card:
    - width: 800px
    - height: 200px
    - position: fixed
    - top: 50%
    - left: 50%
    - margin-left: '-400px'
    - margin-top: '-100px'
    - z-index: 100
    - background-color: 'rgb(160, 160, 200)'
  icon:
    - animation: blink 2s ease infinite
  name:
    - font-size: 30px
    - color: white
    - align-self: middle
    - justify-self: start
  label:
    - font-weight: bold
    - font-size: 40px
    - color: white
    - align-self: middle
    - justify-self: start
state:
  - value: '0'
    styles:
      card:
        - display: none

Die Möglichkeiten sind hier wirklich unbegrenzt. Warum ich übrigens beim state: value: ‚0‘ schreiben musste, leuchtet mir leider nicht ein, eigentlich hätte auch value: ‚false‘ gehen müssen.

Die positions müsst ihr für euer Dashboard selber anpassen.

Viel Spaß