New FHEM Tablet UI

tomster · 19 Dezember 2015, 15:58:03

So, nach einiger Fummelei hab ich das PNG und das Range-Widget nun übereinander gebracht.
Jetzt wäre es natürlich noch schön, wenn die Flüssigkeitsoberfläche perspektisch dargestellt werden könntee. Hat hierzu jemand einen CSS-seitigen Ansatz?

Code Auswählen


<li data-row="3" data-col="1" data-sizex="3" data-sizey="5">
		<div class="centered">
       <div class="left col-1-3">
		<div class="large top-space">Fass 1</div>
                <div data-type="range" data-device="Fass_1"
                data-low="" data-high="STATE" data-width="110" data-height="174"
                data-max="65" data-min="0"
                data-limit-low="5" data-limit-high="40"
                data-color-low="red" data-color="orange" data-color-high="green" class="top-space nolabels" 
		style="position:absolute; z-index:1;"></div>
		<div data-type="image" data-url="/fhem/tablet/images/keg.png" data-size="100%"
		style="position:relative; z-index:2;" class="top-space"></div>
       </div>
	<div class="left col-1-3">
                <div class="large top-space">CO<sup>2</sup></div>
                <div data-type="image" data-url="/fhem/tablet/images/co2.png" data-size="60%"
                class="top-space"></div>
       </div>
       <div class="left col-1-3">
		<div class="large top-space">Fass 2</div>
                <div data-type="range" data-device="Fass_2"
                data-low="" data-high="STATE" data-width="110" data-height="174"
                data-max="50" data-min="0"
                data-limit-low="5" data-limit-high="40"
                data-color-low="red" data-color="orange" data-color-high="green" class="top-space nolabels"
                style="position:absolute; z-index:1; opacity:0.8;"></div>
                <div data-type="image" data-url="/fhem/tablet/images/keg.png" data-size="100%"
                style="position:relative; z-index:2; opacity:1.0;" class="top-space"></div>
       </div>
</div>
</li>

DanHard · 19 Dezember 2015, 17:49:50

Hallo Zusammen

Einige Posts zuvor habe ich erwähnt das bei mir die Daten teilweise nicht richtig geladen werden.
Entweder ist die Formatierung durcheinander oder es macht den Anschein das die CSS Datei nicht geladen wird.
Leider hat das Verwenden der Mobile Vorlage nichts gebracht. Bei jedem 3 oder 4 Laden der Seite wird sie nicht korrekt dargestellt.
Das "longpoll_delay" habe ich bereits bis 3000 erhöht.
Anbei habe ich euch zwei Beispiele angefügt.

Was ich versucht habe:
Bei der Console im Chrome habe ich die Network Geschwindigkeit auf "Good 3G" gestellt, dann sehe ich das gleiche wie im
Safaribrowser auf dem iPhone 6, also die Seite wird nicht korrekt dargestellt.
Der grosse Unterschied:
Chrome auf Windows: Die Seite ladet fertig und es wird alles richtig angezeigt.
Safari in iPhone 6: Die Seite ladet aber ich habe das Gefühl das er nach einer gewissen Zeit mit dem Laden stoppt.

Ich hoffe jemand kann mir helfen und kann mit meinen Erkenntnissen was anfangen.
Hier nochmals mein kompletter Quelltext:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="120">
        <meta name="widget_base_height" content="115">
        <meta name="widget_margin" content="1">
        <meta name='gridster_disable' content='0'>
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1">
        <meta name="longpoll_delay" content="3000">
        <meta name="debug" content="0">
        <meta http-equiv="Cache-Control" content="no-store" />

    	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.min.css" />
    	<link rel="stylesheet" href="/fhem/tablet/css/fhem-mobil-ui.css" />
    	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    	<script src="/fhem/pgm2/jquery.min.js" defer></script>
    	<script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    	<script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
   		<script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>


    <title>Homeinfo</title>
</head>

<body>
<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnzimmer</header>
<div data-type="label" data-device="wz_temphumi" data-get="temperature" data-unit="%B0C%0A" data-limits='[0,10,15,21,23]' data-colors='["#ffffff","#6699ff","#AA6900","#AD3333","#FF0000"]' class="cell big"></div>		 
<div data-type="label" data-device="wz_temphumi" data-get="humidity" data-unit="%" data-limits='[-1,20,39,59,65,79]' data-colors='["#ffffff","#6699ff","#AA6900","FFCC80","#AD3333","#FF0000"]' class="cell big"></div>
</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>
<div data-type="label" data-device="sz_temphumi" data-get="temperature" data-unit="%B0C%0A" data-limits='[0,10,15,21,23]' data-colors='["#ffffff","#6699ff","#AA6900","#AD3333","#FF0000"]' class="cell big"></div>
<div data-type="label" data-device="sz_temphumi" data-get="humidity" data-unit="%" data-limits='[-1,20,39,59,65,79]' data-colors='["#ffffff","#6699ff","#AA6900","FFCC80","#AD3333","#FF0000"]' class="cell big"></div>
</li>

