Tablet UI - responsive Design (flexbox)

Draugr · 23 Dezember 2017, 15:09:05

Hallo zusammen,

vorab erst einmal vielen Dank an jemu75 für die Codevorlagen!

Ich würde jetzt auch gerne meine Oberfläche entsprechend umgestalten, steht aktuell aber vor einer kleinen Hürde bei der ich aktuell nicht mehr weiter weiß.
Meine Beleuchtung besteht zurzeit noch überwiegend aus HUE und Tradfri-Birnen, sodass ich zusätzlich zum An/Aus-Schalter eine Möglichkeit zur Einstellung von Helligkeit und Farben/Farbtemperaturen integrieren würde.

Ich habe das Switch-Template dazu kopiert und so angepasst, dass via Schalter das Licht an/aus gemacht werden kann und via Link auf eine separate Seite für die entsprechenden Einstellung gesprungen werden kann.

Mein Problem ist also Parameter (Device und Name) über zwei Seiten (erst Switch_Template, dann Content für HUE Settings) durchreichen zu müssen bzw. Parameter an eine Content-Seite zu übergeben.
Das scheint noch nicht zu klappen, da auf der Seite der Einstellungen "var_name" angezeigt wird - Parameter werden nicht erkannt.

Einmal das angepasste Template (Switch) für die Birne:

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template fuer weiße HUE-Birnen / Gruppen -->
</head>

<body>
	<div class="row">
		<div class="cell left-align left-space">
			<div data-type="switch" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
		</div>
		<div class="cell-80 left-align">
			<div class="big">var_name</div>
		</div>
		<div class="cell">
		</div>
		<div class="cell right-space">
			<div data-type="link" data-url="#content_huew_settings.html" data-load="#content_huew_settings" data-color="black" data-fade-duration="0" data-parameter='{"var_device":"var_device","var_name":"var_name"}'>
				<div data-type="symbol" data-device="var_device" data-get="onoff" data-states='["0","1"]' data-colors='["#aaaaaa","blue"]' data-icon="fa-bars" class="tiny"></div>
			</div>
		</div>
	</div>
</body>

</html>

Und die Content-Seite für die Einstellungen einer Birne:

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Content Page fuer Farbtemperatur / Helligkeitseinstellungen weißer HUE-Birnen / Gruppen -->
</head>

<body>
  <div class="page" id="content_huew_settings">
    <div class="phone-back-btn">
      <div data-type="link" data-url="#content_light.html" data-load="#content_light" data-color="white" data-icon="mi-chevron_left" class="large"></div>
    </div>

    <div class="hbox">
      <div class="vbox phone-width">
        <div class="card lift">
          <header>var_name</header>
          <section>
            <div class="row">
              <div class="cell left-align left-space">
                <div class="big">Helligkeit</div>
                <div data-type="label" data-device="var_device" data-get="pct" data-unit="%"></div>
              </div>
              <div class="cell">
              </div>
              <div class="cell-50 right-space">
                <div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
              </div>
            </div>
          </section>
          <section>
          </section>
        </div>
      </div>
    </div>
    </body>

</html>

Gunther · 23 Dezember 2017, 15:52:16

verschachtelte Templates gehen meines Wissens leider noch(?) nicht.

Daher musst Du Dich für einen Fall entscheiden und an einer Stelle manuell den Code aufbauen.

Edit: Ohne mir das im Detail angeschaut zu haben. Schau mal hier:
https://forum.fhem.de/index.php/topic,81471.0.html

Draugr · 23 Dezember 2017, 16:29:56

Hallo Gunther,

vielen Dank für deine Antwort.

Ich denke, dass der Lösungsansatz bzw. das Problem nicht an verschachtelten Templates liegt, sondern daran, dass ich einer neuen Seite über data-parameter keine Parameter mitgeben kann.
Dieses Attribut wird scheinbar nur bei einem Template (data-template) ausgelesen und ersetzt die Werte im HTML-Code. Sofern ich Templates richtig verstehe, sind die aber auch nur für das Auslagern von Coding und werden dann inplace angezeigt.

