New FHEM Tablet UI

skuggy · 19 Oktober 2015, 11:53:27

Zitat von: skuggy am 14 Oktober 2015, 19:17:03
Hallo zusammen,

seit ein paar Tagen hab ich ein merkwürdiges Verhalten beim Aufbau der einzelnen Boxen. Teilweise lassen funktioniert data-row nicht mehr und wird rot dargestellt. Letzte Woche habe ich ein Update durchgeführt und die neue index.html eingebaut, dabei hab ich dies Verhalten zum ersten Mal festgestelle. Dann wieder zurück zur alten index.html, aber immer noch das gleiche Problem. Hier der Code der Seite und als Anlage die Seite und der Fehler.

Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>  <title>FHEM-Tablet-UI</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="116"> <meta name="widget_base_height" content="131"> <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="debug" content="0">  <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" /> <link rel="stylesheet" href="/fhem/tablet/css/myfhem-tablet-ui.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />  <link rel="stylesheet" href="/fhem/tablet/css/myfhem-tablet-ui-user.css" /> <link rel="stylesheet" href="/fhem/tablet/customfont/font1/style.css" /> <link rel="stylesheet" href="customfonts/font1/style.css"> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script> <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>  </head> <body>   <div class="gridster"> <ul>  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_homebutton.html"></li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="3" data-template="inc_raum_menu.html"></li> <li data-row="1" data-col="10" data-sizex="1" data-sizey="4" data-template="inc_menu_rechts.html"></li> <li data-row="1" data-col="3" data-sizex="2" data-sizey="1" data-template="inc_aussentemp.html"></li> <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"data-template="inc_uhr.html"></li>  <li data-row="2" data-col="2" data-sizex="1" data-sizey="3"> <header>Wohnzimmer</header><br><br> <div><div data-type="label" class="">Rollo rechts</div><br> <div data-type="switch" data-device="WZ.Rollo.rechts" data-get-on="100|[89][0-9]" data-get-off="!on" data-set-on="100" data-set-off="" data-on-background-color="#0099FF" data-icon="fa-angle-double-up" data-background-icon="fa-square" ></div> <div data-type="label" class="inline w1x">Auf</div> </div> <div> <div data-type="switch" data-device="WZ.Rollo.rechts" data-get-on="[1-7][0-9]" data-get-off="!on" data-set-on="25" data-set-off="" data-on-background-color="#0099FF" data-icon="fa-angle-down" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">25</div> </div> <div> <div data-type="switch" data-device="WZ.Rollo.rechts" data-get-on="[0-9]" data-get-off="!on" data-on-background-color="#0099FF" data-set-on="0" data-set-off="" data-icon="fa-angle-double-down" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">Zu</div> </div> <div> <div data-type="push" data-device="WZ.Rollo.rechts" data-set-on="stop" data-off-color="#2A2A2A" data-on-background-color="#0099FF" data-icon="fa-ellipsis-h" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">Stop</div> </div> <li data-row="2" data-col="3" data-sizex="1" data-sizey="3"> <header>Wohnzimmer</header><br><br> <div><div data-type="label" class="">Rollo links</div><br> <div data-type="switch" data-device="WZ.Rollo.links" data-get-on="100|[89][0-9]" data-get-off="!on" data-set-on="100" data-set-off="" data-on-background-color="#0099FF" data-icon="fa-angle-double-up" data-background-icon="fa-square" ></div> <div data-type="label" class="inline w1x">Auf</div> </div> <div> <div data-type="switch" data-device="WZ.Rollo.links" data-get-on="[1-7][0-9]" data-get-off="!on" data-set-on="25" data-set-off="" data-on-background-color="#0099FF" data-icon="fa-angle-down" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">25</div> </div> <div> <div data-type="switch" data-device="WZ.Rollo.links" data-get-on="[0-9]" data-get-off="!on" data-on-background-color="#0099FF" data-set-on="0" data-set-off="" data-icon="fa-angle-double-down" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">Zu</div> </div> <div> <div data-type="push" data-device="WZ.Rollo.links" data-set-on="stop" data-off-color="#2A2A2A" data-on-background-color="#0099FF" data-icon="fa-ellipsis-h" data-background-icon="fa-square"></div> <div data-type="label" class="inline w1x">Stop</div> </div> <li data-row="3" data-col="4" data-sizex="5" data-sizey="1"> <header>HEIZUNG</header> <div data-type="image" data-size="90%" data-url="http://192.168.178.35:8083/fhem/SVG_showLog?dev=SVG_FileLog_WZ.Thermo_1&logdev=FileLog_WZ.Thermo&gplotfile=SVG_FileLog_WZ.Thermo_1&logfile=CURRENT&pos="" </div> </li> <li data-row="5" data-col="4" data-sizex="2" data-sizey="1"> <header>HEIZUNG</header> <div data-type="thermostat" data-device="WZ.Thermostat_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" data-min="0" data-off="off" class="cell"> </div> </li> </li> </ul> </div> </body> </html>

Vielen Dank für die Hilfe.

