Homehub – Einfache Visualisierung für Deine HomeMatic!

Das Homehub Projekt fand ich schon immer toll! Die Visualisierung ist übersichtlich – schnell auf der Synology Diskstation installiert und …. irgendwie schick! Grund genug mir diese Visualisierung nochmal genauer anzuschauen und – natürlich – ein Video zu erstellen!

Installation

Installiert wird der Homehub bei mir auf der Synology Diskstation. Die Diskstation läuft eh 24/7 und bietet alles, was ich benötige. Warum also nicht dieses Gerät dafür nutzen und nicht noch zusätzlich einen Raspberry dafür verwenden. Natürlich kannst Du den Homehub auch auf anderer Hardware installieren – auch dies ist kein Problem!

Auf der Synology installiere ich drei verschiedene Pakete aus dem Paketzentrum. Zum einen die Webstation, die als Webserver hier agiert. Zusätzlich benötige ich dann noch PHP sowie Apache 2.4. Sind diese drei Pakete installiert, so wird automatisch eine weitere Freigabe erstellt, die WEB heisst.

In diesem Verzeichnis erstelle ich dann einen unterordner, der “homehub” heisst. Hier kann ich dann das entpackte homehub Archiv, welches ich mir zuvor heruntergeladen habe, abspeichern. (Link ganz unten)

Auf der CCU musst Du recht wenig einstellen. Was Du aber benötigst ist die XML-API als Zusatzsoftware. Den Link findest Du ebenso ganz unten hier im Text.

Konfiguration

Die Konfiguration des Homehub wird im normalen Text Editor vorgenommen, der bei Windows – aber auch im Mac vorinstalliert ist. Eine extra Software ist also nicht notwendig.

Öffne einfach das Verzeichnis /homehub/App/Config – hier findest Du nun die Config.php, die Du als erstes Anpassen solltest:

<?php

// IP-address oder DNS name of your CCU
$homematicIp = '192.168.178.200';

// Time in seconds HomeHub periodically updates the status
$timerPeriod = 10;

// Title shown in Header
$title = 'SmartHome';

// Logo (30px x 30px) shown in Header
$logo = '../assets/images/hmip_logo.png';

Wie Du siehst sollte hier als erstes die IP Adresse Deiner CCU angepasst werden. Wenn Du möchtest kannst Du noch ein Logo einbinden oder aber auch den Titel Deiner Visualisierung anpassen.

Der erste Start

Gebe im Webbrowser die IP Adresse Deiner Synology Diskstation ein – gefolgt von /homehub/ (Zum Beispiel https://192.168.178.100/homehub/ ) und schon bist Du auf Deiner installierten Visualisierung. Hier sollten als erstes alle Geräte importiert werden – dies erledigst Du durch einfaches klicken auf “Import” (wer hätte das gedacht …). Der Importvorgang dauerte bei mir knapp eine Minute.

Sind dann die Geräte importiert können wir die Kategorien des homehub anpassen. Die Hauptkategorien erscheinen links im Menü – die Unterkategorien (subcategories) erscheinen Rechts im grösseren Bereich.

Konfiguration

Für die Konfiguration sind zwei Dateien wichtig – einmal die categories.json und dann die custom.json. Schauen wir uns als erstes die categories.json an. In dieser Datei werden die Kategorien vom Homehub konfiguriert. Zunächst einmal setzt Du die Haupt-Kategorien auf der linken Seite im Homehub fest. Recht gut kann man sich hier auch am Beispiel orientieren und das ein oder andere löschen bzw. die Bezeichnung für die eigenen Bedürfnisse anpassen.

{
  "categories": [
    {
      "name": "Home",
      "icon": "control_home.png",
      "subcategories": [
        {
          "name": "Home_Index",
          "display_name": "Info"
        }
      ],
      "append_divider": "true"
    },
    {
      "name": "Erdgeschoss",
      "icon": "control_building_eg.png",
      "subcategories": [
        {
          "name": "EG_Licht",
          "display_name": "Licht"
        },
        {
          "name": "EG_Heizung",
          "display_name": "Heizung"
        }
      ]
    }
  ]
}

Im Beispiel sieht man, dass hier “Home” ein Punkt im linken Menü ist – gefolgt von einer weiteren Unterteilung mit der Überschrift “Info” die dann Rechts auftaucht. In der Visualisierung sieht es dann wie folgt aus:

In der categories.json wird NUR die Menüstruktur angepasst – nicht die Geräte die wir steuern möchten.

Und genau damit machen wir nun weiter – denn wir wollen ja auch die Geräte einbinden, die wir steuern möchten. Diese werden in der custom.json eingesetzt. Auch hier ein kurzes Beispiel:

{
  "custom": {
    "Home_Index": [
      {
        "name": "Anwesenheit_neu",
        "icon": "status_available.png",
        "display_name": "Anwesenheit"
      },
      {
        "name": "Alarmanlage_Status",
        "icon": "secur_alarm.png",
        "display_name": "Alarmanlage",
        "append_divider": "true",
        "indicator": "0,true;1,warn;2,false"
      }
    ],
    "EG_Licht": [
      {
        "name": "Deckenlampe",
        "icon": "light_light_dim_100.png",
        "display_name": "Esszimmer Licht"
      },
      {
        "name": "Funkstecker Esszimmer",
        "icon": "light_light_dim_100.png",
        "display_name": "Esszimmer kleines Licht"
      }
    ]
  }        
}

Hier in der Datei taucht wieder der “home_index” auf – dieser wurde ja bereits in der categories.json definiert und festgelegt. Es ist irgendwie eine Verlinkung der beiden Dateien. Und hier kann nun gesagt werden, welche Geräte oder Systemvariablen unter dem Punkt angezeigt werden sollen.

In meinem Beispiel möchte ich nun einfach die Systemvariablen darstellen. Ebenso kannst Du aber natürlich auch Geräte oder ähnliches an dieser Stelle anzeigen lassen.

Video

Links

Homehub im Homematic Userforum: https://homematic-forum.de/forum/viewtopic.php?f=41&t=50538

Homehub Projekt Adresse: https://connectedsmart.de/

XML-API: https://www.homematic-inside.de/software/xml-api

Homehub Wiki: https://github.com/braindead1/HomeHub-WebUI/wiki