fhem-tablet-ui-2.0_beta

setstate · 04 März 2016, 23:29:22

Nach einem Update könnt ihr jetzt die FTUI 2.0_Beta Version testen

<script src="/fhem/tablet/js/fhem-tablet-ui-2.0_beta.js" defer></script>

anstatt

<script src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>

Damit gibt es zwar keine neuen Features, aber der Unterbau ist stark verändert ( JSON Format zur Auswertung der Results von FHEM) und etwas mehr ausgeräumter Code (encapsulation) und sollte somit etwas performanter und sicherer funktionierten.

Bitte testen und ausreichend Feedback geben!

Die meisten der Basis-Widgets habe ich schon angepasst. Die Widgets funktionieren mit der 2.0 nur, wenn die benötigten Readings mit der Funktion

Code Auswählen

elem.addReading(); hinzugefügt werden.

roman1528 · 05 März 2016, 08:39:10

Bzgl. PageTab. Bei mir lädt gar nichts.

Folgendes gefunden:

Code Auswählen

Plugin dir: /fhem/tablet/js fhem-tablet-ui-2.0_beta.js:506:13
Filename: index.html fhem-tablet-ui-2.0_beta.js:506:13
FHEM dir: /fhem/ fhem-tablet-ui-2.0_beta.js:506:13
TypeError: ftui.gridster.disable is not a function
ftui.initPage()
 fhem-tablet-ui-2.0_beta.js:118
ftui.init()
 fhem-tablet-ui-2.0_beta.js:94
<anonym>
 fhem-tablet-ui-2.0_beta.js:512
m.event.dispatch()
 jquery.min.js:3
m.event.add/r.handle()
 jquery.min.js:3
m.event.trigger()
 jquery.min.js:3
.triggerHandler()
 jquery.min.js:3
.ready()
 jquery.min.js:2
J()
 jquery.min.js:2
 fhem-tablet-ui-2.0_beta.js:118:17

Code Auswählen

<meta name="gridster_disable" content="1">
Wird nur als if behandelt... Aber die Funktion existiert nicht.

Grüße^^

EDIT
Habe gridster_disable =0 ... damit läuft es erstmal und bis jetzt sauber.
Bei debug 1 lädt er trotzdem nicht...

setstate · 05 März 2016, 08:42:05

Habe ich auch gerade entdeckt, als ich mir deine Seite gezogen hatte und bei mir ausprobiert habe.
Ich hatte <meta name="gridster_disable" content="1"> garnicht aktiviert und damit den Fehler übersehen. Ist jetzt gefixed

roman1528 · 05 März 2016, 09:00:15

Sauber... Das läuft
Ich mach dann mal weiter... mit dem testen

P.S.
Du kannst mir nicht zufällig... Wenn du ganz viel Zeit hast! ...folgendes auf 2.0 ändern.
[Ich verstehe nicht wieso... aber es funktioniert trotzdem so wie es ist....]

Code Auswählen


