New FHEM Tablet UI

wolfram · 22 Juni 2015, 13:42:36

Hallo zusammen,

ich habe noch eine Frage

: ich verwende das iTunes-Modul, das läuft auch soweit ganz gut.

http://www.fhemwiki.de/wiki/ITunes-Modul_-_Installation_und_pairing

Jetzt habe ich Start/Stop/Pause usw. in "New FHEM Tablet UI" eingebunden, kann steuern und lasse ich mir das Cover das akutell laufenden Titels einblenden. Dazu liefert mir die Standardoberfläche, bzw. das reading des Moduls (currentAlbumArtURI = ./www/images/default/iTunes/iTunes_minime_AlbumArt-1.png) auch den Pfad zum Bild. Diesen habe ich über das image-Widget in "New FHEM Tablet UI" eingebunden und sehe auch das, bzw. ein Cover.

Das Problem ist nur, dass sich das Cover bei einem Titelwechsel nicht sofort aktualisisert, sondern stehen bleibt. Nach mehrmaligem skippen des Titels kommt auch hin und wieder mal ein neues Cover, aber selten wechselt dieses so, dass ich wirklich das des aktuellen Titels sehe.

Den Aktualiserungsintervall für das image-Widget habe ich auch angepasst, allerdings ohne Ergebnis. In der Standardoberfläche von FHEM akutalisiert es sich sofort bei Titelwechsel, nur eben nicht im "New FHEM Tablet UI".

Kann mir vielleicht jemand einen Tipp geben?

vielen Dank und schöne Grüße
wolf

mc-hollin · 22 Juni 2015, 13:48:28

Zitat von: wolfram am 22 Juni 2015, 13:14:39
Hallo zusammen,

eine kurze Frage zum Thermostat-Widget. Ich verwende dieses für die Lautstärkeregelung meines Verstärkers - was auch super klappt. Leider kommt meine Frau damit noch nicht so richtig zurecht, da sie meint, dass das Widget ihr zu klein sei.
Nun die Frage: gibt es eine Möglichkeit das Widget noch größer als "big" zu machen?

Vielen Dank und einen guten Start in die neue Woche
wolf

Hast du schon "bigger" oder "fa-4x" probiert?
Edit:Ok habs mal probiert. Funktioniert beides Nicht.
Ist anscheinend fest verdrahtet :

Code Auswählen


'height':$(this).hasClass('big')?150:100,
'width':$(this).hasClass('big')?150:100,

tomster · 22 Juni 2015, 15:42:05

Zitat von: tomster am 22 Juni 2015, 10:10:14
--nochmal edit--

Ha! Wer hätt's gedacht?! Bei einer anderen Cam, die einen mjpeg-Stream ausgibt funktoniert das oben verlinkte Script wunderbar. Probier ich gleich mal in's UI einzubauen....

Funktionieren? Prinzipiell, ja. Aber im Ergebnis dann doch eher: Denkste...
Irgendwas an der jquery.magnifier.js kommt mit den .js's vom Tablet UI in Konflikt. Alsbald ich

Code Auswählen


<script type="text/javascript" src="/fhem/tablet/lib/jquery.magnifier.js"></script>

in den <head> der index.html einbaue, bekomme ich lediglich noch eine schwarze Seite angezeigt. Auch wenn ich der Meinung bin, dass es sicher etwas viel verlangt ~~sein dürfte~~ ist, danach zu fragen:
Hat jemand (setstate, nesges?) eine Idee, warum es unbedingt meint "konfliktisieren" zu müssen? In der Webkonsole kann ich keine Fehlermeldung im Bezug auf die jquery.magnifier.js finden...

Code Auswählen


jQuery.noConflict()

jQuery.imageMagnify={
	dsettings: {
		magnifyby: 3, //default increase factor of enlarged image
		duration: 500, //default duration of animation, in millisec
		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
 	},
	cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
	zIndexcounter: 100,

	refreshoffsets:function($window, $target, warpshell){
		var $offsets=$target.offset()
		var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
		warpshell.attrs.x=$offsets.left //update x position of original image relative to page
		warpshell.attrs.y=$offsets.top
		warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
		warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
		if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
			warpshell.newattrs.x=winattrs.x+5	
		}
		else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
			warpshell.newattrs.x=winattrs.x+5
		}
		if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
			warpshell.newattrs.y=winattrs.y+5
		}
	},

	magnify:function($, $target, options){
		var setting={} //create blank object to store combined settings
		var setting=jQuery.extend(setting, this.dsettings, options)
		var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
		var newattrs={}
		newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
		newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
		$target.css('cursor', jQuery.imageMagnify.cursorcss)
		if ($target.data('imgshell')){
			$target.data('imgshell').$clone.remove()
			$target.css({opacity:1}).unbind('click.magnify')
		}	
		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
		$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
		$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
		$target.bind('click.magnify', function(e){ //action when original image is clicked on
			var $this=$(this).css({opacity:setting.imgopacity})
			var imageinfo=$this.data('imgshell')
			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
			var $clone=imageinfo.$clone
			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
			function(){ //callback function after warping is complete
				//none added		
			}) //end animate
		}) //end click
		$clone.click(function(e){ //action when magnified image is clicked on
			var $this=$(this)
			var imageinfo=$this.data('$relatedtarget').data('imgshell')
			jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
			$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
			function(){
				$this.hide()
				$this.data('$relatedtarget').css({opacity:1}) //reveal original image
			}) //end animate
		}) //end click
	}
};

