New FHEM Tablet UI

kumue · 05 Januar 2016, 17:57:22

Ich häng mich mal an die Frage vopn Aladin222 dran.
Ist bei mir auch so.
Wird mit pct geschaltet (set xxx pct yyy) wird der Prozentwert angezeigt, der Button bleib aus.
Bei set xxx on geht der Button an und der Prozentwert 100 wird angezeigt.

justme1968 · 05 Januar 2016, 18:02:17

schau mal hier: http://forum.fhem.de/index.php/topic,34233.msg382280.html#msg382280

gruss
andre

kumue · 05 Januar 2016, 18:28:22

Zitat von: justme1968 am 05 Januar 2016, 18:02:17
schau mal hier: http://forum.fhem.de/index.php/topic,34233.msg382280.html#msg382280

gruss
andre

leider nein.
data-pct kannte ich nicht, aber wenn ich es anstelle von data-dim verwende, wird eine 1 angezeigt, egal wie hoch der Dim-Level ist... und Button bleibt grau...

EDIT:
das mit der 1 nehme ich zurück, da habe ich was verhauen...

Achim · 05 Januar 2016, 18:38:29

Hallo viegner,

ich habe deinen Javascript Code in meine index.html eingebaut. Funktioniert jetzt mit/ohne "/".

Ich habe auch meine fhem.cfg in das /usr/share/fhem Verzeichnis verschoben und die fhem Startdatei in /etc/init.d angepasst. Das die fhem.cfg im /etc Verzeichnis ist, kommt von einem Image, das ich als Grundlage für meine Installation verwendet habe.

Was nicht funktioniert, ist die relative Pfadangabe in der HTTPSRV Definition. Der Ausgangspunkt ist immer noch /etc. Warum auch immer. (Neustart RPi, Kontrolle ob fhem.cfg auch aus /usr/share/fhem verwendet wird, keine Eintrag über /etc in der fhem.cfg,... ) Ich habe jetzt den absoluten Pfad in der HTTPSRV Definition gelassen.

Vielen Dank für deine Hilfe

Viele Grüße
Achim

viegener · 05 Januar 2016, 20:33:03

@Achim: KLingt gut.
Das mit dem absoluten/relativen Pfad ist strange, allerdings ist mir auch nicht klar, warum die Dateien so verteilt sind.

kvo1 · 05 Januar 2016, 20:46:20

Hi Johannes,

ZitatEin Refresh mit F5 oder Strg-F5 deutet auf ein komplett getrenntes Problem hin (Netzwerkaussetzer / Geschwindigkeit des FHEMservers)?
Ohne Infos zu Plattform und Browser ist das aber raten

ich nutze Windows 7 Enterprice und Firefox ESR 38.5.1

Habe es aber auch mal mit Firefox 43.0.2 getestet.

Ich bekomme einfach keine "saubere" Anzeige hin !
Werde jetzt mal Chrome installieren

vg und danke für deine Hilfe/Geduld
klaus

FhemPiUser · 05 Januar 2016, 21:16:21

Hallo,

ich möchte meine Instar-IP-Kameras über iframe einbinden, aber irgendwie bekomme ich immer einen Fehler, obwohl die URLs direkt im Browser funktionieren. Habe es auch schon mit und ohne data-fill probiert...

Jemand eine Idee, woran das liegen könnte?

Code Auswählen

<li data-row="1" data-col="2" data-sizex="7" data-sizey="5">
        <header>Ipcams</header>
        <div data-type="iframe" data-src="http://192.168.1.xxx:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=13&-usr=xxx&-pwd=xxx" data-fill="yes"></div>
		<div data-type="label">Ipcam Haustür</div>
        <div data-type="iframe" data-src="http://192.168.1.xxx:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=13&-usr=xxx&-pwd=xxx" data-fill="yes"></div>
		<div data-type="label">Ipcam Terasse</div>
</li>

Update: gelöst auf basis des javascript codes auf den webseiten von instar...

viegener · 05 Januar 2016, 21:45:09

Zitat von: kvo1 am 05 Januar 2016, 20:46:20
ich nutze Windows 7 Enterprice und Firefox ESR 38.5.1

Habe es aber auch mal mit Firefox 43.0.2 getestet.

