New FHEM Tablet UI

[setstate]

Hallo!

Gibt es eigentlich irgendeine Möglichkeit, dass ein "push"-Button auch je nach State eingefärbt ist?

Explizit geht es mir um:

Code Auswählen Erweitern


<div class="cell">
    <div class="doublebox-h">
        <div data-type="push" data-device="aJs_Schlafzimmer"
             data-icon="fa-angle-up" data-background-icon="fa-square-o"
             data-set="up">
        </div>
        <div data-type="push" data-device="aJs_Schlafzimmer"
             data-icon="fa-angle-down" data-background-icon="fa-square-o"
             data-set="down">
        </div>
    </div>
</div>


--> Wenn die Jalousie ganz unten ist, soll der Button "runter" sich einfärben und umgekehrt.

Ist das möglich?

Danke und Grüße
Phil

Hallo Phil,

Push hat die Update-Funktion nicht implementiert, kann also nicht auf Änderungen reagieren. Man müsste das mit Switch oder Button probieren. Ähnlich wie hier http://forum.fhem.de/index.php/topic,34233.msg330879/topicseen.html#msg330879

[setstate]

@microby:

hilft das weiter:

Code Auswählen Erweitern

<div data-type="thermostat"
                       data-device="wz_WandThermostat"
                       data-get="desiredTemperature"
                       data-set="desiredTemperature"
                       data-temp="temperature"
                       data-valve="valveposition"
                       data-mode="mode"
                       data-off="off"
                       data-boost="boost"
                       data-step="0.5"
                       data-min="10"
                       data-max="25"
                       data-angleoffset="0"
                       data-width="300"
                       data-height="300"
                       class="cell top-space-2x">
                  </div>


Das Thermostat liest den Wert unter data-mode="mode" aus, wenn gleich 'auto' dann wird "set wz_WandThermostat desiredTemperature auto <value>" gesendet. Bei allen anderen Varianten "set wz_WandThermostat desiredTemperature <value>"

Mit dem abgehangenen geänderten Thermostat

[mircoby]

@microby:

hilft das weiter:

Code Auswählen Erweitern

<div data-type="thermostat"
                       data-device="wz_WandThermostat"
                       data-get="desiredTemperature"
                       data-set="desiredTemperature"
                       data-temp="temperature"
                       data-valve="valveposition"
                       data-mode="mode"
                       data-off="off"
                       data-boost="boost"
                       data-step="0.5"
                       data-min="10"
                       data-max="25"
                       data-angleoffset="0"
                       data-width="300"
                       data-height="300"
                       class="cell top-space-2x">
                  </div>


Das Thermostat liest den Wert unter data-mode="mode" aus, wenn gleich 'auto' dann wird "set wz_WandThermostat desiredTemperature auto <value>" gesendet. Bei allen anderen Varianten "set wz_WandThermostat desiredTemperature <value>"

Mit dem abgehangenen geänderten Thermostat

Hey super vielen Dank! Bin begeistert von Deiner Unterstützung!

Mit dem neuen widget_thermostat.js kann jetzt die Temperatur korrekt verstellt werden ohne Beeinflussung der Betriebsart, sehr schön!

Eine Einschränkung gibt es allerdings noch, die mit einem Reload zu tun hat.

Folgendes Beispiel:
- Max! System steht auf automatischer Betriebsart
- popup wird geöffnet Temperatureinstellung ohne mode Änderung möglich, alles ok.
- Ändert man jetzt den mode auf manuell über den Switch Button wird dieser an das Thermostat gesendet, soweit ist auch noch alles ok.
- Jetzt darf jedoch keine Änderung der Temperatur am Regler vorgenommen werden, da dieser noch den Zustand auto hat und somit wieder in den automodus zurück schalten würde.
- damit der Zustand korrekt übernommen wird, muss nach dem Umschalten des Modus zunächst einen Seiten reload gemacht werden, dann klappt dies.

Siehst Du eine Möglichkeit dies im Hintergrund laufen zu lassen? Oder evtl. beim Anklicken des Mode Switches das popup automatisch zu schließen und ein reload anzustoßen um unerwartetes Verhalten zu vermeiden?

P.S.: Beim vergleichen der .js konnte ich gleich noch den === Operator kennenlernen... Wieder was gelernt.

[Nobby1805]

Ich habe vor ein paar Tagen die TabletUI Module aktualisiert ...
Seitdem werden von meinen 10 Simplecharts nur noch 2 aktualisiert ... diese beiden basieren auf einem Aussenfühler, die anderen 8 auf einem Thermostaten
Der Thermostat hat im Unterschied zum Aussenfühler ja Channel, kann es daran liegen ?

