New FHEM Tablet UI

matrois · 30 September 2015, 11:52:42

Zitat von: aeronaut am 28 September 2015, 17:57:29
Hi matrois, ich nutze Pagetab-Widgets für das Menü auf der linken Seite, die einzelnen Menüpunkte werden jeweils eingefärbt, wenn aktiv.

Ich habe mir das von den Beispielen abgeschaut. Ich bin mir aber nicht sicher, ob ich dein Problem verstanden habe.

Das Menupunkte kannst du etwa so:
Code Auswählen Erweitern
<div data-type="pagetab" data-url="main.html" data-icon="fa-home" data-on-background-color="#CC7A00" class="cell big"> </div>

in deine inc_homebutton.html einfügen.

lg
aeronaut

Danke für den Hinweis. Ich hatte gedacht, dass Deine Lösung evtl. nicht mit "pagetab" realisiert wurde. Bei der "pagetab" Lösung gefällt mir nicht, dass praktisch kein "echter" Seitenwechsel stattfindet. Man merkt es z.B. daran, dass kein abweichender Seitentitel (durch Änderung des Titel-Tags) benutzt werden kann. Daher bin ich auf der Suche nach einer Lösung wie man z.B. einen Button in Abhängigkeit von der aktuellen URL einfärben kann.

Gibt es evtl. doch eine Möglichkeit bei den vorhandenen Randbedingungen den Button in Abhängigkeit von der aktuellen URL einfärben zu können?
setstate hatte da eine Möglichkeit angesprochen, die ich allerdings leider nicht verstehe / umsetzen kann.

Zitat von: setstate am 25 September 2015, 11:50:48
Thema URL Button: sollte mit einem Zweizeiler im Button Widget machbar sein, das dieser auf aktiv geht, wenn die hinterlegte URL aktiv ist und alle anderen im gleichen Div Verbund gehen auf OFF. Das geht einfach über den Jquery Selektor.

nightstorm99 · 30 September 2015, 12:22:26

Hallo matrois,

ZitatDanke für den Hinweis. Ich hatte gedacht, dass Deine Lösung evtl. nicht mit "pagetab" realisiert wurde. Bei der "pagetab" Lösung gefällt mir nicht, dass praktisch kein "echter" Seitenwechsel stattfindet. Man merkt es z.B. daran, dass kein abweichender Seitentitel (durch Änderung des Titel-Tags) benutzt werden kann. Daher bin ich auf der Suche nach einer Lösung wie man z.B. einen Button in Abhängigkeit von der aktuellen URL einfärben kann.

Gibt es evtl. doch eine Möglichkeit bei den vorhandenen Randbedingungen den Button in Abhängigkeit von der aktuellen URL einfärben zu können?
setstate hatte da eine Möglichkeit angesprochen, die ich allerdings leider nicht verstehe / umsetzen kann.

Ja es gibt eine andere Variante.
In den Demos von "nesges" ist eine drin. Er macht dieses mit Javascript und Css.

Hier kannst du das in der index.html und den einzelnen Räumen dir anschauen: https://github.com/ovibox/fhem-ftui-user-demos/tree/master/user-demos/nesges/html/room

Gruß
Denny

setstate · 30 September 2015, 12:38:49

Mit dem Button Widget und URL Umschalten habe ich schon experimentiert, gefiel mir aber noch nicht. Der Button wird zwar korrekt eingefärbt, aber beim Umschalten sind für eine kurze Zeit zwei Buttons bunt, das kann ich so noch nicht releasen.

matrois · 30 September 2015, 13:21:53

@nightstorm99: Danke für den Hinweis. Kann es sein, dass die colors.js von nesges mittlerweile nicht mehr erforderlich ist?
Im Demo von nesges gibt es keine "inc_menu.html" Datei. Wenn ich für jeden Menüpunkt eine eigene komplette html-Datei schreibe bekomme ich die Färbung schon durch das Setzen von entsprechenden Eigenschaften hin (data-color / data-background-color) ohne dass ich die colors.js einbinden muss. Aber ich möchte nicht das Menü in jeder Datei neuschreiben, sondern nur einmal eine Datei "inc_menu.html" benutzen (,damit eine Menüänderung leichter zu realisieren ist). Dazu müsste sich das Menü bzw. die Buttons "von selbst" einfärben. Falls ich die Lösung von nesges gar nicht ganz durchblickt haben sollte bin ich für jeden Hinweis dankbar...

