New FHEM Tablet UI

mago0211 · 20 März 2015, 16:49:33

Leider kein Erfolg

ich muss auf jeden Fall STATE klein schreiben

		<div type="thermostat" 
			device="Bad_Soll_Temp" 
			data-get="state" 
			data-temp="state" 
			data-set=" " 
			class="cell"></div>

Dann wird zwar der aktuelle Wert angezeigt. Wenn ich ihn aber ändere muss ich die Seite erst neu laden mit F5 z.b. damit er mir den aktuellen Wert anzeigt. Ich habe aber gerade festgestellt das die anderen Daten auch nicht aktualisiert werden. Bei mir werden die Daten erst nach einem Neu laden der Seite aktualisiert. Da schein wohl irgendwas anderes nicht zu funktionieren.

Hmm da muss ich mal noch schauen ob ich bei den Beispielen hier im Forum noch eine passende Lösung finde weil immer F5 drücken ist auf dauer auch irgendwie nervig

Aber trotzdem Danke für deine Hilfe

Grüße

bjoernbo · 20 März 2015, 17:03:46

Wie ist denn bei dir die Definition von LONGPOLL ?
Ich habe meinen Eintrag entsprechend auskommentiert und erhalte sofort (1-2 Sek.) die entsprechende Rückmeldung!

Zitat

mago0211 · 20 März 2015, 17:09:01

Ja tatsächlich. Wenn ich den Eintrag auskommentiere gehts auch bei mir ca. 3 - 4 sec. was absolut akzeptabel ist.

Danke

setstate · 20 März 2015, 17:22:57

Wie kann das funktionieren?

Wenn ihr in Fhem dann was ändert, erfolgt im UI sofort das Update, nicht erst nach 30 Sekunden (shortpoll)?

bjoernbo · 20 März 2015, 18:20:55

ich habe nie behauptet das etwas 30 Sekunden dauert :-D

setstate · 20 März 2015, 18:28:56

Wäre der default, wenn der logpoll Tag fehlt. Bei mir ...

Code Auswählen

var shortpollInterval = 30 * 1000; // 30 seconds

mago0211 · 20 März 2015, 20:09:13

Änderungen aus Fhem heraus dauern 30 sec

.
Außer bei meinen switches da tut sich nichts wenn ich die in Fhem ändere.

bjoernbo · 21 März 2015, 12:21:34

@nesges

in Beitrag #164 hast du etwas gepostet. Wenn ich das richtig verstehe kann ich damit Farben für eine Lampe bestimmten? Ich habe mir heute OSRAM Lightyfi zugelegt. funzt klasse. Nun will ich das im UI integrieren und dabei ist mir dein Post aufgefallen.
Sind deine Änderungen im JS schon im Standard übernommen? Kann ich damit wohl auch die OSRAM Lampen steuern??

Danke & Gruß

setstate · 21 März 2015, 12:44:03

Hallo bjoernbo, ist leider noch nicht im Standard. Ich werde heute Abend die neue Version hochladen, da sieht man dann, wie die Widgets Plugins aufgebaut werden. Da könnte Nesges das entsprechend implementieren, wen er will

.
Ich muss eher die Docu erweitern und checken, ob die neue Version in allen Lagen spielt.

Viele Grüße
Mario

setstate · 21 März 2015, 22:39:38

Guten Abend geneigte Nutzergemeinde,

heute endlich bin ich soweit, um die neue Version veröffentlichen zu können.
Äußerlich werdet ihr kaum einen Unterschied sehen können, die größte Änderung ist die Separierung der Widgets. Damit werden nur noch die Elemente geladen, die auch benutzt werden. Eine Erweiterung mit neuen Widgets ist damit auch besser möglich.

Eure jetzige index.html ist auch weiterhin kompatibel. Nur die Attribute 'type' und 'device' sind ab sofort deprecated. Nutzt bitte stattdessen ab sofort data-type und data-device, diese Namen sind mehr HTML konform. Intern wandle ich die falschen Attribute noch um in die richtigen. Bitte macht ein Update aller Files! Natürlich außer eurer index.html (ggf. auch der fhem-tablet-ui.css), die müsst ihr von Hand entsprechend erweitern.