<li data-row="2" data-col="1" data-sizex="2" data-sizey="1">
<header>Lampen</header>
<div class="cell center">
<div class="left inline">
<div data-type="switch" class="cell inline" data-device="ge_it2" data-get-on="on" data-get-off="off"></div>
<div data-type="label" class="cell">Pflanzen</div>
</div>
<div class="left inline">
<div data-type="switch" class="cell inline" data-device="ge_it1" data-get-on="on" data-get-off="off"></div>
<div data-type="label" class="cell">Sofa</div>       
</div>
<div class="left inline">
<div data-type="switch" class="cell inline" data-device="ge_it3" data-get-on="on" data-get-off="off"></div>
<div data-type="label" class="cell">X-Mas</div>       
</div>
</div>
</li>

<li data-row="3" data-col="1" data-sizex="2" data-sizey="1" class="gs-w" style="background-color: rgb(42, 42, 42);">
<header>Termine</header>
<div class="cell">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Waschen" data-get='STATE' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-spinner warn","fa-spinner warn blink","fa-spinner warn"]' data-on-colors='["#5CA36A","#5CA36A","#5CA36A"]' class="smal"></div>

<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Karton" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-newspaper-o warn","fa-newspaper-o warn blink","fa-newspaper-o warn"]' data-on-colors='["#996633","#996633","#996633"]' class="smal"></div>

<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Papier" data-get='STATE' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-newspaper-o warn","fa-newspaper-o warn blink","fa-newspaper-o warn"]' data-on-colors='["#f9f9f9","#f9f9f9","#f9f9f9"]' class="smal"></div>
</div>
</li>

<li data-row="4" data-col="1" data-sizex="2" data-sizey="1.2" class="gs-w" style="background-color: rgb(42, 42, 42);">
<header>Wetter Aussenbereich</header>
<div class="centered" style="padding-top:10px !important;padding-bottom:15px !important">            
        
<div class="left">
<div data-type="label" data-subtype="Temperature" data-device="aussen_temphumi" class="cell big" data-get="temperature" data-unit=" %B0C%0A" data-limits="[0,10,15,21,23]" data-colors="[&quot;#ffffff&quot;,&quot;#6699ff&quot;,&quot;#AA6900&quot;,&quot;#AD3333&quot;,&quot;#FF0000&quot;]" style="color: rgb(170, 105, 0);">17.6<span style="font-size: 50%;"> °C</span></div>

<div data-type="label" data-subtype="Humidity" data-device="aussen_temphumi" class="cell big" data-get="humidity" data-unit=" %" data-limits="[-1,20,39,59,65,79]" data-colors="[&quot;#ffffff&quot;,&quot;#6699ff&quot;,&quot;#AA6900&quot;,&quot;FFCC80&quot;,&quot;#AD3333&quot;,&quot;#FF0000&quot;]" style="color: rgb(170, 105, 0);">50<span style="font-size: 50%;"> %</span></div>
</div>

<div class="left">
<div data-type="label" data-device="Meteo" data-get="fc1_wday" style="margin-bottom:5px">Do<span style="font-size: 50%;"></span></div>
<div data-type="weather" data-device="Meteo" data-get="fc1_weather" data-imageset="meteocons" style="font-size:16px;padding:5px;margin:0;margin-top:-5px;" class="weather" data-icon="Q"></div>
                    
<div class="" style="padding:0px 5px 0px 0px">
<div data-type="label" data-device="Meteo" data-get="fc1_tempMin" data-unit="&deg;C" class="inline">XX</div>\
<div data-type="label" data-device="Meteo" data-get="fc1_tempMax" data-unit="&deg;C" class="inline">XX</div>
</div>

<div data-type="label" data-device="Meteo" data-get="fc1_chOfRain" data-unit="%">10<span style="font-size: 80%;">%</span></div>
</div>