@setstate: Wenn ggf. eine ergänzende Funktionalität in der Richtung im Button Widget integriert wird warte ich erstmal ab. Vielen Dank. Falls vor dem Release noch Betatester gebraucht werden stelle ich mich gerne bereit.

nightstorm99 · 30 September 2015, 14:06:05

Hallo matrois,

ja das geht einfacher.

Folgendes habe ich in jeder Seite als Standard hinterlegt.
Im style muss dann immer das geändert werden(hier also #room_index), was im 2. Code in id steht:

Code Auswählen

<div class="gridster">
<ul>
<style>
    #room_index #bg {
        color: rgb(170,105,0) !important;
        border: 3px 
    }
</style>

<!-- ========= HOME BUTTON  =============== -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="menu_home.html" ></li>

<!-- ========= Linkes-Hauptmenü =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="5" data-template="menu_zimmer.html"></li>

<!-- ========= WETTER OBEN ================ -->
<!-- ====================================== -->		
<li data-row="1" data-col="2" data-sizex="3" data-sizey="1" data-template="menu_wetter.html"></li>

<!-- ========= UHR ======================== -->
<!-- ====================================== -->	
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1" data-template="menu_uhr.html"></li>

<!-- ========= AUSSENTEMP oben== ========== -->
<!-- ====================================== -->	
<li data-row="1" data-col="6" data-sizex="3" data-sizey="1" data-template="menu_aussentemp.html"></li>

<!-- ========= TEMPERATURÜBERSICHT ======== -->
<!-- ====================================== -->	
<li data-row="1" data-col="9" data-sizex="1" data-sizey="1" data-template="menu_tempbutton.html"></li>

<!-- ========= Rechtes-Hauptmenü ========== -->
<!-- ====================================== -->
<li data-row="2" data-col="9" data-sizex="1" data-sizey="5" data-template="menu_system.html"></li>

menu_home.html sieht wie folgt aus:

Code Auswählen

<header style="font-size: 150%;">HOME</header>
		<a id="room_index" href="index.html" class="cell fa-stack fa-3x">
    		<i id="bg" class="fa fa-stack-2x fa-square blue" ></i>
    		<i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(255,255,255);"></i>
    	</a>	

		<div data-type="label" class="large darker">HOME</div>

Durch id="room_index" leuchtet dann der Button.
Ich hoffe das hilft?

Gruß
Denny

tommy3221 · 30 September 2015, 17:31:29

Hallo, könnte mir jemand auf die Sprünge helfen

Ich frage den Status meiner Fenster und Türen ab. Bislang wurde das auch immer richtig angezeigt, aber nach diversen Updates schiebt sich das jetzt aufeinander und ich sehe den Status nicht mehr.

Code Auswählen

header>Fenster und TÃ¼ren</header>
		<div class="left">
			<div data-type="contact" data-device="Bad.Fenster"
				data-get-on='["open","tilted","closed"]'
				data-on-colors='["#aa6900","#993300","#505050"]'
				class="small narrow" >
			</div>
			<div data-type="label" class="narrow darker">Bad</div>
		</div>
		<div class="left">
			<div data-type="contact" data-device="Dach.Fenster"
				class="small narrow" >
			</div>
			<div data-type="label" class="narrow darker">Wz FD</div>
		</div>
		<div class="left">
			<div data-type="contact" data-device="Wz.Fenster_1"
				data-get-on='["open","tilted","closed"]'
				data-on-colors='["#aa6900","#993300","#505050"]'
				class="small narrow" >
			</div>
			<div data-type="label" class="narrow darker">Wz F1</div>
		</div>
		<div class="left">
        		<div data-type="contact" data-device="TuerKontaktFlur_Wohnungstuer"
				class="small narrow" >
			</div>
        		<div data-type="label" class="narrow darker">Flur T</div>
		</div>

nightstorm99 · 30 September 2015, 20:56:59

Hallo setState,

ich habe nach den letzten Updates auch Probleme mit den Zuständen der Readings von FHEM.

Im ersten Screenshot sieht man den Zustand direkt nach dem Aufruf der Seite. In der Mitte sind die Jalousien.
Das ist alles ein und das selbe Dummy. Hier sind aber 2 Zustände aktiv, was nicht gehen kann.
Aktualisiere ich die Seite ist Screenshot 2, alles iO. !!!

