New FHEM Tablet UI

[swinni]

@Sash.sc
Ein paar Seiten vorher findest du die Info:
http://forum.fhem.de/index.php/topic,34233.msg339731.html#msg339731

Einfach das entsprechende Verzeichnis löschen und dann dem httpsrv Eintrag in deiner fhem.cfg

Schade eigentlich...Tablet UI läuft bei mir seit Monaten stabil und perfekt und ist so einfach zu individualisieren...

[mircoby]

Hallo,
ich möchte gerne mit einem "switch" ein MAX! Thermostat zwischen Automatik und Manuellem Betrieb umschalten. Grundsätzlich funktioniert dies mit folgenden Kommandos:

Code Auswählen Erweitern


set wz_Wandthermostat desiredTemperature auto
set wz_Wandthermostat desiredTemperature 5

mit folgender Konfiguration wird das Symbol des Switch beim Laden mit dem richtigen Status angezeigt:

Code Auswählen Erweitern


<div data-type="switch"
        data-icon="fa-car"
        data-device="wz_WandThermostat"
        data-cmd="set desiredTemperature"
        data-get="mode"
        data-get-on="auto"
        data-get-off="manual"
        data-set-on="auto"
        data-set-off="5"
        class="cell small">
</div>


Allerdings wird beim Anklicken des Switches folgendes Kommando gesendet:

Code Auswählen Erweitern


set desiredTemperature wz_Wandthermostat auto

<Device> und <command> sind also vertauscht.

Habe zum test mal folgendes gemacht:

Code Auswählen Erweitern


        data-device="desiredTemperature"
        data-cmd="set wz_WandThermostat"


Mir ist bewusst, dass dies nicht korrekt sein kann, allerdings wird mit dieser Konfiguration der korrekte Befehl abgesetzt, jedoch der Symbolstatus falsch wiedergegeben, was klar ist da es kein Device mit dem Namen "desiredTemperature" gibt...

Meine Frage wäre nun, wie ich den Parameter data-cmd beschreiben muss um den gewünschten Befehl absetzen zu können.

Vielen Dank vorab Gruß
Mirko

[mircoby]

Ich gebe mir die Antwort selbst, es kann so einfach sein...

Code Auswählen Erweitern


<div data-type="switch"
       data-icon="fa-car"
       data-device="wz_WandThermostat"
       data-cmd="set"
       data-get="mode"
       data-get-on="auto"
       data-get-off="manual"
       data-set-on="desiredTemperature auto"
       data-set-off="desiredTemperature 5"
       class="cell small">
</div>


[ChrisK]

Da niemand darauf antwortet oder eine Lösung anbieten will  , habe ich das Simplechart-Widget etwas angepasst.
$min und $max kann man jetzt mit in data-caption als Platzhalter einbauen:

Code Auswählen Erweitern

data-caption="min:$min°C max:$max°C"

Sehr schön!

Ich habe mir noch eine $cur eingebaut, um die aktuelle Temperatur mit anzuzeigen:

Code Auswählen Erweitern

data-caption="Schlafzimmer - $cur°C [$min°C-$max°C]"

In der widget_simplechart.js aus dem (ab Zeile 271):

Code Auswählen Erweitern

                caption=caption.replace('$min',Math.min.apply(null, vals))
                                .replace('$max',Math.max.apply(null, vals));

das hier machen:

Code Auswählen Erweitern

                caption=caption.replace('$min',Math.min.apply(null, vals))
                                .replace('$max',Math.max.apply(null, vals))
                                .replace('$cur',vals[vals.length-1])
                                ;

Das war's schon

[Nobby1805]

Doch unter   

OK, dann werde ich auch das Wiki mal überarbeiten

[Deathevn]

Hallo zusammen,

erst einmal vielen Dank für das Tablet UI. Der Ansatz über HTML und CSS gefällt mir persönlich sehr gut und ist für mich sehr zugänglich im Vergleich mit anderen Frontends.

Aktuell habe ich allerdings ein Verständnis-Problem mit simplechart:

Code Auswählen Erweitern

<div data-type="simplechart" data-logdevice="myDBLog" data-logfile="HISTORY" data-columnspec="Thermostat_Wohnzimmer_Clima:measured-temp"></div>

Ich versuche zu meinen Homematic Thermostaten aus der DBLog die gemessene Temperatur darzustellen.
Analog zu einem Vorposter habe ich aus dem "preprocessed input" der SVG-Diagramme folgende Zeile ausgewertet:

Code Auswählen Erweitern

get myDBLog HISTORY INT 2015-10-08_00:00:00 2015-10-09_00:00:01 Thermostat_Wohnzimmer:measured-temp

Weiter unten findet sich noch folgender Eintrag:

Code Auswählen Erweitern

Thermostat_Wohnzimmer:measured-temp:::