Edit: Ich probiere mal den Ansatz der Parameterübergabe über die URL (s.a. https://forum.fhem.de/index.php/topic,81493.0.html)

Gunther · 23 Dezember 2017, 17:17:01

achja, falls Du nur dimmen willst, ohne Helligkeit, habe ich das Template so gebaut (vgl. Screenshot):

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template f¸r Homematic Funk Dimmaktor Unterputz HM-LC-Dim1TPBU-FM -->
</head>
<body>
	<div class="row">
		<div class="cell-10 left-align left-space">
			<div data-type="symbol" data-device="var_device" data-get="pct" data-states='["0","1"]' data-colors='["blue","red"]'  data-icon="var_symbol" class="big compressed"></div>
		</div>
		<div class="cell left-align left-space">
			<div class="big">var_name</div>
			<div class="top-narrow-2x" data-type="label" data-device="var_device" data-get="pct" data-unit="%"></div>
		</div>
		<div class="cell-70 right-space right-align">
			<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue inline"></div>
		</div>
		<div class="cell">
		</div>
		<div class="cell-10 right-space right-align">
			<div data-type="checkbox" data-device="var_device" class="small blue"></div>
		</div>
	</div>
</body>
</html>

Mpomp · 25 Dezember 2017, 11:53:55

Hallo

ich habe diese flexible Version als Vorlage für meine Seite genommen, tolle Arbeit.

Leider habe ich Probleme mit der Aktualisierung, habe longpoll eingeschaltet.
Bei meiner alten Seite mit Gridster und pagbutton habe ich keine Probleme damit. Leider ist dort das Menü immer sichtbar und nicht zum ausbleden.

Wie musste ich das Link Widget einstellen um das gleiche Verhalten zu haben wie Pagebutton?

Ich habe versucht die Link Widgets auf Pagebutton umzustellen. Die Aktualisierung ist super, aber wie bekomme das hin, dass sich das Menü wieder von selber zuklappt.
Gibt es das eine Möglichkeit?

Danke für eure Hilfe

Draugr · 29 Dezember 2017, 19:27:00

Guten Abend zusammen,

ich habe jetzt doch einen ganz anderen Ansatz gewählt und poste nochmal kurz das Ergebnis bzw. die Vorgehensweise.
Falls Quellcode gewünscht ist, kann ich ihn nachträglich noch anfügen.

Entscheidender Punkt ist, dass jede Lampe nun eine eigene HTML-Seite für die Einstellungen hat - dort wird u.a. auch das Device definiert.
Die eigentlichen Widgets für die Einstellungen einer Lampe sind dann wiederum in einem Template ausgelagert. Das Device einer Lampe steht also nun an zwei Stellen hart im Quellcode: In der Content-Seite für alle Lichter (dort eingebunden als Schalter-Template mit Link für Settings - URL zur Settingsseite des Device wird auch ans Template übergeben). Und dann nochmal in der eigenen Content-Seite die wiederum das Settings-Template inkludiert.

Schönen Abend und Gruß
André

somansch · 29 Dezember 2017, 23:49:26

Ich habe meine HUE Lampen mit einem Template angelegt. Das erspart doppelte Pflege.

Vielleicht hilft dir diese Umsetzung?

Viele Grüße
Andreas

SirMarco · 30 Dezember 2017, 00:22:51

Zitat von: Draugr am 29 Dezember 2017, 19:27:00
Guten Abend zusammen,

ich habe jetzt doch einen ganz anderen Ansatz gewählt und poste nochmal kurz das Ergebnis bzw. die Vorgehensweise.
Falls Quellcode gewünscht ist, kann ich ihn nachträglich noch anfügen.

Entscheidender Punkt ist, dass jede Lampe nun eine eigene HTML-Seite für die Einstellungen hat - dort wird u.a. auch das Device definiert.
Die eigentlichen Widgets für die Einstellungen einer Lampe sind dann wiederum in einem Template ausgelagert. Das Device einer Lampe steht also nun an zwei Stellen hart im Quellcode: In der Content-Seite für alle Lichter (dort eingebunden als Schalter-Template mit Link für Settings - URL zur Settingsseite des Device wird auch ans Template übergeben). Und dann nochmal in der eigenen Content-Seite die wiederum das Settings-Template inkludiert.

Schönen Abend und Gruß
André

Sehr schöne Idee. Natürlich sind wir offen für den Code

Gruss

Gunther · 30 Dezember 2017, 03:32:03

@Andre und Andreas: Mich interessieren beide Umsetzungen als Code. 👍

somansch · 30 Dezember 2017, 11:11:02

Zitat von: somansch am 29 Dezember 2017, 23:49:26
Ich habe meine HUE Lampen mit einem Template angelegt. Das erspart doppelte Pflege.

Hier der Code.

Content:

Code Auswählen

<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_light">
		<div class="phone-back-btn">
			<div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
		</div>

		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card lift">
					<header>Wohnzimmer</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice4","var_name":"Leselampe"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice1","var_name":"IKEA"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice6","var_name":"Decke 1"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice3","var_name":"Decke 2"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice2","var_name":"Decke 3"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice8","var_name":"Fernseher"}'></div>
					</section>
				</div>
				<div class="card lift">
					<header>Flur</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice12","var_name":"Links"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice11","var_name":"Rechts"}'></div>
					</section>
				</div>
				<div class="card lift">
					<header>Aufgang</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice16","var_name":"Oben"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice17","var_name":"Unten"}'></div>
					</section>
				</div>
			</div>

			<div class="vbox phone-width">
				<div class="card lift">
					<header>K&uuml;che</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice15","var_name":"Tisch 1"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice14","var_name":"Tisch 2"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice19","var_name":"Unterbau"}'></div>
					</section>
				</div>
				<div class="card lift">
					<header>Bad</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice21","var_name":"Decke"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEGroup9","var_name":"Spiegel"}'></div>
					</section>
				</div>
				<div class="card lift">
					<header>Schlafzimmer</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice20","var_name":"Decke"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice10","var_name":"Andreas"}'></div>
					</section>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice13","var_name":"Peggy"}'></div>
					</section>
				</div>
				<div class="card lift">
					<header>Abstellraum</header>
					<section>
						<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice24","var_name":"Decke"}'></div>
					</section>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