<div class="left">
<div data-type="label" data-device="Meteo" data-get="fc2_wday" style="margin-bottom:5px">Do<span style="font-size: 70%;"></span></div>
<div data-type="weather" data-device="Meteo" data-get="fc2_weather" data-imageset="meteocons" style="font-size:16px;padding:5px;margin:0;margin-top:-5px;" class="weather" data-icon="Q"></div>

<div class="" style="padding:0px 5px 0px 0px">
<div data-type="label" data-device="Meteo" data-get="fc2_tempMin" data-unit="&deg;C" class="inline">XX</div>\
<div data-type="label" data-device="Meteo" data-get="fc2_tempMax" data-unit="&deg;C" class="inline">XX</div>
</div>
<div data-type="label" data-device="Meteo" data-get="fc2_chOfRain" data-unit="%">10<span style="font-size: 50%;">%</span></div>
</div>
</div>

</ul>
</div>
</body>
</html>

Falls ihr noch angaben braucht, nur melden, dann kann ich's nachliefern.
Gruss

Da_Erdinga · 20 Dezember 2015, 13:06:03

Hallo Zusammen,

nachdem ich weiterhin nur eine weisse Seite bekomme habe ich ein Backup eingespielt und damit (hoffentlich) erstmal alles rückgängig gemacht.

Jetzt bin ich die Schritte aus Post #1 nochmals durchgegangen, mit dem Ergebnis: weisse Seite.

Woran kann das liegen?
Was habt ihr in der Def geändert?
Wenn ich die Def in

Code Auswählen

ftui ./www/tablet/index-example
änder, bekomme ich die Fehlermeldung, das es die ./www/tablet/index-example/index.html nicht gibt.

Wenn ich die Daten der index-example.html mit nano in die index.html kopiere und danach Speichern will, kommt nur der Hinweis "index.html ist ein Verzeichnis".

Was kann ich da machen?

Der Zugriff über ftp gelingt zwar, aber ich kann keine Namen ändern.

stera · 20 Dezember 2015, 13:15:12

Hallo,

wenn du mit Windows arbeitest, bearbeite die Dateien mit WinSCP. Geht meiner Meinung richtig gut.

Gruß,
SteRa

PS: Gib mal die Adresse http://deineIPFhem:8083/fhem/tablet/index-example.html ein

Zitat von: Da_Erdinga am 20 Dezember 2015, 13:06:03
Hallo Zusammen,

nachdem ich weiterhin nur eine weisse Seite bekomme habe ich ein Backup eingespielt und damit (hoffentlich) erstmal alles rückgängig gemacht.

Jetzt bin ich die Schritte aus Post #1 nochmals durchgegangen, mit dem Ergebnis: weisse Seite.

Woran kann das liegen?
Was habt ihr in der Def geändert?
Wenn ich die Def in
Code Auswählen Erweitern
ftui ./www/tablet/index-example
änder, bekomme ich die Fehlermeldung, das es die ./www/tablet/index-example/index.html nicht gibt.

Wenn ich die Daten der index-example.html mit nano in die index.html kopiere und danach Speichern will, kommt nur der Hinweis "index.html ist ein Verzeichnis".

Was kann ich da machen?

Der Zugriff über ftp gelingt zwar, aber ich kann keine Namen ändern.

stera · 20 Dezember 2015, 13:27:43

Hallo,

bei mir funktioniert der Refresh im Browser für Type="Image" nicht. In der Console zählt eine Zahl immer die Sekunden hoch und dann refresh, aber es passiert nix. Die ganzen anderen "Switch" usw. schalten alle sofort und zeigen es auch an.
Mach ich ein Browserrefresh geht es. Benutze den Chromebrowser.

Code Auswählen


<li data-row="2" data-col="1" data-sizex="5" data-sizey="5">
<div class="center top-space">
          <div data-type="image"
               data-size="98%"
               data-url="http://192.168.1.76:8083/fhem/web/raspipic.jpg"
	       data-refresh="10">
          </div>		
</div>	 
</li>

Gerade ist mir auch aufgefallen, dass der Pushbutton nicht mehr auslöst. Hat das was mit einem Update zu tun.

Gruß,
SteRa

Da_Erdinga · 20 Dezember 2015, 13:45:51

Hallo Stera,

über den Link geht es.

Ich arbeite aber mit Ubuntu 14.04 LTS, da hilfen mir Windows-Programme nichts.

Ich denke, da muss ich mich nochmal auf die Suche begeben um die Dateien zu ändern.

viegener · 20 Dezember 2015, 14:10:57

Zitat von: Da_Erdinga am 20 Dezember 2015, 13:06:03
Hallo Zusammen,