[setstate]

Ich habe vor ein paar Tagen die TabletUI Module aktualisiert ...
Seitdem werden von meinen 10 Simplecharts nur noch 2 aktualisiert ... diese beiden basieren auf einem Aussenfühler, die anderen 8 auf einem Thermostaten
Der Thermostat hat im Unterschied zum Aussenfühler ja Channel, kann es daran liegen ?

data-device hinzufügen, als Trigger des updates

http://forum.fhem.de/index.php/topic,34233.msg330221/topicseen.html#msg330221

[Nobby1805]

Habe ich (natürlich) schon gemacht ...

Code Auswählen Erweitern

           <div data-type="simplechart"
              data-logdevice="FileLog_Aussen"
              data-device="Aussen"
              data-columnspec="4:Aussen.temperature:1:"
              data-minvalue="[20,10,5,0]"
              data-maxvalue="[20,30,34]"
              data-yticks="4"
              data-xticks="720"
              data-daysago="1"
              data-caption="">   </div>
...
         <div data-type="simplechart"
              data-logdevice="FileLog_Innen_Thermostat"
              data-device="Innen4"
              data-columnspec="4:Innen4.Weather.temperature:1:"
              data-minvalue= "18""
              data-maxvalue="30"
              data-yticks="2"
              data-xticks="720"
              data-daysago="1"
              data-caption="">   </div>


[ChristianR]

Guten Abend,

habe ebenfalls zuletzt die FTUI mit dem aktuellen Update versorgt und eben festgestellt, dass meine Spritpreise nicht mehr angezeigt werden.
Die normalen Readings in FHEM passen soweit und aktualisieren sich fleißig. Aber die Übertragung zur Tablet UI leider nicht mehr.
Habe danach ein bischen mit den Attributen beim Device TS_SB experimentiert, aber dabei das TS_Ebmeyer im Originalzustand belassen, zum Vergleich.

Vielleicht hat von Euch jemand eine Idee woran es haken kann...
Vielen Dank vorweg!

Tablet UI

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="1" data-sizey="2">
        <header>SPRITPREISE</header>
        <div data-type="image" data-url="./images/sb.png" data-size="50%"></div>
<div type="label" data-device="TS_SB" data-get="STATE" class="inline"></div>
        <div data-type="label" class="cell" >Diesel</div>
        <div data-type="image" data-url="./images/feha.png" data-size="50%"></div>
<div type="label" device="TS_Ebmeyer" data-get="Diesel" data-unit="€" style="font-size:x-large;color:#aa6900;"></div>
        <div data-type="label" class="cell" >Diesel</div>
</li>

FHEM
NAME TS_SB
STATE Liter_Diesel: 1.27

Readings
Diesel 1.27 2015-10-11 00:36:58
SuperE5 1.47 2015-10-11 00:36:58

[Gunther]

Ich bin gerade dabei erstmal die Grundeinstellungen zu finden um die Tablet UI auf meinen Tabletts (800x480) angezeigt zu bekommen.

Siehr soweit gut aus, außer, dass ich unten auf dem Display des Tabletts mit dem Browser WebViewControl den Text der unteren Buttons nicht angezeigt bekomme.

Die folgenden Einstellungen habe ich derzeit:

Code Auswählen Erweitern

<meta name="widget_base_width" content="144">
<meta name="widget_base_height" content="120">

Vermutlich brauche ich widget_base_height in ca. "105". Dann ist aber das Bild abgeschnitten - auch in einem großen Browser.
Wie kann ich die Icons für die Buttons selbst etwas verkleinern? Oder gibt es eine einfachere Möglichkeit?

[setstate]

Da muss man probieren, zwischen Basis-Höhe und Anzahl Zeilen das richtige Verhältniss zu finden.
Ich habe zum Beispiel
   <meta name="widget_base_height" content="71"> und 5 Zeilen

[ChrisK]

Beim Thermostat-Widget wird ja die "desired-temp" in der Mitte groß dargestellt und die "measured-temp" klein in der Skala.
Gibt es eine Möglichkeit, diese beiden Werte in der Anzeige zu tauschen ohne die Funktionalität kaputt zu machen? Ich habe mir das widget angeguckt und ich könnte die Inhalte der Variablen tauschen, ich denke aber, das macht alles andere kaputt.

Hintergrund ist, dass ich die Thermostate von allen Räumen auf einer Seite haben will. Da ist dann die Hauptanzeige der jeweiligen Ist-Temperatur aus meiner Sicht hilfreicher, als x Mal die Anzeige der Soll-Temperatur, die bei den meisten Räumen gleich gesetzt ist. Ist aber natürlich Geschmacksache.