aus welchem ich den columnspec laut Commandref geschlossen habe.
Ausprobiert habe ich folgende Varianten:

• Thermostat_Wohnzimmer_Clima:measured-temp
• Thermostat_Wohnzimmer:measured-temp
• Thermostat_Wohnzimmer_Clima:measured-temp::int:

und weitere verschiedene Umbauten des Ausdrucks.

Ergebnis ist immer das Selbe - siehe Screenshot.

Könnt ihr mir hier weiterhelfen?

Viele Grüße
Martin

[ChrisK]

Könnt ihr mir hier weiterhelfen?

Ich habe es mit diesem Attribut hinbekommen:

Code Auswählen Erweitern

data-columnspec="4:meas.*:1:int"
Hab ich von setstates Beitrag hier

[Deathevn]

Hi Chris,

leider führt das auch nicht zum Erfolg.
Sollte der String nicht eigentlich auch nur auf ein LogFile matchen?
Die 4 findet sich ja so gar nicht in der Datenbank wieder.

Viele Grüße
Martin

[ChrisK]

Sollte der String nicht eigentlich auch nur auf ein LogFile matchen?
Die 4 findet sich ja so gar nicht in der Datenbank wieder.

Hi Martin,

sorry, hab das mit der DB komplett überlesen.
Meine Charts gucken alle auf filelogs, kann also nicht wirklich weiterhelfen.
Aber zum Glück bin ich ja nicht der einzige hier

[amunra]

Könnt ihr mir hier weiterhelfen?

Damit sollte es funktionieren (tut es zumindest bei mir):

Code Auswählen Erweitern

<div data-type="simplechart"
data-device="myDBLog"
data-logdevice="myDBLog"
data-logfile="HISTORY"
data-columnspec="Thermostat_Wohnzimmer_Clima:measured-temp"
data-minvalue="0"
data-maxvalue="30">
</div>

[mircoby]

Ich habe ein kleines Problem damit wie ich das reload Widget benutze.
Habe es laut wie laut Bespiel eingefügt:

Code Auswählen Erweitern

<div data-type="reload" data-device="RELOAD" data-get="action" data-reload-on="1" data-reset-to="0"></div>

Wie starte ich jetzt eine Aktualisierung der Seite?

Stehe vor der gleichen Frage, gibt es eine Antwort darauf?

Habe ein dummy RELOAD angelegt, wenn ich dieses manuell mit 0 oder 1 beschreibe tut sich nichts. Lasse ich den teil data-get="action" weg, wird bei RELOAD=1 zyklisch, endlos aktualisiert, bis RELOAD=0 gesetzt wird.

Was ich damit vor habe:
Ich verwende ein Popup für die Temperatur / Betriebsart Einstellung eines MAX! Thermostats.
- Schalte ich die Betriebsart mit einem Switch um, ändert sich sofort das Symbol, leider jedoch nicht das Label welches die Betriebsart anzeigt. (PopUpTempBetriebsartAsynchron.png)
- Um dieses zu aktualisieren muss ich das Popup schließen, einen Page Reload machen und das Popup erneut öffnen. (PopUpTempBetriebsartSynchronNachReload.png)

Meine Idee ist nun das Reload Widget dafür zu verwenden. Passt das oder geht dies Eleganter? Würde mich ebenfalls über Beispielcode freuen wie das umsetzbar wäre.

[setstate]

Warum lässt du das Label nicht auf eine Device + Reading schauen, was den aktuellen Betriebsmode enthält.
Mit Longpoll wird das dann sofort aktualisiert.

[Deathevn]

Damit sollte es funktionieren (tut es zumindest bei mir) [...]

Super, danke!
Mit fehlte das data-device, würde auch meinen, dass ich das auch in den vorherigen Beiträgen nicht gesehen hatte und bin auch davon ausgegangen, dass man es hier nicht benötigt.
Jetzt funktioniert es jedenfalls.

Viele Grüße
Martin

[Gunther]

Ich wollte mir gerade eine Userdemo hier (https://github.com/knowthelist/fhem-tablet-ui) runterladen (bin eingeloggt).
Leider ist in den heruntergeladenen html-Dateien nicht der richtige Code enthalten. Mache ich etwas falsch?

[mircoby]

Warum lässt du das Label nicht auf eine Device + Reading schauen, was den aktuellen Betriebsmode enthält.
Mit Longpoll wird das dann sofort aktualisiert.

Im Prinzip habe ich das so,  <meta name="longpoll" content="1">

Code Auswählen Erweitern


<div data-type="label"
       data-device="wz_WandThermostat"
       data-get="mode"
       class="inline cell top-space-2x big">
/div>


Dies funktioniert auf der normalen Website, jedoch nicht bei einem geöffnetem Popup. Dieses muss ich erst schließen, einen PageReload machen und das Popup neu öffnen, dann stimmts.