nachdem ich weiterhin nur eine weisse Seite bekomme habe ich ein Backup eingespielt und damit (hoffentlich) erstmal alles rückgängig gemacht.

Jetzt bin ich die Schritte aus Post #1 nochmals durchgegangen, mit dem Ergebnis: weisse Seite.

Woran kann das liegen?
Was habt ihr in der Def geändert?
Wenn ich die Def in
Code Auswählen Erweitern
ftui ./www/tablet/index-example
änder, bekomme ich die Fehlermeldung, das es die ./www/tablet/index-example/index.html nicht gibt.

Wenn ich die Daten der index-example.html mit nano in die index.html kopiere und danach Speichern will, kommt nur der Hinweis "index.html ist ein Verzeichnis".

Was kann ich da machen?

Der Zugriff über ftp gelingt zwar, aber ich kann keine Namen ändern.

Da passt einiges nicht:

Wenn index.html ein Verzeichnis macht das übrhaupt keinen Sinn...
Die FTUI-Definition oben macht so auch keinen Sinn --> Es sollte das Verzeichnis der FTUI-Installation ausgewählt werden

Hinweise:
- Besorge Dir Shell / ssh-Zugang auf Deine Box (FTP-Zugang ist gut aber häufig nicht ausreichend)
- Verschiebe oder lösche alles was in .../www/tablet steht
- Kopiere die FTUI in das in der Installationsanleitung angebene Verzeichnis --> https://github.com/knowthelist/fhem-tablet-ui
- Lege den HTTPSRV-Device an (vorher natürlich den alten löschen)
- kopiere index-example.html nach index.html oder rufe http://<fhem-url>:8083/fhem/ftui/index-example.html auf

Eigentlich ist das genau beschrieben, wenn Du davon abweichst ohne zu wissen warum kann es leicht weiter weg führen...

-

roman1528 · 20 Dezember 2015, 14:48:52

Zitat von: roman1528 am 19 Dezember 2015, 13:03:02
Moin.

Ich habe hier einen Dialog mit zwei Buttons/Links die bewirken, dass entweder FHEM oder der RasPi neustarten.

Wenn ich jetzt einen dieser Buttons/Links klicke wird der Befehl gesendet und anschließend (oder gleichzeitig) soll sich der Dialog schließen.

Bin jetzt schon eine Weile am probieren mit:... <div onclick=".....">

base.close
base.hide(dialog,elem.data('mode'))
close.on('click',function()
dialog.close
dialog.hide
usw.....

Wie geht es denn nun richtig? Bzw. geht das überhaupt?

Danke im Vorraus.

Grüße^^

*PUSH*
letzter Beitrag auf einer Seite wird leider gern übersehen...

rizo · 20 Dezember 2015, 19:55:34

Hallo liebe Gemeinde,

hätte mal eine "Anfängerfrage".

Habe ein circlemenu für die Temperaturregelung für den Thermostaten erstellt:

hier ein Auszug:

<li><div data-type="push" data-device="HM_336621_Clima"
data-set="desired-temp 12" data-on-background-color="#00ff00"
data-off-background-color="#00ff00" data-on-color="#ff0000"
data-off-color="#00ff00"
data-icon=""><font color="#ff0000">12</font></div></li>

nun würde ich gerne hinter dem desired-temp befehl gleich burstXmit hinterher schicken, damit die Temp sofort geändert wird.

Wie kann man denn 2 data-sets verwenden?

Hoffe es ist verständlich und jmd kann mir helfen.

Danke euch.

mircoby · 20 Dezember 2015, 20:10:40

Hi setstate,

ja "mode", statt "modes" damit funktioniert das umschalten zwischen den Betriebsarten manuell und auto wieder richtig. Bitte bei Gelegenheit mal mit ändern.

zu den anderen Punkten.

1) Beim Thermostat widget ist die Skala seit dem update um 240° verdreht. Siehe Bild "0Grad_Wohnzimmer.png". Um dies zu korrigieren muss ein data-angleoffset="240" gesetzt werden, siehe Bilder "240Grad_Wohnzimmer.png" + "240Grad_WohnzimmerConfig.png".
Das ist das eine. Zum anderen verschiebt sich neben dem Regler auch das popup-fenster, sobald ich mit der Maus die Temperatur verstelle. (es folgt quasi der Mausbewegung). Dies kann ich mit Firefox und IE nachstellen. Auf dem IPad funktioniert es richtig (also Popup bleibt stehen, der Regler verschiebt sich).