jQuery.fn.imageMagnify=function(options){
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		var $imgref=$(this)
		if (this.tagName!="IMG")
			return true //skip to next matched element
		if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
			jQuery.imageMagnify.magnify($, $imgref, options)
		}
		else if (this.complete){ //account for IE not firing image.onload
			jQuery.imageMagnify.magnify($, $imgref, options)
		}
		else{
			$(this).bind('load', function(){
				jQuery.imageMagnify.magnify($, $imgref, options)
			})
		}
	})
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		var $imgref=$(this)
		if (this.tagName!="IMG")
			return true //skip to next matched element
		
	})	

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
	var $targets=$('.magnify')
	$targets.each(function(i){
		var $target=$(this)
		var options={}
		if ($target.attr('data-magnifyto'))
			options.magnifyto=parseFloat($target.attr('data-magnifyto'))
		if ($target.attr('data-magnifyby'))
			options.magnifyby=parseFloat($target.attr('data-magnifyby'))
		if ($target.attr('data-magnifyduration'))
			options.duration=parseInt($target.attr('data-magnifyduration'))
		$target.imageMagnify(options)
	})
	var $triggers=$('a[rel^="magnify["]')
	$triggers.each(function(i){
		var $trigger=$(this)
		var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
		$trigger.data('magnifyimageid', targetid)
		$trigger.click(function(e){
			$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
			e.preventDefault()
		})
	})
})

uniqueck · 22 Juni 2015, 16:22:05

Hab das nirgends mehr drinne. Habe nur noch deine Clock drin. Naja werde mal deine neue Version testen. Ich hatte die Sekundenanzeige auch entfernt, weil er manchmal auch zwei Sekunden weitergeschaltet hatte.

Gesendet von meinem GT-N7100 mit Tapatalk

StefanD · 22 Juni 2015, 16:28:47

Hallo zusammen,

hat jemand das FHEM Tablet UI schon auf einen anderen Webserver ausgelagert? Damit meine ich nicht die Demoinstallation von ngres, sondern schon eine im "produktiven" Zusammenspiel mit FHEM.

Für die Absicherung ext. Zugriffe habe ich auf meinem NUC, der aktuell ausschließlich für FHEM genutzt wird, nginx als ReverseProxy zwischengeschaltet. Da ich mittels PHP noch etwas mehr Dynamik, wie z.B. wechselnde Karten, etc. mit ins UI einbauen möchte und nginx prima mit PHP zusammenarbeitet, möchte ich nicht noch zus. Apache auf den NUC packen.

Beim ersten Versuch eine Tablet UI Instanz unter nginx zum Laufen zu bekommen, ist mir aufgefallen, dass nicht alle Zugriffe in das Tablet UI Verzeichnis erfolgen, sondern auch in parallel liegende der FHEM Installation. Da die nginx Instanz logischerweise auf einem anderen Port läuft, laufen diese Anfragen gegen die Wand.

Dass das Auslagern auf eine andere Webserver Instanz u.a. das komfortable Update nicht mehr unterstützt, ist mir klar. Den Nachteil würde ich zugunsten der von mir angestrebten Lösung akzeptieren.

Würde mich freuen, wenn der ein oder andere Tipp dazu käme.

Danke + VG Stefan

setstate · 22 Juni 2015, 22:08:29

Zitat von: setstate am 19 Juni 2015, 13:22:40
Das slider Widget mag nur Zahlen für den Wert. Man könnte auf Fhem Seite mit userReadings arbeiten

Ich könnte aber auch noch data-part ins Sliderwidget einbauen, so wie beim Labelwidget. Dann könnte man sich den Zahlenwert rausfiltern.