Schön wäre in diesem Zuge auch die Anzeige von einer Nachkommastelle.

[Nobby1805]

data-device hinzufügen, als Trigger des updates

http://forum.fhem.de/index.php/topic,34233.msg330221/topicseen.html#msg330221

Habe ich (natürlich) schon gemacht ...

Code Auswählen Erweitern

           <div data-type="simplechart"
              data-logdevice="FileLog_Aussen"
              data-device="Aussen"
              data-columnspec="4:Aussen.temperature:1:"
              data-minvalue="[20,10,5,0]"
              data-maxvalue="[20,30,34]"
              data-yticks="4"
              data-xticks="720"
              data-daysago="1"
              data-caption="">   </div>
...
         <div data-type="simplechart"
              data-logdevice="FileLog_Innen_Thermostat"
              data-device="Innen4"
              data-columnspec="4:Innen4.Weather.temperature:1:"
              data-minvalue= "18""
              data-maxvalue="30"
              data-yticks="2"
              data-xticks="720"
              data-daysago="1"
              data-caption="">   </div>


Vielleicht hätte ich ergänzen sollen: klappt aber trotzdem nicht

[setstate]

Beim Thermostat-Widget wird ja die "desired-temp" in der Mitte groß dargestellt und die "measured-temp" klein in der Skala.
Gibt es eine Möglichkeit, diese beiden Werte in der Anzeige zu tauschen ohne die Funktionalität kaputt zu machen? Ich habe mir das widget angeguckt und ich könnte die Inhalte der Variablen tauschen, ich denke aber, das macht alles andere kaputt.

Hintergrund ist, dass ich die Thermostate von allen Räumen auf einer Seite haben will. Da ist dann die Hauptanzeige der jeweiligen Ist-Temperatur aus meiner Sicht hilfreicher, als x Mal die Anzeige der Soll-Temperatur, die bei den meisten Räumen gleich gesetzt ist. Ist aber natürlich Geschmacksache.

Schön wäre in diesem Zuge auch die Anzeige von einer Nachkommastelle.

Das geht definitiv nicht. Die Anzeige in der Mitte ist substanzieller Bestandteil des Controls und nicht nur eine Anzeige. Man müsste für die Anzeige der Ist-Temps mit seperaten Labels arbeiten.

data-step=".5" ermöglicht Nachkommaeinstellungen

[ChrisK]

Das geht definitiv nicht. Die Anzeige in der Mitte ist substanzieller Bestandteil des Controls und nicht nur eine Anzeige. Man müsste für die Anzeige der Ist-Temps mit seperaten Labels arbeiten.

Alles klar.
So habe ich das auch aus dem Widget-Code raus gelesen, wollte nur sicher gehen, dass ich nichts übersehen habe.
Bei der Masse an Funktionalitäten, die im Tablet UI eingebaut sind, übersieht man sehr leicht etwas

Da muss ich mal nachdenken, ob ich mir ein angepasstes Widget erstelle (also Variablen tauschen und das Widget readonly machen) oder zusätzlich noch separate Labes verwende. Die Anzeige mit der Skala finde ich super!

data-step=".5" ermöglicht Nachkommaeinstellungen

Alles klar, das hilft, danke!

[Stril]

Hallo!

Es ist nur eine Kleinigkeit, aber TabletUI öffnet sich bei mir nur, wenn ich die Unterseite angebe:

http://server/fhem/tablet/index.html -> klappt
http://server/fhem/tablet/ -> klappt nicht - leere Seite

Gibt es hier irgendeinen Trick, dass er standardmäßig die index.html startet?

Danke und Gruß
Phil

[Gunther]

Da muss man probieren, zwischen Basis-Höhe und Anzahl Zeilen das richtige Verhältniss zu finden.
Ich habe zum Beispiel
   <meta name="widget_base_height" content="71"> und 5 Zeilen

Danke für Deine schnelle Antwort.
Ich hänge mal einen Screenshot an. Vielleicht wird damit mein Problem deutlich.

Wenn ich unter eine gewisse Höhe gehe, sind die Inhalte der einzelnen Zellen zu groß. Zu sehen z. B. an den Beschriftungen der Icons in der obersten Zeile (z. B. Unwetter) und in der untersten Zeile, wo der Beschreibungstext der Icons komplett abgeschnitte wird.

Mir ist jetzt nicht klar, wie ich hier ansetze um zu einem Design zu kommen, das bei mir auf das Tablett passt und trotzdem 7 Spalten und 5 Zeilen im Raster hat. Wie Ihr merkt, bin ich bzgl. HTML und CSS nicht ganz vorne dabei...