Meine html Fehler habe ich korrigiert. Ich hab mir sogar die neue index-example.html runtergeladen und es mit dieser versucht.

Kann es sein das sich die Boxen immer oben andocken, egal was ich als data-row oder data-col eingebe? Kann man das irgendwie abstellen?

Nobby1805 · 19 Oktober 2015, 12:41:04

Ja, das ist (etwa) so ... je Spalte liegt der niedrigste row Wert immer ganz oben (man kann das Verhalten sehr schön sehen wenn man einzelne Blöcke/Boxen per Maus verschiebt)

Nein, ich weiß nicht was man dagegen machen kann

viegener · 19 Oktober 2015, 13:30:07

Das Verhalten ist fest in Gridster versenkt und lässt sich wohl ohne tiefe Eingriffe auch nicht abstellen. Ich hatte vor Monaten mal im Code von Gridster etwas reingeschaut, wg. dieses Verhaltens.
Es bleibt die Empfehlung alle row/col/size-Werte so exakt wie möglich einzustellen für die verschiedenen Seiten.

Johannes

ChrisK · 19 Oktober 2015, 13:35:24

Zitat von: Nobby1805 am 19 Oktober 2015, 12:41:04
Nein, ich weiß nicht was man dagegen machen kann

Ich habe folgendes dagegen getan:

In der user-css diese Klasse hinzugefügt:

Code Auswählen

.gridster ul li.black {
    background-color:#000000 !important;
}

Und in der index.html schwarze Boxen eingefügt:

Code Auswählen

      <li data-row="1" data-col="3" data-sizex="2" data-sizey="1" class="black">
      </li>

So kann ich die Elemente auch genau dahin platzieren, wo ich es will.

skuggy · 19 Oktober 2015, 14:30:47

Zitat von: viegener am 19 Oktober 2015, 13:30:07
Das Verhalten ist fest in Gridster versenkt und lässt sich wohl ohne tiefe Eingriffe auch nicht abstellen. Ich hatte vor Monaten mal im Code von Gridster etwas reingeschaut, wg. dieses Verhaltens.
Es bleibt die Empfehlung alle row/col/size-Werte so exakt wie möglich einzustellen für die verschiedenen Seiten.

Johannes

Hallo Johannes,

col/size funktioniert ja immer. Hab mir schon gedacht, dass es irgendwo fest im Gridster programmiert ist.

Hallo ChrisK,

danke für den Tip, werde ich mal testen. Dafür muss ich mir aber erst eine usr-css anlegen, die nächste Baustelle...

Danke.

dennis_n · 19 Oktober 2015, 21:51:06

Hi,

ich habe ein kleines Problem mit dem circlemenue.
Wenn ich das Start Widget, bei mir ein Button, anklicke und das circlemenue dann wieder zugeht, ist der Button verschwunden.
Ich kann zwar das circlemenue öffnen und schließen, aber die Ursprungsgrafik ist weg. Beim reload der Seite ist sie wieder da. Aber nur solange bis ich das Menü mal geöffnet habe.

Hier mein Aufbau:

Code Auswählen

<div class="cell inline">
    <div data-type="label" class="narrow darker small">HWR</div>
    
    <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half">
    <ul class="menu">
      <li><div data-type="button" data-device="ZWave_SWITCH_MULTILEVEL_14" data-get-on='["Hoch","Runter5","Runter"]' data-icons='["fa-arrow-down", "fa-bars", "fa-arrow-up"]' data-colors='["green", "blue", "red"]' data-background-colors='["transparent", "transparent", "transparent"]'></div></li>
      <li><div data-type="push" data-device="ZWave_SWITCH_MULTILEVEL_14" data-set="Hoch" data-icon="fa-arrow-up"></div></li>
      <li><div data-type="push" data-device="ZWave_SWITCH_MULTILEVEL_14" data-set="dim 15" data-icon="fa-bars"></div></li>
      <li><div data-type="push" data-device="ZWave_SWITCH_MULTILEVEL_14" data-set="Runter" data-icon="fa-arrow-down"></div></li>
      
    </ul>
</div>
    
    </div>

Wie kann ich das ändern?

Danke

Gruss
Dennis

setstate · 19 Oktober 2015, 23:22:36

Zitat von: dadoc am 14 Oktober 2015, 16:48:10
Hallo,
gibt es dazu eigenlich mittlerweile eine praktikable Lösung? Ich habe auch noch ein Dutzend FS20-Dimmer in Zwischendecken verbaut.Grüße
Martin

Update ist da. Dimmer, Slider und Volume kann man jetzt dafür benutzen.

Mit data-get-value und data-set-value kann man das Format für den für den Wert definieren.

Mit data-get-value kann man definieren, wie der Zahlenwert aus dem Reading extrahiert wird. RegEx mit Group ist möglich, oder wenn man nur eine Zahl angibt, dann der entsprechende Block bei Trennung durch Leerzeichen

Mit data-set-value legt man fest, was in das Reading geschrieben wird. Default ist '$v', also nur der Zahlenwert. $v ist dabei ein Platzhalter, der durch den realen Zahlenwert ersetzt wird. Bei 'dim$v%' wird dann z.B. "dim50%" ins Reading geschrieben.

