Schönes Frontend

[Assassine1996]

Hallo liebes Forum,

ich würde gerne ein anderes Design für mein FHEM vorsehen, habe aber leider keine Ahnung von CSS und dergleichen

Könnt Ihr mir ein paar Tipps geben, wie ich die CSS-Files bearbeiten kann und was sich dann genau ändert ?
Ich weiß nur, dass es mit den CSS-Files geht, habe aber keine Ahnung wo ich anfangen soll.

Ich hoffe ihr könnt mir helfen

Perfekt wäre, wenn Ihr mir Eure Frontends schickt und vlt ein Stückchen Code wie Ihr das gemacht habt.

Ich danke schon Vorraus,

mfg Assassine1996

PS. Im Anhang befindet sich ein Frontend, was mich sehr anspricht. Wisst Ihr wie ich das so hinbekommen ?

[Icinger]

Deja vu?

[Assassine1996]

Deja vu?

Warum meinst du ? ^^

[bergadler]

Crosspostings

[Assassine1996]

Crosspostings

Mir wurde gesagt, dass ich das hier posten muss also ^^

[Icinger]

Mir wurde gesagt, dass ich das hier posten

Stimmt nicht. Dir wurde gesagt:

Schau dich mal im Frontend-Forum um, da gibt es einige Ansätze die das tun was du willst. Vielleicht findest du dort auch dein gegoogeltes Idealbild wieder.

Du erwartest doch wohl nicht, dass jetzt mal schnell jemand das für dich so umändert und dir dann am Silbertablet präsentiert, oder?

[Motivierte linke Hände]

Mal auf die Schnelle:

Die Anzeige an sich scheint WebViewControl auf einem Android-Tablet zu sein.
Insgesamt könnte man das z.B. wohl über einen Floorplan unter Abschaltung der FHEM-Standardmenüs realisieren. Überschriften etc. z.B. über dummys oder weblinks.
Die Terminanzeige bekommt man mit einer readingsGroup und dem Calendar-Modul hin, wenn die Termine in einem kompatiblen Kalender liegen (s. Referenz).
Den Wetterbericht kann man sich mit in dummys gespeicherten und über devStateIcons abgebildeten Wetterberichten so anzeigen lassen.
Auch die Schaltflächen für die Lampen müssten über Weblinks oder dummys umsetzbar sein, wenn passend auf dem Floorplan platziert.

Wozu mir keine spontane Lösung einfällt: aktuell 27 Grad Tageshöchsttemperatur im deutschsprachigen Raum. Das gibt die globale Erwärmung m.W. noch nicht her.

Der Rest ist mit Aufwand durchaus zu schaffen. Bei mir ist bisher auch die allermeiste Zeit (die Freizeit mehrerer Wochen) in der Haussteuerung in das Erstellen einer Bedien- und Informationsoberfläche geflossen, die Akzeptanz bei der besten Ehefrau von allen auslöst. 

Einen fröhlichen Sonntag!

[Assassine1996]

Mal auf die Schnelle:

Die Anzeige an sich scheint WebViewControl auf einem Android-Tablet zu sein.
Insgesamt könnte man das z.B. wohl über einen Floorplan unter Abschaltung der FHEM-Standardmenüs realisieren. Überschriften etc. z.B. über dummys oder weblinks.
Die Terminanzeige bekommt man mit einer readingsGroup und dem Calendar-Modul hin, wenn die Termine in einem kompatiblen Kalender liegen (s. Referenz).
Den Wetterbericht kann man sich mit in dummys gespeicherten und über devStateIcons abgebildeten Wetterberichten so anzeigen lassen.
Auch die Schaltflächen für die Lampen müssten über Weblinks oder dummys umsetzbar sein, wenn passend auf dem Floorplan platziert.

Wozu mir keine spontane Lösung einfällt: aktuell 27 Grad Tageshöchsttemperatur im deutschsprachigen Raum. Das gibt die globale Erwärmung m.W. noch nicht her.

Der Rest ist mit Aufwand durchaus zu schaffen. Bei mir ist bisher auch die allermeiste Zeit (die Freizeit mehrerer Wochen) in der Haussteuerung in das Erstellen einer Bedien- und Informationsoberfläche geflossen, die Akzeptanz bei der besten Ehefrau von allen auslöst. 

Einen fröhlichen Sonntag!

Danke für die ausführliche Antwort. Das mit den Floorplans hab ich mir schon gedacht. Nur meine Frage ist, wie kann ich dann das Default-Menü von FHEM abschalten bzw nicht sichtbar machen ?