Ich befürchte das ist nicht das Problem (bei mir ist es auch Windows 7 prof bzw. ultimate und Firefox zwischendurch sicher auch 43.0.2)

Also liegt es möglicherweise an etwas anderem --> Greifst Du übers lokale Netz zu / was ist die Plattform (ist der vielleicht überlastet)?
Hast Du dasselbe Problem bei der index-example.html

Johannes

kvo1 · 05 Januar 2016, 22:54:15

Hallo Johannes,

ZitatAlso liegt es möglicherweise an etwas anderem --> Greifst Du übers lokale Netz zu / was ist die Plattform (ist der vielleicht überlastet)?
Hast Du dasselbe Problem bei der index-example.html

Ja der Zugriff erfolgt über das lokale Netzwerk, also per LAN am gleichen Switch !
Als Plattform habe einen CUBIE und testweise einen RPI2 ! Das die damit überlastet sind kann ich mir nicht wirklich vorstellen.

Ich habe sogar noch einen RPI1 (Optolink Adapter für Viessmann) und dort mal Deiner Demo (vom Mai 2015) draufgespielt und das läuft.

Werde das mal schrittweise neu angehen (müssen)

ich melde mich wieder !
Danke
klaus

viegener · 05 Januar 2016, 22:59:59

Zitat von: kvo1 am 05 Januar 2016, 22:54:15
Als Plattform habe einen CUBIE und testweise einen RPI2 ! Das die damit überlastet sind kann ich mir nicht wirklich vorstellen.

Ich habe sogar noch einen RPI1 (Optolink Adapter für Viessmann) und dort mal Deiner Demo (vom Mai 2015) draufgespielt und das läuft.

OK, macht Sinn. Ich glaube auch nicht, dass die überfordert sind

Wenn andere UIs gehen, würde ich in Firefox Firebug installieren und im Detail nach (möglichen) Problemen Ausschau halten.

Roli1606 · 06 Januar 2016, 01:15:07

Hallo,

ich bin schon länger am Probieren und habe schon einiges hin bekommen wie ich finde. Nun habe ich allerdings ein Problem mit der Ausrichtung einiger Elemente. hänge mal meine main.html hier rein .

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagetab
     <div data-type="pagetab" data-url="index_main.html" data-icon="fa-home" class="cell"></div>
    -->

    <!-- script type="text/javascript" src="/fhem/tablet/js/widget_circlemenu.js"></script -->

</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
        <header>BAD</header>
        <div data-type="thermostat" data-device="Heizung_Bad" data-valve="actuator" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
        <div class="top">
                <div data-type="symbol" data-device="Fenster_Bad" class="narrow big"></div>
                <div data-type="label" class="narrow darker small">Fenster</div>
				<div data-type="label" data-device="Heizung_Bad" data-get="humidity" data-unit="%" class="top-space-2x big"></div>
        </div>
</li>
<li data-row="1" data-col="5" data-sizex="3" data-sizey="2">
        <header>SCHLAFZIMMER</header>
        <div data-type="thermostat" data-device="Heiz_Schla_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
        <div class="top">
                <div data-type="symbol" data-device="Fenster_Schlafzimmer" data-get="open" class="narrow big"></div>
                <div data-type="label" class="narrow darker small">Fenster</div>
				<div data-type="label" data-device="Thermo_Schlaf_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div>
		</div>
