Wie binde ich Spotify ein (RedMatic / CREATOR NEO)?

Die Integration erfolgt dabei auf einem Raspberry Pi mit RaspberryMatic sowie dem AddOn „RedMatic“, das es so aber auch für die CCU3 (und anderen Systemen, wie z.B. der Smartha Zentrale von Easy SmartHome) gibt.

Wie bereits in der Einleitung beschrieben, sollen folgende Funktionen abgedeckt werden:

• Anzeige des aktuellen Covers
• Anzeige des aktuellen Titels sowie des Albums & Interpreten
• Anzeige der aktuellen Wiedergabeposition
• Bedienung der Funktionen „Pause“, „Wiedergabe“, „Voheriger Titel“ und „Nächster Titel“

Da die wichtigsten Dinge direkt über RedMatic bzw. die CCU umgesetzt werden, können die hier gewonnenen Informationen aber auch für andere Visualisierungslösungen herangezogen werden.

RedMatic / NodeRed

Für RaspberryMatic bzw. die CCU3 (und andere Zentralen) gibt es mit NodeRed eine sehr leistungsfähige, grafische Entwicklungsumgebung, mit der man unterschiedliche Systeme miteinander verbinden kann. Über so genannte „Nodes“ wird dabei die Funktionalität abgebildet und innerhalb eines „Flows“ visualisiert. Neben einfachen String- und Logikoperatoren sind aber auch komplexere Aufgaben möglich, wie z.B. das Abfragen und „Parsen“ von Statusinformationen über HTTP-Requests (Müllkalendern, Feiertage & Ferien, ...) oder der Einbindung von HomeConnect Geräten (Geschirrspülmaschinen oder Kaffeevollautomaten, ...), FritzBox, usw.

Die Einbindung von NodeRed in die HomeMatic Landschaft erfolgt über die Zusatzsoftware „RedMatic“, die wie jedes andere AddOn zu installieren ist. Auf YouTube & Co. gibt es dazu unzählige Anleitungen und Tutorials. Wer mit RedMatic zuvor noch nicht gearbeitet hat, dem sei auch das Wiki (siehe Links am Ende der Anleitung) ans Herz gelegt, die sämtliche, von Haus aus zur Verfügung stehenden Nodes (teilweise an Beispielen) ausführlich erklärt.

Das Prinzip

Ziel ist ja u.a. die Darstellung des aktuellen Covers sowie der Titelinformationen auf einer Fernbedienungsseite des AIO Creator NEO. Diese Statusinformationen werden üblicherweise über ein Textfeld abgebildet, das mit einer Variable (aus einem Gateway) zu verbinden ist. Das Gateway ist an dieser Stelle die CCU, auf der also entsprechende Systemvariablen anzulegen sind. Ferner soll es möglich sein, über die Fernbedienung den aktuell gespielten Spotify-Titel anzuhalten, die Wiedergabe fortzusetzen bzw. zum nächsten/vorherigen Lied zu springen. Dafür benötigt man in NEO eine Taste, die mit einem Gerätekanal zu verbinden ist. Da wir in der CCU aber kein „Spotify“-Gerät haben, müssen wir uns eines „basteln“. Dazu legt man z.B. eine virtuelle Fernbedienung über den „CUx-Daemon“ an oder einfacher: man benutzt die virtuellen Kanäle der CCU.

Systemvariablen anlegen

Für die Übermittlung der Titelinformationen müssen entsprechend viele Systemvariablen angelegt werden. Die folgende Tabelle zeigt eine möglich Auswahl sowie die jeweils dazugehörigen Datentypen:

Das aktuelle Coverbild wird ebenfalls über eine Variable vom Typ „Zeichenkette“ abgebildet und enthält später eine URL. Findet aktuell keine Wiedergabe über Spotify statt, soll die URL zu einem Standardbild führen, das stattdessen dargestellt wird (z.B. das Spotify-Logo).

Virtuelle Kanäle benennen

Die virtuellen Kanäle lassen sich über die Geräteliste der WebUI definieren. Dazu sucht man in dieser nach dem Namen „HM-RCV-50“ (Virtuelle Fernbedienung / Drahtlos) und klappt den Eintrag mit einem Klick auf „+“ auf. Nun sucht man sich drei unbenutzte Kanäle aus und benennt diese z.B. wie folgt:

NodeRed vorbereiten

Nachdem nun die Grundvoraussetzungen geschaffen wurden, geht es an‘s Eingemachte. An dieser Stelle sei nochmals erwähnt, sich die verfügbaren Einführungsvideos zu RedMatic bzw. NodeRed anzusehen, sofern noch nicht geschehen, um ein Grundverständnis für die nachfolgenden Schritte zu haben.

Von Haus aus gibt es keinen „Node“, um mit Spotify direkt zu kommunizieren. Diese Funktionalität muss daher zuvor nachinstalliert werden. Dazu öffnet man in der NodeRed-Oberfläche das Hamburger-Menü (rechts oben) und wählt „Palette verwalten“. Nun klickt man auf den Reiter "Installieren" und sucht nach "Spotify". Aus der Liste wählt man nun den Eintrag "node-red-contrib-spotify" und klickt auf "Installieren":

Ggf. muss nun RedMatic neu gestartet werden, damit der neue Node (spotify) in der linken Liste erscheint.

Neben dem sichtbaren Node wurde bei der Installation auch noch ein so genannter "Konfigurations-Node" eingerichtet, über den die Verbindung zur Spotify-Authorisierung (OAuth2) erfolgt. Dafür ist mit dem eigenen Spotify-Konto auf dem Dashboard der Developer-Console eine neue "App" zu erstellen:

Der „Spotify“-Flow

Nachdem nun der neue Spotify-Node verwendet werden kann (Tipp: über den Eintrag "Credentials" kann in diesem ebenfalls der Konfigurations-Node eingerichtet werden), geht es um die Erstellung der eigentlichen Logik in einen neuen Flow innerhalb der RedMatic /NodeRed Oberfläche. Dazu klickt man in der Tableiste oben auf das "+" und erhält damit einen "frischen" Flow. Als erstes zieht man nun einen "inject"-Node von der Palette auf die Oberfläche, um in einem hinterlegten Intervall (z.B. 5 Sekunden) den aktuellen Spotify-Status abfragen zu können (Polling):

Als nächstes platziert man nun einen "spotify"-Node und verbindet diesen mit dem zuvor erstellten "inject"-Node. Mit einem Doppelklick auf den Node öffnet man nun dessen Eigenschaften, wählt unter Credentials den Konfigurations-Knoten aus und wählt unter "API" den gewünschten Eintrag aus:

Es gibt dutzende Eigenschaften & Funktionen, die man über die API Dropdown-Box auswählen kann. Wir interessieren uns aber erstmal nur für die Daten des aktuell gespielten Tracks und wählen daher den Eintrag "getMyCurrentPlayingTrack". Der "Payload" aus diesem Knoten enthält danach sämtliche von uns benötigte Daten, die nur noch daraus extrahiert werden müssen. Was genau alles an Daten enthalten ist, kann man sich z.B. mit einem "debug"-Node im rechten Bereich der NodeRed Oberfläche ausgeben lassen (Auszug):

"item": {
    "album": {
      "album_type": "single",
      "artists": [
        {
          "name": "Sunlounger",
          "type": "artist",
        },
        {
          "id": "2IuTspiSwgQQs4LmvNSBIZ",
          "name": "Susie Ledge",
          "type": "artist",
        },
        {
          "id": "3dAnWbqTzCOK1jdiK2v3gI",
          "name": "Roger Shah",
          "type": "artist",
        }
      ]
   }
}    

Da Spotify diese Informationen nur bei einer aktiven Wiedergabe zurückgibt, sollte man als nächstes prüfen, ob es überhaupt etwas zu verarbeiten gibt. Sollte dies nicht der Fall sein, gibt man einfach vordefinierte Standardwerte zurück, also z.B. "Keine aktuelle Wiedergabe" für den Titel oder das Spotify-Logo als Cover. Dazu verwendet man in NodeRed einen "switch"-Node und definiert zwei Ausgänge:

Liegen Daten vor, werden diese (= Payload) über den ersten Ausgang weitergereicht und können im Nachgang weiter verarbeitet werden. Dazu kommen dieses Mal die "change"-Nodes zum Einsatz, die je eine einzelne Information aus dem Payload extrahieren, diesen damit ersetzen und an eine HomeMatic Systemvariable weiterreichen. Da der Payload eine wohl definierte JSON-Struktur enthält, lässt sich diese mit Boardmitteln von NodeRed recht komfortabel "parsen". Am einfachsten geht dies mit Hilfe von JSONata und einem entsprechend definiertem Ausdruck:

Anschließend steht der extrahierte Titel als neue Payload zur Verfügung und kann nun an HomeMatic weitergereicht werden. Dazu steht der "sysvar"-Node im Bereich "ccu" zur Verfügung. Diesen füttert man mit einem Wert (Payload) und wählt den entsprechenden Namen der Systemvariable aus, in die dieser geschrieben werden soll:

Nach diesem Schemata werden nun auch alle anderen Daten extrahiert und in die zuständigen Systemvariablen geschrieben. Die folgende Tabelle führt alle dazu benötigten JSONata Ausdrücke auf:

Für das Cover wurde eine Auflösung mit einer Höhe von 640 Pixels gewählt, die für meine AIO CREATOR NEO Fernbedienungsseite genau passt. Alternativ stehen auch noch andere Auflösungen parat. Die aktuelle Position innerhalb des gespielten Titels wird mit Hilfe einer kleinen Formel in einen Prozenzwert (0-100%) überführt. Der Status gibt lediglich an, ob die Wiedergabe gerade pausiert wird oder nicht. Spotify wartet eine Zeit lang, bevor die pausierte Wiedergabe komplett gestoppt wird (und die Abfrage der Daten leer ist, siehe oben).

Liegen aktuell keine Daten vor, wird der 2te Ausgang des "switch"-Nodes getriggert. Auch hier kommen wir die "change"-Nodes zum Einsatz, um die Systemvariablen mit sinnvollen Standard-Daten zu füttern:

Da nun alle Daten an HomeMatic Systemvariablen weiter gereicht wurden, geht es um die Fernsteuerung von Spotify, also dem Pausieren und Weiterspielen des aktuellen sowie der Anwahl des nächsten bzw. vorherigen Titels. Dazu wurden ja bereits weiter oben die benötigten virtuellen Geräte konfiguriert, die nun zum Einsatz kommen.

Mit Hilfe des "rpc event"-Nodes aus dem Bereich "ccu" haben wir einen passenden Trigger, der die entsprechende Aktion auslöst. In diesem wählen wir nun unsere CCU und unter "Interface" den Eintrag "BidCos-RF" aus. Unter "channelName" ist letztendlich der Name des virtuellen Gerätes zu wählen, also z.B. "CCU#Spotify.Next", um einen Titel weiter zu springen:

Dieser Node wird nun einfach mit der entsprechende Funktion aus dem Spotify-API verbunden, in unserem Fall also mit "skipToNext":

Das Gleiche wird anschließend mit "skipToPrevious" gemacht, um zum Beginn bzw. vorherigen Titel zu springen. Etwas tricky ist die Toggle-Funktion zum Pausieren bzw. Weiterspielen des aktuellen Tracks. Dazu muss zunächst ermittelt werden, wie der Status der Wiedergabe aktuell ist - was wir allerdings weiter oben bereits erledigt haben...doch wie kommen wir da nun ran?

Hier machen wir uns den so genannten "Flow"-Container zu Nutze, in dem alle möglichen Objekte innerhalb eines Flows geschrieben und auch wieder gelesen werden können. Bei der Ermittlung der aktuellen Titeldaten schreiben wir den Status der Wiedergabe einfach in diesen Container:

Auf diesen Wert können wir nun innerhalb des Flows jederzeit zugreifen, um in unserem Fall dann zu entscheiden, ob die aktuelle Wiedergabe pausiert oder fortgesetzt werden soll. Dazu schalten wir hinter den "rpc event"-Node den bereits bekannten "switch"-Node, definieren zwei Ausgänge, und lösen danach die entsprechende Aktion in Spotify aus:

Die Ausgänge der Steuer-Nodes sind dabei mit dem Eingang des ersten Spotify-Nodes verbunden, um die Titeldaten nach der jeweiligen Aktion (Pause/Play/Prev/Next) sofort zu aktualisieren.

Geräte & Systemvariablen in NEO importieren

Wenn der Flow dann wie gewünscht funktioniert, kann man die eigentliche Visualierung bzw. Ansteuerung von Spotify im AIO CREATOR NEO angehen. Dazu importiert man als Erstes die zuvor im WebUI der CCU angelegten Systemvariablen und virtuellen Aktor-Kanäle. Um die virtuellen Kanäle überhaupt sehen zu können, ist zuvor die Option "Geräte ohne Raum ausblenden" im Import-Dialog zu deakivieren, falls in der WebUI diesen zuvor kein Raum (Default) zugewiesen wurde.

Anschließend markiert man die gewünschten Einträge in den jeweiligen Kategorien und klickt auf „Importieren“. Die Variablen und Tastenaktionen stehen dann für die Integration in die Fernbedienungsseiten zur Verfügung.

Die Visualisierung

Da jeder seine Fernbedienung nach eigenem Geschmack gestaltet, möchte ich an dieser Stelle auf das Design nicht weiter eingehen. Vom Prinzip her lassen sich die Angaben zum Titel einfach über "Textfelder" in NEO abbilden. Dazu verknüpft man den Status des Feldes mit der zuvor importierten Systemvariable (die ja nun durch NodeRed automatisch gefüllt wird) und formatiert diese wie gewünscht:

Die Wiedergabeposition habe ich in meinem Beispiel über einen "Slider" visualiert und auch hier einfach der entsprechenden Systemvariable (Spotify.Fortschritt) zugewiesen. Das Interval geht hierbei von 0-100 in 1-er Schritten. Die Bedienung wurde über die entsprechende Option deakviert, da es sich hierbei nur um einen Lese-Wert handelt. Über einen ensprechenden API-Aufruf wäre aber auch ein Verändern der Wiedergabeposition möglich.

Die Anzeige des Covers übernimmt ein Webseiten-Element, dem allerdings keinerlei Webseite (Eintrag: "X ---") zugewiesen wird. Vielmehr wird auch hier wieder die entsprechende Systemvariable (Spotify.Bild) im Status ausgewählt, um die URL (Adresse des Bildes) dem Element zur Verfügung zu stellen. Den Aufbau der darzustellenden Seite definiert man über die Funktion "HTML-Gerüst festlegen":

Im Bereich "Dokumenten-Beginn" wählt man nun den Eintrag "Benutzerdefiniert" und fügt folgenden Quellcode hinzu:

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <style>
    body { 
        background-color: transparent;
    }
    </style>
<head>
<body>

Der Inhalt kann natürlich den eigenen Vorstellungen entsprechend angepasst werden. Erwähnenswert ist hierbei nur der Sytle-Abschnitt für den HTML-Body, dessen Hintergrundfarbe auf transparent gesetzt wurde.

Im Hauptbereich definiert man nun dass darzustellende Bild (Cover), das über den Status an dieses Element weitergegeben wurde:

Die URL steht dabei in der Variable "%neo_state%" zur Verfügung und wird als Quelle (src) an das HTML-Image übergeben. Die beiden Attribute "width" und "height" sorgen lediglich für eine 100%-tige Darstellung innerhalb des Webseiten-Elements.

Im Bereich "Dokumenten-Ende" wird die Webseiten-Struktur mit folgendem Code wieder sauber "geschlossen":

</body></html>

Die zuvor möglichen Bedienaktionen lassen sich über "Button"-Elemente realisieren, deren Aktionen die virtuellen Tastendrücke auslösen (die wiederum im NodeRed Flow die Spotify-API ansprechen):

Wie geht's weiter?

Die Spotify-API wurde hier nur am Rande angekratzt und bietet jede Menge weiterer Möglichkeiten. So liese sich das aktuell gespielte Lied z.B. in die eigene Bibiliothek übernehmen oder man könnte veranlassen, dem aktuellen Künstler zu folgen oder die Wiedergabelautstärke zu ändern. Das würde aber den Umfang dieses Artikel sprengen...