Template:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template für HUE Lampen -->
</head>
<body>
	<div class="hdm-flexbox-container">
		<div class="hdm-flexbox-item-15">
			<div data-type="symbol" id="var_device" data-device="var_device" data-color="var_device:rgb" data-icon="mi-lightbulb_outline" class="big compressed"></div>
				<div data-type="popup" data-height="300px" data-width="300px" data-mode="animate" data-starter="#var_device" class="">
					<div class="dialog">
					<header>Farbe w&auml;hlen</header>
					<div data-type="colorwheel" data-device='var_device' data-get="rgb" data-set="rgb" class="top-narrow roundIndicator big"></div>
					</div>
				</div>
		</div>
		<div class="hdm-flexbox-item-15">
			<div data-type="checkbox" data-device="var_device" data-get="onoff" class="small blue"></div>
		</div>
		<div class="hdm-flexbox-item-30 left-align">
			<div class="big">var_name</div>
			<div data-type="label" data-device="var_device" data-get="pct" data-unit="%"></div>
		</div>

		<div class="hdm-flexbox-item-40 right-space">
			<div data-type="spinner" data-device="var_device" data-get="pct" data-set="pct" data-step="5" data-min="0" data-max="100" data-width="150" data-height="35" data-color="blue" data-icon-left-color="white" data-icon-right-color="white" class=""></div>
		</div>
	</div>
</body>
</html>

Um "hdm-flexbox" für zuverlässige Breiten zu verwenden, braucht ihr die Erweiterung in der "user-tablet-ui.css":

Code Auswählen

