New FHEM Tablet UI

[mc-hollin]

https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_weather.js hat jetzt das neue Attribut data-image-path mit dem der Pfad angepasst werden kann. Bitte Feedback ob's funktioniert, dann schieb ich's ins Hauptrepository.

Man bist du schnell. Hab es gerade runtergeladen.
Kann die neue Funktionalität aber erst heute abend testen.
Hier habe ich nur eine Kopie der UI zum Testen aber keine Anbindung an das FHEM und somit keine Werte.
Das Widget läuft ohne die Werte schon mal fehlerfrei.

[mw_fhem]

Ich möchte die UV-Index-Werte von Proplanta mit dem Widget "label" mit verschieden Farben darstellen ("data-limits" und "data-colors"). Aus der Doku geht leider nicht hervor, wie diese Limits zu verstehen sind.
Beispiel:

Code Auswählen Erweitern

data-limits="[4, 8, 15, 30]"
data-colors='["#66FF33", "#FFFF00", "#993399", "FF6600"]
Bedeutet das, dass die Farben bis einschließlich ... oder größer als ... oder größer gleich ... verwendet werden?

[setstate]

Wenn größer als 4 dann der erste Farbwert, sonst der default. Deshalb habe ich als ersten Wert -73 damit es immer mit blauen Temperaturen los geht.
Ich überarbeite das Thema aber gerade. Man kann dann alternativ auch RegEx benutzen, wer das lieber mag.

[mw_fhem]

Wenn größer als 4 dann der erste Farbwert, sonst der default. Deshalb habe ich als ersten Wert -73 damit es immer mit blauen Temperaturen los geht.
Ich überarbeite das Thema aber gerade. Man kann dann alternativ auch RegEx benutzen, wer das lieber mag.

Vielen Dank! 

[mc-hollin]

https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_weather.js hat jetzt das neue Attribut data-image-path mit dem der Pfad angepasst werden kann. Bitte Feedback ob's funktioniert, dann schieb ich's ins Hauptrepository.

Ich hab es auf den RasPi geschickt und die Bilder aus dem Verzeichnis tablet/images werden angezeigt
Super. Danke.

[Mitch]

Hallo Zusammen,

habe gerade von der ersten Version auf die jetzige upgedatet.
Dadurch musste ich meine index.html neu aufbauen.
Nun geht wieder alles grundsätzlich.

Mein Problem, es werden nicht die aktuellen STATEs eingelesen.

Wenn ich data-get-on/off richtig verstanden habe, liest das UI den state, oder was ich eben angegeben habe aus.
Leider zeigt mir nichts den aktuellen Status an, erst wenn ein Event kommt.

Das ist etwas blöd, weil ich ein paar Schalter habe, die nicht dauernd geschalten werden.
Klar, ich kann jetzt einmal schalten, aber es ist ja auch so, dass nach einem FHEM Neustart, oder Browserneustart/reload am Tablet auch wieder nichts angezeigt wird.

Mache ich da etwas falsch?

Hier mal ein Beispiel aus meiner index:

Code Auswählen Erweitern

<header>HOMESTATUS</header>
        <div class="centered container">
           <div class="left">
              <div data-type="switch" data-device="Markus.Homestatus" data-get-on="Zuhause" data-get-off="Unterwegs" data-set-on="Zuhause" data-set-off="Unterwegs" data-icon="fa-user" class="cell readonly "></div>
              <div data-type="label" class="cell">Markus</div>
           </div>


oder

Code Auswählen Erweitern

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
        <header>HEIZUNG</header>
           <div class="center">
             <div data-type="switch" data-device="HCAutomatik" data-get="STATE" data-set-on="on" data-set-off="off" data-icon="oa-sani_heating_automatic" class="cell" ></div>
           </div>
</li>

[nesges]

Mein Problem, es werden nicht die aktuellen STATEs eingelesen.

Grundsätzlich sollten nach spätestens 30s alle Status geladen sein. Hast du die beiden ersten Punkte der FAQ bereits ausgeschlossen?

[Mitch]

Ja, habe ich.

Sollte das UI nicht alles auslesen, wenn ich die Seite aufrufe?

Bei mir kommen Infos erst, wenn wirklich im Eventmonitor das Event kommt.
Nach 30sec kommt da gar nichts.

Ist vor allem bei Fensterkontakten sehr ärgerlich, weil ich Fenster habe, die normalerweise nie geöffnet werden.

EDIT: was mir gerade auch noch auffällt, mit dieser Zeile

Code Auswählen Erweitern

<div type="label" device="CUL_HM_HM_SEC_KEY_123456" class="cell" ></div>
stand immer der aktuelle Status meines Keymatic im UI.
Jetzt habe ich diese Zeile probiert

Code Auswählen Erweitern

<div data-type="label" data-device="CUL_HM_HM_SEC_KEY_123456" data-get="state" class="cell" ></div>
es wird aber gar nichts angezeigt?