</li>
<li data-row="1" data-col="8" data-sizex="5" data-sizey="2">
        <header>KINDERZIMMER</header>
		<div data-type="thermostat" data-device="Heiz_Kinder_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
		<div class="top left-space">
			<div class="cell top-space left">
				<div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90"  data-item-diameter="50">
				<ul class="menu">
                <li class="circleborder"><div data-type="label"
                         data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
                         data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
                         data-device='Jalousie_Kinderzimmer'
                         data-background-icon="fa-wrench"></div>
                </li>
                <li><div data-type="push"
                         data-device="Jalousie_Kinderzimmer"
						 data-cmd="set"
                         data-set-on="on"
                         data-icon="">auf</div></li>
                <li><div data-type="push"
                         data-device="Jalousie_Kinderzimmer"
                         data-set="pct"
						 data-set-on="75"
						 data-cmd="set"
						 data-icon="">75</div></li>
				<li><div data-type="push"
                         data-cmd="set"
                         data-device="Jalousie_Kinderzimmer"
                         data-set="pct"
						 data-set="50"
                         data-icon="">50</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="Jalousie_Kinderzimmer"
                         data-set="pct"
						 data-set-on="25"
                         data-icon="">25</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="Jalousie_Kinderzimmer"
                         data-set-on="off"
                         data-icon="">zu</div></li>
				</ul>
				</div>
				<div data-type="label" class="narrow darker small">Rollade</div>
			</div>
			<div class="container top left">
				<div data-type="symbol" data-device="Fenster_Kinderzimmer" class="narrow big"></div>
				<div data-type="label" class="narrow darker small">Fenster</div>
				<div data-type="label" data-device="Thermo_Kinder_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div>
			</div>
			<div class="cell top left">
				<div data-type="slider" 
				data-device='Dim_Kinder'
				data-get="level"
				data-min="0" 
				data-max="100"
				data-on="on"
				data-off="off"
				data-height="85">
				</div>
				<div data-type="label" class="darker small">Dimmer</div>
			</div>
		</div>
</li>
<li data-row="4" data-col="5" data-sizex="3" data-sizey="2">
        <header>Wohnkueche</header>
        <div data-type="thermostat" data-device="Heiz_Wohn_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
			<div calss="top-space right">
				<div data-type="switch" class="" 
				data-device="Zwi_Steck_Wohn" 
				data-get-on="on"
				data-get-off="off"></div>
				<div data-type="label" data-device="Thermo_Wohn_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div>
			</div>
</li>
<li data-row="4" data-col="2" data-sizex="4" data-sizey="2">
    <header>Buegelzimmer</header>
	<div data-type="thermostat" data-device="Heiz_Buegel_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
	<div class="inline top-space">
        <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="50">
			<ul class="menu">
				<li class="circleborder">
					<div data-type="label"
					data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
					data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
					data-device='Jalousie_Buegelzimmer'
					data-background-icon="fa-wrench">
					</div>
				</li>
				<li><div data-type="push"
                    data-device="Jalousie_Buegelzimmer"
					data-cmd="set"
                    data-set-on="on"
                    data-icon="">auf</div></li>
                <li><div data-type="push"
                    data-device="Jalousie_Buegelzimmer"
                    data-set="pct"
					data-set-on="75"
					data-cmd="set"
					data-icon="">75</div></li>
				<li><div data-type="push"
                    data-cmd="set"
                    data-device="Jalousie_Buegelzimmer"
                    data-set="pct"
					data-set="50"
                    data-icon="">50</div></li>
                <li><div data-type="push"
                    data-cmd="set"
                    data-device="Jalousie_Buegelzimmer"
                    data-set="pct"
					data-set-on="25"
                    data-icon="">25</div></li>
                <li><div data-type="push"
                    data-cmd="set"
                    data-device="Jalousie_Buegelzimmer"
                    data-set-on="off"
                    data-icon="">zu</div></li>
             </ul>
        </div>
		<div data-type="label" class="narrow darker small">Rollade</div>
	</div>
			<div class="inline">
				<div data-type="symbol" data-device="Fenster_Buegelzimmer" class="narrow big"></div>
				<div data-type="label" class="narrow darker small">Fenster</div>
				<div data-type="switch" data-device="Zwi_Steck_Buegel" data-get-pn="on" data-get-off="off" class="cell"></div>
			</div>
</li>
<li data-row="4" data-col="8" data-sizex="5" data-sizey="2">
    <header>Flur</header>
    <div data-type="thermostat" data-device="Heiz_Flur_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div>
	<div class="col-2-1">	
		<div class="col-2-1">
			<div data-type="switch" class="cell" data-device="Zwi_Steck_Flur" data-get-on="on" data-get-off="off"></div>
			<div class="">
				<div data-type="symbol" data-icon="ftui-door" data-device="Status_Haustuer" class="narrow big"></div>
				<div data-type="label" class="narrow darker small">Haustür</div>
			</div>
		</div>
		<div class="col-2-1">
			<div class="cell" data-type="multistatebutton" 
			data-device="Haustuer"
			data-get-on='["locked","unlocked"]'
			data-icons='["fa-lock", "fa-unlock"]'
			data-colors='["red", "green"]'
			data-set='["unlock", "lock"]'
			></div>
			<div class="" data-type="push" data-device="Haustuer" 
			data-icon="ftui-door" data-background-icon="fa-square-o" 
			data-set-on="open" data-get-on="open" data-on-color="#aa6900">
			</div>
		</div>
	</div>	
