New FHEM Tablet UI

[mc-hollin]

Ich hätte mal eine Frage an die Widget-Programmierer.

Wäre es möglich die Widgets zu erweitern, damit man auch einzelne widgets initialisieren kann?
Zur Zeit werden doch beim Init eines Widgets alle initialisiert, oder?

Folgender Hintergrund:
Ich habe Templates die auf jeder Seite angezeigt werden. Diese sollen aber nicht bei jedem Seitenwechsel neu initialisiert werden.
Der Aufbau und die Seitenwechsel funktionieren soweit schon.
Nur die reine Initialisierung der neu geladenen Templates geht nicht.

Die erneute Gesamtinitialisierung führt zur Zeit dazu, dass meine festen Templates nach einem Seitenwechsel die einegtragene Aktion mehrfach ausführen.

[Stril]

Hallo!

Hat von euch schon jemand versucht, TabletUI mit einer Art Floorplan zu kombinieren?

Ich habe mir überlegt, ob ich das über ein Hintergrundbild per CSS löse für die verschiedenen Stockwerke. Das Raster (das ja doch eher grob ist), ist aber vielleicht ein Problem.

Wie seht ihr das?

Gruß
Phil

[mc-hollin]

Hat von euch schon jemand versucht, TabletUI mit einer Art Floorplan zu kombinieren?
Ich habe mir überlegt, ob ich das über ein Hintergrundbild per CSS löse für die verschiedenen Stockwerke. Das Raster (das ja doch eher grob ist), ist aber vielleicht ein Problem.

Hallo Phil,
ich hab bei mir auch ein Hintergrundbild eingesetzt.
Zusätzlich mache ich die GridsterWidgets(<li class="halbTransparent ">) nach Bedarf transparent oder halbtransparent .

Hier der css Teil:

Code Auswählen Erweitern


body { 
    background-image: url("/fhem/tablet/images/bg_green.jpg");
}
.gridster li header {
    /*background: #BBBBBB;*/
    color: #ffffff;
    font-size: 14px;
}            
.halbTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.5) !important;
}
.transparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0) !important;
}
.transparent  li header{
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0) !important;
}


Alles noch Testphase!

Gruß
Holger

[setstate]

Sieht gut aus! Was so alles geht ... 

[setstate]

Ich hätte da ein Anliegen... Im Beispiel:

Entweder das laden der javascript libs ans ende des bodys (also direkt vor </body>), das wäre die "olschool high-compatibility" version.
Oder jedes mit dem defer attribut versehen: <script type="text/javascript"... defer></script>

Vielen Dank für den Hinweis.
Ich teste es bei mir aus, mache mich schlau darüber und passe die sourcen ggf. an.

setstate Dank on

[Wegwerf]

Hi Leute,
ich habe da irgendwie ein kleines Problem mit dem Popup widget. Setze ich eine fixe Größe z.B. <div data-type="popup" data-height="800px" data-width="800px"> dann wird das Popup richtig mittig positioniert. Wenn ich aber die Größe relativ anlege <div data-type="popup" data-height="80%" data-width="80%"> ist das Popup nach rechts verschoben.

Das passiert beim Firefox(PC) sowie Chrome(Handy/Tablet). Drehe ich das Handy, sodass die Größe neu berechnet werden muss liegt das Popup korrekt in der Mitte. Kann das jemand bestätigen?

Gruß
wegwerf

[Brockmann]

Nachtrag zum Thema Pagetab:

Nachdem keine Rückmeldung zu meinem Post gestern kam, habe ich noch mal den Quelltext befragt und rumprobiert. Mein Workaround ist nun, die background-color pauschal auf 'transparent" zu setzen. Dann habe ich weder beim aktiven noch bei den inaktiven Pagetab-Symbolen einen Kreis. Statt dessen färbe ich das jeweils gewählte Symbol mit data-on-color anders ein, so dass man erkennen kann, welcher Tab gerade gewählt ist. So funktioniert es für mich, sowohl direkt per UI bedient als auch aus FHEM heraus angesteuert.

Ich bleibe aber der Meinung, dass hier ein Problem beim Pagetab-Widget vorliegt, entweder ein logischer Fehler oder ein tatsächlicher Bug. Die Eigenschaften data-on-color und data-on-background-color werden unterschiedlich behandelt:
->data-on-color wird nur verwendet, wenn der entsprechende Pagetab aktiv ist, sonst wird data-off-color verwendet.
->data-on-background-color hingegen wird IMMER verwendet, auch wenn das Pagetab nicht aktiv ist. Das Angeben von data-off-background-color ist somit sinnlos.

Das ganze bezogen auf folgende Definition:

Code Auswählen Erweitern


<html>
<body>
    <div class="cell large">
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-home activate","fa-home","fa-home","fa-home"]'
data-on-color = "#aa6900"
data-on-background-color = 'transparent'
data-url="nexus_1.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-video-camera","fa-video-camera activate","fa-video-camera","fa-video-camera"]'
data-on-color = "#aa6900"
data-on-background-color = 'transparent'
data-url="nexus_2.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-cloud","fa-cloud","fa-cloud activate","fa-cloud"]'
data-on-color = "#aa6900"
data-on-background-color = 'transparent'
data-url="nexus_3.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-hotel","fa-hotel","fa-hotel","fa-hotel activate"]'
data-on-color = "#aa6900"
data-on-background-color = 'transparent'
data-url="nexus_4.html" class="cell">
</div>
    </div>
