Hallo Gemeinde,
ich versuche grade eine "Wife"-Kompatible GUI zuzsammenzuzimmern, die auf Tablets dargestellt werden soll, welche taktisch geschickt im Haus verteilt werden. Die Standardelemente für Floorplan und TabUI finde ich nicht so richtig berauschend, also will ich was komplett selbstgezimmertes basteln.
Der grundsätzliche Screen, an dem ich das ausprobieren möchte, ist eine simple Temperatursteuerung. Für verschiedene Räume wird die Ist- und Solltemperatur anzeigt, sowie je Raum einige Buttons für verschiedene Heizprogramme. (Screenshot, wie es ausshen soll anbei)
Das sind in der Regel nur zwei Buttons: "auto" (also alle individuellen Einstellungen zurücksetzen) und "wärmer" (raumtemperatur um 2 Grad erhöhen). EInzelne Räume haben noch weitere Programme. Im Badezimmer gibt es zB das "Kaperfahrtprogramm" (Badezeit fürs Kind, also voll aufdehen. Wenn ein Fenster geöffnet wird wieder in automatik zurücksprinmgen). Die Funktionen dafür habe ich bereits alle gebaut und in der normalen FHEM Gui funzt das auch super.
Meine Idee um eine etwas individuellere Optik reinzubringen ist wie folgt:
1) Floorplan mit eigenem externen Stylesheet, Hintergrund, alles FHEM-Typische ausblenden
2) Eine Perl-Funktion, die den HTML Code für die Seite, bzw. den Seitenbereich generiert und diese in den State eines Dummys schreibt
3) der Dummy, der von der oben genannten Funktion befüllt wird
4) ein Notify, welches bei Änderung der Ist- oder Soll Temperatur die oben genannte Funktion aufruft
5) Die Buttons werden durch simple Links realisiert, welche eine cmd-URL aufrufen und als Target einen versteckten IFrame nutzen. So wird die Seite im Browser beim Klicken nicht gewechselt.
6) ein weiter Dummy, der im State den html-Code für einen IFrame beinhaltet[/li]
Grundsätzlich scheint es zu funktionieren. Sowohl das aktualisiern des Dummies funktioniert, als auch die Schalter.
Nun meine Frage:
a) wie ihr am Screen sehen könnt, habe ich mich CSS Seitig etwas ausgetobt. Die Schriftart ist zB ein eingebetteter Google Font. Nun passiert es aber bei jeder Aktualisierung des Dummies, dass offenbar das externe Style-Sheet ignoriert wird. Reloaded man die Seite (zB per F5) ist alles wieder gut, bis zum nächsten Notify->Perl->Dummystate-Change. Irgendwelche Ideen, wie man das in den Griff bekommt?
b) Irgendwie (und aufgrund des obengenannten Fehlers) habe ich den Eindruck, dass ich hier durch die Brust ins Auge operiere. Dieses Konstrukt aus "Notfy ruft Perl auf, das den State eines Dummies mit HTML befüllt" fühlt sich etwas ... sagen wir mal verrucht an.
Im Grunde will ich ja nur auf einer individuellen HTML Seite den Wert eines devices anzeigen und das Ganze ohne Seitenreload aktualisieren. Hat jemand vieleicht eine elegantere Idee dafür?
Danke für eufe Hilfe.
Pano
OK, habs gefunden, ist etwas krude. Wird das generierte html beim Longpoll in ein <pre>...</pre> verpackz. Entsprechend müssen die Styles im caa das berücksichtigen.
Das verschieben wiederum hing mit umbrüchen im HTML COde zusammen. Die Inhalte der Tabelle stehen tatsächlich in einer <table>. Um es leserlicher zu machen, stand zwischen <td> und Content ein Zeilenumbruch. Die Lösung war das komplette <tr><td>...</td><td>...</td></tr> Konstrukt ohne Zeilenümbrüche zu hinterlegen. Dämlich, aber wenigstens in allen getesteten Browsern (Edge/Chrome/Andoid/Safari) konsequent fehlerführend.