Um euch den Umstieg auf die neue Version schmackhaft zu machen, gibt es auch zwei neue Widgets:
Dimmer und Slider. Der Dimmer ist ein Toggle-Button, mit dem man ein Device zwischen OFF und X% hin und her schalten kann. Den ON Prozentwert kann man einfach per hoch/runter Schieben verändern. Das ist ideal zum Beispiel für eine Lampe, die man normalerweise nur an/aus schaltet, den Helligkeitswert kann man einfach festlegen und ändern.
Der Slider ist ein vertikaler Schieberegler zum Steuern von Devices zwischen min und max Wert.
(http://knowthelist.github.io/fhem-tablet-ui/slider.png)(http://knowthelist.github.io/fhem-tablet-ui/dimmer.png)

Das Label Widget kann jetzt auch entsprechend zu Limit-Werten die Farbe ändern. Somit kann man jetzt zum Beispiel die Temperatur-Anzeige bei Frost blau werden lassen und bei zuviel Wärme rot. Entsprechende Beispiele sind in der README und der Beispiels index.hml zu finden. Wenn man numerische Werte mit dem Label Widget anzeigen will, hilft das Attribut 'data-fix', um die Anzahl der Nachkommastellen festlegen zu können. 0 keine Kommastelle, 1 eine Nachkommastelle usw. Bei Telefonnummern lässt man das Attribut weg, dann wird nicht versucht, eine Zahl anzuzeigen. Evtl. müsst ihr eurer jetziges Setup anpassen, wenn plötzlich wieder viele Kommastellen erscheinen. Der default-Wert hat sich in diesem Bereich geändert (thx gesges)

Viel Spaß damit ...

Sollten ein unerwartetes Verhalten auftreten, kann man in der index.html mit dem tag:

Code Auswählen

<meta name="debug" content="1"> die Web-Console etwas gesprächiger machen.

bjoernbo · 22 März 2015, 10:04:48

gar nicht gut

setstate · 22 März 2015, 10:22:18

Schade!

#!§!!##

Dann setze mal <meta name="debug" content="1"> und schaue bitte mal in der Webconsole https://developer.mozilla.org/de/docs/Tools/Web_Konsole nach, was für Fehler kommen.

Alternativ kann man auch sich eine index_new.hml hin kopieren und diese soweit zurückbauen, bis es wieder läuft, um zu sehen, welcher Part den Fehler verursacht.

bjoernbo · 22 März 2015, 10:22:29

anbei konkretes Beispiel für einen Raum mit gesamten Code:

Zitat<html>
<title>FHEM</title>
<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="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 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_dev/css/fhem-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" />


   <script data-type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
   <script data-type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
   <script data-type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
   <script data-type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script data-type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script data-type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
   <script data-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">
   <header>DASHBOARD</header>
<div type="label"class="cell"><a href="http://192.168.178.51:8083/fhem/?room=DashboardRoom"><img src="img/fhem-logo.png" height="100" wight="100" border="0" alt="Dashboard"></a></div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4">
   <header>RÄUME</header>
<style>
#room_ben #bg {
color: rgb(0,135,168) !important;
border: 3px
}
</style>
<div class="container">
<a id="room_index" href="index_V2.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_schlafzimmer" href="schlafzimmer.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-bed" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_kueche" href="kueche.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-cutlery" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_wohnzimmer" href="wohnzimmer.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-film" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_ben" href="ben.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-male" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_julia" href="julia.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-female" style="color: rgb(255,255,255);"></i>
</a>
<a id="room_wetter" href="wetter.html" class="cell fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
<i id="fg" class="fa fa-stack-1x fa-umbrella" style="color: rgb(255,255,255);"></i>
</a>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
   <header>HEIZUNG</header>
   <div type="thermostat" device="Ben.Wandthermostat" data-get="desired-temp" data-temp="measured-temp"
<div class="container">
<div class="cell center">
   <div type="label" device="Ben.Wandthermostat" data-get="humidity" data-unit=" %" class="cell small">
</div></div>
</li>

<li data-row="1" data-col="4" date-sizex="3" data-sizey="2">
   <header>KAMERA</header>
<div type="label" class="cell"><img src="http://192.168.178.133:5300/snapshot.jpg?user=XXXXX&pwd=XXXXX" height="116" wight="131" border="0"></img src></div>
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="4">
   <header>Schrank-Licht</header>
<div class="centered container">
<div data-type="switch" data-device="Schrankbeleuchtung_Ben" class="cell"></div>
<div data-type="push" data-device="Schrankbeleuchtung_Ben" class="cell" data-set="on-for-timer 300"></div>
<div data-type="label" class="cell">5 Minuten</div>
<div data-type="push" data-device="Schrankbeleuchtung_Ben" class="cell" data-set="on-for-timer 900"></div>
<div data-type="label" class="cell">15 Minuten</div>
<div data-type="push" data-device="Schrankbeleuchtung_Ben" class="cell" data-set="on-for-timer 1800"></div>
<div data-type="label" class="cell">30 Minuten</div>
<div data-type="push" data-device="Schrankbeleuchtung_Ben" class="cell" data-set="on-for-timer 3600"></div>
<div data-type="label" class="cell">1 Stunde</div>
<div data-type="push" data-device="Schrankbeleuchtung_Ben" class="cell" data-set="on-for-timer 7200"></div>
<div data-type="label" class="cell">2 Stunden</div>
</div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>FENSTER</header>
<div class="container">
<div class="left">
</div>
<div class="center">
<div data-type="contact" data-device="Fensterkontakt.Ben" data-get="state" class="cell"></div>
<div data-type="label" class="cell"></div>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>

bjoernbo · 22 März 2015, 10:25:30

Auszug aus der Konsole:

ZitatSynchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/ jquery.min.js:4
ReferenceError: getGradientColor is not defined

setstate · 22 März 2015, 10:25:53

@bjoernbo: danke für den code, wollte ich gerade vorschlagen ... Schaue ich mir gleich an.