</li>
<li data-row="6" data-col="2" data-sizex="4" data-sizey="2">
	<header>Garagen</header>
		<div class="triplebox-h">
			<div class="inline">
				<div data-type="switch" data-device="Garagen_dm_Tor_Roland_Taster_tr"
				data-icon="oa-fts_garage" data-background-icon="fa-square-o" 
				data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050">
				</div>
				<div data-type="label" class="narrow darker">Garage</div>
				<div data-type="label" class="top-space darker">Roland</div>
			</div>
			<div class="inline">
				<div data-type="switch" data-device="Garagen_dm_Tor_Ingo_Taster_tr"
				data-icon="oa-fts_garage" data-background-icon="fa-square-o" 
				data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050">
				</div>
				<div data-type="label" class="narrow darker">Garage</div>
				<div data-type="label" class="top-space darker">Ingo</div>
			</div>
			<div class="inline">
				<div data-type="switch" data-device="Garagen_dm_Tor_Opa_Taster_tr"
				data-icon="oa-fts_garage" data-background-icon="fa-square-o" 
				data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050">
				</div>
				<div data-type="label" class="narrow darker">Garage</div>
				<div data-type="label" class="top-space darker">Opa</div>
			</div>
		</div>	
</li>	
</ul>
</div>
</body>

</html>

Wie man auf dem Bild sehen kann sind im Flur ein Switch und ein Label so angeordnet wie ich es haben möchte. Jetzt sollen der Multistatebutton und das Push Widget genau so rechts neben dem Switch und dem Label angeordnet sein.

Bin da schon seid 2 Tagen dran und habe einiges ausprobiert aber ich bekomme es nicht so hin wie es sein soll. Kann mir da vielleicht mal jemand auf die Sprünge helfen?

Und das 2. Problem das Label Dimmer im Kinderzimmer steht nicht genau unter dem Slider. Kann man das auch anpassen?

Danke im voraus Roland

roman1528 · 06 Januar 2016, 11:43:15

Zitat von: Roli1606 am 06 Januar 2016, 01:15:07
Hallo,