</body>
</html>


Wenn der Denkfehler bei mir liegt, bin ich für Aufklärung dankbar.

[matzemoerk]

Lässt sich die Benutzeroberfläche eigentlich auch zunächst unabhängig von FHEM entwickeln? In meinem Falle z.B. via MAMP?
Grüße,
Matthias

[NoFaker76]

Hallo.

Erstmal vielen Dank für diese tolle Visualisierung.
Genau deswegen habe ich mir jetzt auch einen RPi 2 für meine Hausautomation zugelegt.

Ich habe den RPi erst am Montag frisch aufgesetzt. Das hat soweit auch sehr gut geklappt.
Jetzt wollte ich das FTUI bei mir ans Laufen kriegen, habe aber ein merkwürdiges Verhalten.

Was habe ich gemacht und was passiert:
1. Ich habe mir alle Dateien gemäß erstem Post mit folgendem Code installiert:

Code Auswählen Erweitern

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

2. Anschließend habe ich, von mir bereits auf einem Windows Rechner erstellte html-Seiten (index, menu, ...), nach /opt/fhem/www/tablet kopiert.

3. Ich habe den Server in FHEM angelegt mittels:

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
Wenn ich nun auf der FHEM Hauptseite (ich glaube es heißt gpm2) auf TABLETUI drücke bekomme ich nur die Meldung:

No HTTPSRV device for /ftui

im Browser angezeigt.

4. Also habe ich das define wieder gelöscht und habe es mit dem zweiten Code probiert:

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui ./www/tablet Tablet-UI
Nun wird der Browser bei Eingabe der Adresse oder betätigen des TABLETUI Buttons in FHEM kurz schwarz (wie der Hintergrund des FTUI) und anschließend sieht das Bild im Browser aus wie auf dem Screenshot.
Erst wenn ich nun in der Adresszeile noch /index.html anfüge baut er die Seite richtig auf.

Das Verhalten habe ich bei Firefox und bei Chrome.

Hat zufällig einer eine Idee, was da schief läuft?

Vielen Dank und Gruß
NoFaker

[viegener]

Hat zufällig einer eine Idee, was da schief läuft?

Vermutung, es ist nachwievor das alte httpsrv-Modul im SVN.

Ich habe in folgendem Beitrag ein HTTPSRV angehängt, dass dieses Problem löst. Der Maintainer von HTTPSRV wird das demnächst auch als normales update verteilen.
http://forum.fhem.de/index.php/topic,34233.msg305941.html#msg305941
Die erste Definition sollte dann funktionieren.

Du findest den Beitrag auch, wenn Du mit der Fehlermeldung in diesem Thread suchst,
Johannes

[NoFaker76]

Das scheint es gewesen zu sein.
Zumindest klappt es jetzt ohne Änderung in der Adresszeile.
Obwohl mir der Bildaufbau deutlich langsamer vorkommt als noch auf dem Windows Rechner.
Aber das ist ja erstmal nicht so schlimm.

Danke erstmal.

Sobald ich mal ein paar Sachen auf die Beine gestellt habe werde ich mein Ergebnis im Demo Thread posten.

[nightstorm99]

Hallo setstate,

wäre es schwer den Homestatus noch um ein 6. State zu erweitern?

Ich nutze dieses für meine Jalousievorgaben und bräuchte dort noch ein weiteres State.


Danke und Gruß
Denny

[skuggy]

Hallo zusammen,

die Arbeit, die hier geleistet wird ist super. Vielen Dank für die Entwicklung des Frontends.

Leider habe ich nicht soviel Ahnung von HTML und css, aber dank Copy und Paste, Wiki und Forum, werde ich es schaffen.

Könntet Ihr mal die Anlage ansehen, so soll die Aufteilung stattfinden, ich würde nämlich gern wissen, ob ich das System verstanden habe.

Ach so, kann man auch 2 unterschiedliche UI´s anlegen und parallel betreiben? Eins für das Tablet und eins für das Smartphone. Die Frage wurde bestimmt schon gestellt, bin erst bei Seite 66 und die Suche hat nichts gefunden. Sorry.

Vielen Dank.

Skuggy

[Brockmann]

Ach so, kann man auch 2 unterschiedliche UI´s anlegen und parallel betreiben? Eins für das Tablet und eins für das Smartphone. Die Frage wurde bestimmt schon gestellt, bin erst bei Seite 66 und die Suche hat nichts gefunden. Sorry.

Du kannst beliebig viele .html-Seiten erstellen und diese dann vom Gerät aus gezielt ansteuern, also beispielsweise anstatt einer index.html eine tablet.html und eine smartphone.html.

[setstate]

Könntet Ihr mal die Anlage ansehen, so soll die Aufteilung stattfinden, ich würde nämlich gern wissen, ob ich das System verstanden habe.

Wenn ein Element eine sizex="2" hat, 'verbraucht' dies auch 2 Columns.
Also Element1 mit data-col="2" und data-sizex="2" belegt column 2 und 3

Damit kann Element2 erst bei data-col="4" positioniert werden.
Das gleiche muss man auch bei Row beachten