Beim austesten habe ich auch noch einen Unterschied im Verhalten zwischen einem MAX! Wandthermostat und einem MAX! Heizungsthermostat festgestellt. Beim verstellen des Wandthermostats wird folgender Befehl abgesetzt
"set max_Wandthermostat desiredTemperature 22 auto" wenn im Automatik Modus, ansonsten
"set max_Wandthermostat desiredTemperature 22" im manuellen Modus. Das passt.
Beim Heizungsthermostat wird nie das "auto" mitgesendet, was dazu führt dass beim verstellen der Temperatur im Automatikmodus, dieser in den manuellen Modus wechselt. Könnte ursächlich mit dem "mode / modes" Thema zusammenhängen. Dort fehlte ebenfalls das "auto"

2) Ich verwende einen "switch" um die Betriebsart der MAX! Heizung zwischen manuell und automatik zu wechseln. Nachdem ich mit einem switch teilweise mehrere Thermostate ansprechen will möchte ich eine Dummy variable setzen (der Rest läuft dann über ein notify mit nachgelagertem Funktionsaufruf). Damit ich immer den korrekten Zustand der Heizung im Tablet UI angezeigt bekomme, gebe ich das relevante MAX! device im "switch" an. (nicht den dummy). Schalten möchte ich mit dem switch jedoch nicht den das MAX! device direkt sondern den dummy. Konfiguration siehe Bild "SwitchWandthermostat.png"

Vor dem update konnte ich das so machen:
data-set-on=";set wz_MaxMode auto"
es wurde dann lediglich der Befehl:
"set wz_MaxMode auto" abgesetzt, den Rest hat die Funktion erledigt.

Seit dem Update hat sich das Verhalten (bei gleicher Konfiguration geändert. Es werden nun folgende Befehle abgesetzt:
"wz_Wandthermostat ;set wz_MaxMode auto" abgesetzt.

Ich möchte quasi nur den 2ten Befehl abschicken.

Gruß Mirko

Zitat von: setstate am 19 Dezember 2015, 00:20:08
@mircoby:
nur mode statt modes that's it? Kein Problem, ändere ich. Sorry für den Bug ...

zu den anderen Punkten:
1) hier verstehe ich das Problem nicht
2) wie soll das vorher funktioniert haben, dass der erste Teil des Commands weggelassen wurde?

roman1528 · 20 Dezember 2015, 20:30:18

Zitat von: mircoby am 20 Dezember 2015, 20:10:40
Beim Heizungsthermostat wird nie das "auto" mitgesendet, was dazu führt dass beim verstellen der Temperatur im Automatikmodus, dieser in den manuellen Modus wechselt. Könnte ursächlich mit dem "mode / modes" Thema zusammenhängen. Dort fehlte ebenfalls das "auto"

Code Auswählen

attr <thermostat> keepAuto 1

Dann muss kein auto mitgesendet werden ... auch Sinnvoll wenn man seine Thermostate über Push bedient... (ThermostatWidget sagt mir auf'm Tablet nicht so zu).

Grüße^^

mircoby · 20 Dezember 2015, 20:58:44

Hi roman1528,

das war ein guter Tipp, damit konnte ich das auto/manual Verhalten reparieren.

Danke Gruß
Mirko

rizo · 20 Dezember 2015, 21:26:47

Habt ihr für mein Problem / Frage auch eine Lösung?

viegener · 20 Dezember 2015, 21:35:52

Zitat von: rizo am 20 Dezember 2015, 21:26:47
Habt ihr für mein Problem / Frage auch eine Lösung?

Oh je nach 90 Minuten noch keine Antwort, das ist manchmal schwer auszuhalten

Wenn Du mehrere Befehle verschicken willst wäre der bessere Mechanismus vermutlich fhem selbst. Ein Dummy in dem Du bei Setzen der Temperatur diese an den Thermostat weitergibt und dann auch den burstXMit auslöst.

rizo · 21 Dezember 2015, 08:49:12

ja sorry für die ungeduld, kenne es halt leider zu oft aus anderen Foren, das die vorhergestellte Frage nur allzu oft überlesen wird.

Danke für die Antwort. Werde ich mal versuchen umzusetzen.

Anderes Problem:

wie Stera hier gestern schon schrieb, seitdem ich gestern tablet ui update gemacht habe funktionieren die Push Buttons nicht mehr.

Gibt es da eine Änderung?

Ah ok habe die Lösung hier im Forum ein paar Seiten zurück gefunden.

anstatt data-set zu nutzen muss man jetzt data-set-on nutzen dann klappt es wieder.

New FHEM Tablet UI

DanHard