Wie sich das homee Dashboard beliebig anpassen lässt

Ich habe das Dashboard inzwischen noch etwas angepasst und auf Github veröffentlicht.

Das homeean Dashboard hat ein Layout, was sich automatisch an den Bildschirm anpasst. Hochkant geht auch; auf einem iPad sind es dann 3 Kacheln in einer Reihe. Die Größe der Kacheln lässt sich aber auch ohne weiteres anpassen.

Eine kurze Installationsanleitung gibt es in der ReadMe. Da es aber unzählige Möglichkeiten gibt, einen Webserver samt PHP zu betreiben, sollte diese nur als Beispiel angesehen werden.

Für die Raspberry Pi (bzw. Debian-) Nutzer steht das Projekt seit wenigen Minuten auch via homeean.de zur Installation bereit.

Ich betreibe das ganze aktuell auf einem OrangePi, die Darstellung übernimmt ein iPad mit einem Frameless-Browser. Hier ein Eindruck, wie das ganze dann aussieht:

Ich würde mich freuen, wenn der ein oder andere seinen individuellen Style in Form eines Screenshots hier im Thread postet, Anregungen können wir denke ich alle gebrauchen :wink: Ansonsten freue ich mich wie immer über einen Star auf Github oder einen Kaffee :slight_smile:

19 „Gefällt mir“

Sehr, sehr klasse. Ich habe gerade etwas Zeit und widme mich dem Thema ‘Dashboard’.
Nur leider scheitere ich Ahnungsloser schon ziemlich am Anfang. Ich kann das DB auf meinen homee anmelden, sehe das Hintergrundbild, die ‘mein Zuhause’ Icons, den natürlich nicht funktionierenden Netatmo Frame und sonst leider nichts.
Ich habe mir das ‘Script. js’ angesehen und stehe nun auf dem Bahnhof…
Kann mir da jemand unter die schweißnassen Arme greifen und ein Beispiel beisteuern? :hugs:

Nach dem ersten Login musst du die Seite einmal aktualisieren. Dann solltest du die Standard-Widgets sehen.

Welche Widgets du siehst, kann über den LocalStorage definiert werden. In der script.jsbeginnt die Funktion in Zeile 18. Entweder kannst du hier einzelne Einträge auf false setzen um sie auszublenden, oder du kopierst einfach aus einem bereits konfiguriertem Dashboard hinter das homee_ip + also in die Anführungsstriche.
Auslesen kann man ein konfiguriertes Dashboard am einfachsten über die Entwicklerkonsole in Chrome, hier ein Screenshot.


Da sind auch noch andere interessante Sachen drin, die man verändern könnte.

Alternativ kannst du auch den Bereich aus der script.jslöschen (Zeile 16-19) und in der style.css den Eintrag

/* hide edit dashboard widget */
[ng-include="'widget-type-edit.html'"] {
    display: none;
}

rausnehmen. Dann sollte nach einem Reload der Seite auch der Konfigurationsbutton wieder da sein und du kannst das Dashboard wie gewohnt konfigurieren. Dann bleibt das allerdings beim Aufruf von einem anderen Gerät nicht gespeichert.

4 „Gefällt mir“

Zu erwähnen ist das die Verbindung lokal, also mit der lokalen IP nicht der homee ID eingerichtet werden muss. Das steht zwar auch oben, habe ich aber komplett überlesen…

Woran koennte das denn liegen, dass ich nach der Installation nur einen http error 500 angezeigt bekomme, wenn ich die IP:8022 oeffnen moechte?

Installation lief ohne Probleme, die php-Seite bekomme ich angezeigt, wenn ich die IP des Raspberry eingebe. In der config.json habe ich die IP des homees eingetragen. Habe ich noch was uebersehen?

  1. Wie hast du installiert? Manuell oder via homeean?
  2. Wenn via homeean, war es eine frisches Image oder hast du vorher bereits einen Webserver installiert gehabt?

Über homeean. Und es war nicht frisch. Ich habe auf dem Pi schon diverse Dienste laufen. U.a den Alexa TTS, welcher auch einen Webserver nutzt, odrr nicht? Ist das ggf das Problem?

Hast du das Logfile (~/homeean.log) von der Installation noch? Wenn ja, schick mir das doch bitte mal per PN. Dann guck ich mal ob ich was sehe. Es kann z.B. an der Webserver Konfiguration liegen.