Das mit den ReadingGroups hab ich auch schon probiert, aber es funktioniert noch nicht ganz

[Motivierte linke Hände]

Zum Floorplan gibt's ein Attribute, fpnomenu oder so. Wenn Du das auf 1 setzt, ist das Menu beim Floorplan weg.

readingsGroup ist super, hat so viele Möglichkeiten, dass fast alles geht, aber man oft einige Zeit braucht, bis es läuft.

[fhainz]

Bastel dir dein eigenes Frontent mit SmartVisu.

Um html und css wirst du so oder so nicht rumkommen.
http://de.selfhtml.org
http://www.css4you.de

[Assassine1996]

Bastel dir dein eigenes Frontent mit SmartVisu.

Um html und css wirst du so oder so nicht rumkommen.
http://de.selfhtml.org
http://www.css4you.de

Danke für deine Antwort! Bin jetzt die Installations-Anleitung durchgegangen. Wenn ich aber den Test mache, ob Smartvisu funktioniert, wird nicht wie in der Anleitung ein Bild angezeigt, sondern nur Code.
Anbei befindet sich ein Bild davon.

Wisst Ihr was ich falsch mache ?

Was bewirkt das Smartvisu eigentlich ?

Zum Floorplan gibt's ein Attribute, fpnomenu oder so. Wenn Du das auf 1 setzt, ist das Menu beim Floorplan weg.

readingsGroup ist super, hat so viele Möglichkeiten, dass fast alles geht, aber man oft einige Zeit braucht, bis es läuft.

Wie erstelle ich diese readingsGroup ? Ich habe schon einige Anleitungen gelesen, komme aber trotzdem nicht weiter. Könnt Ihr mir ein Beispiel schicken dann verstehe ich es vlt ein bisschen besser ?

mfg Assassine1996

[Shax]

Sieht nach einem Webserver aus der kein PHP kann

[Mitch]

Also wenn ich eine Frage so lesen, z.B. diese

Was bewirkt das Smartvisu eigentlich ?

dann muss ich sagen, lieber ertsmal kleine Brötchen backen 

Mach Dich erstmal über die Grundlagen schlau. z.B. XAMPP, dann gehts weiter

[Motivierte linke Hände]

Wie erstelle ich diese readingsGroup ? Ich habe schon einige Anleitungen gelesen, komme aber trotzdem nicht weiter. Könnt Ihr mir ein Beispiel schicken dann verstehe ich es vlt ein bisschen besser ?

Beispiele gibt's jede Menge im Wiki-Eintrag zur readingsGroup: http://www.fhemwiki.de/wiki/ReadingsGroup

Was soll Deine readingsGroup denn genau machen, welche Definition hast Du aktuell und was kommt dabei raus?

[Assassine1996]

Beispiele gibt's jede Menge im Wiki-Eintrag zur readingsGroup: http://www.fhemwiki.de/wiki/ReadingsGroup

Was soll Deine readingsGroup denn genau machen, welche Definition hast Du aktuell und was kommt dabei raus?

Ja ich habe jetzt wie im CommandRef readingsGroup erstellt. Die sehen jetzt so aus wie unten im Bild. Aber wie bekommen ich das jetzt schön geordnet hin und vorallem dass FHEM mir das auf der Startseite anzeigt ?

Der THSensor ist ein Outdoor-Homematic Sensor und Thermostat_Clima ist ein Heizungsthermostat ebenfalls von Homematic.

mfg Assassine1996

[Mitch]

Ich weiß, vielen hören das nicht gerne, aber ließ Dich bitte erstmal in die Thematik ein.
commandref, Einsteiger PDF, Forum etc.

Es fehlen halt leider bereits die Basics

[Assassine1996]

Ich weiß, vielen hören das nicht gerne, aber ließ Dich bitte erstmal in die Thematik ein.
commandref, Einsteiger PDF, Forum etc.

Es fehlen halt leider bereits die Basics

Ja das ist mir schon klar, dass mir die Basics fehlen. Nur da ich nur begrenzt Zeit habe und das ein Projekt für meine Schule ist, würde mir eher ein Ergebnis weiter helfen

Ich habe es jetzt geschafft readingsGroup zu erstellen und auf dem Floorplan zu platzieren, also bin ich meinem Ziel schon etwas näher, danke für die Hilfe (Y) !