ich bin schon länger am Probieren und habe schon einiges hin bekommen wie ich finde. Nun habe ich allerdings ein Problem mit der Ausrichtung einiger Elemente. hänge mal meine main.html hier rein .

Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>   </head> <body> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li> <li data-row="1" data-col="2" data-sizex="3" data-sizey="2"> <header>BAD</header> <div data-type="thermostat" data-device="Heizung_Bad" data-valve="actuator" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top"> <div data-type="symbol" data-device="Fenster_Bad" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Heizung_Bad" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="1" data-col="5" data-sizex="3" data-sizey="2"> <header>SCHLAFZIMMER</header> <div data-type="thermostat" data-device="Heiz_Schla_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top"> <div data-type="symbol" data-device="Fenster_Schlafzimmer" data-get="open" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Thermo_Schlaf_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="1" data-col="8" data-sizex="5" data-sizey="2"> <header>KINDERZIMMER</header> <div data-type="thermostat" data-device="Heiz_Kinder_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top left-space"> <div class="cell top-space left"> <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="50"> <ul class="menu"> <li class="circleborder"><div data-type="label" data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]' data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]' data-device='Jalousie_Kinderzimmer' data-background-icon="fa-wrench"></div> </li> <li><div data-type="push" data-device="Jalousie_Kinderzimmer" data-cmd="set" data-set-on="on" data-icon="">auf</div></li> <li><div data-type="push" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set-on="75" data-cmd="set" data-icon="">75</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set="50" data-icon="">50</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set-on="25" data-icon="">25</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set-on="off" data-icon="">zu</div></li> </ul> </div> <div data-type="label" class="narrow darker small">Rollade</div> </div> <div class="container top left"> <div data-type="symbol" data-device="Fenster_Kinderzimmer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Thermo_Kinder_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> <div class="cell top left"> <div data-type="slider" data-device='Dim_Kinder' data-get="level" data-min="0" data-max="100" data-on="on" data-off="off" data-height="85"> </div> <div data-type="label" class="darker small">Dimmer</div> </div> </div> </li> <li data-row="4" data-col="5" data-sizex="3" data-sizey="2"> <header>Wohnkueche</header> <div data-type="thermostat" data-device="Heiz_Wohn_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div calss="top-space right"> <div data-type="switch" class="" data-device="Zwi_Steck_Wohn" data-get-on="on" data-get-off="off"></div> <div data-type="label" data-device="Thermo_Wohn_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="4" data-col="2" data-sizex="4" data-sizey="2"> <header>Buegelzimmer</header> <div data-type="thermostat" data-device="Heiz_Buegel_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="inline top-space"> <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="50"> <ul class="menu"> <li class="circleborder"> <div data-type="label" data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]' data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]' data-device='Jalousie_Buegelzimmer' data-background-icon="fa-wrench"> </div> </li> <li><div data-type="push" data-device="Jalousie_Buegelzimmer" data-cmd="set" data-set-on="on" data-icon="">auf</div></li> <li><div data-type="push" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set-on="75" data-cmd="set" data-icon="">75</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set="50" data-icon="">50</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set-on="25" data-icon="">25</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set-on="off" data-icon="">zu</div></li> </ul> </div> <div data-type="label" class="narrow darker small">Rollade</div> </div> <div class="inline"> <div data-type="symbol" data-device="Fenster_Buegelzimmer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="switch" data-device="Zwi_Steck_Buegel" data-get-pn="on" data-get-off="off" class="cell"></div> </div> </li> <li data-row="4" data-col="8" data-sizex="5" data-sizey="2"> <header>Flur</header> <div data-type="thermostat" data-device="Heiz_Flur_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="col-2-1"> <div class="col-2-1"> <div data-type="switch" class="cell" data-device="Zwi_Steck_Flur" data-get-on="on" data-get-off="off"></div> <div class=""> <div data-type="symbol" data-icon="ftui-door" data-device="Status_Haustuer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Haustür</div> </div> </div> <div class="col-2-1"> <div class="cell" data-type="multistatebutton" data-device="Haustuer" data-get-on='["locked","unlocked"]' data-icons='["fa-lock", "fa-unlock"]' data-colors='["red", "green"]' data-set='["unlock", "lock"]' ></div> <div class="" data-type="push" data-device="Haustuer" data-icon="ftui-door" data-background-icon="fa-square-o" data-set-on="open" data-get-on="open" data-on-color="#aa6900"> </div> </div> </div> </li> <li data-row="6" data-col="2" data-sizex="4" data-sizey="2"> <header>Garagen</header> <div class="triplebox-h"> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Roland_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Roland</div> </div> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Ingo_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Ingo</div> </div> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Opa_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Opa</div> </div> </div> </li> </ul> </div> </body> </html>

Wie man auf dem Bild sehen kann sind im Flur ein Switch und ein Label so angeordnet wie ich es haben möchte. Jetzt sollen der Multistatebutton und das Push Widget genau so rechts neben dem Switch und dem Label angeordnet sein.

Bin da schon seid 2 Tagen dran und habe einiges ausprobiert aber ich bekomme es nicht so hin wie es sein soll. Kann mir da vielleicht mal jemand auf die Sprünge helfen?

Und das 2. Problem das Label Dimmer im Kinderzimmer steht nicht genau unter dem Slider. Kann man das auch anpassen?

Danke im voraus Roland

Ich bin das gerade am testen... ich habe da keine erklärung für... normales verhalten von <div> ist die anordnung untereinander. warum die sich jetzt allerdings nebeneinander anordnen.... keine ahnung...
ich bleibe da auf jeden fall dran...

schau dir mal bitte das switch-widget an, damit kannst du auch multi-states nachbilden... statt multibutton.

grüße^^

FhemPiUser · 06 Januar 2016, 11:47:56

Hallo,
wenn ich die desired-temp über andere Wege als die thermostat widget ändere, ändert sich die Anzeige der desired-temp im thermostat widget nicht. Ist das ein Bug oder muss ich noch irgendetwas dazu einstellen?

roman1528 · 06 Januar 2016, 13:58:25

