New FHEM Tablet UI

[bjoernbo]

Vielleicht können wir das Interface zu FHEM etwas flexibler machen. Je nach Config kann man jeder seine bevorzugte Connection einstellen: longpoll vs. sockets, json2 vs. list

ggf. eine config.Datei in der alles nur einmal angeben wird. longpoll, debug, etc. In den jeweiligen HTML-Seiten kommt dann ein Verweis auf diese eine Datei wo die Daten dann ausgelesen werden.

[setstate]

Soweit steht bei mir alles, jedoch habe ich in einem Raum zwei MiLight, diese werden immer untereinandere im Raum angezeigt, wie bekomme ich diese Nebeneinander?

Nur schnell mal aus der readme kopiert, vielleicht findest du dann gleich die richtige Stelle bei dir:

**Example** for how to show two labels in one line.
<div class="">
   <div type="label" device="OnSunrise" class="inline"></div>bis
   <div type="label" device="OnSunset" class="inline"></div>
</div>

[setstate]

Guten Abend,

gibt es beim widget symbol ein Problem bei den Farben, oder mache ich einfach nur etwas falsch.

Code Auswählen Erweitern


data-get-on='["incoming","incoming_noconnect","outgoing","outgoing_noconnect","AB"]'
data-icons='["fa-arrow-circle-left","fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-right","fa-microphone"]'
data-on-colors='["#aa6900","#505050","#aa6900","#505050","#aa6900"]'


Es werden bei mir trotzdem alle Symbole in einer Farbe angezeigt, egal was ich mache.

Gemäß der Beschreibung im Wiki sollte diese Angabe allerdings korrekt sein.

Hallo uniqueck,
du machst nix falsch. Ich glaube hier gibt es noch Optimierung-Potential, ob RegEx angewendet wird oder nur String-Vergleich. Durch die gleichen Wort-Anteile ein zwei Werten, passiert hier unerwartetes. Es schlägt der erste Match schon zu.
Vertausche mal die Reihenfolge, erst die speziellen, dann die allgemeinen Werte:

Code Auswählen Erweitern


data-get-on='["incoming_noconnect","incoming","outgoing_noconnect","outgoing","AB"]'


Die Farben dann entsprechend mit tauschen.

[rretsiem]

ggf. eine config.Datei in der alles nur einmal angeben wird. longpoll, debug, etc. In den jeweiligen HTML-Seiten kommt dann ein Verweis auf diese eine Datei wo die Daten dann ausgelesen werden.

Das würde aber einen zusätzlichen HTTP requests bedeuten für den Browser. Wir reden hier zwar meist von lokalen Requests aber die sind trotzdem nicht notwendig.
Die Index.html ist dafür eigentlich schon gut geeignet, weil man dann auch flexibel für versch. Seiten Konfigurationen verwalten kann.

[Haecksler]

Hallo zusammen,
habe gestern versucht mit dem switch widget ein "3 state" Schalter umzusetzen, ähnlich wie es mit dem symbole widget funktioniert. Leider ohne Erfolg.
Kann mit bitte jemand auf die Sprünge helfen, oder funktioniert das nicht?

Danke!

LG Haecksler

[Risiko]

Hallo setstate

vielen vielen Dank für die tolle GUI und die viele Arbeit.

Fange gerade an mich damit zu beschäftigen.
Meiner Meinung nach bin ich beim weather-widget im Zusammenhang mit PROPLANTA und den kleinklimamap-Icons auf einen Bug gestoßen.

"wolkig" sollte eigentlich auf "mostlycloudy.png" gemappt werden. Durch die Übersetzungsmap kommt aber "cloudy" und somit "cloudy.png" heraus.
Es kann bei PROPLANTA "wolkig" und "stark bewoelkt" nicht unterschieden werden.

Könnte man nicht das verwendete Modul von FHEM abfragen oder zumindest im Widget angeben, damit die "richtige" Map verwendet wird.