Muss irgendwie am Cache liegen. Kann ich diesen ausschalten generell? ? ? ? ?

Danke und Gruß
Denny

nightstorm99 · 30 September 2015, 21:20:52

Hallo,

habe noch eine Frage zum Widget Symbol.
Wie kann ich dort dem Hintergrund die class -> blue zuweisen?
Ich möchte, wie im Beitrag davor zu sehen, meinen Symbolen zum anzeigen den gleichen Look wie die Switches geben.

Code Auswählen

<div class="cell inline">
<div data-type="symbol" data-device="Huawei_P1" data-get-on='["present","absent"]' data-icons='["fa-users","fa-user-times"]' data-on-colors='["SeaGreen","GoldenRod"]' data-background-icon="fa-square" class="cell fa-3x blue"></div>
<div data-type="label" class="cell darker narrow large">ICH</div>
</div>

Mein background Icon soll jetzt aber blue sein!

Danke und Gruss
Denny

matrois · 01 Oktober 2015, 16:35:52

Zitat von: nightstorm99 am 30 September 2015, 14:06:05
Hallo matrois,

ja das geht einfacher.

Folgendes habe ich in jeder Seite als Standard hinterlegt.
Im style muss dann immer das geändert werden(hier also #room_index), was im 2. Code in id steht:
Code Auswählen Erweitern
<div class="gridster"> <ul> <style> #room_index #bg { color: rgb(170,105,0) !important; border: 3px } </style>   <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="menu_home.html" ></li>   <li data-row="2" data-col="1" data-sizex="1" data-sizey="5" data-template="menu_zimmer.html"></li>   <li data-row="1" data-col="2" data-sizex="3" data-sizey="1" data-template="menu_wetter.html"></li>   <li data-row="1" data-col="5" data-sizex="1" data-sizey="1" data-template="menu_uhr.html"></li>   <li data-row="1" data-col="6" data-sizex="3" data-sizey="1" data-template="menu_aussentemp.html"></li>   <li data-row="1" data-col="9" data-sizex="1" data-sizey="1" data-template="menu_tempbutton.html"></li>   <li data-row="2" data-col="9" data-sizex="1" data-sizey="5" data-template="menu_system.html"></li>

menu_home.html sieht wie folgt aus:
Code Auswählen Erweitern
<header style="font-size: 150%;">HOME</header> <a id="room_index" href="index.html" class="cell fa-stack fa-3x"> <i id="bg" class="fa fa-stack-2x fa-square blue" ></i> <i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(255,255,255);"></i> </a> <div data-type="label" class="large darker">HOME</div>

Durch id="room_index" leuchtet dann der Button.
Ich hoffe das hilft?

Gruß
Denny

Meine menu_left_main.html sieht so aus:

Code Auswählen


<div data-url="flur.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

<div data-url="wozi.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

<div data-url="kind.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

<div data-url="bad.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

<div data-url="Schlafen.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

<div data-url="Keller.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

Wenn ich die Lösung mit id="room_index" umsetzen wollte müsste ich pro Raum eine eigene Menüdatei erstellen in der durch das Setzen der ID der richtige Button leuchtet (in der "menu_left_main_wozi.html" könnte ich durch Setzen der id="room_index" beim Wozi den Button Wozi hervorheben). Diese Lösung würde aber beinhalten, dass ich pro Raum die Menüdatei einmal kopieren müsste. Eine spätere Menüänderung müsste in allen Kopien durchgeführt werden.

Ich bin auf der Suche nach einer Lösung bei der ich nur eine Menüdatei benötige und der "richtige Button" sollte bei meiner Wunschlösung automatisch hervorgehoben werden. Wenn ich meiner Phantasie freien Lauf lassen darf könnte das so eine Eigenschaft a lá "highlight" sein. Mein "Wunschbeispiel"

:

Code Auswählen


<div data-url="wozi.html" 
     data-type="button" 
     data-icon="fa-group" 
     highlight-fg="#000000"
     highlight-bg="#ffffff"
     class="cell small"></div>

<div data-url="kind.html" 
     data-type="button" 
     data-icon="fa-group" 
     highlight-fg="#000000"
     highlight-bg="#ffffff"
     class="cell small"></div>

<div data-url="flur.html" 
     data-type="button" 
     data-icon="fa-group" 
     class="cell small"></div>

Erklärung:
* Der Button "Wozi" wird weiß auf schwarz, wenn die data-url "wozi.html" ist. Der Rest der Buttons ist "normal" gefärbt.
* Der Button "Kind" wird weiß auf schwarz, wenn die data-url "kind.html" ist. Der Rest der Buttons ist "normal" gefärbt.
* Der Button "Flur ist unbeeindruckt von der data-url.

setstate · 01 Oktober 2015, 19:16:09

Zitat von: nightstorm99 am 30 September 2015, 21:20:52
Hallo,

habe noch eine Frage zum Widget Symbol.
Wie kann ich dort dem Hintergrund die class -> blue zuweisen?
Ich möchte, wie im Beitrag davor zu sehen, meinen Symbolen zum anzeigen den gleichen Look wie die Switches geben.

...
Mein background Icon soll jetzt aber blue sein!

Mann darf Dual State Notation nicht mit Multi State Notation vermischen
So passt das in Multi State Notation (Arrays):

Code Auswählen


<div data-type="symbol" 
        data-device="Huawei_P1" 
        data-states='["present","absent"]' 
        data-background-icons='["fa-square","fa-square"]' 
        data-icons='["fa-users","fa-user-times"]' 
        data-background-colors='["RoyalBlue ","RoyalBlue "]' 
        data-colors='["#2a2a2a","#2a2a2a"]' 
        class="bigger"></div>
  <div data-type="label" class="darker narrow large">ICH</div>

harry66 · 01 Oktober 2015, 19:31:27

Hi,

hat sich irgendetwas im select_Widget geändert?

Es werden bei mir keine Einträge in dem Listenfeld angezeigt.

Ich habe schon mal in Wiki und im Github gesucht, konnte aber keine Ursache finden.

Code Auswählen

<div data-type="select" 
	data-device="wz.SqueezPi" 
	data-items='["http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live",
	"http://wdr-mp3-m-wdr2-dortmund.akacast.akamaistream.net/7/789/119456/v1/gnl.akacast.akamaistream.net/wdr-mp3-m-wdr2-dortmund",
	"http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-radiorur/livestream.mp3"]' 
	data-alias='["1Live","WDR2","RadioRur"]' 
	data-get="input" 
	data-set="playlist play" 
	class="cell w2x" >