Zitat von: FhemPiUser am 06 Januar 2016, 11:47:56
Hallo,
wenn ich die desired-temp über andere Wege als die thermostat widget ändere, ändert sich die Anzeige der desired-temp im thermostat widget nicht. Ist das ein Bug oder muss ich noch irgendetwas dazu einstellen?

longpoll probleme^^ seite aktualisieren... dann sollte er das richtige anzeigen.
oder zum testen shortpoll aktivieren:

Code Auswählen

        <meta name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->

und kurz warten

Grüße^^

roman1528 · 06 Januar 2016, 14:20:52

Zitat von: Roli1606 am 06 Januar 2016, 01:15:07
Hallo,

ich bin schon länger am Probieren und habe schon einiges hin bekommen wie ich finde. Nun habe ich allerdings ein Problem mit der Ausrichtung einiger Elemente. hänge mal meine main.html hier rein .

Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>   </head> <body> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li> <li data-row="1" data-col="2" data-sizex="3" data-sizey="2"> <header>BAD</header> <div data-type="thermostat" data-device="Heizung_Bad" data-valve="actuator" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top"> <div data-type="symbol" data-device="Fenster_Bad" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Heizung_Bad" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="1" data-col="5" data-sizex="3" data-sizey="2"> <header>SCHLAFZIMMER</header> <div data-type="thermostat" data-device="Heiz_Schla_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top"> <div data-type="symbol" data-device="Fenster_Schlafzimmer" data-get="open" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Thermo_Schlaf_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="1" data-col="8" data-sizex="5" data-sizey="2"> <header>KINDERZIMMER</header> <div data-type="thermostat" data-device="Heiz_Kinder_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="top left-space"> <div class="cell top-space left"> <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="50"> <ul class="menu"> <li class="circleborder"><div data-type="label" data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]' data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]' data-device='Jalousie_Kinderzimmer' data-background-icon="fa-wrench"></div> </li> <li><div data-type="push" data-device="Jalousie_Kinderzimmer" data-cmd="set" data-set-on="on" data-icon="">auf</div></li> <li><div data-type="push" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set-on="75" data-cmd="set" data-icon="">75</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set="50" data-icon="">50</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set="pct" data-set-on="25" data-icon="">25</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Kinderzimmer" data-set-on="off" data-icon="">zu</div></li> </ul> </div> <div data-type="label" class="narrow darker small">Rollade</div> </div> <div class="container top left"> <div data-type="symbol" data-device="Fenster_Kinderzimmer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="label" data-device="Thermo_Kinder_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> <div class="cell top left"> <div data-type="slider" data-device='Dim_Kinder' data-get="level" data-min="0" data-max="100" data-on="on" data-off="off" data-height="85"> </div> <div data-type="label" class="darker small">Dimmer</div> </div> </div> </li> <li data-row="4" data-col="5" data-sizex="3" data-sizey="2"> <header>Wohnkueche</header> <div data-type="thermostat" data-device="Heiz_Wohn_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div calss="top-space right"> <div data-type="switch" class="" data-device="Zwi_Steck_Wohn" data-get-on="on" data-get-off="off"></div> <div data-type="label" data-device="Thermo_Wohn_Climate" data-get="humidity" data-unit="%" class="top-space-2x big"></div> </div> </li> <li data-row="4" data-col="2" data-sizex="4" data-sizey="2"> <header>Buegelzimmer</header> <div data-type="thermostat" data-device="Heiz_Buegel_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="inline top-space"> <div data-type="circlemenu" class="cell circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="50"> <ul class="menu"> <li class="circleborder"> <div data-type="label" data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]' data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]' data-device='Jalousie_Buegelzimmer' data-background-icon="fa-wrench"> </div> </li> <li><div data-type="push" data-device="Jalousie_Buegelzimmer" data-cmd="set" data-set-on="on" data-icon="">auf</div></li> <li><div data-type="push" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set-on="75" data-cmd="set" data-icon="">75</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set="50" data-icon="">50</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set="pct" data-set-on="25" data-icon="">25</div></li> <li><div data-type="push" data-cmd="set" data-device="Jalousie_Buegelzimmer" data-set-on="off" data-icon="">zu</div></li> </ul> </div> <div data-type="label" class="narrow darker small">Rollade</div> </div> <div class="inline"> <div data-type="symbol" data-device="Fenster_Buegelzimmer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Fenster</div> <div data-type="switch" data-device="Zwi_Steck_Buegel" data-get-pn="on" data-get-off="off" class="cell"></div> </div> </li> <li data-row="4" data-col="8" data-sizex="5" data-sizey="2"> <header>Flur</header> <div data-type="thermostat" data-device="Heiz_Flur_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left left-space"></div> <div class="col-2-1"> <div class="col-2-1"> <div data-type="switch" class="cell" data-device="Zwi_Steck_Flur" data-get-on="on" data-get-off="off"></div> <div class=""> <div data-type="symbol" data-icon="ftui-door" data-device="Status_Haustuer" class="narrow big"></div> <div data-type="label" class="narrow darker small">Haustür</div> </div> </div> <div class="col-2-1"> <div class="cell" data-type="multistatebutton" data-device="Haustuer" data-get-on='["locked","unlocked"]' data-icons='["fa-lock", "fa-unlock"]' data-colors='["red", "green"]' data-set='["unlock", "lock"]' ></div> <div class="" data-type="push" data-device="Haustuer" data-icon="ftui-door" data-background-icon="fa-square-o" data-set-on="open" data-get-on="open" data-on-color="#aa6900"> </div> </div> </div> </li> <li data-row="6" data-col="2" data-sizex="4" data-sizey="2"> <header>Garagen</header> <div class="triplebox-h"> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Roland_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Roland</div> </div> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Ingo_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Ingo</div> </div> <div class="inline"> <div data-type="switch" data-device="Garagen_dm_Tor_Opa_Taster_tr" data-icon="oa-fts_garage" data-background-icon="fa-square-o" data-set-on="auf" data-set-off="zu" data-get-on="auf" data-get-off="zu" data-on-color="#aa6900" data-off-color="#505050"> </div> <div data-type="label" class="narrow darker">Garage</div> <div data-type="label" class="top-space darker">Opa</div> </div> </div> </li> </ul> </div> </body> </html>