Risiko.

[nesges]

"wolkig" sollte eigentlich auf "mostlycloudy.png" gemappt werden. Durch die Übersetzungsmap kommt aber "cloudy" und somit "cloudy.png" heraus.
Es kann bei PROPLANTA "wolkig" und "stark bewoelkt" nicht unterschieden werden.

Stimmt, danke für den Hinweis. Ich benutze Proplanta nur am Rande, hier fehlen mit Sicherheit noch jede Menge Wetterbezeichnungen (grade im Moment hab ich "unterschiedlich bewoelkt, vereinzelt Schauer und Gewitter", das ist auch noch nicht drin). Wenn jemand ernsthaft Proplanta einsetzen möchte, brauche ich dazu Input über die Readings, die das Modul ausgibt. Den Fehler mit der falschen Übersetzung kann ich dagegen leicht fixen, denke ich. Proplanta liefert mW nur Deutsch, muss nicht übersetzt werden und die Readingsbezeichnung fc#_weatherDay ist (bisher) eindeutig.

Wegen der fehlenden Readings: Proplanta kennt anscheinend 14 verschiedene Icons, nur für die ersten 8 habe ich die korrekte Zuordnung, zwei weitere nicht zugeordnete Wetterbezeichnungen sind bekannt. Diese Tabelle müsste vervollständigt werden, damit Proplanta wirklich brauchbar wird:

Code Auswählen Erweitern

http://www.proplanta.de/wetterdaten/images/symbole/t1.gif   sonnig         
http://www.proplanta.de/wetterdaten/images/symbole/t2.gif   heiter         
http://www.proplanta.de/wetterdaten/images/symbole/t3.gif   wolkig         
http://www.proplanta.de/wetterdaten/images/symbole/t4.gif   stark bewoelkt 
http://www.proplanta.de/wetterdaten/images/symbole/n5.gif   bedeckt         
http://www.proplanta.de/wetterdaten/images/symbole/t6.gif   Regenschauer   
http://www.proplanta.de/wetterdaten/images/symbole/t7.gif   Regen           
http://www.proplanta.de/wetterdaten/images/symbole/t8.gif   unterschiedlich bewoelkt, vereinzelt Schauer und Gewitter
http://www.proplanta.de/wetterdaten/images/symbole/t9.gif
http://www.proplanta.de/wetterdaten/images/symbole/t10.gif
http://www.proplanta.de/wetterdaten/images/symbole/t11.gif
http://www.proplanta.de/wetterdaten/images/symbole/t12.gif
http://www.proplanta.de/wetterdaten/images/symbole/t13.gif
http://www.proplanta.de/wetterdaten/images/symbole/t14.gif
                                                            Schnee
                                                            Schneeregen

[nesges]

habe gestern versucht mit dem switch widget ein "3 state" Schalter umzusetzen, ähnlich wie es mit dem symbole widget funktioniert. Leider ohne Erfolg.
Kann mit bitte jemand auf die Sprünge helfen, oder funktioniert das nicht?

Was genau meinst du damit? Grundsätzlich funktioniert die Konfiguration mehrerer Status bei den Symbol, Switch und Button-Widgets gleich. Zum Beispiel:

Code Auswählen Erweitern

<div data-type="switch"
            data-device="TEST"
            data-on-colors='["red","blue","green"]'
            data-get-on='["1","2","3"]'
            data-icons='["fa-bolt","fa-power-off","fa-diamond"]'
        ></div>

[nesges]

Soweit steht bei mir alles, jedoch habe ich in einem Raum zwei MiLight, diese werden immer untereinandere im Raum angezeigt, wie bekomme ich diese Nebeneinander?

Das geht per CSS. Bei den vordefinierten Klassen dürfte "inline" das sein, das du suchst. Siehe https://github.com/knowthelist/fhem-tablet-ui#css-class-description

[uniqueck]