Gruß Rolf

setstate · 01 Oktober 2015, 19:56:39

Zitat von: harry66 am 01 Oktober 2015, 19:31:27
Hi,

hat sich irgendetwas im select_Widget geändert?

Es werden bei mir keine Einträge in dem Listenfeld angezeigt.

Ich habe schon mal in Wiki und im Github gesucht, konnte aber keine Ursache finden.
...
Gruß Rolf

Nö, sollte alles genauso funktionieren.
Das Device "wz.SqueezPi" gibt es noch im FHEM? Wenn nicht, ist es normal, dass die Liste leer ist.

harry66 · 01 Oktober 2015, 20:23:56

ist ja seltsam

in der index-example.html werden auch keine Listeneinträge angezeigt (weis aber nicht ob das schon mal funktionierte)

setstate · 01 Oktober 2015, 21:10:16

Zitat von: harry66 am 01 Oktober 2015, 20:23:56
ist ja seltsam

in der index-example.html werden auch keine Listeneinträge angezeigt (weis aber nicht ob das schon mal funktionierte)

wie gesagt, das Gerät unter data-device muss verfügbar sein und auch das Reading unter data-input haben, nur dann wird auch die Liste generiert.
Was spuckt FHEM aus, wenn du

Code Auswählen

list wz.SqueezPi input in der Web-Kommando-Zeile eingibst?

harry66 · 01 Oktober 2015, 21:39:18

ok Fehler gefunden Readings(input) gab es nicht oder nicht mehr, vermute mal weil ich das SB_PLAYER aktualisiert hatte.

Ich habe jetzt data-get="currentMedia" gesetzt und siehe da meine Liste ist wieder da

Ich sollte mir angewöhnen nicht immer alle Updates gleichzeitig zu machen und zwischendurch alles zu testen

Danke ohne den Denkanstoß wäre ich so schnell nicht drauf gekommen.

Gruß Rolf