Code Auswählen

            
<div data-type="slider" data-device='myFS20' data-get-value="dim([0-9].*)%" data-set-value="dim$v%" class="horizontal" ></div>
<div data-type="volume" data-device='myFS20' data-get-value="dim([0-9].*)%" data-set-value="dim$v%" class="" ></div>
<div data-type="dimmer" data-device='myFS20'
       data-set-on="dim$v%"
       data-set-off="dim0%"
       data-set-value="dim$v%"
       data-get-on="dim([1-9]\d?)?%"
       data-get-off="dim0%">
</div>

xxsteffenxx · 20 Oktober 2015, 10:39:35

Hallo zusammen,
ich bin sehr neu in der Thematik, warte gerade auf meine MAX Heizkörperthermostate sowie den MAXCube.

FHEM läuft bereits auf meinem RaspberryPi, das TabletUi habe ich schonmal ein wenig für meine Zwecke angepasst (möchte vorerst nur Heizkörper steuern)

Allerdings hätte ich gerne auch die Wetteranzeige/Vorhersage, nur leider versteh ich nicht woher ich die Daten bekomme, habe in die index.html den WetterCode eingefügt, aber er Zeit mir nichts an, im FHEM Wiki habe ich gelesen, dass dies ja alle mit define etc deklariert wird, aber wie mache ich das in der index html?

Sorry für die Anfänger Fragen

ChristianR · 20 Oktober 2015, 10:52:27

Moin Steffen,

zuerst musst du die Daten in FHEM bekommen. Dazu kannst du zum Beispiel das Modul Weather nutzen.
Habe es nach folgenden Link gemacht: http://blog.wenzlaff.de/?p=1803
Wenn deine Readings sich dann mit Wetterdaten füllen kannst du sie in die FTUI übertragen.
Das geschieht dann über das Device aus FHEM mit den von dir gewünschten Readings in der index.html.

Gruß Christian

xxsteffenxx · 20 Oktober 2015, 12:31:04

Servus ChristianR,

habs hinbekommen

nun hab ich glaub ein Stück weiter verstanden. Sobald meine Thermostate da sind sehen wir weiter ob ich damit auch zurecht kommt

ChristianR · 20 Oktober 2015, 12:51:42

Zitat von: xxsteffenxx am 20 Oktober 2015, 12:31:04
Servus ChristianR,

habs hinbekommen nun hab ich glaub ein Stück weiter verstanden. Sobald meine Thermostate da sind sehen wir weiter ob ich damit auch zurecht kommt

Hi Steffen,

das freut mich für dich.
Bei mir geht es auch Stück für Stück etwas tiefer in die Materie...

Gallo · 20 Oktober 2015, 22:40:49

Hey ihr ,

hatte immer mal wieder die Problematik, dass das Dashboard nicht korrekt geladen wird. Es fehlen dann einfach mal alle icons und ich muss es zwei drei mal neu laden bis es wieder funktioniert.

Habt ihr eine Idee ? habe nun 20 Seiten in diesem Beitrag gelesen und nix ähnliches finden können. Sorry wenn es schonmal gefragt wurde :-O

Ansonsten echt ne super Sache !

xxsteffenxx · 20 Oktober 2015, 23:34:38

Ist bei mir auch ab und zu so....

viegener · 21 Oktober 2015, 00:14:25

Als Ursache ist mir bekannt, wenn es Fehler im HTML gibt, je nach Browser können inkorrekte Tags, fehlende Dateien oder auch nicht beendete Tags so etwas auslösen. Das ist manchmal nicht ganz einfach das zu finden, wenn kein entsprechendes Werkzeugt zum Test da ist, kann ich nur empfehlen das einzugrenzen indem man Teile aus den Seiten herausnimmt, bis es funktioniert.

Für Firefox ist auch die Vewendung von firebug hilfreich, da man etwaige Fehlermeldungen im console/log sehen kann

chunter1 · 21 Oktober 2015, 09:12:07

Wenn ich multistatebutton richtig verstanden habe, sollte der folgende demo-code bei jedem click zwischen den 4 stati durchwechseln?

Code Auswählen


<div data-type="multistatebutton" 
       data-device="TEST"
       data-get-on='["on","off","unknown","uninteresting"]'
       data-icons='["fa-bolt", "fa-power-off", "fa-question", "fa-ban"]'
       data-colors='["green", "red", "orange", "blue"]'
       data-background-colors='["red", "green", "blue", "orange"]'
></div>

Irgendwie funktioniert das bei mir nicht.
Wenn ich auf den button klicke, sendet er immer den gleichen Befehl (z.B. "on").
Erst wenn ich einen Reload der Webpage mache, sendet er den nächsten Befehl - und dann das ganze Spiel wieder von vorne.

Verhält sich übrigens am iPad genau gleich.

Hab ich da was übersehen zu konfigurieren?
Danke

New FHEM Tablet UI

Gallo