EDIT2: hab gerade nochmal die ursprüngliche Zeile probiert und geschalten, jetzt steht es wieder das?
Muss es nicht data-device heißen??

[nesges]

Sollte das UI nicht alles auslesen, wenn ich die Seite aufrufe?

Beim Start wird für jedes Reading eine asynchroner Ajax-Request an Fhem gestellt. D.h. es kann durchaus unterschiedlich lange dauern, bis die Werte im UI angezeigt werden, dass aber gar keine angezeigt werden sollte dabei nicht vorkommen. Zumal die Verbindung zu Fhem offensichtlich Ok ist, da ja longpoll funktioniert. Ich weiss grade nicht, wie dein Fehlerbild aussehen müsste, hier kann setstate wahrscheinlich besser helfen.

Du kannst aber schonmal versuchen in fhem-tablet-ui.js die beiden console.log-Zeilen (356 und 369) einzukommentieren. Danach solltest du in der Javascript-Konsole von Meldungen "erschlagen" werden. Falls nicht, ist das evtl. ein Ansatz.

[Mitch]

Also Verbindung zu fhem ist okay, longpoll geht auch, Schalten kann ich auch.

In den zwei Zeilen finde ich nichts mit console.log
Habe das aber in mehreren anderen Zeilen:
374: console.log('update done (filter:'+filter+')');
379: console.log("set "+device+" "+status);
409: console.log('start longpoll');
448: //console.log('#'+line+'#');
477: //console.log(date + ' / ' + key+' / '+paraname+' / '+val);
479: //console.log(date + ' / ' + key+' / '+paraname+' / '+val);

[rizo]

Hallo,

habe mal ne Frage, ist es möglich den aktuellen Akkustand des verwendeten Tablets ( oder aller verwendeten Tablets/Handys ) anzuzeigen?

Danke euch.

[nesges]

In den zwei Zeilen finde ich nichts mit console.log

Dann ist anscheinend dein Update fehlgeschlagen (vergleiche deine fhem-tablet-ui.js mit https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/fhem-tablet-ui.js).

[nesges]

habe mal ne Frage, ist es möglich den aktuellen Akkustand des verwendeten Tablets ( oder aller verwendeten Tablets/Handys ) anzuzeigen?

FTUI kann jedes Reading anzeigen, das in Fhem zur Verfügung steht. Wenn also "etwas" auf deinem Tablet den Akkustand als Reading an Fhem zurück meldet (macht WVC das evtl?), kannst du den Wert auch auslesen und anzeigen.

[rizo]

Klasse danke für die schnelle Antwort.

Nur weiß ich nicht wie es genau geht.

Also das Abfragen schon, nur hält WVC den Wert nur aktuell wenn ich als url beispiel: 192.168.10.1:8083/fhem nutze. Ich möchte aber gerne
192.168.10.1:8083/fhem/tablet nutzen.

Ne Idee?

[setstate]

Hallo setstate,
es geht eigentlich nur darum den Öffnungstand von Rollos/Toren mittels den 10 zugehörigen Icons darzustellen.
Diese sind in 10er schritten vorhanden  hier bei Garage z.B. oa-fts_garage_door_100 == 100% oa-fts_garage_door_90 == 90% usw. Da aber pct auch z.B. 99,89 usw sein könnte, gäbe es kein zugehöriges Icon. Daher wollte ich bei z.B. [9][0-9] das Icon oa-fts_garage_door_90 zeigen usw.

Update: das Symbol Widget kann jetzt auch Regex bei der Nutzung von Icon Listen verstehen.
Das ganze ist ziemlich generisch nutzbar.
  1. Wie vorher schon: feste Status
[/list]

Code Auswählen Erweitern


<div data-type="symbol" data-device="dummy1"
  data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
  data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
  data-get-on='["Wert1","Wert2","Wert3"]' >
</div>


  2. Wie beim Label Widgets: Limits

Code Auswählen Erweitern


   <div data-type="symbol" data-device="dummy1"
        data-icons='["oa-fts_garage","oa-fts_garage_door_50","oa-fts_garage_door_100"]'
        data-get-on='["0","50","100"]'
        data-on-colors='["#dd3366","#ffcc00","#55aa44"]'>
  </div>

Bei größer-gleich 50 wird das zweite Icon angezeigt, ab 100 das letzte ...

   3. Regex bei data-got-on Feldern, wie auch schon beim einfachen data-get-on

Code Auswählen Erweitern

    <div data-type="symbol" data-device="dummy1"
         data-icons='["oa-fts_garage","oa-fts_garage_door_50","oa-fts_garage_door_100"]'
         data-get-on='["^[12]*[0-9]$","[3456][0-9]","([789][0-9]|100)"]'
         data-on-colors='["#dd3366","#ffcc00","#55aa44"]'>
   </div>

0-29 das erste Symbol, 30-69 das zweite und 70-100 das dritte

Beim Label Widget kann man jetzt auch diese Regex fürs data-limit einsetzen. Wenn die Angaben nur numerisch sind, wird nur mit >= ausgewertet.