/* Workaround für Zellenverteilung mit hdm flexbox */
.hdm-flexbox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;

	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.hdm-flexbox-item {
	-webkit-box-flex: 1 1 auto;
	-moz-box-flex: 1 1 auto;
	width: auto;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.hdm-flexbox-item-5 {
	-webkit-box-flex: 1 1 5%;
	-moz-box-flex: 1 1 5%;
	width: 5%;
	-webkit-flex: 1 1 5%;
	-ms-flex: 1 1 5%;
	flex: 1 1 5%;
}
.hdm-flexbox-item-10 {
	-webkit-box-flex: 1 1 10%;
	-moz-box-flex: 1 1 10%;
	width: 10%;
	-webkit-flex: 1 1 10%;
	-ms-flex: 1 1 10%;
	flex: 1 1 10%;
}
.hdm-flexbox-item-13 {
	-webkit-box-flex: 1 1 13%;
	-moz-box-flex: 1 1 13%;
	width: 13%;
	-webkit-flex: 1 1 13%;
	-ms-flex: 1 1 13%;
	flex: 1 1 13%;
}
.hdm-flexbox-item-15 {
	-webkit-box-flex: 1 1 15%;
	-moz-box-flex: 1 1 15%;
	width: 15%;
	-webkit-flex: 1 1 15%;
	-ms-flex: 1 1 15%;
	flex: 1 1 15%;
}
.hdm-flexbox-item-20 {
	-webkit-box-flex: 1 1 20%;
	-moz-box-flex: 1 1 20%;
	width: 20%;
	-webkit-flex: 1 1 20%;
	-ms-flex: 1 1 20%;
	flex: 1 1 20%;
}
.hdm-flexbox-item-25 {
	-webkit-box-flex: 1 1 25%;
	-moz-box-flex: 1 1 25%;
	width: 25%;
	-webkit-flex: 1 1 25%;
	-ms-flex: 1 1 25%;
	flex: 1 1 25%;
}
.hdm-flexbox-item-30 {
	-webkit-box-flex: 1 1 30%;
	-moz-box-flex: 1 1 30%;
	width: 30%;
	-webkit-flex: 1 1 30%;
	-ms-flex: 1 1 30%;
	flex: 1 1 30%;
}
.hdm-flexbox-item-33 {
	-webkit-box-flex: 1 1 33%;
	-moz-box-flex: 1 1 33%;
	width: 33%;
	-webkit-flex: 1 1 33%;
	-ms-flex: 1 1 33%;
	flex: 1 1 33%;
}
.hdm-flexbox-item-40 {
	-webkit-box-flex: 1 1 40%;
	-moz-box-flex: 1 1 40%;
	width: 40%;
	-webkit-flex: 1 1 40%;
	-ms-flex: 1 1 40%;
	flex: 1 1 40%;
}
.hdm-flexbox-item-45 {
	-webkit-box-flex: 1 1 45%;
	-moz-box-flex: 1 1 45%;
	width: 45%;
	-webkit-flex: 1 1 45%;
	-ms-flex: 1 1 45%;
	flex: 1 1 45%;
}
.hdm-flexbox-item-50 {
	-webkit-box-flex: 1 1 50%;
	-moz-box-flex: 1 1 50%;
	width: 50%;
	-webkit-flex: 1 1 50%;
	-ms-flex: 1 1 50%;
	flex: 1 1 50%;
}
.hdm-flexbox-item-70 {
	-webkit-box-flex: 1 1 70%;
	-moz-box-flex: 1 1 70%;
	width: 70%;
	-webkit-flex: 1 1 70%;
	-ms-flex: 1 1 70%;
	flex: 1 1 70%;
}
.hdm-flexbox-item-80 {
	-webkit-box-flex: 1 1 80%;
	-moz-box-flex: 1 1 80%;
	width: 80%;
	-webkit-flex: 1 1 80%;
	-ms-flex: 1 1 80%;
	flex: 1 1 80%;
}

Viele Grüße und einen guten Rutsch!

Andreas

Gunther · 30 Dezember 2017, 12:20:49

Danke!

Draugr · 31 Dezember 2017, 13:17:26

Zitat von: somansch am 29 Dezember 2017, 23:49:26
Ich habe meine HUE Lampen mit einem Template angelegt. Das erspart doppelte Pflege.

Das hatte ich zu Anfang auch ausprobiert - hatte es dann aber wieder verworfen, weil mir die UI dann zur unaufgeräumt wirkte.

Zitat von: SirMarco am 30 Dezember 2017, 00:22:51
Sehr schöne Idee. Natürlich sind wir offen für den Code

Übersichtsseite für die Steuerung der Beleuchtungen.
Hier liegen sowohl HUE/Tradfri-Birnen, als auch Lichterketten (via Steckdose) und später Deckenleuchten.
Die Leuchten können hier ein und aus geschaltet werden und ggf. in die detaillierten Einstellungen abgesprungen werden.

Code Auswählen


<!DOCTYPE html>
<html>

<body>

  <div class="page" id="content_huew_settings"></div>

  <div class="page" id="content_light">
    <div class="phone-back-btn">
      <div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
    </div>

    <div class="hbox">
      <div class="vbox phone-width">
        <div class="card lift">
          <header>Wohnzimmer</header>
          <section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"WZ_Stehlicht","var_name":"Stehlampe","var_url":"content_wz_stehlicht_settings"}'></div>
          </section>
          <section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"WZ_Leselicht","var_name":"Leselampe","var_url":"content_wz_leselicht_settings"}'></div>
          </section>
          <section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"WZ_Dekolicht","var_name":"Dekolicht","var_url":"content_wz_dekolicht_settings"}'></div>
          </section>
        </div>
      </div>
      <div class="vbox phone-width">
        <div class="card lift">
          <header>Schlafzimmer</header>
          <section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"AZ_Dekolicht","var_name":"Dekolicht","var_url":"content_sz_dekolicht_settings"}'></div>
          </section>
        </div>
      </div>
      <div class="vbox phone-width">
        <div class="card lift">
          <header>Arbeitszimmer</header>
          <section>
            <div data-template="template_switch_hue.html" data-parameter='{"var_device":"HUEGroup3","var_name":"Stehlampe","var_url":"content_az_stehlicht_settings"}'></div>
          </section>
        </div>
      </div>
      <div class="vbox phone-width">
        <div class="card lift">
          <header>Flur</header>
          <section>
            <div data-template="template_switch.html" data-parameter='{"var_device":"FL_Dekolicht","var_name":"Lichterkette"}'></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Das Template für HUE/Tradfri-Birnen oder Gruppen.