Das ist jetzt geschehen: slider, level, dimmer, volume widgets haben jetzt neu data-part
Damit kann man nur einen bestimmten Teil des Readings benutzen.
z.B. erhält man bei einem Wert 'dim 50' mit data-part="2" danach '50'

nightstorm99 · 22 Juni 2015, 22:17:37

Zitat von: setstate am 22 Juni 2015, 22:08:29
Das ist jetzt geschehen: slider, level, dimmer, volume widgets haben jetzt neu data-part
Damit kann man nur einen bestimmten Teil des Readings benutzen.
z.B. erhält man bei einem Wert 'dim 50' mit data-part="2" danach '50'

Hallo setstate,

vielen Dank dafür.

Ich habe aber noch ein Problem, mein FS20 Dimmer gibt/will folgenden Wert haben: dim65%
Kann ich dieses damit auch zerlegen?

Danke und Gruß
Denny

mc-hollin · 22 Juni 2015, 22:30:05

Gibt es eigentlich schon eine Möglichkeit eine Zeitschaltuhr zu realisieren?
Also ein Einschaltbefehl zu einer bestimmten Uhrzeit und für eine festgelegte Zeit.
In FHEM habe ich folgendes definiert:

Code Auswählen

define PoolpumpeMorgensStart at *06:30:00 set EG_Aussen_Steckdose on-for-timer 7200
Dies würde ich gerne über FTUI anzeigen und steuern.
Oder wäre das schon mit dem widget_setTimer möglich?
Hier fehlt mir nur noch die Laufzeit.

viegener · 22 Juni 2015, 22:49:23

Ich würde gerne bestimmte Buttons (Push und Switches) nur schalten, wenn zusätzliche Schritte aufgeführt werden.
Beispiel: Ich möchte ungerne aus Versehen meine Haustür öffnen, nur weil ich aus Versehen auf dem iPhone beim Scrollen auf den Knopf gedrückt habe.

Verschiedene Alternativen sind mir eingefallen:
- Ein popup zur Bestätigung beim Druck, bevor eine Aktion ausgelöst wird
- Ein anderer Knopf, der die anderen Knöpfe erst scharf/aktiv schaltet
- Ein Doppelclick --> das scheint vorgesehen zu sein, hat aber irgendwie bei mir nicht funktioniert (auf dem Desktop)

Hat das schon jemand gemacht, oder soll ich mich selbst mal dransetzen?

Gruss,
Johannes

mc-hollin · 22 Juni 2015, 23:06:17

Zitat von: viegener am 22 Juni 2015, 22:49:23
Verschiedene Alternativen sind mir eingefallen:
- Ein popup zur Bestätigung beim Druck, bevor eine Aktion ausgelöst wird
- Ein anderer Knopf, der die anderen Knöpfe erst scharf/aktiv schaltet
- Ein Doppelclick --> das scheint vorgesehen zu sein, hat aber irgendwie bei mir nicht funktioniert (auf dem Desktop)

Mir würde noch ein längerer Tastendruck einfallen. Z.B.:3Sekunden halten bevor der Befehl gesendet wird.
Vielleicht könnte man einen Button um einen Parameter für die Auslösezeit erweitern.

setstate · 23 Juni 2015, 01:02:31

Zitat von: xsasx am 19 Juni 2015, 12:52:16
Habe mal eine Frage.

Ich lass mir meine Keller Temperatur anzeigen mit:

Code Auswählen Erweitern
<div class=""> <div data-type="label" class="cell darker left">Keller  :</div> <div data-type="label" data-device="WT.Keller" data-get="temperature" data-unit="%B0C%0A" class="cell right"></div> <div>

Jetzt läuft im Hintergrund noch ein Script was meinen dewpoint errechnet (alle 10min) und sagt ob es sinnvoll ist zu lüften oder nicht.

Er schält set auf JA oder NEIN. Nun würd ich gerne in dieser Abhängigkeit die Farbe entweder von dem Namen Keller auf rot oder grün setzen oder eben die Farbe der Temperatur.

Das bekomme ich leider nicht hin hat mir da jemand einen Tipp ?

Edit: Was ich hinbekomme ist ein Icon das die Farbe entsprechend wechselt das will ich aber nicht

Code Auswählen Erweitern
<div data-type="label" class="cell darker left" >Keller  :</div> <div class=""> <div data-type="label" class="narrow darker small">Küche</div> <div data-type="symbol" data-device="Keller.Lueften" data-icons='["oa-fts_window_2w","oa-fts_window_2w_open"]' data-on-colors='["#fa334f","#008623"]' data-get-on='["NEIN","JA"]' class="cell"></div> </div>