In der json Datei ist dieses “?” In der Raute… Das darf da nicht hin, da es sonst kein gültiges Json Format ist und die Software eventuell dadurch kaputt scheint. Lösch das Zeichen mal…

2 „Gefällt mir“

Danke, das hab ich glatt übersehen. Das wird es vermutlich sein.

1 „Gefällt mir“

Vielen Dank für die Umsetzung. Funktioniert prima. Hatte noch ein altes Lenovo Tab7 im Keller. Passt genau auf den Rahmen unserer Haustür. Das Tablet wird jetzt über Bewegung oder öffnen der Tür aktiviert. Ideal wäre jetzt natürlich noch, wenn man direkt über das Dashboard schalten könnte, aber das liegt wohl in der Hand von CA.

6 „Gefällt mir“

genau das wars. danke fuer die Hilfe!!

Jetzt noch den DARK Modus!

Ich habe es interessehalber mal probiert auf meinem NAS zum Laufen zu bekommen. Bisher bekomme ich allerdings nur eine leere, weiße Seite angezeigt, deren Quellcode aber zumindest schon mal nach Javascript aussieht. Die Composer-Abhängigkeiten konnte ich lokal installieren, bin mir aber nicht sicher ob hier sonst noch etwas fehlt. Lässt sich das irgendwie geschickt debuggen? Von Vorteil war bei mir zumindest, dass ich in der PHP-Konfiguration “display_errors = On” gesetzt habe. Sonst hätte es mir die Exceptions der Module erst gar nicht angezeigt. Ist vielleicht noch eine bestimmte PHP-Version nötig? Bei mir liefert das NAS nämlich nur 5.6.36.

Den kannst du dir ja nach der Installation prima selbst bauen :grinning:

Du kannst die Browser Konsole aufmachen. Schau mal nach nicht gefundenen Dateien. Ich vermute, es liegt daran, dass nicht alle Requests über den Proxy laufen.
Du musst alle Requests auf die index.php umleiten. Welcher Webserver läuft auf Deinem NAS?

OK, vielen Dank, das war der entscheidende Hinweis! :+1: Bei mir läuft eine Apache. Ich habe noch folgende Anpassungen an meiner VirtualHost-Konfiguration vorgenommen damit es funktioniert:

RewriteEngine On
RewriteBase /

RewriteRule ^/index.php$ - [L,NC]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]

1 „Gefällt mir“

Ich würde das Dashboard ja gerne auf meinem alten Kindle laufen lassen. Das original Dashboard kann der Webbrowser da aber nicht anzeigen. Weiß jemand ob das nach dem postprocessing durch das Proxy das besser ist und das modifizierte Dashboard anzeigbar ist auf dem Kindle?

1 „Gefällt mir“

Ich habe mal ne gaaaanz blöde Frage:
Abgesehen von der zusätzlichen Kamerafunktion, was genau bringt mir dieser Proxy, außer dass das homee-dashboard ein neues Layout bekommt.

Mit ein paar Anpassung im css-editor des Firefox habe ich folgendes - zugegeben vorläufiges - Design:

oder etwas hübscher:

Was man mit einem geeignetem Firefox Add-On permanent auf die homee-Website anwenden könnte.

Steht eigentlich außer Frage.

Vorteile

  • Das Dashboard ist mit jedem Browser aufrufbar
  • Das Dashboard sieht immer gleich aus
  • Änderungen müssen nur an einer Stelle vorgenommen werden
  • Mit PHP und JavaScript können nahezu beliebige Dinge angezeigt werden
  • Die CSS und JavaScript Dateien lassen sich teilen
  • Die Grundfunktionen von homee bleiben erhalten
3 „Gefällt mir“

Die ersten drei Punkte und der letzte gelten grundsätzlich auch für das css-angepasste Dashboard aus meinem post - bis auf exotische Browser.

Der vierte Punkt ist natürlich wahr, ich habe in diesem Thread aber kaum Ansätze in diese Richtung gesehen.

Hat den jemand mal Daten konkret miteinander verknüpft und zusätzliche Informationen oder Funktionen in diesem Dashboard erzeugt? Das wäre für mich der einzige Grund für einen solchen http proxy