Ein Template unabhängig ob farbig oder weiße HUE-Birnen.

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template fuer HUE-Birnen / Gruppen -->
</head>

<body>
	<div class="row">
		<div class="cell left-align left-space">
			<div data-type="switch" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
		</div>
		<div class="cell-80 left-align">
			<div class="big">var_name</div>
		</div>
		<div class="cell">
		</div>
		<div class="cell">
			<div data-type="link" data-url="#var_url.html" data-load="#var_url" data-color="black" data-fade-duration="0">
				<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed"></div>
			</div>
		</div>
	</div>
</body>

</html>

Content-Seite einer weißen Wohnzimmerlampe.

Code Auswählen

<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template fuer HUE-Birnen / Gruppen -->
</head>

<body>
	<div class="row">
		<div class="cell left-align left-space">
			<div data-type="switch" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
		</div>
		<div class="cell-80 left-align">
			<div class="big">var_name</div>
		</div>
		<div class="cell">
		</div>
		<div class="cell">
			<div data-type="link" data-url="#var_url.html" data-load="#var_url" data-color="black" data-fade-duration="0">
				<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed"></div>
			</div>
		</div>
	</div>
</body>

</html>

Content einer farbigen Lampe.
Abgesehen vom Device und Text unterscheidet sich hier nur das Template.

Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!-- FHEM Tablet UI V2.6 -->
  <!-- Content Page fuer Einstellungen zum Device WZ_Dekolicht -->
</head>

<body>
  <div class="page" id="content_wz_dekolicht_settings">
    <div class="phone-back-btn">
      <div data-type="link" data-url="#content_light.html" data-load="#content_light" data-color="white" data-icon="mi-chevron_left" class="large"></div>
    </div>

    <div data-template="template_huec_settings.html" data-parameter='{"var_device":"WZ_Dekolicht","var_name":"Dekolicht"}'></div>
</body>

</html>

Template für die Detaileinstellungen einer weißen Birne

Code Auswählen

<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template fuer Einstellungen von weißen HUE-Birnen / Gruppen -->
</head>

<body>

	<div class="hbox">
		<div class="vbox phone-width">
			<div class="card lift" header="test">
				<header>var_name</header>

				<!-- Status / Schalter -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="mi-lightbulb_outline" data-color='["blue"]' class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Power</div>
							<div data-type="label" data-device="var_device" data-get="onoff" data-substitution='["0","Aus","1","An"]' class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="checkbox" data-device="var_device" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
						</div>
					</div>
				</section>

				<!-- Helligkeit -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Helligkeit</div>
							<div data-type="label" data-device="var_device" data-get="pct" data-unit="%" class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
						</div>
					</div>
				</section>

				<!-- Farbe / Farbtemperatur -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="fa-thermometer-half" data-color="#aaaaaa" class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Farbtemperatur</div>
							<div data-type="label" data-device="var_device" data-get="ct" data-part="1" class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="slider" data-device="var_device" data-get="ct" data-set="ct" data-max="454" data-min="154" data-part="1"  class="horizontal blue"></div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
</body>

</html>

Template für die Detaileinstellungen einer farbigen Birne
Das Color Wheel ist hier aktuell noch in einem separatem Dialog integriert. Ich denke, dass ich das aber heute noch direkt ins Template einbauen werde.
M.E. ist es überflüssig von Detaileinstellungen nochmal in ein separates Fenster abzuspringen und so viel Platz nimmt das Wheel jetzt auch nicht weg