Wäre über einen Tipp sehr Dankbar !

Das geht ab sofort: Label Widget hat jetzt mit data-limits-get ein neues Attribute um den Namen des Readings separat von data-get anzugeben, was die Farbe des Labels entsprechend des data-limits Arrays beeinflusst. Default ist der Inhalt von data-get, und damit abwärtskompatibel.

Beispiel:

Code Auswählen


<div data-type="label" data-device="WT.Keller" 
        data-get="temperature"   data-unit="%B0C%0A"
        data-colors='["#fa334f","#008623"]'  data-limits='["NEIN","JA"]'
        data-limits-get="Keller.Lueften:STATE">
</div>

Das Format von data-limits-get ist DEVICE:READING oder nur READING.

setstate · 23 Juni 2015, 02:06:17

Zitat von: wolfram am 22 Juni 2015, 13:14:39
Hallo zusammen,

eine kurze Frage zum Thermostat-Widget. Ich verwende dieses für die Lautstärkeregelung meines Verstärkers - was auch super klappt. Leider kommt meine Frau damit noch nicht so richtig zurecht, da sie meint, dass das Widget ihr zu klein sei.
Nun die Frage: gibt es eine Möglichkeit das Widget noch größer als "big" zu machen?

Vielen Dank und einen guten Start in die neue Woche
wolf

Was spricht gegen das Volume Widget? Man kann dort die Ticks auch wie beim Thermostat enger machen.

Code Auswählen


<div data-type="volume" data-device='dummy1'
        data-tickstep='4'
        class="big" ></div>

setstate · 23 Juni 2015, 02:14:47

Zitat von: nightstorm99 am 22 Juni 2015, 22:17:37
Hallo setstate,

vielen Dank dafür.

Ich habe aber noch ein Problem, mein FS20 Dimmer gibt/will folgenden Wert haben: dim65%
Kann ich dieses damit auch zerlegen?

Danke und Gruß
Denny

Ja, data-part versteht auch RegEx Ausdrücke

Code Auswählen

<div data-type="volume" data-device='dummy1' data-part="dim(\d+)%"></div>

setstate · 23 Juni 2015, 07:10:08

Zitat von: viegener am 22 Juni 2015, 22:49:23
Ich würde gerne bestimmte Buttons (Push und Switches) nur schalten, wenn zusätzliche Schritte aufgeführt werden.
Beispiel: Ich möchte ungerne aus Versehen meine Haustür öffnen, nur weil ich aus Versehen auf dem iPhone beim Scrollen auf den Knopf gedrückt habe.

Verschiedene Alternativen sind mir eingefallen:
- Ein popup zur Bestätigung beim Druck, bevor eine Aktion ausgelöst wird
- Ein anderer Knopf, der die anderen Knöpfe erst scharf/aktiv schaltet
- Ein Doppelclick --> das scheint vorgesehen zu sein, hat aber irgendwie bei mir nicht funktioniert (auf dem Desktop)

Doppelklick funktioniert, aber mit Millisekunden Angaben:

Code Auswählen


<div data-type="switch" data-device='dummy1' data-doubleclick="2000"></div>

Die Farben kann man mit folgendem noch beeinflussen:
-data-firstclick-color
-data-firstclick-background-color

Brockmann · 23 Juni 2015, 09:27:35

Zitat von: viegener am 22 Juni 2015, 22:49:23
Ich würde gerne bestimmte Buttons (Push und Switches) nur schalten, wenn zusätzliche Schritte aufgeführt werden.
Beispiel: Ich möchte ungerne aus Versehen meine Haustür öffnen, nur weil ich aus Versehen auf dem iPhone beim Scrollen auf den Knopf gedrückt habe.

Eine einfache Möglichkeit, die auch jetzt schon funktionieren sollte, wäre ein CIRCLEMENU mit nur einer Schaltfläche.
Ist vielleicht noch sicherer als ein Doppelklick, weil man an zwei verschiedenen Stellen Klicken/Tippen muss.

Vielleicht könnte man aber auch vom CIRCLEMENU ein Widget ableiten, das nur einen Button genau über dem ursprünglichen Symbol einblendet. Den kann man antippen und die Aktion wird ausgeführt und der Button wieder ausgeblendet. Oder wenn man nicht tippt, verschwindet er nach ein paar Sekunden wieder. Diese Basisfunktionalität ist ja im CIRCLEMENU schon drin. Vielleicht würde es sogar jetzt schon funktionieren, wenn man data-item-diameter auf 0 setzt oderso...

New FHEM Tablet UI

mc-hollin

mc-hollin

mc-hollin