// Version Chris1284 15-11-2015 18:15 V1.0
// Edit roman1528 (added Colorized event; onset and expires timestamps)
var widget_gds = {
	_gds: null,
	elements: null,
	init: function () {
		console.log("gds");	
		_gds=this;
		_gds.elements = $('div[data-type="gds"]');
		_gds.elements.each(function(index) {
			var device = $(this).data('device');
			console.log("device: " + device);
			console.log("get: " + $(this).data('get'));	
			console.log("max: " + $(this).data('max'));	
			$(this).data('get', $(this).data('get') || 'state');
			$(this).data('max', $(this).data('max') || 10);
			if ($(this).data('get') == 'alert') {
				value = $(this).data('max');
				$(this).data('a_count', 'a_count');
				readings['a_count'] = true;
				for (i = 0; i <= value; i++) {
					$(this).data('a_'+i+'_event', 'a_'+i+'_event');
					readings['a_'+i+'_event'] = true;
					$(this).data('a_'+i+'_description', 'a_'+i+'_description');
					readings['a_'+i+'_description'] = true;
					$(this).data('a_'+i+'_onset_local', 'a_'+i+'_onset_local');
					readings['a_'+i+'_onset_local'] = true;
					$(this).data('a_'+i+'_expires_local', 'a_'+i+'_expires_local');
					readings['a_'+i+'_expires_local'] = true;
					$(this).data('a_'+i+'_eventCode_AREA_COLOR_hex', 'a_'+i+'_eventCode_AREA_COLOR_hex');
					readings['a_'+i+'_eventCode_AREA_COLOR_hex'] = true;
				}
			}
		});
	},
	update: function (dev,par) {
		var deviceElements;
		var text = "";
		var acounter;
		if ( dev == '*' ) {deviceElements= _gds.elements;}
		else {deviceElements= _gds.elements.filter('div[data-device="'+dev+'"]');}

		deviceElements.each(function(index) {
				var get = $(this).data('get');
				if ($(this).data('get') == 'state') { $(this).html( "<div data-type=\"label\" class=\"cell\">No DATA-GET SET</div>");}
				else if ($(this).data('get') == 'alert') {
					acounter = getDeviceValue($(this), 'a_count');
					if ( acounter >= 1 && acounter > $(this).data('max')) {
						for (i = 0; i <= ($(this).data('max') - 1); i++) {
							text += "<div class=\"cell top-space\">";
							text += "<div data-type=\"label\" class=\"cell large\" style=\"color:#" + getDeviceValue($(this), 'a_'+i+'_eventCode_AREA_COLOR_hex')+ ";\">Warnung vor " + getDeviceValue($(this), 'a_'+i+'_event') + ":</div>";
							text += "<div data-type=\"label\" class=\"cell large\" >" + getDeviceValue($(this), 'a_'+i+'_description')+ "</div>";
							text += "<div data-type=\"label\" class=\"cell large\" >Von: " + getDeviceValue($(this), 'a_'+i+'_onset_local')+ " bis: " + getDeviceValue($(this), 'a_'+i+'_expires_local')+ "</div>";
							text += "</div>";
						}
					}
					else if ( acounter >= 1 && acounter <= $(this).data('max') ) {
						for (i = 0; i <= (acounter -1); i++) {
							text += "<div class=\"cell top-space\">";
							text += "<div data-type=\"label\" class=\"cell large\" style=\"color:#" + getDeviceValue($(this), 'a_'+i+'_eventCode_AREA_COLOR_hex')+ ";\">Warnung vor " + getDeviceValue($(this), 'a_'+i+'_event') + ":</div>";
							text += "<div data-type=\"label\" class=\"cell large\" >" + getDeviceValue($(this), 'a_'+i+'_description')+ "</div>";
							text += "<div data-type=\"label\" class=\"cell large\" >Von: " + getDeviceValue($(this), 'a_'+i+'_onset_local')+ " bis: " + getDeviceValue($(this), 'a_'+i+'_expires_local')+ "</div>";
							text += "</div>";
						}
					}
					else {text += "<div data-type=\"label\" class=\"cell\">Es liegen keine Warnungen vor.</div>";}
					$(this).html( text );
				}
			});
		}	 
};

Da was einfügen is ja ganz easy. Aber die Änderung jetzt.. ich weiß nicht was ich machen muss...

setstate · 05 März 2016, 09:59:28

Übrigens: die externen Widgets: widget_mpdnowplaying und widget_joinedlabel sind mit 2.0 auch nicht mehr kompatibel. Als Ersatz kann ich die Benutzung von mehreren Labels 'inline' empfehlen:

Code Auswählen


<div class="container bg-gray margin padding round top-space truncate">
    <div data-type="label" data-device="MPD1" data-get="artist" class="bold inline"></div>
    <div data-type="label" data-device="MPD1" data-get="title" class="inline"></div>
</div>

roman1528 · 06 März 2016, 10:22:35

Joa so... Erstes Fazit:

Schnell zuverlässig und was das Ladeverhalten angeht: Fehlerfrei. (dazu muss ich sagen, dass ich jetzt entgültig alle data-template="" rausgeschmissen habe!)