Das einzige was ich nicht hin bekomme, ist die desired-temp von meinem Thermostat auf dem Floorplan. Ich würde auch gerne diese Temperatur im Floorplan einstellen können, aber er zeigt mir diese nur an.
Im Wiki von FHEM steht, dass dies mit "devstateicon" funktionieren sollte. leider tut es das aber nicht. Der Befehl lautet: attr Verbrauch valueIcon { state => '%devStateIcon' }

Und noch eine Frage: wie kann ich die Wetterkondition von partly cloudly auf Deutsch umstellen ?
Das wäre auch eine gute Sache.


mfg Assassine1996

[Motivierte linke Hände]

Was Du da zeigst, ist ja nur der Sensor. Wie sieht denn die readingsGroup aus und was möchtest Du anders haben?

Auf der Startseite von FHEM bekommst Du die rg kaum angezeigt. Der richtige Weg dürfte sein, für die "produktive Anwendung" eine Seite (Floorplan, Dashboard, RSS, ...) zu erstellen, wie Du es möchtest, und dann das Anzeigegerät Deiner Wahl direkt auf diese Seite als "Startseite" springen zu lassen. Schönheit liegt im Auge des Betrachters, und Startseite ist nur eine Frage des Blickwinkels und der Konfiguration.

Meine Startseite am zu diesem Zweck geschossenen Android-Tablet ist ein Floorplan, auf dem sich eine Übersicht befindet und von dem aus über Weblinks auf Detailansichten zugegriffen werden kann.

[Assassine1996]

Was Du da zeigst, ist ja nur der Sensor. Wie sieht denn die readingsGroup aus und was möchtest Du anders haben?

Auf der Startseite von FHEM bekommst Du die rg kaum angezeigt. Der richtige Weg dürfte sein, für die "produktive Anwendung" eine Seite (Floorplan, Dashboard, RSS, ...) zu erstellen, wie Du es möchtest, und dann das Anzeigegerät Deiner Wahl direkt auf diese Seite als "Startseite" springen zu lassen. Schönheit liegt im Auge des Betrachters, und Startseite ist nur eine Frage des Blickwinkels und der Konfiguration.

Meine Startseite am zu diesem Zweck geschossenen Android-Tablet ist ein Floorplan, auf dem sich eine Übersicht befindet und von dem aus über Weblinks auf Detailansichten zugegriffen werden kann.

Ja das mit dem Floorplan ist eine gute Idee. D.h. ich rufe als Startseite den Floorplan auf und über diese Weblinks verweise ich auf die genauen ReadingGroups der Geräte. So etwas in der Richtung habe ich mir gedacht. Und das alles noch in einem schönen Design

Das Dashboard verändert ja nur das Fhem oder ? Also man kann dann ja Drag & Drop Funktionen benutzen oder ?

Was es mit dem RSS auf sich hat, muss ich noch recherchieren.

Was meinst du mit "ich zeige nur den Sensor". Das sind doch die Temperaturen oder ? Und diese will ich noch schöner angezeigt haben


mfg Assassine1996

[Motivierte linke Hände]

Floorplan und meines Wissens (nicht selbst ausprobiert) auch Dashboard erhalten die interaktiven Funktionen von FHEM. RSS hat wohl den Hauptzweck, ein Bild mit Informationen zu erzeugen, das angezeigt werden kann. So jedenfalls mein Verständnis aus den diversen Threads dazu. Ich habe meine Anzeigen über miteinander verlinkte Floorplans ohne FHEM-Menü realisiert.

Temperatur einstellen im Floorplan geht mir webcmd und setList, in einer readingsGroup über das Attribute commands.

Zur rg-Anzeige: Was soll denn "schöner" sein?

Im schonmal verlinkten Wiki-Eintrag zur readingsGroup sind viele Beispiele, Raumbezeichnung netter, Datum weg, Temperatur farbig, Temperatur einstellen, kannst Du da alles machen. Das Anhängende habe ich mir auch aus den Einträgen im Wiki zusammengebastelt.

[Assassine1996]

Floorplan und meines Wissens (nicht selbst ausprobiert) auch Dashboard erhalten die interaktiven Funktionen von FHEM. RSS hat wohl den Hauptzweck, ein Bild mit Informationen zu erzeugen, das angezeigt werden kann. So jedenfalls mein Verständnis aus den diversen Threads dazu. Ich habe meine Anzeigen über miteinander verlinkte Floorplans ohne FHEM-Menü realisiert.

Temperatur einstellen im Floorplan geht mir webcmd und setList, in einer readingsGroup über das Attribute commands.

Zur rg-Anzeige: Was soll denn "schöner" sein?