Hallo uniqueck,
du machst nix falsch. Ich glaube hier gibt es noch Optimierung-Potential, ob RegEx angewendet wird oder nur String-Vergleich. Durch die gleichen Wort-Anteile ein zwei Werten, passiert hier unerwartetes. Es schlägt der erste Match schon zu.
Vertausche mal die Reihenfolge, erst die speziellen, dann die allgemeinen Werte:

Code Auswählen Erweitern


data-get-on='["incoming_noconnect","incoming","outgoing_noconnect","outgoing","AB"]'


Die Farben dann entsprechend mit tauschen.

Guten Abend,

natürlich da hätte ich ja auch selber drauf kommen können.
Aber vielen Dank für den Hinweis, ich denke das man hiermit leben kann.

Vielen Dank vor allem für das geniale Frontend, weiter so

[tomster]

Servus zusammen!

Ich möchte gerne einen Abfallkalender in's UI integrieren und stehe nun vor der Tatsache, dass bei uns der "Gelbe Sack" und der Papiermüll am gleichen Tag abgeholt werden. Meine Versuche einem Dummy-Status 2 Icons zuzuordnen scheitern bislang allerdings kläglich...

Code Auswählen Erweitern


<div class="inline wider">
                <div data-type="label" class="">Abfallkalender</div>
                <div data-type="symbol" data-device="ui_abfallkalender" data-icons='["trashcan_ico","trashcan_ico","trashcan_ico","bag","trashcan_ico";"bag"]' data-get-on='["Papier","Restmuell","Biomuell","GelberSack","PapGeS"]' data-on-colors='["#01A3F5","#aa6900","#82550C","#FFFF00","#FFFF00"]' class="narrow small"></div>
        </div>

Hat jemand eine Idee oder ist das gar nicht vorgesehen?

[nesges]

Das ist kein Problem (wenn ich dich richtig verstehe), aber dein Code wirft Fragen auf:

Ist trashcan_ico selbst definiert? Gibt's so im Standard nämlich nicht.
Gleiches für "bag".
Das Semikolon im data-icons Array ist falsch.

[Risiko]

Wegen der fehlenden Readings: Proplanta kennt anscheinend 14 verschiedene Icons, nur für die ersten 8 habe ich die korrekte Zuordnung, zwei weitere nicht zugeordnete Wetterbezeichnungen sind bekannt.

Denke es sind sogar 28 (14 Tag t1-t14 und 14 Nacht n1-n14).
Im Anhang mein Vorschlag.

Würdest du für das Mapping auf die Icon-Readings umstellen wollen (z.B. fc0_weatherDay --> fc0_weatherDayIcon)?

Alternativ könnte man auch die Proplanta-Icons direkt verwenden ( data-imageset="proplanta")?

Risiko.

[tomster]

Das ist kein Problem (wenn ich dich richtig verstehe), aber dein Code wirft Fragen auf:

Ist trashcan_ico selbst definiert? Gibt's so im Standard nämlich nicht.
Gleiches für "bag".
Das Semikolon im data-icons Array ist falsch.

Das trashcan_ico ist ein selbsterstelltes Icon und natürlich definiert. bag gibt's in den fhem-svgs (auch wenn es wohl als fs-bag eingebunden werden muss). Das Semikolon war nur als Beispiel gedacht. Ich hab auch schon & ? | oder was mir auch immer eingefallen ist probiert. Hätt ich vielleicht in obigem Posting dazuschreiben sollen. Muss mich da halt trial'n'error-mäßig heranarbeiten, weil ich keine dieser Sprachen wirklich spreche...
Jedoch stimmt mich Dein "Das ist kein Problem" tendenziell eher freudig, denn zu gehen scheint es dann ja wohl irgendwie.
Auf Deutsch gesagt möchte ich, dass beim Status "PapGes" 2 Icons nebeneinenader angezeigt werden.

[Risiko]

@nesges
Hier mal eine Version für Proplanta.

Vielleicht kannst du was übernehmen.

Risiki