Einige, von FTUI mitgelieferte Widgets, sind noch nicht aktuell: (Liste wird aktualisiert wenn ich noch was finde!)

- image
- homestatus (get ok, set ohne toast-message)
- slider
- symbol (holt am Anfang keine Werte. Wird nur per longpoll aktualisiert...)

Dazu ist zu sagen, dass ich auch nicht alle Widgets nutze!

Schön wäre eine Änderung der 3rd-Party Widgets oder wenigstens eine Anleitung (für JS-Noob's wie mich) was, wie geändert werden muss.
In meinem Fall handelt es sich um:

- gds
- wind_direction
- klimatrend
- weather (scheint allerdings zu laufen)

Das war's erstmal... Mal sehen was noch kommt.

Alles in allem bin ich zufrieden mit der 2.0. Vorallem was das Ladeverhalten angeht.

Grüße^^

zap · 06 März 2016, 14:12:19

Zitat von: roman1528 am 06 März 2016, 10:22:35
Joa so... Erstes Fazit:

Schnell zuverlässig und was das Ladeverhalten angeht: Fehlerfrei. (dazu muss ich sagen, dass ich jetzt entgültig alle data-template="" rausgeschmissen habe!)

Wenn Du den Apache einsetzt, kannst Du mit geringem Aufwand SSI aktivieren und dann die data-templates quasi 1:1 durch <!--#include ... ersetzen. Das ist (bei mir) deutlich stabiler als über die Templates.

roman1528 · 06 März 2016, 18:08:16

Zitat von: zap am 06 März 2016, 14:12:19
Wenn Du den Apache einsetzt, kannst Du mit geringem Aufwand SSI aktivieren und dann die data-templates quasi 1:1 durch <!--#include ... ersetzen. Das ist (bei mir) deutlich stabiler als über die Templates.

Jap... ich weiß... aber ob ich nun den ganzen Inhalt in einem File habe, oder er macht mir aus zwei Files erstmal ein File um es mir dann zu geben... und das auf dem RPi2 dessen Kapazitäten leider (auch von apache) nicht genutzt werden weil alles nur über einen Kern läuft und nicht per Multithread über mehrere Kerne...

Ich bin immer noch dafür, dass FHEM von vornherein mit einer vernünftigen Server-Source ausgeliefert wird.

Trotzdem Danke für deinen Hinweis. Ich hatte das bereits probiert und es hat mich nicht dermaßen überzeugt...

Grüße^^

zap · 06 März 2016, 19:43:14

Zitat von: roman1528 am 06 März 2016, 18:08:16
Jap... ich weiß... aber ob ich nun den ganzen Inhalt in einem File habe, oder er macht mir aus zwei Files erstmal ein File um es mir dann zu geben... und das auf dem RPi2 dessen Kapazitäten leider (auch von apache) nicht genutzt werden weil alles nur über einen Kern läuft und nicht per Multithread über mehrere Kerne...

Wie kommst Du denn darauf?

Code Auswählen


top - 19:40:59 up 20 days,  1:41,  1 user,  load average: 0.17, 0.18, 0.21
Tasks: 107 total,   1 running, 105 sleeping,   0 stopped,   1 zombie
%Cpu0  :  1.1 us,  0.7 sy,  0.0 ni, 98.2 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
%Cpu1  :  1.0 us,  1.3 sy,  0.0 ni, 97.7 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
%Cpu2  :  0.3 us,  1.0 sy,  0.0 ni, 98.7 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
%Cpu3  :  1.0 us,  0.7 sy,  0.0 ni, 98.3 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
KiB Mem:    949472 total,   914008 used,    35464 free,    23104 buffers
KiB Swap:   131068 total,    15960 used,   115108 free,   679896 cached

  PID USER      PR  NI  VIRT  RES  SHR S  %CPU %MEM    TIME+  COMMAND                                           
14411 fhem      20   0 78960  68m 6336 S   1.3  7.4  77:43.46 perl                                              
12048 root      20   0  3112 2032 1668 R   0.7  0.2   0:00.34 top                                               
   12 root      20   0     0    0    0 S   0.3  0.0   0:37.25 ksoftirqd/1                                       
 1610 root      20   0     0    0    0 S   0.3  0.0  12:11.00 kworker/0:2                                       
 2727 root       5 -15  6404 2356 1948 S   0.3  0.2  81:33.21 loggerd                                           
14523 fhem      20   0 61084  33m 3312 S   0.3  3.6   8:52.82 perl                                              
    1 root      20   0  2112 1188 1160 S   0.0  0.1   0:48.35 init                                              
    2 root      20   0     0    0    0 S   0.0  0.0   0:00.05 kthreadd                                          
    3 root      20   0     0    0    0 S   0.0  0.0   3:18.19 ksoftirqd/0                                       
    5 root       0 -20     0    0    0 S   0.0  0.0   0:00.00 kworker/0:0H                                      
    7 root      20   0     0    0    0 S   0.0  0.0  30:45.02 rcu_preempt                                       
    8 root      20   0     0    0    0 S   0.0  0.0   0:00.00 rcu_sched                                         
    9 root      20   0     0    0    0 S   0.0  0.0   0:00.00 rcu_bh                                            
   10 root      rt   0     0    0    0 S   0.0  0.0   0:45.17 migration/0

Sicher, FHEM selbst läuft nur in einem Kern (doofer Perl-Interpreter). Beim Apache lasse ich von vornherein mehrere Prozesse starten.

setstate · 06 März 2016, 21:28:38

Zitat von: roman1528 am 06 März 2016, 10:22:35

Schön wäre eine Änderung der 3rd-Party Widgets oder wenigstens eine Anleitung (für JS-Noob's wie mich) was, wie geändert werden muss.
In meinem Fall handelt es sich um:

alt

Code Auswählen

TOAST && $.toast("texttexttext");
neu

Code Auswählen

ftui.toast("texttexttext");

alt

Code Auswählen

DEBUG && console.log('text1','text2');
neu

Code Auswählen

ftui.log(1,'text1,'+' text2');

alt

Code Auswählen

readings[$(this).data('get')] = true;
neu

Code Auswählen

elem.addReading('get');

Ansonsten kann man sich am Format der widget_example.js orientieren
https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/widget_example.js

bm7777 · 06 März 2016, 21:39:55

Umgestellt und alles läuft bis jetzt.
Sehr viel schneller und stabiler. Super.

tomster · 06 März 2016, 22:14:31

Bei mir lädt die Seite zwar, aber die Pagetabs sind immer noch ohne Funktion. Hab ich etwas übersehen oder läuft das noch nicht mit 2.0?

roman1528 · 06 März 2016, 22:18:08

Zitat von: tomster am 06 März 2016, 22:14:31
Bei mir lädt die Seite zwar, aber die Pagetabs sind immer noch ohne Funktion. Hab ich etwas übersehen oder läuft das noch nicht mit 2.0?

hast du debug auf 1? mach mal auf 0 ... würd mich interessieren... wie schon gesagt. bei mir klappt mit debug 1 gar nichts.

tomster · 06 März 2016, 22:31:24

Klar, debug ist auf 0. Mit 1 geht bei mir auch gar nix.
Ich hab allerdings auch wieder Ladeprobleme festgestellt, seit ich gerade ein paar Elemente wieder auf data-templates umgestellt habe...

roman1528 · 06 März 2016, 22:47:29

Witzig...

Ladeprobleme hab ich absolut keine mehr...

Bis auf einige Readings die er sich beim Aufruf der Seite nicht holt. Erst per longpoll aktualisierung werden sie dann richtig angezeigt. Speziell beim Symbol-Widget. Aber auch beim Slider....
Und mit einer RegEx habe ich seit Umstellung Probleme... Habe die jetzt schon 2 mal überarbeitet... sie tuts trotzdem nicht... Kann also auch daher kommen, das Problem mit Symbol...