Code Auswählen

<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template fuer Einstellungen von farbige HUE-Birnen / Gruppen -->
</head>

<body>

	<div class="hbox">
		<div class="vbox phone-width">
			<div class="card lift" header="test">
				<header>var_name</header>

				<!-- Status / Schalter -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="mi-lightbulb_outline" data-color='["blue"]' class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Power</div>
							<div data-type="label" data-device="var_device" data-get="onoff" data-substitution='["0","Aus","1","An"]' class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="checkbox" data-device="var_device" data-device="var_device" data-get="onoff" data-set-on="on" data-set-off="off" data-get-on="1" data-get-off="0" class="small blue"></div>
						</div>
					</div>
				</section>

				<!-- Helligkeit -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="mi-brightness_5" data-color="#aaaaaa" class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Helligkeit</div>
							<div data-type="label" data-device="var_device" data-get="pct" data-unit="%" class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="slider" data-device="var_device" data-get="pct" data-set="pct" class="horizontal blue"></div>
						</div>
					</div>
				</section>

				<!-- Farbe / Farbtemperatur -->
				<section>
					<div class="row">
						<div class="cell-10 left-align left-space">
							<div data-type="symbol" data-icon="fa-thermometer-half" data-color="#aaaaaa" class="big compressed"></div>
						</div>
						<div class="cell left-align left-space">
							<div class="big">Farbe</div>
							<div data-type="label" data-device="var_device" data-get="rgb" class="top-narrow-2x"></div>
						</div>
						<div class="cell-90">
						</div>
						<div class="cell right-space">
							<div data-type="popup" data-height="240px" data-width="240px" data-draggable="false">
								<div data-type="symbol" data-device="var_device" data-icon="fa-circle" data-on-color="var_device:rgb" data-off-color="var_device:rgb"></div>
								<div class="dialog">
									<header>Farbe</header>
									<div data-type="colorwheel" data-device="var_device" data-get="rgb" data-set="rgb"></div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
</body>

</html>

Gunther · 31 Dezember 2017, 14:44:08

sehr schön. Da kann ich mir eine Menge Anregungen holen! Danke!

holle75 · 02 Januar 2018, 13:12:03

ZitatZitat von: Augschburger am 13 Oktober 2017, 09:56:39

Weil mir das "sanfte" Scrollen beim iPhone gefehlt hat, habe ich mich mal aufgeschlaut. Mit diesem Schnipsel in der user-tablet-ui.css verhält es sich wieder Apple-like:
Code: [Auswählen]

body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

Danke. Das ergibt bei mir ebenfalls das sanfte scrollen auf dem iPhone, aber dafür überdeckt es den "Back"-Button oben. Ist das bei dir auch so?
Danke

Hallo Ihr, an dieser Problematik beiße ich mir gerade noch die Zähne aus.
ios 9 und auch bei mir bekomme ich diesen verflixten Back-Button einfach nicht oben links in die Ecke, dass er den System/Menu Button überdeckt. Dies passiert nur wenn man die og Modifikationen einbaut

Code Auswählen

body {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

habs auch schon im Container, im html, im was weiß ich nicht alles probiert. Entweder das Iphone scrollt wie man es im Iphone gewohnt ist .... mit nicht wirklich funktionierendem Back-Button, ..... oder mit funktionierendem Back-Button und scrollen ist die Hölle. Irgendjemand?

Edit: erschwerend ist, dass das Problem nur auf dem iphone auftritt. Chrome, Firefox, egal ob auf PC oder Mac funktionierts. Nicht sehr hilfreich für die Suche

ulli · 10 Januar 2018, 20:35:23

@holle75
Ich finde deine Grafik bzw. Diagramm sehr gelungen. Würdest du den code bzw. das template teilen?

Grüße,
Ulla

Zitat von: holle75 am 05 November 2017, 16:20:38
noch ein Vorschlag:

die ganzen -moz -ms - webkit kannst du wenn keine Devices der Richtung genutzt werden weglassen.

Ist responsive und ob du dann 3,4 oder 5 Bereiche basteln möchtest unterliegt deinen Anpassungen

EDIT: MISTE, falschen Bereich im content kopiert gehabt. Jetzt richtig