Im schonmal verlinkten Wiki-Eintrag zur readingsGroup sind viele Beispiele, Raumbezeichnung netter, Datum weg, Temperatur farbig, Temperatur einstellen, kannst Du da alles machen. Das Anhängende habe ich mir auch aus den Einträgen im Wiki zusammengebastelt.

Danke für deine schnelle Antwort. Ja so wie du das ca. hast, würde mir das auch sehr gefallen. Dh. du hast mehrere Floorplans, die du dann über Weblinks miteinandern verbindest ?
Wie hast du das gemacht ? ^^

Und das was ich da sehe sind alles readingGroups ?

mfg Assassine1996

[Motivierte linke Hände]

Ja, mehrere Floorplans, die Weblinks (oben die Flächen Überblick, Wetter, Fenster, Heizung wie auch die runden Knöpfe oben an den Heizungsübersichten, die für jedes Stockwerk einmal auf einen tatsächlichen Floorplan (Icon jeweils rechts oben) bzw. auf Charts für das jeweilige Stockwerk (icon jeweils links oben) verweisen.

Wie das geht: Naja, weblinks anlegen halt  Bild malen, wie es aussehen soll, und dann über Weblink das Bild anzeigen und mit einem Link hinterlegen, der auf den passenden nächsten Floorplan zeigt.

Code Auswählen Erweitern

Internals:
   DEF        htmlCode <a href="/fhem/floorplan/fp_Grundriss_EG"><img src="/fhem/images/default/wetter/Grundriss.svg" height="40" width="40" title="Darstellung Grundriss EG"></a>
   LINK       <a href="/fhem/floorplan/fp_Grundriss_EG"><img src="/fhem/images/default/wetter/Grundriss.svg" height="40" width="40" title="Darstellung Grundriss EG"></a>
   NAME       wl_Button_EG
   NR         531
   STATE      initialized
   TYPE       weblink
   WLTYPE     htmlCode
Attributes:
   fp_fp_Fenster 111,780,1,
   fp_fp_Heizung 111,780,1,
   fp_fp_SVG_EG 623,583,1,,
   room       Cfg_Floorplan

Wird bei Dir so nicht funktionieren, weil Du das Grundriss-SVG vmtl. nicht hast. Aber vom Konzept her geht es so.

Und ja, die Heizkörperübersichten sind alles readingsGroups.

Hast Du schonmal auf die Wiki-Seite zu den readingsGroups geschaut? Da gibt's ja noch wesentlich mehr Möglichkeiten und auch "hübschere" Groups dort.

[Assassine1996]

Ja, mehrere Floorplans, die Weblinks (oben die Flächen Überblick, Wetter, Fenster, Heizung wie auch die runden Knöpfe oben an den Heizungsübersichten, die für jedes Stockwerk einmal auf einen tatsächlichen Floorplan (Icon jeweils rechts oben) bzw. auf Charts für das jeweilige Stockwerk (icon jeweils links oben) verweisen.

Wie das geht: Naja, weblinks anlegen halt  Bild malen, wie es aussehen soll, und dann über Weblink das Bild anzeigen und mit einem Link hinterlegen, der auf den passenden nächsten Floorplan zeigt.

Code Auswählen Erweitern

Internals:
   DEF        htmlCode <a href="/fhem/floorplan/fp_Grundriss_EG"><img src="/fhem/images/default/wetter/Grundriss.svg" height="40" width="40" title="Darstellung Grundriss EG"></a>
   LINK       <a href="/fhem/floorplan/fp_Grundriss_EG"><img src="/fhem/images/default/wetter/Grundriss.svg" height="40" width="40" title="Darstellung Grundriss EG"></a>
   NAME       wl_Button_EG
   NR         531
   STATE      initialized
   TYPE       weblink
   WLTYPE     htmlCode
Attributes:
   fp_fp_Fenster 111,780,1,
   fp_fp_Heizung 111,780,1,
   fp_fp_SVG_EG 623,583,1,,
   room       Cfg_Floorplan

Wird bei Dir so nicht funktionieren, weil Du das Grundriss-SVG vmtl. nicht hast. Aber vom Konzept her geht es so.

Und ja, die Heizkörperübersichten sind alles readingsGroups.

Hast Du schonmal auf die Wiki-Seite zu den readingsGroups geschaut? Da gibt's ja noch wesentlich mehr Möglichkeiten und auch "hübschere" Groups dort.

Ok danke ich werde das mal versuchen
Kann ja nicht so schwer sein.

Sonst spame ich halt wieder das Forum voll, wenn ich nicht weiter weiß

Danke nochmal an alle

mfg Assassine1996