Wie man auf dem Bild sehen kann sind im Flur ein Switch und ein Label so angeordnet wie ich es haben möchte. Jetzt sollen der Multistatebutton und das Push Widget genau so rechts neben dem Switch und dem Label angeordnet sein.

Bin da schon seid 2 Tagen dran und habe einiges ausprobiert aber ich bekomme es nicht so hin wie es sein soll. Kann mir da vielleicht mal jemand auf die Sprünge helfen?

Und das 2. Problem das Label Dimmer im Kinderzimmer steht nicht genau unter dem Slider. Kann man das auch anpassen?

Danke im voraus Roland

Das war echt nicht einfach!!! Aber wenn man die Tricks kennt.
Wie schon im VorPost gesagt haben die <div>'s in der Kombination ein ganz komisches Verhalten.... aber es geht... hoffentlich auch noch bei dir!

Code Auswählen

<li data-row="4" data-col="8" data-sizex="5" data-sizey="2">
    <header>Flur</header>
	<div class="top-space inline">
		<div data-type="thermostat" data-device="Heiz_Flur_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class=""></div>
	</div>
	<div class="inline left-space-2">
		<div class="">
			<div data-type="switch" class="cell inline" data-device="Zwi_Steck_Flur" data-get-on="on" data-get-off="off"></div>
			<div class="cell inline" data-type="switch"
				data-device="Haustuer"
				data-get=""
				data-set=""
				data-states='["locked","unlocked"]'
				data-icons='["fa-lock", "fa-unlock"]'
				data-colors='["red", "green"]'>
			</div>
		</div>
		<div class="top-space">
			<div data-type="symbol"
				data-icon="ftui-door"
				data-device="Status_Haustuer"
				class="cell inline">
			</div>
			<div class="cell inline" data-type="push"
				data-device="Haustuer"
				data-set=""
				data-icon="ftui-door"
				data-background-icon="fa-square-o"
				data-set-on="open"
				data-get-on="open"
				data-on-color="#aa6900">
			</div>
		</div>
		<div data-type="label" class="darker small left">&nbsp;&nbsp;Haustür</div>
	</div>
</li>

Grüße^^

EDIT:
Eine Möglichkeit wäre auch noch das ganze in eine Tabelle zu verpacken^^