Hallo in die Runde,
ich habe mich längere Zeit mit der Umsetzung eines "responsiven Designs" beschäftigt und unter Verwendung von flexbox statt gritster folgende Lösung aufgebaut. Dabei habe ich den Fokus auf die Themen Menü, Untersteiten und Templates gelegt. (da hier viele User Schwierigkeiten schildern)
Letztlich musste ich ein paar kleine Anpassungen der vorliegenden css vornehmen. Aber nix dramatisches ;)
Die Basis bzw. den Grundrahmen bildet (wie vermutlich bei allen) meine index.html
Die einzelnen Bereiche meiner Hausautomation (Heizung, Türen, Fenster, Licht, Jalousien, Rauchmelder usw.) sind über eine "Hub-Seite" zugänglich. Von dieser Seite gelangt man dann via Link auf die einzelnen o.g. Bereiche. (content-Seiten - content_xxx.html)
Innerhalb der Contentseiten befinden sich die einzelnen Aktoren bzw. Sensoren. Um den Source-Code "schlank" zu halten habe ich hier mit Templates gearbeitet. (template-Seiten - template_xxx.html) Mit entsprechenden Parametern, die ich den Templates übergebe, werden dann meine verschiedenen Devices dargestellt.
Ich habe die Anwendung auf verschiedenen Browser'n getestet und bisher keine Probleme in der Darstellung entdeckt.
Im Folgenden stelle ich meine index.html, und expemplarisch meine Lichtsteuerung (content_light.html) sowie die zugehörigen Templates (template_switch.html und template_dimmer.html) vor. Ergänzend habe ich die notwendigen css-Anpassungen (user-tablet-ui.css) angefügt. Weiterhin findet ihr Screenshots zu allen anderen Bereichen meiner Haussteuerung, die faktisch immer nach dem Muster der Lichtsteuerung aufgebaut sind.
Mein Fazit ist, dass man mit den "Boardmitteln" die setstate und alle anderen hier liefern eine wirklich zeitgemäße Steuerung realisieren kann, die auf verschiedenen Devices optimal dargestellt wird.
Alle Dateien komplett findet ihr als ZIP-File auch noch mal im Anhang. :)
index.html
<!DOCTYPE html>
<html>
<!-- FHEM Tablet UI 2.6 -->
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>SmartHome</title>
</head>
<body>
<div class="phone-header"></div>
<nav class="menu">
<div class="menu-trigger"></div>
<header>Menu</header>
<ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_chart.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_chart"
data-text-align="left"
data-active-pattern=".*(#content_chart.html)"
data-icon="mi-show_chart" class="large"><span>Grafiken</span></div>
</li>
<li>
<div data-type="link" data-url="#content_settings.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_settings"
data-text-align="left"
data-active-pattern=".*(#content_settings.html)"
data-icon="mi-settings" class="large"><span>Einstellungen</span></div>
</li>
</ul>
</nav>
<main>
<div class="page" id="content_home"></div>
<div class="page" id="content_heating"></div>
<div class="page" id="content_light"></div>
<div class="page" id="content_contact"></div>
<div class="page" id="content_blinds"></div>
<div class="page" id="content_blinds_detail"></div>
<div class="page" id="content_smoke"></div>
<div class="page" id="content_weather"></div>
<div class="page" id="content_phone"></div>
<div class="page" id="content_cam"></div>
<div class="page" id="content_chart"></div>
<div class="page" id="content_settings"></div>
</main>
</body>
</html>
Hauptseite / Hub-Seite (content_home.html)
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_home">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Sicherheit</header>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"overview_windows","var_link":"content_contact","var_name":"Türen Fenster","var_state1":"open","var_text1":"offen","var_state2":"closed","var_text2":"geschlossen","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"overview_blinds","var_link":"content_blinds","var_name":"Jalousien","var_state1":"on","var_text1":"alle offen","var_state2":"off","var_text2":"alle geschlossen","var_state3":"undefined","var_text3":"teilweise geschlossen","var_icon":"mi-line_weight"}'></div>
</section>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"overview_smokedetect","var_link":"content_smoke","var_name":"Rauchmelder","var_state1":"Alarm_B0","var_text1":"Alarm!","var_state2":"off","var_text2":"Melder bereit","var_icon":"oa-secur_smoke_detector"}'></div>
</section>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_cam","var_name":"Kameras","var_icon":"mi-videocam"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Komfort</header>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"overview_heating","var_link":"content_heating","var_name":"Heizung","var_state1":"on","var_text1":"an","var_state2":"off","var_text2":"aus","var_icon":"fa-thermometer-3"}'></div>
</section>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"overview_light","var_link":"content_light","var_name":"Licht","var_state1":"on","var_text1":"an","var_state2":"off","var_text2":"aus","var_icon":"mi-lightbulb_outline"}'></div>
</section>
</div>
<div class="card lift">
<header>Infos</header>
<section>
<div class="row">
<div class="cell left-align left-space">
<div data-type="weather" data-device="Wetter" data-get="condition" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">Wetter aktuell</div>
<div data-type="label" data-device="HM_xxxxxx" data-get="temperature" data-unit="°C" class="inline"></div>
<div data-type="label" data-device="HM_xxxxxx" data-get="humidity" data-unit="%" class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="pressure" data-unit="hPa" class="inline"></div>
<br>
<div data-type="label" data-device="Wetter" data-get="wind_condition" class="inline"></div>
</div>
<div class="cell"></div>
<div class="cell">
<div data-type="link" data-url="#content_weather.html" data-load="#content_weather" 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>
</section>
<section>
<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_phone","var_name":"Anrufe","var_icon":"mi-phone"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Lichtsteuerung (content_light.html)
<!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>Licht außen</header>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"Licht_Haustuer","var_symbol":"mi-lightbulb_outline","var_name":"Hauseingang"}'></div>
</section>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"Licht_Einfahrt","var_symbol":"mi-lightbulb_outline","var_name":"Einfahrt"}'></div>
</section>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"Licht_Terrasse","var_symbol":"mi-lightbulb_outline","var_name":"Terrasse"}'></div>
</section>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"Licht_Garage","var_symbol":"mi-lightbulb_outline","var_name":"Garage"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Licht Wohnzimmer</header>
<section>
<div data-template="template_dimmer.html" data-parameter='{"var_device":"HM_xxxxxx","var_symbol":"mi-lightbulb_outline","var_name":"Regal"}'></div>
</section>
</div>
<div class="card lift">
<header>Steckdosen</header>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"","var_symbol":"mi-power","var_name":"Terrasse"}'></div>
</section>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"Kamin_Dunstabzug","var_symbol":"mi-power","var_name":"Dunstabzug"}'></div>
</section>
<section>
<div data-template="template_switch.html" data-parameter='{"var_device":"HM_xxxxxx","var_doif":"","var_symbol":"mi-power","var_name":"Gartenpumpe"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Template für Schalter
template_switch.html
Parameter: "var_device":Name der FHEM Device,"var_doif":optional Name der FHEM DOIF Funktion,"var_symbol":Name des Symbols,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Schaltaktoren HM-LC-Sw1PBU-FM und HM-LC-SW2-FM und HM-LC-SW1-FM -->
<!-- Kombination mit schaltbaren DOIF Funktionen z.B. Zeitschaltung -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["off","on"]' data-colors='["blue","red"]' data-icon="var_symbol" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["on","an","off","aus"]' class="inline"></div>
<div data-type="label" data-device="var_doif" data-get="mode" data-substitution='["enable","(automatisch)","disabled",""]' class="inline"></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
<div data-type="checkbox" data-device="var_device" class="small blue"></div>
</div>
</div>
</body>
</html>
Template für Dimmer
template_dimmer.html
Parameter: "var_device":Name des Device in FHEM,"var_symbol":Name des Symbols,"var_name":Bezeichnung
<!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 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">
<div class="big">var_name</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>
</body>
</html>
und hier noch weitere Templates
Template für Heizungssteuerung
template_heating.html
Parameter:"var_device1":Name des Thermostat Device,"var_device2":Name des Switch Device,"var_temp_day":Solltemperatur wenn Raum beheizt wird,"var_temp_night":Solltemperatur wenn Raum nicht beheizt wird,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Schaltaktor 4-fach HM-LC-SW4-DR zur Schaltung des Heizkreises (Fußbodenheizung) in Verbindung mit Wandthermostat HM-TC-IT-WM-W-EU -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device2" data-states='["off","on"]' data-colors='["blue","red"]' data-icon="fa-thermometer-3" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device1_Climate" data-get="measured-temp" data-unit="°C" class="inline"></div>
<div data-type="label" data-device="var_device1_Climate" data-get="humidity" data-unit="%" class="inline"></div>
</div>
<div class="cell">
<div data-type="symbol" data-device="var_device1" data-get="desired-temp" data-states='["var_temp_night","var_temp_day"]' data-icons='["fa-moon-o","mi-wb_sunny"]' data-colors='["gray","blue"]' class="small"></div>
<div data-type="label" data-device="var_device1" data-get="desired-temp" data-unit="°C" class="small"></div>
</div>
<div class="cell right-space">
<div data-type="checkbox" data-device="var_device1_Climate" data-get="desired-temp" data-set="desired-temp" data-get-on="var_temp_day" data-get-off="var_temp_night" data-set-on="var_temp_day" data-set-off="var_temp_night" class="small blue"></div>
</div>
</div>
</body>
</html>
Template für Fenster und Türkontakte
template_contact.html
Parameter: "var_device":Name des Device in FHEM,"var_icon":Name des Icons,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Tür/Fensterkontakt HM-SEC-SCo -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","open"]' data-colors='["blue","red"]' data-icon="var_icon" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["open","offen","closed","geschlossen"]'></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
</div>
</div>
</body>
</html>
Template für Jalousien
template_blind.html
Parameter: "var_device":Name des Device in FHEM,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template ffür Homematic Funk Jalousieaktur Unterputz HM-LC-Bl1PBU-FM -->
</head>
<body>
<div class="row">
<div class="cell 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="mi-line_weight" class="big compressed"></div>
</div>
<div class="cell-80 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="cell right-align">
<div data-type="switch" data-device="var_device" data-get="motor" data-get-on="!stop.*" data-get-off="stop.*" data-set-on="down 100" data-set-off="stop" data-background-icon="mi-arrow_drop_down" data-icon="" class="small"></div>
</div>
<div class="cell right-space">
<div data-type="switch" data-device="var_device" data-get="motor" data-get-on="!stop.*" data-get-off="stop.*" data-set-on="up 100" data-set-off="stop" data-background-icon="mi-arrow_drop_up" data-icon="" class="small"></div>
</div>
</div>
</body>
</html>
Template für Jalousie Szenen
template_blind_scene.html
Parameter: "var_device":Name der in FHEM definierten Szene,"var_state":Status der Szene die ausgewählt werden soll,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Jalousieaktoren Szenzen -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["((?!var_state).)*","var_state"]' data-colors='["gray","green"]' data-icon="mi-line_weight" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
</div>
<div class="cell">
</div>
<div class="cell right-align right-space">
<div data-type="push" data-device="var_device" data-set-on="scene var_state" data-get-on="var_state" data-background-icon="mi-swap_vert" data-icon="" class="small"></div>
</div>
</div>
</body>
</html>
Template für Rauchmelder
template_smoke.html
Parameter: "var_device":Name des Device in FHEM,"var_name":Bezeichnung
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Rauchmelder HM-SEC-SD -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["off","smoke-Alarm_0B"]' data-colors='["blue","red"]' data-icon="fa-fire" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["off","Melder bereit","smoke-Alarm_0B","Alarm"]'></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
</div>
</div>
</body>
</html>
Template für Rauchmelder Szenen (konkret Abschaltung des Alarmes - keine wirkliche Szene!)
template_smoke_scene.html
Parameter: "var_device":Name des Device in FHEM,"var_name":Bezeichnung,"var_description":optional ein Hinweis
!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Rauchmelder HM-SEC-SD mit Deaktivierung des Alarms -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["off","smoke-Alarm_0B"]' data-colors='["gray","green"]' data-icon="oa-secur_smoke_detector" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div class="small">var_description</div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
<div data-type="push" data-device="var_device" data-set-on="alarmOff" data-background-icon="mi-notifications_off" data-icon="" class="small"></div>
</div>
</div>
</body>
</html>
Template für Wettervorhersage
template_weather.html
Parameter: "var_device":Name des Device in FHEM,"var_day":Tag der Vorhersage 1=heute, 2=morgen usw.
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für fhem Weather Modul -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="weather" data-device="var_device" data-get="fcvar_day_condition" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div data-type="label" data-device="var_device" data-get="fcvar_day_high_c" data-unit="°C max." class="large inline"></div>
<div data-type="label" data-device="var_device" data-get="fcvar_day_low_c" data-unit="°C min." class="large inline"></div>
<div data-type="label" data-device="var_device" data-get="fcvar_day_condition" class="large"></div>
</div>
<div class="cell">
</div>
<div class="cell right-align right-space">
<div data-type="label" data-device="var_device" data-get="fcvar_day_day_of_week" class="big"></div>
</div>
</div>
</body>
</html>
Template für Link auf eine andere Contentseite
template_link.html
Parameter: "var_device":Name der in FHEM definierten Struktur (optional),"var_link":Name der Content-Seite (ohne .html),"var_name":Bezeichnung,"var_icon":Name des Symboles"var_state1":Status1 der Struktur,"var_text1":anzuzeigende Bezeichnung des Status1,"var_state2":Status2 der Struktur,"var_text2":anzuzeigende Bezeichnung des Status2
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Startseite zum Aufruf der Contentseiten -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","off","open","on","undefined"]' data-colors='["blue","blue","red","red","red"]' data-color="blue" data-icon="var_icon" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["var_state1","var_text1","var_state2","var_text2","var_state3","var_text3"]'></div>
</div>
<div class="cell">
</div>
<div class="cell">
<div data-type="link" data-url="#var_link.html" data-load="#var_link" 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>
Template für Aktivierung bzw. Deaktivierung von DOIF-Funktionen (z.B. für eine Seite mit Einstellungen)
template_setting_doif.html
Parameter: "var_DOIF":Name der in FHEM definierten DOIF Funktion,"var_icon":Name des Symboles,"var_name":Bezeichnung,"var_description":Beschreibung was die Funktion macht (optional)
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template zum Aktivieren bzw. Deaktivieren von DOIF -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-icon="var_icon" data-color="blue" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div class="small">var_description</div>
</div>
<div class="cell"></div>
<div class="cell right-space">
<div data-type="checkbox" data-device="var_DOIF" data-get="mode" data-get-on="enable" data-get-off="disabled" data-set-on="enable" data-set-off="disable" class="small blue"></div>
</div>
</div>
</body>
</html>
Template für Anrufliste
template_call.html
Parameter: "var_device":Name des Device in FHEM,"var_call":Nummer der Anrufes aus der Anrufliste 1=letzter Anruf, 2=vorletzter Anruf usw.
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für fhem Phone Modul -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="var_call-state"
data-icons='["mi-call_missed","mi-call_missed_outgoing","mi-call_received","mi-call_made","mi-call_made","mi-call_received","oa-phone_call","oa-phone_call"]'
data-get-on='["=> X","<= X","=> ((o))","<= ((o))","<=","=>","<= [=]","=> [=]"]'
data-on-colors='["#ad3333","#ad3333","#3399ff","#33ad33","#3399ff","#33ad33","#3399ff","#33ad33"]' class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div data-type="label" data-device="var_device" data-get="var_call-name" class="big"></div>
<div data-type="label" data-device="var_device" data-pre-text="(" data-post-text=")" data-get="var_call-number" class="inline"></div>
<div data-type="label" data-device="var_device" data-get="var_call-timestamp" class="inline"></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
</div>
</div>
</body>
</html>
die Anpassungen der css
user-tablet-ui.css
/* FHEM Tablet UI 2.6 - eigene Anpassungen */
/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}
.phone-back-btn {
display: none;
}
/* Menübreite und Zeilenabstand der Menüpunkte korrigiert*/
@media screen and (max-width: 900px) and (min-width: 480px) {
.menu {
width: 90px !important;
}
}
/* Menüleiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr überdeckt werden */
@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
top: 0px;
left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
top: 0px;
left: 0px;
height: 39px;
width: 39px;
position: absolute;
background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
}
/* Header Hintergrundfarbe und Schriftgröße korrigiert */
.card > header {
background-color: #e6e6e6;
font-size: 125%;
}
/* Weather Iconfarbe korrektur */
.weather:before {
color: #337ab7;
}
Vielen Dank,
das nötigt mich förmlich meine angestaubte Oberfläche aufzupolieren 8)
Würdest du auch noch die Details zu Grafiken und Einstellungen zur Verfügung stellen?
Als Ideenquelle ist das immer super.
Wie hast du die Temperatureinstellung der Heizung gelöst? Oder stellst du nur zwischen Tag und NAcht um?
Wow, wirklich toll..
ich würde sogar um alle Dateien bitten...
Das gefällt mir wirklich gut...
Anbei gern noch die Content-Seite aus dem Bereich Einstellungen. Das zugehörige Template ist im ersten Beitrag beschrieben.
Hier beschränke ich mich derzeit auf das Aktivieren bzw. Deaktivieren von DOIF-Funktionen. Also z.B. die automatische Schaltung der Außenbeleuchtung. Der Bereich ist aber sicher noch ausbaufähig. ;)
content_settings.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_settings">
<div class="hbox">
<div class="vbox phone-width">
<div class="card">
<header>Lichtsteuerung</header>
<section>
<div data-template="template_setting_doif.html" data-parameter='{"var_DOIF":"Licht_Haustuer","var_icon":"fa-moon-o","var_name":"Licht Haustür","var_description":"Schaltung sobald dunkel und bis 23Uhr"}'></div>
</section>
<section>
<div data-template="template_setting_doif.html" data-parameter='{"var_DOIF":"Licht_Einfahrt","var_icon":"fa-moon-o","var_name":"Licht Einfahrt","var_description":"Schaltung sobald dunkel und bis 23Uhr"}'></div>
</section>
<section>
<div data-template="template_setting_doif.html" data-parameter='{"var_DOIF":"Licht_Terrasse","var_icon":"mi-directions_run","var_name":"Licht Terrasse","var_description":"Schaltung sobald dunkel und bei Bewegung"}'></div>
</section>
<section>
<div data-template="template_setting_doif.html" data-parameter='{"var_DOIF":"Licht_Garage","var_icon":"fa-moon-o","var_name":"Licht Garage","var_description":"Schaltung sobald dunkel und bei offenem Garagentor"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card">
<header>Sicherheit</header>
<section>
<div data-template="template_setting_doif.html" data-parameter='{"var_DOIF":"Kamin_Dunstabzug","var_icon":"fa-fire","var_name":"Dunstabzug Küche","var_description":"Unterbrechung sobald alle Fenster geschlossen"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Thema Temperatursteuerung:
Ich habe im Haus ein Fußbodenheizung. Empfehlungen gehen bei solchen Heizungskonzepten häufig dahin, die Temperaturen möglichst konstant zu halten. Deshalb beschränke ich mich tatsächlich auf die Umschaltung zwischen Tag/Nacht-Modus. (was sich im ersten Winter auch bewährt hat) Eine gradgenaue Temperaturänderung macht also in meinem konkreten Fall wenig Sinn.
Kurze Erklärung noch: Ich nutze Wandthermostate zur Messung der Raumtemperatur sowie Einstellung der Solltemperatur. Geschaltet werden die Heizkreise mittels Schaltaktoren. (also einfach ein bzw. aus) Den Regelkreis bilde ich sehr einfach über eine DOIF-Funktion in FHEM ab.
Anbei die Content-Seite zur Steuerung der Raumtemperatur. Das zugehörige Template ist zu Beginn beschrieben. :)
content_heating.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_heating">
<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>Heizung unten</header>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"22.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Heizung oben</header>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"22.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
<section>
<div data-template="template_heating.html" data-parameter='{"var_device1":"HM_xxxxxx","var_device2":"HM_yyyyyy","var_temp_day":"21.0","var_temp_night":"17.0","var_name":"Name des Raumes"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Hallo!
Sieht wirklich toll aus, was Du da gebastelt hast!
Vielen Dank, dass Du Deine Arbeit mit uns teilst.
Ich kämpfe aktuell auch mit FTUI flex.
Leider habe ich manchmal das Phänomen, dass die Icons usw. rechts außerhalb des Card Bereiches zu finden sind.
Habe mich dazu zuerst am index_flex_demo3.html File gehalten. Leider ist es auch hier so, dass bei Browser Breite im Smartphone Bereich die Icons neben der Card liegen.
Liegt vermutlich am Browser (bei mir Firefox@Win10). ???
Was ich wirklich toll finden würde, wenn die Größe der Icons flexibel zur jeweiligen Bildschirmgröße passen würde.
Also bei viel Platz (z.B. bei Betrachtung am PC, Tablet) sollen die Icons größer sein, am Handy dementsprechend kleiner.
Weiß nicht, ob das möglich ist?
Grüße
Daniel
Ja, das Problem hatte ich auch. Jedoch bei dem aktuellen Konzept nicht mehr aufgetreten. Deine Anregung müsste ggf. setstate beantworten, da das wesentlich von den css Definitionen abhängt bzw. hierüber realisiert werden kann.
Hi. Wirklich tolle Arbeit, die ich gerade versuche auf meine Bedürfnisse zu adaptieren. Die erste Seite Türen/Fenster steht auch schon. Leider habe ich das Problem, dass die Bezeichnungen nicht alle in der Reihe ist. Es sind so ziemlich meine ersten Versuche mit FTUI und ich finde den Fehler einfach nicht. Kann mir da jemand helfen bzw. mir erklären warum das so aussieht?
template_contact.html
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Fensterkontakte -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","open"]' data-colors='["blue","red"]' data-icon="var_symbol" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<br>
<div data-type="label" data-device="var_device" data-substitution='["open","geoeffnet","closed","geschlossen"]' class="inline"></div>
</div>
</div>
</body>
</html>
content_contact.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_contact">
<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>Fenster Erdgeschoss</header>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"ku_fenster","var_symbol":"ftui-window","var_name":"Küche"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"ez_doorcontact","var_symbol":"ftui-door","var_name":"Terrasse"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"wz_fenster","var_symbol":"ftui-window","var_name":"Wohnzimmer"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"wc_fenster","var_symbol":"ftui-window","var_name":"Gäste-WC"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Fenster Obergeschoss</header>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"sz_fenster","var_symbol":"ftui-window","var_name":"Schlafzimmer"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"bz_fenster","var_symbol":"ftui-window","var_name":"Badezimmer"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"an_fenster","var_symbol":"ftui-window","var_name":"Ankleidezimmer"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"ki_fenster","var_symbol":"ftui-window","var_name":"Kinderzimmer"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Türen</header>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"haustuer","var_symbol":"ftui-door","var_name":"Haustür"}'></div>
</section>
<section>
<div data-template="template_contact.html" data-parameter='{"var_device":"ke_doorcontact","var_symbol":"ftui-door","var_name":"Keller"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Vielen Dank schon mal!
Heyho,
das schaut echt schick aus. Danke auch für die Templates, wenn es die Zeit zulässt schau ich mir das mal an und bastel mal :)
Grüße Sascha
@Andy: schön das Dir das layout zusagt. Bin im Moment unterwegs und schau mir das gern noch mal genauer an. Vorweg schon zwei Tipps bzw. Erfahrungen die ich gemacht habe. 1) <br> solltest du weglassen. Die Elemente werden automatisch untereinander platziert. class="inline" sorgt dafür dass Elemente nebeneinander dargestellt werden solange die Gesamtbreite das hergibt.
2) versuche mal mit 3 Spalten (cell) zu arbeiten. So habe ich bei mir alles schön untereinander bekommen.
Soweit für den Moment. :)
Danke schon mal. br ist jetzt in der template Datei raus geflogen und ich habe noch eine Spalte eingefügt. Es sieht schon besser aus aber so richtig ist das noch nicht. Was ich einfach nicht verstehe ist, warum z.B. der Bereich "Türen" richtig dargestellt wird und im Bereich Erdgeschoss nur die ersten 2. Irgendwas elementares muss ich da doch falsch machen ::)
Probiere es bitte mal mit dem Template und schicke mir mal eine Screenshot. Finden wir schon raus, wo es klemmt. :)
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Homematic Funk Fensterkontakte -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","open"]' data-colors='["blue","red"]' data-icon="var_symbol" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["open","geoeffnet","closed","geschlossen"]'></div>
</div>
<div class="cell right-align right-space">
</div>
</div>
</body>
</html>
@jemu75
deine Flex FTUI Geschichte sieht echt schick aus... ;) :D
Toll wäre es wenn du im ersten Beitrag alle Dateien ran hängen könntest, dann kann jeder sich dort bedienen... der es nachbauen möchte. So braucht man dann später nicht den ganzen Beitrag zu durch wühlen, denn es kommt sicher noch etwas mehr von dir und besonders kommen Fragen so kannst du immer auf den ersten Beitrag verweisen und auch dort aktualisieren....
Häng am besten das ganze /tablet Verzeichnis dort ran :D ;D ;)
Zum Flex FTUI sicher wird der ein oder andere noch nach einem dunklem Template fragen, ich schließe mich da ein weil es mir sehr gut gefällt. Was war deine Grundlage womit hast du angefangen..?
Guter Hinweis. Ich hänge die anderen Templates mal noch an den ersten Beitrag. Die Content-Seite müsste ich mal noch "anonymisieren" ;)
Was die Farben anbetrifft, so kannst du in der index.html die folgende Zeile entfernen.
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
Dann sieht das Ganze wie im folgenden Anhang aus. Hier finde ich jedoch die Header nicht besonders gelungen, da hier fest die Farbe von meinen individuellen Anpassungen mitkommen. Ich würde deshalb mal noch was an meiner css ändern. Dann sollten auch die Header in der richtigen Farbe kommen. :)
Ok, dass sieht super aus... ;) :D
Der Header kann ja ja in der css auch noch angepasst werden, je nach Geschmack.. Ich denke das wird hier vielen gefallen :)
Zitat von: jemu75 am 08 September 2017, 13:26:43
Probiere es bitte mal mit dem Template und schicke mir mal eine Screenshot. Finden wir schon raus, wo es klemmt. :)
Hat funktioniert, jetzt sieht es auf allen Devices hervorragend aus. Bin echt begeistert endlich was gefunden zu haben, was mir gefällt!
Top Arbeit!
Ich bin schon am Umbauen 8)
Das mit den Templates ist bisher an mit vorüber gegangen.
Eventuell kann ich damit auf PHP verzichten.
An den Detailseiten von Wetter und Anrufen wäre ich auch noch brennend interessiert ;)
Nur für die Heizung habe ich noch keine gute Idee.
Ich möchte die Temperatur einstellen können, zwischen manuell und Automatik umschalten und das weekprofile aufrufen können. Das ganze soll natürlich nicht überladen wirken :-\
So eine Art expand Button, der das Feld in der Vertikale vergrößert wäre ideal.
Hi,
schließe mich den Komplimenten der Vorschreiber an.
Ich habe noch eine frage bzgl. der Thematik Link. Ist ein Link genauso schnell im Aufbau wie Pagebutton bzw. PageTab? Hierzu gibt es reichlich Aussagen im Forum, jedoch kein bezug zu Link :-)...
@klausw:
Vielleicht kannst du dein Temperatur Template mit Popup kombinieren, sodass nach einem "Klick" das Popup (Größe lässt sich definieren) mit deinen Einstellungsmöglichkeiten geöffnet wird.
Gruß
Zitat von: moonsorrox am 08 September 2017, 14:02:07
Toll wäre es wenn du im ersten Beitrag alle Dateien ran hängen könntest, dann kann jeder sich dort bedienen... der es nachbauen möchte. So braucht man dann später nicht den ganzen Beitrag zu durch wühlen, denn es kommt sicher noch etwas mehr von dir und besonders kommen Fragen so kannst du immer auf den ersten Beitrag verweisen und auch dort aktualisieren....
Häng am besten das ganze /tablet Verzeichnis dort ran :D ;D ;)
Ich habe jetzt mal alle Templates in den ersten Beitrag gepackt und jeweils die Parameter, die gesetzt werden können, dazu geschrieben.
Die Contentseiten sind faktisch immer nach dem gleichen Muster aufgebaut. Man kann sich also ebenfalls an den Beispiel-Content-Seite im ersten Beitrag orientieren und dann mit Hilfe der Templates eigene Content-Seiten aufbauen.
Zitat von: Mundus am 08 September 2017, 16:44:22
Ich habe noch eine frage bzgl. der Thematik Link. Ist ein Link genauso schnell im Aufbau wie Pagebutton bzw. PageTab? Hierzu gibt es reichlich Aussagen im Forum, jedoch kein bezug zu Link :-)...
Ich habe folgende Erfahrung gemacht. Wenn die Content-Seiten das erste Mal angezeigt werden, dann dauert das Laden je nach Anzahl der Elemente einen kurzen Augenblick. Wenn die Seiten aber einmal geladen sind und man dann zwischen den Seiten hin und herspringt, dann sind die sofort da. Wie data-type="link" technisch genau funktioniert, müsste man mal bei setstate erfragen. :)
Zitat von: klausw am 08 September 2017, 16:26:24
An den Detailseiten von Wetter und Anrufen wäre ich auch noch brennend interessiert ;)
Diese beiden Contentseiten sind recht einfach gestrickt. habe meine konkreten Seiten man angefügt. Die zugehörigen Templates findest du jetzt im ersten Beitrag. :)
content_weather.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_weather">
<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>Vorhersage</header>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"1"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"2"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"3"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"4"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"5"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
content_phone.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_phone">
<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>Anrufe</header>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"1"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"2"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"3"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"4"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"5"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"6"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"7"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"8"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"9"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Zitat von: jemu75 am 09 September 2017, 14:00:22
Ich habe jetzt mal alle Templates in den ersten Beitrag gepackt und jeweils die Parameter, die gesetzt werden können, dazu geschrieben.
da hast du dir aber richtig Mühe gegeben, soviel Aufwand..! ;) Es werden dir viel danken...! :D
Ich dachte du hängst einfach nur ein Zip Ordner ran wie es einige hier schon getan haben, aber so ist es absolut OK Super..!!! :) :D
Jup, wirklich nett anzusehen, aber ich verstehe nicht, warum du uns händisch Code kopieren, Files benennen, speichern lässt? Gibt es einen Grund, die Dateien nicht als zip an deinen Beitrag zu hängen?
Verstehe mich bitte nicht falsch, tolle Arbeit, aber irgendwie fällt es so schon recht schwer schnell mal dein Layout Live auszuprobieren. Oder habe ich etwas übersehen?
lieb Gruß
H.
Hallo jemu
Super Sache, DANKE vielmals!!!
Könntest du bitte noch die Dateien content_cam.html und content_blinds.html zur Verfügung stellen?
Danke! Gruss Eppi
Zitat von: holle75 am 09 September 2017, 15:09:30
Jup, wirklich nett anzusehen, aber ich verstehe nicht, warum du uns händisch Code kopieren, Files benennen, speichern lässt? Gibt es einen Grund, die Dateien nicht als zip an deinen Beitrag zu hängen?
So, bevor ich noch überfallen werde, habe ich jetzt noch die kompletten Dateien als ZIP-File an den ersten Beitrag angefügt. ;)
Vielen Dank Jemu75! ... so machts einfach mehr Spaß sich deine Arbeit genauer anzusehen ;) .....
... ich ziehe meinen Hut. Vor allem wirklich sauberer, übersichtlicher, nachvollziehbarer Code. Kein zurechtgequetsche. Nice. Inspiriert. Danke!
Vielen Dank für das zahlreiche Lob. Freue mich, wenn dadurch neue Ideen entstehen.
ich denke jedoch, da geht noch einiges. ;)
Gerade was die Parameter anbetrifft. Aber für selbstgebaut und wie schon geschrieben mit den "Boardmitteln" eine aus meiner Sicht schöne Variante. Bin mal gespannt welche Anregungen noch so kommen. :)
Ich versuche aktuell ein paar Features von materialize auszuprobieren.
Die Card reveal Funktion finde ich sehr interessant für FTUI
http://materializecss.com/cards.html#reveal (http://materializecss.com/cards.html#reveal)
Vielleicht ist es ja für ein paar andere ebenfalls interessant. [emoji4]
Hoppala, das ist ja wenn man anfängt sich reinzudenken noch wesentlich komplexer als gedacht ;)
Ich versuche gerade deinen content/template Code in Kombination mit den DOIF´s zu verstehen (zb. content_light / template_switch).
könntest du da mal ein Beispiel mit fhem.cfg Code ausführen?
edit: wo nimmst du das "mode" her? .... oder die overviews in content_home, auch sehr spannend, aber wo fragst du die ab?
Hallo jemu75,
wirklich tolle und sauber aufgeräumte Arbeit. Kannst du mir vielleicht einmal sagen, wie du das mit den Jalousien Szenarien gemacht hast ? Wie sieht dein device "Scn_Jalousien" aus, mit dem du die Jalousiengruppen steuerst ? Ich hatte bisher mehrere Structuren gebildet. Das scheinst du aber anders gelöst zu haben.
Vielen Dank schon einmal vorweg !
Zitat von: holle75 am 10 September 2017, 12:52:54
Ich versuche gerade deinen content/template Code in Kombination mit den DOIF´s zu verstehen (zb. content_light / template_switch).
könntest du da mal ein Beispiel mit fhem.cfg Code ausführen?
edit: wo nimmst du das "mode" her? .... oder die overviews in content_home, auch sehr spannend, aber wo fragst du die ab?
was mache ich mit DOIFIch habe mit dem template_switch die Möglichkeit einen "Verbraucher" (z.B. Lampe oder Steckdose) einfach selbst ein- bzw. auszuschalten.
In vielen Situationen soll mir die Hausautomation aber auch Arbeit abnehmen. ;) Zum Beispiel das Außenlicht schalten wenn es dunkel ist.
Dazu nutze ich in FHEM gern DOIF.
Hier ein Beispiel aus meiner fhem.cfg:
define Licht_Haustuer DOIF ([08:00-23:00] and [HM_3DF0ED:brightness] < 120 and [HM_48CF1C:state] ne "on") (set HM_48CF1C on) DOELSEIF (([23:01] or [HM_3DF0ED:brightness] > 119) and [HM_48CF1C:state] ne "off") (set HM_48CF1C off)
attr Licht_Haustuer cmdState on|off
Die DOIF Funktionen kann man praktischer Weise aktivieren bzw. deaktivieren. Dazu kann man in FHEM das Komando "set Licht_Haustuer enable" absetzen. Das Ergebnis wird dann im Reading "mode" abgelegt.
Im template_switch zeige ich nun (optional) an, ob meine Funktion den "mode" enabled oder disable hat.
Lasse ich den Parameter "var_doif" leer (also wenn ich keine Funktion definiert habe) dann zeigt mein Template auch nichts an.
Im Bereich Einstellungen (content_settings.html) habe ich nun wiederum ein Template (template_setting_doif.html) indem ich die Funktion, wie oben beschrieben, aktivieren bzw. deaktivieren kann.
Overviews in content_homeVon der Seite content_home.html verlinke ich ja auf bestimmte Aktoren bzw. Sensoren. (z.B. Lichtschalter, Rauchmelder, Jalousien usw.)
Um bereits hier den "groben Zustand meines Hauses" zu sehen, nutze ich direkt in FHEM die sog. Strukturen (structure), mit denen ich mehrere Aktoren bzw. Sensoren zusammenfassen kann.
Auch hier ein Beispiel aus meiner fhem.cfg:
define overview_light structure room HM_33E4F2_Sw HM_48CF1C HM_3B5D45_Sw_01 HM_3B5D45_Sw_02 HM_1C8F54_Sw_01
attr overview_light clientstate_behavior relativeKnown
attr overview_light clientstate_priority on off
Die Strukturen nutze ich nun dazu um eben die Info zu bekommen, ob z.B. noch irgendwo Licht im Haus an ist, indem ich in template_link.html den Status meiner Struktur abfrage. Auch hier gilt wieder - gebe ich dem template_link den Parameter "var_device" optional mit, dann wird diese Info in meinem Link angezeigt. Ansonsten eben nicht :)
Ist in der Tat nicht ganz einfach, aber ich hoffe jetzt etwas Licht ins Dunkel gebracht zu haben. ;)
Zitat von: derHeimwerker am 10 September 2017, 14:03:48
Kannst du mir vielleicht einmal sagen, wie du das mit den Jalousien Szenarien gemacht hast ? Wie sieht dein device "Scn_Jalousien" aus, mit dem du die Jalousiengruppen steuerst ?
Um Szenarien festzulegen, nutze ich direkt in FHEM die sog. "LightScene" (der Name hat mich zu Beginn etwas verwirrt). ;)
Hiermit kann ich fanktisch für alle möglichen Aktoren "Szenen" definieren. Die Anlage einer LightScene ist sehr einfach.
Hier wieder ein Beispiel aus meiner fhem.cfg
define Scn_Jalousien LightScene HM_469672 HM_469657 HM_46965E HM_46964F HM_49DD50 HM_3394D6
In der fhem.cfg werden also erstmal nur die Aktoren festgelegt, die in meinen Szenarien "mitspielen" sollen.
Die eigentlichen Szenarien z.B. "alle Jalousien offen" legt man dann direkt in der FHEM Oberfläche an. (siehe Bild im Anhang)
Wie das im Detail funktioniert und wie man diese Szenarien abspeichert, kann man gut in der comandref in FHEM nachlesen.
Ist aber letztlich auch sehr einfach. Du stellst alle betreffenden Aktoren, die du in deiner LightScene definiert hast, auf den gewünschten Zustand ein und speichert danach in deiner LightScene diese "Szene" mit einem passenden Name (z.B. alle_Jalousien_offen") ab.
wow .... davon habe ich bisher noch nichts gelesen. Klingt aber super interessant. Vielen Dank für die Info !
Zitat von: jemu75 am 10 September 2017, 21:39:06
Die DOIF Funktionen kann man praktischer Weise aktivieren bzw. deaktivieren. Dazu kann man in FHEM das Komando "set Licht_Haustuer enable" absetzen. Das Ergebnis wird dann im Reading "mode" abgelegt.
Hallo jemu, nice..... so mache ich das im Prinzip auch, aber ich finde das Reading "mode" nicht in meinen DOIF´s. Hab mal mit state gespielt, aber da hats dann natürlich die cmd´s drin und nicht enabled/disabled. Ist das ein Userreading? Falls ja, wie genau hast du dieses angelegt?
Hallo Zusammen,
ich habe gestern FTUI aktualisiert seitdem passen die Abstände zwischen den Zeilen nicht mehr.
Hat jemand eine Idee was ich anpassen muss.
es sind die orginal Seiten aus dem ersten Beitrag.
Christian
hast du es dir nur im Browser angeschaut, oder auch auf dem Phone? Bei mir gibts da häufiger Unterschiede.
Ansonsten sind die Web-Entwickler Tools im jeweiligen Browser dein Freund. Die zeigen dir schön, welches Objekt, div, Schriftgrad, etc welchen Platz einnimmt.
Hat sich irgendwo ein <br> eingemogelt? Das war bei mir mal der Fall :D
Der "Fehler" tritt am PC (FF & IE) und auf meinem Iphone auf.
vor dem Update war alles gut.
<br> habe ich nicht verwendet.
Ich vermuhte es hat sich was in den CSS Dateien geändert
in FF kannst du über Extras -> Web-Entwickler -> Inspektor die Konsole öffnen. Dann klickst du (bei mir) oben ganz links in der Ecke den Button mit Rechteck und Pfeil an und fährst mit der Maus über den Bereich in deiner Page der dich interessiert. Dann sollten dir alle die Divs, etc mit jeweiligem css angezeigt werden. Inkl. in welcher css-Datei die Definition liegt.
Hallo Holle,
danke für den Hinweis.
Ich habe mir gerade einen ältern Stand besorgt und werde mir das heute abend anschauen.
Hallo,
ich habe in Chrome und Fully einen Darstellungsfehler: Wenn ich class card grow-0 in der untersten card eine vbox verwende, wird diese ohne Hintergrund ausserhalb des sichtbaren Bereichs dargestellt. Habe dazu diesen thread eroeffnet: https://forum.fhem.de/index.php/topic,76431.0.html (https://forum.fhem.de/index.php/topic,76431.0.html)
In Firefox schaut alles fein aus.
Falls das bei noch jemandem auftritt, bitte meine vorgeschlagene Loesung probieren und in meinem Thread kommentieren.
Danke!
Hallo an Alle!
Bin jetzt auch am umbauen, habe aber ein kleines Problem mit dem Menü.
Das Verhalten habe ich am PC (Chrome) und am Handy im Querformat.
Wenn das Menü ganz ausgefahren oder ganz eingefahren ist, passt alles aber wenn es den Zwischen-Status hat, verdeckt es den Content. Was muss ich da ändern? Kann mir da wer helfen?
Im Prinzip habe ich das von jemu75 nachgebaut.
jemu75 ist das bei dir auch so?
Danke im Voraus!
.... hatte auch ein paar Probleme bei verschiedenen Queerbreiten.
habe dann in der fhem-tablet-ui.css in der Zeile 983 (da in der Nähe)
.menu ul li:focus {
outline: none;
}
/* hdm -webkit-transform zu allen transform hinzugefuegt / min-width auf 481 */
@media screen and (max-width: 900px) and (min-width: 481px) {
.menu ~ main > .page {
padding-left: 90px;
}
.menu {
width: 90px;
}
.menu ul li {
height: 60px;
position: relative;
padding: 0.5em 1em 0.5em 2.1em;
}
min-width auf 481 geändert. Und in der my-css.css (je nachdem wie sie bei dir heißt) noch diese Änderungen gemacht (mit hdm kommentiert).
/* FHEM Tablet UI 2.6 - eigene Anpassungen */
/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}
.phone-back-btn {
display: none;
}
/* Menübreite und Zeilenabstand der Menüpunkte korrigiert*/
/* hdm start ..... min-width von 480 auf 481 ..... zeile 983 in fhem-tablet-ui.css ebenfalls anpassen */
@media screen and (max-width: 900px) and (min-width: 481px) {
.menu {
width: 90px !important;
overflow: hidden;
}
.menu ul li div[data-type="link"] {
width: 65px !important;
}
.menu ul li div[data-type="link"] > div > span {
display: none !important;
}
/* hdm end */
}
/* Menüleiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr überdeckt werden */
@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
top: 0px;
left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
top: 0px;
left: 0px;
height: 39px;
width: 39px;
position: absolute;
background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
Außerdem in der fhem-tablet-ui.css
-webkit-transform zu allen transform hinzugefuegt.
zb statt nur
transform: translate3d(-1em, -50%, 0);
transform: translate3d(-1em, -50%, 0);
-webkit-transform: translate3d(-1em, -50%, 0);
Wobei das wahrscheinlich nur ein Problem bei alten Devices ist.
Schau mal, obs hilft?
Man muß dazusagen, dass das weder (noch) updatefest, noch besonders sauber ist. Ich wollte in einer Breite von 480px noch nicht das "halbausgeklappte" Menu, da man so keinen Platzgewinn hat..... aber, und das könnte für dich interessant sein, auch keine Darstellungsfehler.
Edit: und so hängen die Menu-Divs bei mehr als 480px (bis 900px) auch nicht mehr in den Hauptbereich. Wenn man vorher scrollen wollte (im linken Bereich des Hauptbereiches) hat man immer einen Menupunkt erwischt.
holl75, ich danke dir!
So siehts gut aus!
Zitat von: edank am 11 September 2017, 18:06:24
Hallo an Alle!
Bin jetzt auch am umbauen, habe aber ein kleines Problem mit dem Menü.
Das Verhalten habe ich am PC (Chrome) und am Handy im Querformat.
Wenn das Menü ganz ausgefahren oder ganz eingefahren ist, passt alles aber wenn es den Zwischen-Status hat, verdeckt es den Content. Was muss ich da ändern? Kann mir da wer helfen?
Im Prinzip habe ich das von jemu75 nachgebaut.
jemu75 ist das bei dir auch so?
Hallo, bei mir passt die Darstellung auf den verschiedenen Geräten. Hast du die user_tablet_ui.css von mir mit in das Hauptverzeichnis gepackt? Dort hatte ich div. Anpassungen drin. Ansonsten schicke einfach mal deine index.html und die zugehörige content-seite. :)
Zitat von: holle75 am 11 September 2017, 10:00:38
Hallo jemu, nice..... so mache ich das im Prinzip auch, aber ich finde das Reading "mode" nicht in meinen DOIF´s. Hab mal mit state gespielt, aber da hats dann natürlich die cmd´s drin und nicht enabled/disabled. Ist das ein Userreading? Falls ja, wie genau hast du dieses angelegt?
Das Reading mode verhält sich in FHEM etwas eigenartig. ;) Wenn man die DOIF Funktion zum erstem Mal "enabled" bzw. "disabled" dann erscheint das Reading. Aus meiner Sicht ist das kein Userreading. Zumindest habe ich nichts angelegt.
Jemu75 danke dir!
Es bewahrheitet sich wieder einmal, "Wer lesen kann, ist klar im Vorteil"!
Habe es übersehen, dass Du die css auch geändert hast.
LG
Edank
Zitat von: jemu75 am 12 September 2017, 07:22:17
Das Reading mode verhält sich in FHEM etwas eigenartig. ;) Wenn man die DOIF Funktion zum erstem Mal "enabled" bzw. "disabled" dann erscheint das Reading. Aus meiner Sicht ist das kein Userreading. Zumindest habe ich nichts angelegt.
Ah, jetzt seh ich es auch ;) .... lustig, meine DOIF´s sind alle mit disable/initialize angelegt (und bei initialize, was eigentlich immer der Fall ist, ist "mode" nicht sichtbar). Deswegen ist es mir nie aufgefallen. Bau ich mal um. Danke.
Dein Design sieht wirklich toll aus, das werde ich auf jeden Fall ausprobieren! Dass sich dies auf dem Tablet und Handy gleichermaßen nutzen lässt, hat einen besonderen reiz!
Derzeit baue ich mein Smart Home auf und arbeite mich gerade in FHEM ein.
Ich habe eine Verständnisfrage: beim - ich nenne es mal die - klassische Tablet UI Oberfläche gibt es einige Widgets (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Integrierte_Widgets). Lassen sich alle Widgets aus der klassischen Tablet UI Oberfläche auch in Deinem Design nutzen? Oder müssen diese erst für Deine Darstellung angepasst werden? Sorry für die Anfängerfrage.
Vielen Dank und viele Grüße
Hallo
Bei mir ist das Problem mit der Überlappung im Querformat noch nicht gelöst. Ich habe die CSS Änderungen im Beitrag #7 übernommen, jedoch keine Änderung festgestellt.
Das Problem habe ich bei meiner Konfig nur mit den Cameras. Ich Hochformat ist alles ok, im Querformat sind die Bilder überlappt (siehe Anhang). Das Template habe ich vom Zip übernommen. Hat jemand eine Idee
Zitat von: Yepe am 11 September 2017, 10:08:51
Hallo Zusammen,
ich habe gestern FTUI aktualisiert seitdem passen die Abstände zwischen den Zeilen nicht mehr.
Hat jemand eine Idee was ich anpassen muss.
es sind die orginal Seiten aus dem ersten Beitrag.
Christian
Hallo Christian,
ich habe das Update eben auch mal gemacht und nach dem Neustart selbigen Effekt. Ich habe jetzt erstmal "zurückgerollt", da ich auf die Schnelle nichts gefunden habe. Ich gehe jedoch davon aus, dass setstate was in der fhem-tablet-ui.css verändert hat, was zu diesem Effekt führt. Aktuell gibt es hier im Forum unter dem Beitrag
Update (03.09.2017) - Elemente verschoben ja auch viele andere User, die über Veränderungen bei der Darstellung der einzelnen Elemente berichten. Wenn setstate die Sachen behebt, sollte das auch für meine hier vorgestellte Lösung zutreffen. Ansonsten würde ich mich noch mal tiefer in der Thema "eingraben" und eine Lösung bauen.
Zitat von: daelch am 12 September 2017, 13:59:37
Ich habe eine Verständnisfrage: beim - ich nenne es mal die - klassische Tablet UI Oberfläche gibt es einige Widgets (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Integrierte_Widgets). Lassen sich alle Widgets aus der klassischen Tablet UI Oberfläche auch in Deinem Design nutzen? Oder müssen diese erst für Deine Darstellung angepasst werden?
Ich habe mit dem Design im Grunde nur einen Rahmen geschaffen. Du kannst hier grundsätzlich alle Widgets einbauen die zur Verfügung stehen. Empfehlenswert ist es jedoch, das Grundprinzip der Templates nicht völlig zu verlassen.
Meine damit - als Empfehlung:
Links: ein Symbol, welches den Status des Aktoren bzw. Sensoren repräsentiert (class="big compressed")
Mitte: Die Bezeichnung (class="big") und darunter diverse Zusatzinformationen, die den Aktor bzw. Sensor betreffen
Rechts: 1 oder 2 (nebeneinander) angeordnete "Steuerelemente" z.B. Button, Slider ect. die eine Hauptfunktion des jeweiligen Aktoren ansprechen. (class="small")
Hier mal ein leeres Template/Muster, in dem du faktisch deine eigenen Sachen realisieren kannst.
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template Muster [hier dokumentieren welche Typen von Aktoren/Sensoren im Template angesprochen werden] -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<!-- großes Symbol welches den Status des Aktoren bzw. Sensoren repräsentiert, sollte class="big compressed haben"-->
<div data-type="symbol" data-device="var_device" data-states='["0","1"]' data-colors='["blue","red"]' data-icon="var_icon" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<!-- Name oder Ort des Aktor bzw. Sensor, sollte class="big" haben -->
<div class="big">var_name</div>
<!-- zusätzliche Informationen, die den aktuellen Status des Aktoren bzw. Sensoren wiedergeben -->
<div data-type="label" data-device="var_device"></div>
</div>
<div class="cell right-align">
<!-- Steuerelement z.B. switch, push, slider, sollte class="small" haben -->
<!-- diese Zelle nur füllen, wenn zwei Steuerelemente z.B. bei einer Jalousie "up" und "down" nötig sind, ansonsten dieses div leer lassen aber nicht löschen! -->
<div data-type="switch" data-device="var_device" class="small"></div>
</div>
<div class="cell right-space">
<!-- Steuerelement z.B. switch, push, slider, sollte class="small" haben -->
<div data-type="switch" data-device="var_device" class="small"></div>
</div>
</div>
</body>
</html>
Zitat von: eppi am 12 September 2017, 20:07:25
Hallo
Bei mir ist das Problem mit der Überlappung im Querformat noch nicht gelöst. Ich habe die CSS Änderungen im Beitrag #7 übernommen, jedoch keine Änderung festgestellt. Im Hochformat ist alles ok, im Querformat sind die Bilder überlappt. Das Template habe ich vom Zip übernommen. Hat jemand eine Idee
Das Problem habe ich in der Tat auch noch, aber eben nur im Querformat. Ich denke hier ist das von setstate erstellte flexbox noch nicht sauber ausprogrammiert. - Ps.: keine Kritik an setstate - er hat die Grundlage für alle die tollen Lösungen erst geschaffen! :)
Ich habe dazu vorerst eine Lösung geschaffen, indem ich alle Elemente auf eine "card" lege und diese dann mit "section" abgrenze.
Probiere in deiner Content-Seite gern mal folgendes:
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_chart">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Kameras</header>
<section>
<!-- div/template oder Link zur 1. Kamera -->
</section>
<section>
<!-- div/template oder Link zur 2. Kamera -->
</section>
<section>
<!-- div/template oder Link zur 3. Kamera -->
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Ich hätte dann auch noch mal eine Frage. Baue gerade alles nach und nach auf und mir fehlt noch eine schnelle und einfache Möglichkeit das Residents-Modul zu bedienen.
Ich habe es jetzt vorerst wie im Screenshot mit folgendem template gebastelt:
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Startseite fuer den Bewohnerstatus -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["gone","gotosleep","home","awoken"]' data-colors='["red","blue","green","yellow"]' data-color="blue" data-icon="var_icon" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device"></div>
</div>
<div class="cell">
</div>
<div class="cell">
<div data-type="select" data-device="var_device" data-items='["home","gone","gotosleep","asleep","awoken"]' data-get="state" data-set="state"</div>
</div>
</div>
</body>
</html>
Funktioniert sehr gut. Allerdings hätte ich gerne das Switch Widget etwas breiter gehabt. Geht das überhaupt oder bricht das irgendwelche Design-Regeln im css oder sowas?
Zitat von: andy19850 am 13 September 2017, 10:18:39
Ich hätte dann auch noch mal eine Frage. Baue gerade alles nach und nach auf und mir fehlt noch eine schnelle und einfache Möglichkeit das Residents-Modul zu bedienen.
Ich habe es jetzt vorerst wie im Screenshot mit folgendem template gebastelt:
Allerdings hätte ich gerne das Switch Widget etwas breiter gehabt. Geht das überhaupt oder bricht das irgendwelche Design-Regeln im css oder sowas?
Gute Lösung wie ich finde. Schau als Anregung gern mal in die Datei template_dimmer.html
Hier verwende ich zum dimmen des Lichtes einen Slider der ja auch mehr Platz benötigt. Mein Vorschlag wäre deshalb, dass Du dich am "Rahmen" des Dimmer-Templates orientiert. :)
Danke, habe es hinbekommen 8)
Hat schon irgendwer raus bekommen, weshalb seit dem letzten Update die Zeilenabstände im mittleren Teil der Templates so groß geworden sind?
Ich habe jetzt eine ganze Weile die fhem-tablet-ui.css durchforstet, steige jedoch nicht dahinter, was setstate verändert hat. ???
@jemu78
Ich habe mir deine Dateien runtergeladen und die Devices auf meine umgebaut. Alles ins passende Verzeichnis kopiert und musste leider feststellen, das keine Daten aktualisiert werden. Kann aber den Fehler nicht finden, hast Du einen Tipp für mich? Danke.
Fhem Version ist 12.2016
FTUI Version gestern aktualisiert.
Zitat von: ErzGabriel am 14 September 2017, 21:46:08
@jemu78
Ich habe mir deine Dateien runtergeladen und die Devices auf meine umgebaut. Alles ins passende Verzeichnis kopiert und musste leider feststellen, das keine Daten aktualisiert werden. Kann aber den Fehler nicht finden, hast Du einen Tipp für mich? Danke.
Fhem Version ist 12.2016
FTUI Version gestern aktualisiert.
arbeitest du mit websocket?
Das sieht bei mir in der fhem.cfg wie folgt aus.
define WEB FHEMWEB 8083 global
attr WEB editConfig 1
attr WEB longpoll websocket
Jupp, websocket in FHEM und der FTUI eingestellt.
Zitat von: ErzGabriel am 15 September 2017, 07:33:08
Jupp, websocket in FHEM und der FTUI eingestellt.
Kommen im WEB (Entwicklermodus-Console) irgendwelche Fehlermeldungen an?
Ja, da steht immer longpoll nicht definiert.
Ich vermute, es liegt dadran, das ich nicht die neuste Version von FHEM nutze. Hatte letztens geupdatet und danach habe ich meine HA-Bridge nicht mehr zu laufen gekriegt und somit ein Backup genutzt um den alten Zustand wieder herzustellen. Da mein System komplett auf Alexa aufbaut und ich alles per Sprache über die HA-Bridge stellen kann, will ich nicht die Bridge opfern für ne neue FTUI.
Zitat von: jemu75 am 14 September 2017, 14:49:52
Hat schon irgendwer raus bekommen, weshalb seit dem letzten Update die Zeilenabstände im mittleren Teil der Templates so groß geworden sind?
Ich habe jetzt eine ganze Weile die fhem-tablet-ui.css durchforstet, steige jedoch nicht dahinter, was setstate verändert hat. ???
In der fhem-tablet-ui.css hat sich der Abschnitt "section" geändert.
Dort wird jetzt eine min-height/line-height von 4.3em definiert, was wohl das Problem verursacht.
section {
border-bottom: 1px solid #888;
min-height: 4.5em;
line-height: 4.3em
}Hab es noch nicht hinbekommen, das einfach im user template wieder zu überschreiben...
Zitat von: Phiolin am 15 September 2017, 12:05:30
In der fhem-tablet-ui.css hat sich der Abschnitt "section" geändert.
Dort wird jetzt eine min-height/line-height von 4.3em definiert, was wohl das Problem verursacht.
Vielen Dank für den Hinweis! :)
Ich habe die user-tablet-ui.css jetzt wie folgt angepasst. Anbei auch die komplette aktuelle user-tablet-ui.css
Damit sollten die Darstellungsprobleme auch mit den aktuellsten Versionen der Tablet-UI behoben sein.
/* Section Korrektur für die Höhen */
section {
padding-top: 10px;
padding-bottom: 10px;
line-height: 1.6em;
}
Klappt. Jetzt sieht es wieder besser aus. :)
@jemu75: Danke Dir (und @setstate) für Deine Arbeit mit den Flexboxen. Ich habe das mal für mich adaptiert und dabei folgendes festgestellt:
Auf einer Unterseite habe ich 2 RSS-Feeds nebeneinander mit je 12 Artikeln, die über ein entsprechendes Template generiert werden, also alles von Dir abgekupfert. ;)
Allerdings passt die Seite nicht auf mein Smartphone, die beiden vbox werden untereinander dargestellt, was ja gewünscht ist. Eine vbox (card) alleine ist aber schon höher als die Displayhöhe und es wird dummerweise mittendrin angefangen, es verschwindet also der Kopf und Schwanz oben und unten aus dem Viewport. Scrollen, schubsen, ziehen, alles hilft nix.
Ich kann das mit dem von Dir gepackten ZIP-File nachvollziehen, indem ich im FHEM eine Kopie des tablet-Verzeichnisses angelegt und Deine unveränderten Files dorthinein kopiert habe. Deine index.html am PC aufgerufen, das Browserfenster so breit gezogen, dass die Ansicht zweispaltig (+ Menü) ist und dann die Höhe des Browserfensters stark reduziert. In dem Moment, wenn in der rechten Spalte die beiden cards ("Komfort" und "Infos") maximal zusammengerutscht sind, wird rechts der Scrollbar angezeigt, und es verschwindet der Kopf und der Schwanz der Spalte oben und unten. Dummerweise ist der Scrollbar "zu kurz", man kann also nicht mehr nach ganz oben und unten scrollen...
Hast Du (oder setstate) eine Idee/Lösung dafür, wie man die vbox/card "oben antackert"? Ich bin leider Flexbox-technisch eine Niete, meine entsprechenden Versuche (unabhängig von FHEM) vor ein paar Monaten mit Hilfe von selfHTML waren entsprechend örks.
Angehängt noch ein Screenshot, da sieht man, wie die rechte (höhere) Spalte verschwunden ist, währen die linke gerade eben anfängt zu verschwinden.
Zitat von: Augschburger am 05 Oktober 2017, 15:38:02
@jemu75: Danke Dir (und @setstate) für Deine Arbeit mit den Flexboxen. Ich habe das mal für mich adaptiert und dabei folgendes festgestellt:
Auf einer Unterseite habe ich 2 RSS-Feeds nebeneinander mit je 12 Artikeln, die über ein entsprechendes Template generiert werden, also alles von Dir abgekupfert. ;)
Allerdings passt die Seite nicht auf mein Smartphone, die beiden vbox werden untereinander dargestellt, was ja gewünscht ist. Eine vbox (card) alleine ist aber schon höher als die Displayhöhe und es wird dummerweise mittendrin angefangen, es verschwindet also der Kopf und Schwanz oben und unten aus dem Viewport. Scrollen, schubsen, ziehen, alles hilft nix.
Ich kann das mit dem von Dir gepackten ZIP-File nachvollziehen, indem ich im FHEM eine Kopie des tablet-Verzeichnisses angelegt und Deine unveränderten Files dorthinein kopiert habe. Deine index.html am PC aufgerufen, das Browserfenster so breit gezogen, dass die Ansicht zweispaltig (+ Menü) ist und dann die Höhe des Browserfensters stark reduziert. In dem Moment, wenn in der rechten Spalte die beiden cards ("Komfort" und "Infos") maximal zusammengerutscht sind, wird rechts der Scrollbar angezeigt, und es verschwindet der Kopf und der Schwanz der Spalte oben und unten. Dummerweise ist der Scrollbar "zu kurz", man kann also nicht mehr nach ganz oben und unten scrollen...
Hast Du (oder setstate) eine Idee/Lösung dafür, wie man die vbox/card "oben antackert"? Ich bin leider Flexbox-technisch eine Niete, meine entsprechenden Versuche (unabhängig von FHEM) vor ein paar Monaten mit Hilfe von selfHTML waren entsprechend örks.
Angehängt noch ein Screenshot, da sieht man, wie die rechte (höhere) Spalte verschwunden ist, währen die linke gerade eben anfängt zu verschwinden.
Hallo,
mir ist dieses Problem ebenfalls bekannt. Als ich meine Lösung gebaut habe, haben sich die Seiten sehr gut auf das jeweilige Display angepasst. Wenn eine Card im Querformat mehr Inhalt hatte als die Höhe es hergegeben hat, dann konnte diese gescrollt werden.
Es gab nun zwischenzeitlich ein Update, bei dem setstate recht viel umgebaut hat. Ich hatte ihn persönlich schon mal angeschrieben und gefragt, wie wir gemeinsam an einer Lösung weiterarbeiten können. Habe jedoch leider keine Antwort erhalten, sodass ich inzwischen wieder auf einer älteren Version der Tablet UI arbeite. Wenn es meine Zeit zulässt werde ich die Anpassungen in CSS aber mal erstellen, so dass man auch wieder mit der aktuellen Version der Tablet UI meine Lösung nutzen kann.
Sorry, dass ich für den Moment erstmal nicht weiter helfen kann. ;)
... bei mir hat "damals" ein
.page .vbox {
justify-content: initial;
}
in der my.css geholfen. Probier doch mal?!
H.
Hab es in die user-tablet-ui.css eingefügt und es funktioniert! :D
Dankeschön sagt
Hans-Jörg
Es gibt immer noch Probleme mit unerreichbaren Bereichen, wenn ich das iPhone von Hoch- auf Querformat drehe - ist aber nicht so wild, dann lass ich es halt. ;)
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:
body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Hallo
Hat jemand mit der Vorlage template_call.html & content_phone.html eine Anrufliste eingebunden? Ich habe die Vorlage aus dem zip genommen, jedoch bekomme einfach nichts angezeigt. In FHEM habe ich den FB_CALLMONITOR und die FB_CALLLIST definiert und wird auch entsprechend angezeit und funktioniert seit Jahren. Aber eben in FTUI scheitere ich...
Hat jemand einen Schnipsel für mich?
Danke vielmals!
Läuft bei mir. ;D
content_phone.html
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_phone">
<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>Anrufe</header>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"1"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"2"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"3"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"4"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"5"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"6"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"7"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"8"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"9"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
template_call.html
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für fhem Phone Modul -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="var_call-state"
data-icons='["mi-call_missed","mi-call_missed_outgoing","mi-call_received","mi-call_made","mi-call_made","mi-call_received","oa-phone_call","oa-phone_call"]'
data-get-on='["=> X","<= X","=> ((o))","<= ((o))","<=","=>","<= [=]","=> [=]"]'
data-on-colors='["#ad3333","#ad3333","#3399ff","#33ad33","#3399ff","#33ad33","#3399ff","#33ad33"]' class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div data-type="label" data-device="var_device" data-get="var_call-name" class="big"></div>
<div data-type="label" data-device="var_device" data-pre-text="(" data-post-text=")" data-get="var_call-number" class="inline"></div>
<div data-type="label" data-device="var_device" data-get="var_call-timestamp" class="inline"></div>
</div>
<div class="cell">
</div>
<div class="cell right-space">
</div>
</div>
</body>
</html>
Zitat von: Augschburger am 13 Oktober 2017, 17:58:01
Läuft bei mir. ;D
Danke vielmals. Ich habe es genauso übernommen, somit liegt der Fehler bei mir in der FHEM Definition. Könntest du mir deine Definiton in FHEM (list) kurz posten, damit ich überprüfen kann?
Besten Dank!
Läuft :) Ich hatte in der Anrufliste das attr create-readings nicht auf 1 gesetzt. Danke vielmals für deine Hilfe
Ich habe noch eine Frage. Bei meinen Rollladen möchte ich noch zusätzlich ein Stop-Icon einbauen zu den bestehenden Auf und Ab:
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template ffür Homematic Funk Jalousieaktur Unterputz HM-LC-Bl1PBU-FM -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="pct" data-states='["0","1"]' data-colors='["red","green"]' data-icon="oa-fts_shutter_20" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["on","Status: oben","off","Status: unten","auf","Status: oben","ab","Status: unten","undefined","Status: teilweise oben / unten"]' class="inline"></div>
</div>
<div class="cell right-align">
<div data-type="push" data-device="var_device" data-get="state" data-set-on="ab" data-background-icon="mi-arrow_drop_down" data-icon="mi-arrow_drop_down" class="small"></div>
</div>
<div class="cell right-space">
<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="mi-arrow_drop_up" data-icon="mi-arrow_drop_up" class="small"></div>
</div>
</div>
</body>
</html>
Wenn ich nun einen weiteren Div einbaue, schiebt es die drei Icon in die Mitte... Ich vermute, das die Zelle zuwenig Platz hat für 3 Icons. Kann ich das einstellen?
Danke
Ich hab's mal probiert:
Die Material Icons habe ich ersetzt durch Font Awesome, weil ich bei mi- auf die Schnelle keinen Stop-Knopf gefunden habe.
Des Weiteren habe ich das Background-Icon auf "" gesetzt, weil sonst die "compressed" Class nicht funktioniert hat (geile Effekte, riecht nach Bug, nicht nach Feature :-\). Compressed wollte ich, damit links und rechts von den Icons weniger Rand verschwendet wird.
Beim Stop-Icon habe ich es weggelassen, damit man es auch mit Wurschtfingern vielleicht noch trifft (eigene Erfahrungen).
Dann habe ich die 2. Cell auf 20% und die 3. auf 60% gesetzt. Klingt komisch, funktioniert aber so. Wie schon erwähnt: Flexbox und ich - wir haben uns noch nicht gefunden. 1995 mit <table> war alles einfacher. ::)
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="pct" data-states='["0","1"]' data-colors='["red","green"]' data-icon="oa-fts_shutter_20" class="compressed"></div>
</div>
<div class="cell-20 left-align">
<div class="big">Kinderzimmer</div>
<div data-type="label" data-device="var_device" data-substitution='["on","Status: oben","off","Status: unten","auf","Status: oben","ab","Status: unten","undefined","Status: teilweise oben / unten"]' class=""></div>Status: halboffen
</div>
<div class="cell-60 right-align">
<div data-type="push" data-device="var_device" data-get="state" data-set-on="ab" data-background-icon="" data-icon="fa-caret-down" class="compressed inline" style=""></div>
<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="" data-icon="fa-stop" class="tiny inline"></div>
<div data-type="push" data-device="var_device" data-get="state" data-set-on="auf" data-background-icon="" data-icon="fa-caret-up" class="compressed inline" style=""></div>
</div>
<div class="cell right-align">
</div>
</div>
Achja, das class="big" beim ganz linken Icon hab ich auch rausgenommen, das wird sonst größer als die anderen Icons.
Zitat 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:
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
In welchem Browser? Beim Safari ist der Back-Button unten (und funktioniert eh nicht richtig auf den Seiten).
Ich kann nur über das Menü vernünftig navigieren - und das scrollt nicht mit, sondern klebt oben unter der Adresszeile (die auch nicht wegscrollt - finde ich doof).
Zitat von: Augschburger am 15 Oktober 2017, 10:12:38
In welchem Browser? Beim Safari ist der Back-Button unten (und funktioniert eh nicht richtig auf den Seiten).
Ich kann nur über das Menü vernünftig navigieren - und das scrollt nicht mit, sondern klebt oben unter der Adresszeile (die auch nicht wegscrollt - finde ich doof).
Festgestellt habe ich es auf dem iPhone (aktuelles iOS 11.x). Den Backbutton im Safari wird bei mir nicht mehr anzeigt, da ich den Link auf dem Homescreen abgelegt habe (apple-mobile-web-app-capable). Ich kann aber auch damit leben jeweils zurück zugehen über das Menue. Ein flüssiges scrollen ist mir wichtiger. Danke
@jemu75 Ich habe mich reichlich bedient in deinem Code :-) Sehr hilfreich vielen Dank! 8)
Eine Sache würde ich gerne Ändern und habe es bisher nicht geschafft - ich möchte gerne, dass Menü auch schaltbar (nicht dauerhaft sichtbar) im Landscape Modus eines Mobilen Gerätes.
Habe schon das JQuery durchforstet ohne etwas zu finden (das mir was gesagt hätte) und auch die CSS und index Datei.
Mag mir jemand helfen :-) ?
Moinsen Nick, durchforste mal den ganzen Thread. Irgendwo habe ich beschrieben wie du über das Verändern der Media-Queries das Menu entsprechend der Pixelbreite in der css definieren kannst.
Gefunden hab ich deinen Beitrag und auch durchgeführt :-)
481px mhhh so ganz versteh ich das nicht - soll es heißen ab einer größe von 481 wird das Menü angezeigt? Also z.B. mein S7 Edge hat deutlich mehr und es wird im landscape immer noch angezeigt. Muss ich es nun auf 2561px hoch setzen damit es dort richtig ist?
Habe es mit 2560 und 2561 getestet - es bleibt dabei, das Menü im landscape bleibt ausgeklappt. :o
Mein Ziel wäre es auch im landscape den Menüknopf zu haben um das Menü erst zu öffnen.
es gibt mehrere Stellen in der fhem-tablet-ui.css .... geh das ganze File durch, such die entsprechenden Media queries und schau was sich bei welchen Größen ändert .
Mmh, also 2000px und größer ?? was ist das für ein Mobile device??? :)
das hier vorgeschlagene geht schon recht tief in die Materie. Wie gut kennst du dich aus? Alle Stellen rauszusuchen übersteigt gerade meine zeitlichen Möglichkeiten. In Firefox und Chrome gibt es die Web Developer Tools, da kannst du mit bestimmten Bildschirmgrößen testen und siehst was wie passiert. Sorry, dass ich gerade nicht mehr beisteuern kann.
Vielen Dank ;)
Also ich hab einfach mal nach den Pixeln des Bildschirmes von S7 Edge gesucht Wiki sagt da:
ZitatDer Bildschirm des S7 Edge ist mit 5,5 Zoll Diagonale 0,4 Zoll größer als der des Galaxy S7.[3] Beide Geräte verwenden AMOLED-Technik mit 1.440 × 2.560 Pixeln
Daraus ergäbe sich nun bei mir wenn ich es landscape nutze eine Nutzfläche von 2560px :-)
Ich bin noch in der Phase try end Error :-D Aber die Dev Tools kenne ich - wahrscheinlich wird es dann das eben genannte ... try and error :-D
Der magische Wert laut Dev Tools ist 481 ab da kommt das Menü ^^ Ich such mal.
Okay hab den großen Hammer geschwungen ALLE 480px und den 481 auf 2560px gesetzt in der fhem-tablet-ui.css und schon geht es :-)
Menü ist eingeklappt im Landscape - ob das S7 Edge nun wirklich diese Menge Pixel im Browser angibt... keine Ahnung. Vielen Dank! 8)
Soo habe es genau eingrenzen können mit 732px hat es im Landscape einen Knopf fürs Menü mit 731px nicht.
Hallo jemu75,
erstmal VIELEN DANK für dein Template und deine Mühen. Ich mage die Dynamik und den schmalen Code durch die Templates :). Bin seit 4 Wochen dabei, mein FTUI entsprechend umzustellen. Habe auch die Fixes aus diesem Thread umgesetzt.
Jedoch gibt es ein Problem, welches ziemlich nervig ist: Die Zellenanordnung in Reihen
In deinen Templates verwendest du drei Zellen als Workaround. Ich habe zwei Templates für "Pollen" und "Geburtstage", welche vier Zellen benötigen. Ich bekomme es mit keinerlei Kombination von fixen Zellbreiten, Linksausrichtung o.ä. hin, dass alles schön sauber untereinander ausgerichtet ist :(.
Hier mal mein "Pollen" Content (content_weather_pollen) zum Nachstellen:
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content_weather_pollen">
<div class="phone-back-btn">
<div data-type="link" data-url="#content_weather.html" data-load="#content2_weather" 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>Pollenflug</header>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Ahorn","var_name_b":"Ambrosia","var_name_c":"Beifuss","var_name_d":"Birke"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Brennessel","var_name_b":"Buche","var_name_c":"Eiche","var_name_d":"Erle"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Esche","var_name_b":"Fichte","var_name_c":"Flieder","var_name_d":"Gaensefuss"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Graeser","var_name_b":"Hafer","var_name_c":"Hasel","var_name_d":"Holunder"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Hopfen","var_name_b":"Kiefer","var_name_c":"Linde","var_name_d":"Loewenzahn"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Mais","var_name_b":"Nessel","var_name_c":"Pappel","var_name_d":"Platane"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Raps","var_name_b":"Roggen","var_name_c":"Rotbuche","var_name_d":"Spitzwegerich"}'></div>
</section>
<section>
<div data-template="template_weather_pollen.html" data-parameter='{"var_name_a":"Tanne","var_name_b":"Ulme","var_name_c":"Weide","var_name_d":"Weizen"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Karte</header>
<section>
<div class="row">
<div class="center" data-type="image" data-url="http://www.wetteronline.de/?fcdatstr=20150414&gid=DL&iid=DL&img=true&paraid=Max&pid=p_city_pollen&sid=Map" data-size="100%"></div>
</div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
...und "Pollen" Template (template_weather_pollen):
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Pollenflug -->
</head>
<body>
<div class="row">
<div class="cell left-space">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_a" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_a</div>
</div>
<div class="cell">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_b" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_b</div>
</div>
<div class="cell">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_c" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_c</div>
</div>
<div class="cell right-space">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_d" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_d</div>
</div>
</div>
</body>
</html>
Wer hat eine Lösung? Wo liegt das Problem?
Danke im Voraus,
Andreas
<section>
<div class="row">
<div class="cell-25">
<div data-type="symbol" data-device="Container_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]' data-icon="ftui-door" class="big compressed"></div>
<div data-type="label">Container</div>
</div>
<div class="cell-25">
<div data-type="symbol" data-device="Magazzino_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]' data-icon="ftui-door" class="big compressed"></div>
<div data-type="label">Magazzino</div>
</div>
<div class="cell-25">
<div data-type="symbol" data-device="Einfahrt_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]' data-icon="oa-fts_sliding_gate" class="big compressed"></div>
<div data-type="label">Einfahrt</div>
</div>
<div class="cell-25">
<div data-type="symbol" data-device="Einfahrt_SENSOR_Tor" data-states='["sensor_closed","sensor_open"]' data-colors='["blue","red"]' data-icon="oa-fts_sliding_gate" class="big compressed"></div>
<div data-type="label">Einfahrt</div>
</div>
</div>
</section>
... als Beispiel für eine section.
Wobei cell-25 im css dann so definiert ist.
.cell-25 {
width: 25%;
}
Sollte gehen. Vielleicht mußt du auch auf 24% runter.
Funktioniert leider nicht.
Hier das angepasste Template:
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Pollenflug -->
</head>
<body>
<div class="row">
<div class="cell-25">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_a" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_a</div>
</div>
<div class="cell-25">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_b" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_b</div>
</div>
<div class="cell-25">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_c" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_c</div>
</div>
<div class="cell-25">
<div class="big compressed" data-type="symbol" data-device="POLLEN" data-get="var_name_d" data-icons='["fa-forumbee","fa-forumbee","fa-forumbee"]' data-get-on='["1","2","3"]' data-on-colors='["yellowgreen","yellow","red"]'></div>
<div class="large">var_name_d</div>
</div>
</div>
</body>
</html>
Und hier die Erweiterung in der "user-tablet-ui.css":
/* Anpassung Ausrichtung von Zellen */
.cell-25 {
width: 25%;
}
Habe es auch mal mit 24% und 20% probiert. Leider keine Auswirkung ???
Vielleicht liegt es an der Verwendung innerhalb eines Templates?
div vbox phone-width
div card-lift
div section
div cell-25
div cell-25
usw, insgesamt width 99-100%
sollte der Aufbau sein. Ob du auf der content Page oder im jeweiligen template diese Abfolge aufbaust ist dir überlassen. Aber die Reihenfolge sollte es im generierten html später haben. Irgendwo muß ja die 100% width die dann aufgeteilt wird definiert werden ;)
Edit: oops, sorry, eben erst richtig in deinen Code oben geschaut. Hast du ja so. Mmh, dann fällt mir spontan auch nichts ein.
noch ein Vorschlag:
template
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
</head>
<body>
<div class="hdm-flexbox-container">
<div class="hdm-flexbox-item-13">
<div data-type="switch" data-device="var_device" data-get-on="auto" data-get-off="on|off" data-set-on="auto" data-set-off="" data-icon="mi-gps_fixed" data-on-color="blue" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="blue" data-off-background-color="#aaa" class="small"></div>
<div data-type="label">Auto</div>
</div>
<div class="hdm-flexbox-item-13">
<div data-type="switch" data-device="var_device" data-get-on="on" data-get-off="auto|off" data-set-on="on" data-set-off="" data-icon="mi-gps_not_fixed" data-on-color="green" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="green" data-off-background-color="#aaa" class="small"></div>
<div data-type="label">An</div>
</div>
<div class="hdm-flexbox-item-13">
<div data-type="switch" data-device="var_device" data-get-on="off" data-get-off="on|auto" data-set-on="off" data-set-off="" data-icon="mi-gps_off" data-on-color="red" data-off-color="#aaa" data-background-icon="fa-square-o" data-on-background-color="red" data-off-background-color="#aaa" class="small"></div>
<div data-type="label">Aus</div>
</div>
<div class="right-align hdm-flexbox-item-50 right-space">
<div class="big">var_name</div>
<div class="small">var_description</div>
</div>
</div>
</body>
</html>
content
<div class="card lift">
<header>Beregner Automatik</header>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_01_Zitronen","var_name":"Zitronen","var_description":"Zitrus Hain"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_02_CampeggioUnten","var_name":"Camping Unten","var_description":"Beet Camping"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_03_Blauregen","var_name":"Blauregen","var_description":"Wiese oberhalb Tettoia, Blauregen"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_04_HinterKueche","var_name":"Hinter Tettoia","var_description":"Wiese unterhalb Tettoia"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_05_CampeggioOben","var_name":"Camping Oben","var_description":"Wiese, Lavendel Camping oben"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_06_Waschhaus","var_name":"Waschhaus","var_description":"Wiese, Lavendel unterhalb Camping"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_07_Magazzino","var_name":"Magazzino","var_description":"Zaun Eingang, Pflanzen Magazzino"}'></div>
</section>
<section>
<div data-template="template_beregnung.html" data-parameter='{"var_device":"Beregner_08_ZaunTettoia","var_name":"Zaun Tettoia","var_description":"Zaun hinter Tettoia"}'></div>
</section>
</div>
usw
css
/* 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-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-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-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 */
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
@holle75,
du bist ein Held, hat geklappt :).
Habe noch eine Sektion für 25% eingebaut. Damit hat man dann alle Möglichkeiten...
Vielen Dank,
Andreas
hatte noch einen Fehler im content, jetzt berichtigt
Hat jemand inzwischen einen Workaround für die fehlerhafte Darstellung von "warn" in Verbindung mit "compressed" gefunden?
Hier der Code:
<section>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol"
data-device="Geburtstagskalender"
data-get="t_001_daysleft"
data-get-on='["0","1","2"]'
data-get-warn='([0|1|2])'
data-on-colors='["blue","blue","blue"]'
class="big warn compressed"
data-icons='["fa-birthday-cake fa-spin","fa-birthday-cake shake","fa-birthday-cake"]'>
</div>
</div>
<div class="cell-80 left-align white">
<div data-type="link" data-url="#content2_birthday.html" data-load="#content2_birthday" data-fade-duration="0">
<div class="big white left-align">Geburtstage</div>
</div>
<div data-type="label" class="inline">Nächster: </div>
<div data-type="label" data-device="Geburtstagskalender" data-get="t_001_bdate" class="inline"></div>
<div data-type="label" data-device="Geburtstagskalender" data-get="t_001_summary" class="inline"></div>
</div>
<div class="cell"></div>
<div class="cell">
<div data-type="link" data-url="#content2_birthday.html" data-load="#content2_birthday" data-fade-duration="0">
<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed"></div>
</div>
</div>
</div>
</section>
Ohne "compressed" ist die Dartsellung in Ordnung, jedoch sind dann die Sections zu hoch, sodass nicht sehr viele auf eine Seite passen :(
css/fhem-tablet-ui.css
Zeile 2599 ändern in
i#warn-back {
font-size: 80% !important;
margin-left: 0.65em;
margin-top: -0.82em;
color: #aa2200;
}
Danke, hat funktioniert :). Wird es ein ofizielles Update geben?
ja, das kommt dann "offiziell" mit
Hallo alle zusammen,
hier mal meine "user-tablet-ui.css", warscheinlich alles falsch gemacht ;) aber es funzt.
Änderungen: (sind mit GeoCeKid + was es macht markiert)
- fehlendes Stück am oberen Bildschirmrand gefixt
- vbox Breite auf 350px fixiert + halbe Breite hinzugefügt
- bei großem Menu scrollt dieses nun
Änderungen:
/* GeoCeKid Korrektur der Seitenleiste */
body {
position: relative !important;
}
.menu {
position: absolute !important;
height: unset !important;
min-height: fit-content !important;
bottom: 0 !important;
}
html, body, main, .page {
height: unset !important;
min-height: 100vh;
}
.page .vbox {
justify-content: initial;
}
/* GeoCeKid vbox Breite Fixieren und umbrechen + neue halbe Breite */
.vbox.phone-width {
min-width: 350px;
max-width: 350px;
}
/* Halbe Breite */
.vbox.phone-width.half {
min-width: 175px;
max-width: 175px;
}
@media screen {
.hbox,
.vbox,
.box,
.card {
flex-wrap: wrap;
height: auto;
}
.v100,
.full-height,
.height-100 {
height: auto;
min-height: 100vh;
}
.card>.box.horizontal,
.card>.hbox {
margin-top: 1em;
margin-bottom: 1em;
}
.hbox.nowrap,
.box.nowrap,
.card.nowrap {
flex-wrap: nowrap;
}
}
Geniales Design :)
Passe meins auch gerade an. Mit einer Dropdown auswahl habe ich gerade optische Probleme. Vielleicht kann jemand helfen.
Der "<section>" Bereich wird nicht gross genug beim öffnen des Dropdown
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content_wohnzimmer">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Christmas</header>
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
</div>
<div class="cell-1-4 small right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
<div class="cell-1-4">
<div class="small right-align right-space"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="!off"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee">
</div>
</div>
</div>
</div>
<div id="dropturm">
<div class="sheet">
<div class="row">
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="D6FF6D"
data-icon="fa-paint-brush"
data-off-background-color="#D6FF6D"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="B28CFD"
data-icon="fa-paint-brush"
data-off-background-color="#B28CFD"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="99D2EF"
data-icon="fa-paint-brush"
data-off-background-color="#99D2EF"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="6795FC"
data-icon="fa-paint-brush"
data-off-background-color="#6795FC"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="FFC12B"
data-icon="fa-paint-brush"
data-off-background-color="#FFC12B"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="ct"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF"
class="tiny">
</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div class="tiny">Grün</div>
</div>
<div class="cell-12">
<div class="tiny">Lila</div>
</div>
<div class="cell-12">
<div class="tiny">Blau</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="90"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="white"
data-off-background-color="#6795FC"
class="tiny white">
<div data-type="label" class="tiny white">30</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="140"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">50
<div data-type="label" class="tiny white">60</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="200"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">75
<div data-type="label" class="tiny white">75</div>
</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="card lift">
<header>Wetter</header>
</div
</div>
</div>
</body>
</html>
hallo, erst mal vielen dank für die arbeit, habe soweit auch alles gut eingebaut.
aber wie schaffe ich es das wenn ich die index aufrufe das dort z.b. content_home direkt aufgerufen wird?
Zitat von: magentouser am 04 Dezember 2017, 14:47:12
aber wie schaffe ich es das wenn ich die index aufrufe das dort z.b. content_home direkt aufgerufen wird?
Ich mache das so:
http://192.168.x.x:808x/fhem/ftui/index.html#content_home.html
hallo, ich bin begeistert und hab schon einiges umgebaut ;)
gibt es eine Möglichkeit, dass auch bei Tablets resp. Desktop die Menuleiste links nur eingeblendet wird, wenn man darauf klickt. Also wie in der Mobile Version?
@eppi
derzeit auch, bzw ohne index /fhem/ftui/#content_.. aber schöner wäre der direkte Aufruf nur über die Index.
Zitat von: eppi am 04 Dezember 2017, 19:06:15
Ich mache das so:
http://192.168.x.x:808x/fhem/ftui/index.html#content_home.html
ich mache es so, indem ich im class ein "default" hinzufüge
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large default"><span>Home</span></div>
</li> friendly reminder: wie schalte ich die nav bar links aus bei Tablet und Desktop... Analog iphone
Zitat von: choetzu am 05 Dezember 2017, 12:33:12
friendly reminder: wie schalte ich die nav bar links aus bei Tablet und Desktop... Analog iphone
Die genaue Lösung habe ich gerade nicht parat, aber ich meine das geht über einen Wert im CSS. Dabei wird eingestellt, ab welcher Bildschirmbreite das Menü immer angezeigt wird. Diesen Wert müsstest du vergrößern.
Vielleicht hilft Dir das ja schon weiter.
Zitat von: choetzu am 05 Dezember 2017, 12:33:12
ich mache es so, indem ich im class ein "default" hinzufüge
Sehr elegante Lösung, Danke für den Hint!
@choetzu
sorry kam jetzt erst wieder dazu, jep so funktioniert es perfekt.
danke
Zitat von: Standarduser am 05 Dezember 2017, 21:36:03
Die genaue Lösung habe ich gerade nicht parat, aber ich meine das geht über einen Wert im CSS. Dabei wird eingestellt, ab welcher Bildschirmbreite das Menü immer angezeigt wird. Diesen Wert müsstest du vergrößern.
Vielleicht hilft Dir das ja schon weiter.
danke. hmm, ich habe jetzt in der user-tablet-ui.css sämtliche Werte angepasst und getestet was passiert. leider ohne Erfolg.. Weisst du evtl. in welcher CSS das steht?
/* FHEM Tablet UI 2.6 - eigene Anpassungen */
/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}
.phone-back-btn {
display: none;
}
/* Men¸breite und Zeilenabstand der Men¸punkte korrigiert*/
@media screen and (max-width: 900px) and (min-width: 480px) {
.menu {
width: 90px !important;
}
}
/* Men¸leiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr ¸berdeckt werden */
@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
top: 0px;
left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
top: 0px;
left: 0px;
height: 39px;
width: 39px;
position: absolute;
background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
}
/* Schriftfarbe grau*/
.tomy {
color: #999999;
}
/* Schriftfarbe blau*/
.tomy2 {
color: #337ab7;
}
/* Header Hintergrundfarbe und Schriftgrˆfle korrigiert */
.card > header {
background-color: #e6e6e6;
font-size: 125%;
}
/* Weather Iconfarbe korrektur */
.weather:before {
color: #337ab7;
}
/* Chart Farben und Text Korrekturen */
.chart-background {
fill: #fff !important;
}
.gridlines {
stroke: #222222 !important;
}
.text.axes {
fill: #222222 !important;
font-size: smaller;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
.legend {
font-size: smaller;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Section Korrektur f¸r die Hˆhen */
section {
padding-top: 10px;
padding-bottom: 10px;
line-height: 1.6em;
}
Sorry, ich hab das auch nicht griffbereit.
Ich kann da leider nur auf die Forensuche verweisen. Setstate hat das in irgendeinem Beitrag schonmal genauer erklärt.
Hallo,
großes Lob für die Arbeit !! Bin auch die Sache am Umbauen. Hab da ein kleines Problem mit der content_phone und dem Template dazu.
in der template_call steht:
div data-type="symbol" data-device="var_device" data-get="var_call-state"
Muss dort der Device Name angepasst werden? data-device="var_device" , oder macht man das alles in der content_phone.
Mein Device Name für die Call Liste heißt = Anrufliste. Hab schon einiges probiert. Komme da nicht weiter ...
mein Eintrag in der content_phone:
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"Anrufliste","var_call":"5"}'></div>
</section>
Das machst Du in der content_phone mit Deiner Bezeichnung Anrufliste. (Zum var_device eintragen)
siehe oben mein Eintrag in der content_phone. So hatte ich es ja auch gemacht, wird leider nix angezeigt.
Da fehlt scheinbar noch etwas. Kann mir einer eine funktionierende Config für die Fritzbox posten. Da müssen doch noch anders wie hier die default Dateien die readings noch angepasst werden, oder nicht?
Hallo zusammen,
ich stelle auch gerade auf das flexbox-Beispiel um - Danke für die super Arbeit!
Ich habe aber auch wie einige hier das Problem, dass Boxen, die mehr Inhalt haben, als dargestellt werden kann oben und unten abgeschnitten sind. Scrollen kann ich auch nicht. Ich teste für ein altes 1024x600 Tablet, das Ergebnis ist in Tablet und entsprechend angepasstem Firefox identisch.
(Siehe Screenshots)
Könnt ihr mir einen Tipp geben, wie ich das Problem so löse, dass die Seiten korrekt scrollbar sind?
Cheers, Florian
---
Update 23.12.
hab's gefunden: in der fhem-tablet-ui.css habe ich die folgende Anpassung vorgenommen:
/* Flexbox layout */
.hbox,
.vbox,
.box,
.has_vbox {
display: flex !important;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
width: 100%;
}
Zitat von: Standarduser am 15 Dezember 2017, 21:25:50
Sorry, ich hab das auch nicht griffbereit.
Ich kann da leider nur auf die Forensuche verweisen. Setstate hat das in irgendeinem Beitrag schonmal genauer erklärt.
danke. Die Forensuche hilft mir nicht weiter. Ich habe lediglich folgendes gefunden: Offensichtlich war das ursprünglich so, dass unabhängig vom Device das Menu immer analog Smartphone war, also immer eingeklappt. Siehe hier: https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719
ich wäre um Hilfe dankbar, komme nicht weiter. danke.
Ach guck an, da hast du ja schon auf den richtigen Thread verlinkt.
Schau mal diesen Post und die darauf folgenden Antworten.
https://forum.fhem.de/index.php/topic,56460.msg584669.html#msg584669
Mehr kann ich leider auch nicht dazu beitragen. Sorry.
Zitat von: Standarduser am 17 Dezember 2017, 19:48:51
Ach guck an, da hast du ja schon auf den richtigen Thread verlinkt.
Schau mal diesen Post und die darauf folgenden Antworten.
https://forum.fhem.de/index.php/topic,56460.msg584669.html#msg584669
Mehr kann ich leider auch nicht dazu beitragen. Sorry.
danke, ich habe das nun gefühlte 1000 mal gelesen und komm trotzdem nicht weiter. dabei habe ich sowohl min=1300 wie auch mit max=1300. Das alles hat nichts gebracht. Reden wir vom selben? Ich möchte dass das Menue in KEINER Grösse aufklappt. Es soll immer zugeklappt sein, wie beim Smartphone...
Hmm, vermutlich bin ich einfach zu blöd...komisch nur, dass es am Anfang so war, gemäss den Bildern aus https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719
Zitat von: SirMarco am 26 November 2017, 14:41:53
Geniales Design :)
Passe meins auch gerade an. Mit einer Dropdown auswahl habe ich gerade optische Probleme. Vielleicht kann jemand helfen.
Der "<section>" Bereich wird nicht gross genug beim öffnen des Dropdown
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content_wohnzimmer">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Christmas</header>
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
</div>
<div class="cell-1-4 small right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
<div class="cell-1-4">
<div class="small right-align right-space"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="!off"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee">
</div>
</div>
</div>
</div>
<div id="dropturm">
<div class="sheet">
<div class="row">
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="D6FF6D"
data-icon="fa-paint-brush"
data-off-background-color="#D6FF6D"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="B28CFD"
data-icon="fa-paint-brush"
data-off-background-color="#B28CFD"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="99D2EF"
data-icon="fa-paint-brush"
data-off-background-color="#99D2EF"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="6795FC"
data-icon="fa-paint-brush"
data-off-background-color="#6795FC"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="FFC12B"
data-icon="fa-paint-brush"
data-off-background-color="#FFC12B"
class="tiny">
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-set="rgb"
data-device="Turm"
data-set-on="ct"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF"
class="tiny">
</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div class="tiny">Grün</div>
</div>
<div class="cell-12">
<div class="tiny">Lila</div>
</div>
<div class="cell-12">
<div class="tiny">Blau</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="90"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="white"
data-off-background-color="#6795FC"
class="tiny white">
<div data-type="label" class="tiny white">30</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="140"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">50
<div data-type="label" class="tiny white">60</div>
</div>
</div>
<div class="cell-12">
<div data-type="push"
data-device="HUEDevice4"
data-set="bri"
data-set-on="200"
data-set-on="6795FC"
data-get-off="!on"
data-on-color="green"
data-icon="transparent"
data-off-background-color="#6795FC"
class="tiny">75
<div data-type="label" class="tiny white">75</div>
</div>
</div>
<div class="cell-12">
<div class="tiny">Türkis</div>
</div>
<div class="cell-12">
<div class="tiny">Gelb</div>
</div>
<div class="cell-12">
<div class="tiny">Kaltweiss</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="card lift">
<header>Wetter</header>
</div
</div>
</div>
</body>
</html>
Sehe ich auch so!
bastle auch gerade dran rum. Ich finde auch deine Dropdown Lösung echt spitze! Ich kann dir da leider auch nicht helfen, hätte aber eine Frage dazu...
Wie krieg ich das hin, dass die Boxen default eingeklappt sind? Kenne mich da einfach zu wenig aus und suche anscheinend auch an den falschen Stellen...
Zitat von: choetzu am 17 Dezember 2017, 22:27:00
danke, ich habe das nun gefühlte 1000 mal gelesen und komm trotzdem nicht weiter. dabei habe ich sowohl min=1300 wie auch mit max=1300. Das alles hat nichts gebracht. Reden wir vom selben? Ich möchte dass das Menue in KEINER Grösse aufklappt. Es soll immer zugeklappt sein, wie beim Smartphone...
Hmm, vermutlich bin ich einfach zu blöd...komisch nur, dass es am Anfang so war, gemäss den Bildern aus https://forum.fhem.de/index.php/topic,56460.msg653719.html#msg653719
Man muss im Header einen Link zur User css setzen (nach der fhem-tablet-ui.css)
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />Und den Teil für kleine Displays aus der css in diese Datei kopieren
.menu~main>.page {
padding-left: 0px;
}
.menu {
width: 230px !important;
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
transform: translate3d(-230px, 0, 0);
-webkit-transform: translate3d(-230px, 0, 0);
transition: all 0.3s ease-in-out;
}
.menu .menu-trigger {
width: 40px;
height: 40px;
position: absolute;
left: 100%;
background: #1D1F20;
}
.menu .menu-trigger:before,
.menu .menu-trigger:after {
content: '';
width: 50%;
height: 2px;
background: #fff;
border-radius: 10px;
position: absolute;
top: 45%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu .menu-trigger:after {
top: 55%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu.show {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
}
Zitat von: pscl am 18 Dezember 2017, 22:56:19
Sehe ich auch so!
bastle auch gerade dran rum. Ich finde auch deine Dropdown Lösung echt spitze! Ich kann dir da leider auch nicht helfen, hätte aber eine Frage dazu...
Wie krieg ich das hin, dass die Boxen default eingeklappt sind? Kenne mich da einfach zu wenig aus und suche anscheinend auch an den falschen Stellen...
Folgendes in deiner Custom CSS anpassen:
#dropturm {
display: none;
}
Zitat von: setstate am 21 Dezember 2017, 14:02:33
Man muss im Header einen Link zur User css setzen (nach der fhem-tablet-ui.css)
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
Und den Teil für kleine Displays aus der css in diese Datei kopieren
.menu~main>.page {
padding-left: 0px;
}
.menu {
width: 230px !important;
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
transform: translate3d(-230px, 0, 0);
-webkit-transform: translate3d(-230px, 0, 0);
transition: all 0.3s ease-in-out;
}
.menu .menu-trigger {
width: 40px;
height: 40px;
position: absolute;
left: 100%;
background: #1D1F20;
}
.menu .menu-trigger:before,
.menu .menu-trigger:after {
content: '';
width: 50%;
height: 2px;
background: #fff;
border-radius: 10px;
position: absolute;
top: 45%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu .menu-trigger:after {
top: 55%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.menu.show {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
}
Hallo
herzlichen Dank, das hat auf Anhieb gut geklappt!! Jedoch 2 Punkte sind noch suboptimal:
-Siehe Bild, es gibt keinen schwarzen Balken oben wie in der Phone-Grösse. Das Nav-Icon überdeckt den Inhalt
-Wenn ich das Menu aufrufe und etwas auswähle, klappt das Menue nicht automatisch zu.
Kann man das noch fixen, dann wäre es perfekt!! Herzlichen dank.
Lg c
Zitat von: SirMarco am 22 Dezember 2017, 11:29:16
Folgendes in deiner Custom CSS anpassen:
#dropturm {
display: none;
}
Ah vielen Dank!
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:
<!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:
<!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>
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 (https://forum.fhem.de/index.php/topic,81471.0.html)
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 (https://forum.fhem.de/index.php/topic,81493.0.html))
achja, falls Du nur dimmen willst, ohne Helligkeit, habe ich das Template so gebaut (vgl. Screenshot):
<!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>
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
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é
Ich habe meine HUE Lampen mit einem Template angelegt. Das erspart doppelte Pflege.
Vielleicht hilft dir diese Umsetzung?
Viele Grüße
Andreas
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
@Andre und Andreas: Mich interessieren beide Umsetzungen als Code. 👍
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:
<!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ü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:
<!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ä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":
/* 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
Danke!
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.
<!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>
Ein Template unabhängig ob farbig oder weiße HUE-Birnen.
<!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>
<!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.
<!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<!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 BirneDas 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 ;) 8)
<!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>
sehr schön. Da kann ich mir eine Menge Anregungen holen! Danke!
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
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 ;)
@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
Hallo Ulla, siehe zip anbei. Das ist der komplette tablet-folder. Zum Teil auch noch jemus Original-Files mit drinnen (oder original-Name und verändert).
Ich befürchte nur, dass das bei dir sehr "leer" aussehen wird, da all deine fhem-devices nicht passen werden.
Auch ist zu beachten, dass es wahrscheinlich nach einem Update nicht mehr funktionieren wird, da ich zum Teil in den original-ftui-files (primär fhem-tablet-ui.css) rumspielen mußte. Ordentlich ist das nicht; zu faul gewesen alles zu übertragen ;)
Das ist work in progress; entschuldige bitte den annotierten oder auskommentierten Code .
Aber vielleicht hilfts ja zur Inspiration?
H.
Zitat von: holle75 am 02 Januar 2018, 13:12:03
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
body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Hallo zusammen
Ich habe dasselbe Problem. Gibt es dafür bereits eine Lösung?
Gruss Eppi
Hallo Eppi, ich habe aufgegeben. Am meisten nervt, dass ich keinen Weg gefunden habe auf dem iPhone den Fehler zu suchen a la Firebug o.ä. ... in Firefox, Chrome, etc funktioniert es ja ("leider"). Falls du was findest, bitte bitte hier verewigen.
Hallo
ich habe eine Frage zu jemu75 vorlage.
nun ist es ja so, dass die sections im content_xyz definiert werden. Sie werden dann auch der Reihenfolge wie aufgelistet angezeigt. Bei folgendem Beispiel zuerst Küche, TV, Gang UG, Palme, Pool..
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header></header>
<section>
<div data-template="template_dimmer.html" data-parameter='{"var_device":"Kueche_D_FUD61","var_symbol":"mi-lightbulb_outline","var_name":"Küche"}'></div>
</section>
<section>
<div data-template="template_dimmer.html" data-parameter='{"var_device":"TV_D_FUD61","var_symbol":"mi-lightbulb_outline","var_name":"TV"}'></div>
</section>
<section>
<div data-template="template_light.html" data-parameter='{"var_device":"Flur_UG_L_NodOn31","var_get":"state","var_doif":"","var_symbol":"mi-lightbulb_outline","var_name":"Gang UG"}'></div>
</section>
<section>
<div data-template="template_light.html" data-parameter='{"var_device":"Palmen_Licht","var_get":"state","var_doif":"","var_symbol":"mi-lightbulb_outline","var_name":"Palme"}'></div>
</section>
<section>
<div data-template="template_light.html" data-parameter='{"var_device":"Pool_Licht","var_get":"state","var_doif":"","var_symbol":"mi-lightbulb_outline","var_name":"Pool"}'></div>
</section>
</div>
</div>
Gibt es eine Möglichkeit diese Liste auch dynamisch zu sortieren? Ich möchte z.B. zuerst alle Lampen aufgelistet haben, welche AN sind. Und danach Alphabetisch oder nach manueller Vorgabe. Bei langen Listen wäre dies evtl. noch hilfreich...
Ist sowas machbar oder ein Akt der Unmöglichkeit?
danke für die Antwort.
Hallo,
ich beschäftige mich seit Heute mit diesem Design und stehe nun vor einem kleinen Problem.
Meinen Küchenradio, welcher mit Max2Play läuft und per Squeezebox in FHEM eingebunden ist, lässt sich noch nicht ganz über das angebotene Modul steuern.
Den Radio selbst bekomme ich ohne Problem zum Laufen, allerdings werden mir die Favoriten und Playlists nicht angezeigt. Tippe ich auf eines der beiden DropDown Menüs (Handy oder PC) passiert nichts.
Könnt Ihr mir da vielleicht weiterhelfen?
Liebe Grüße
fireb
Hallo zusammen,
ich versuche mich aktuell auch am Flexbox Design.
Leider verstehe ich die Logik hinter der Definition der Breite einzelner Elemente noch nicht :-(
Vielleicht mag mich hier jemand erhellen?
Konkretes Beispiel im Screenshot. Ich würde gerne die Labels zu "Power", "Helligkeit" und "Farbe" in einer Flucht darstellen.
Zitat von: Draugr am 31 Dezember 2017, 13:17:26
Das hatte ich zu Anfang auch ausprobiert - hatte es dann aber wieder verworfen, weil mir die UI dann zur unaufgeräumt wirkte.
Ü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.
<!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.
<!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.
<!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.
<!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
<!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 ;) 8)
<!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>
Danke für die Vorlage. Habe gestern ein wenig gebastelt. Hast Du noch spezielle CSS-Einträge?
Bei mir liegt leider der Name des Devices zusammen mit der Zustandsbeschreibung übereinander. Suche noch eine Möglichkeit das anzupassen, ohne meine anderen Bereiche wieder zu schreddern.
Habe es gelöst. So sieht mein Detail-Template nun aus.
Falls auch jemand die Draugr-Lösung nachbaut: WICHTIG ist es auch die Subseiten in die index.html reinzubauen. Da habe ich mir eine halbe Stunde die Zähne dran ausgebissen.
<!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>
Hallo zusammen,
hat niemand eine Idee für mich?
Zitat von: PingPong am 30 November 2018, 12:47:52
Hallo zusammen,
ich versuche mich aktuell auch am Flexbox Design.
Leider verstehe ich die Logik hinter der Definition der Breite einzelner Elemente noch nicht :-(
Vielleicht mag mich hier jemand erhellen?
Konkretes Beispiel im Screenshot. Ich würde gerne die Labels zu "Power", "Helligkeit" und "Farbe" in einer Flucht darstellen.
Zitat von: PingPong am 03 Januar 2019, 07:50:36
Hallo zusammen,
hat niemand eine Idee für mich?
Poste doch mal deinen Code.
Sehr gerne.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="page" id="content_beleuchtung_detail_terrassenbeleuchtung">
<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>Kugellampe groß</header>
<!-- Power / Schalter -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="switch"
data-device="LIGHTIFY664A070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-set-on="on"
data-set-off="off"
data-icon="mi-lightbulb_outline"
data-background-icon="none"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Power</div>
<div data-type="label"
data-device="LIGHTIFY664A070000261884"
data-get="onoff"
data-substitution='["0","ausgeschaltet","1","eingeschaltet"]'
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="checkbox"
data-device="LIGHTIFY664A070000261884"
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-device="LIGHTIFY664A070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="mi-brightness_5"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Helligkeit</div>
<div data-type="label"
data-device="LIGHTIFY664A070000261884"
data-get="pct"
data-post-text=" %"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY664A070000261884"
data-get="pct"
data-set="pct"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbtemperatur -->
<!--section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY664A070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbtemperatur</div>
<div data-type="label"
data-device="LIGHTIFY664A070000261884"
data-get="ct"
data-part="1"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY664A070000261884"
data-get="ct"
data-set="ct"
data-max="454"
data-min="154"
data-part="1"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbe -->
<!--section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY664A070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbe</div>
<div data-type="label"
data-device="LIGHTIFY664A070000261884"
data-get="rgb"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="popup"
data-height="300px"
data-width="300px"
data-draggable="false">
<div data-type="symbol"
data-device="LIGHTIFY664A070000261884"
data-icon="fa-circle"
data-on-color="LIGHTIFY664A070000261884:rgb"
data-off-color="LIGHTIFY664A070000261884:rgb">
</div>
<div class="dialog">
<header>Farbe</header>
<div data-type="colorwheel"
data-device="LIGHTIFY664A070000261884"
data-get="rgb"
data-set="rgb"
class="roundIndicator big">
</div>
</div>
</div>
</div>
</div>
</section-->
</div>
<div class="card lift">
<header>Kugellampe klein</header>
<!-- Power / Schalter -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="switch"
data-device="LIGHTIFY5956070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-set-on="on"
data-set-off="off"
data-icon="mi-lightbulb_outline"
data-background-icon="none"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Power</div>
<div data-type="label"
data-device="LIGHTIFY5956070000261884"
data-get="onoff"
data-substitution='["0","ausgeschaltet","1","eingeschaltet"]'
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="checkbox"
data-device="LIGHTIFY5956070000261884"
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-device="LIGHTIFY5956070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="mi-brightness_5"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Helligkeit</div>
<div data-type="label"
data-device="LIGHTIFY5956070000261884"
data-get="pct"
data-post-text=" %"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY5956070000261884"
data-get="pct"
data-set="pct"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbtemperatur -->
<!--section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY5956070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbtemperatur</div>
<div data-type="label"
data-device="LIGHTIFY5956070000261884"
data-get="ct"
data-part="1"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY5956070000261884"
data-get="ct"
data-set="ct"
data-max="454"
data-min="154"
data-part="1"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbe -->
<!--section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY5956070000261884"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbe</div>
<div data-type="label"
data-device="LIGHTIFY5956070000261884"
data-get="rgb"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="popup"
data-height="300px"
data-width="300px"
data-draggable="false">
<div data-type="symbol"
data-device="LIGHTIFY5956070000261884"
data-icon="fa-circle"
data-on-color="LIGHTIFY5956070000261884:rgb"
data-off-color="LIGHTIFY5956070000261884:rgb">
</div>
<div class="dialog">
<header>Farbe</header>
<div data-type="colorwheel"
data-device="LIGHTIFY5956070000261884"
data-get="rgb"
data-set="rgb"
class="roundIndicator big">
</div>
</div>
</div>
</div>
</div>
</section-->
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Lichtleiste</header>
<!-- Power / Schalter -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="switch"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-set-on="on"
data-set-off="off"
data-icon="mi-lightbulb_outline"
data-background-icon="none"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Power</div>
<div data-type="label"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="onoff"
data-substitution='["0","ausgeschaltet","1","eingeschaltet"]'
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="checkbox"
data-device="LIGHTIFY3E62A200AA3EB07C"
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-device="LIGHTIFY3E62A200AA3EB07C"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="mi-brightness_5"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Helligkeit</div>
<div data-type="label"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="pct"
data-post-text=" %"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="pct"
data-set="pct"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbtemperatur -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbtemperatur</div>
<div data-type="label"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="ct"
data-part="1"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="slider"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="ct"
data-set="ct"
data-max="454"
data-min="154"
data-part="1"
class="horizontal blue">
</div>
</div>
</div>
</section>
<!-- Farbe -->
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="onoff"
data-get-on="1"
data-get-off="0"
data-icon="fa-thermometer-half"
data-on-color="blue"
data-off-color="grey"
class="big compressed">
</div>
</div>
<div class="cell left-align left-space">
<div class="big">Farbe</div>
<div data-type="label"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="rgb"
class="">
</div>
</div>
<div class="cell-90">
</div>
<div class="cell right-space">
<div data-type="popup"
data-height="300px"
data-width="300px"
data-draggable="false">
<div data-type="symbol"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-icon="fa-circle"
data-on-color="LIGHTIFY3E62A200AA3EB07C:rgb"
data-off-color="LIGHTIFY3E62A200AA3EB07C:rgb">
</div>
<div class="dialog">
<header>Farbe</header>
<div data-type="colorwheel"
data-device="LIGHTIFY3E62A200AA3EB07C"
data-get="rgb"
data-set="rgb"
class="roundIndicator big">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="card lift">
<header>Automatik</header>
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="at.AussenbeleuchtungAbendsAn"
data-get="state"
data-icon="fs-general_an_fuer_zeit"
data-states='["inactive","!inactive"]'
data-colors='["red","blue"]'
class="big compressed">
</div>
</div>
<div class="cell left-align">
<div class="big">Kugellampen ein</div>
<div data-type="label"
data-device="at.AussenbeleuchtungAbendsAn"
data-pre-text="schaltet die Kugellampen um "
data-get="state"
data-part="2"
data-post-text=" Uhr ein."
data-hide="state"
data-hide-on="inactive"
data-hide-off="inactive"
class="">
</div>
</div>
<div class="cell-90"></div>
<div class="cell right-space">
<div data-type="checkbox"
data-device="at.AussenbeleuchtungAbendsAn"
data-get="state"
data-get-on="!inactive"
data-get-off="inactive"
data-set-on="active"
data-set_off="inactive"
class="small blue">
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div class="cell-10 left-align left-space">
<div data-type="symbol"
data-device="at.AussenbeleuchtungAbendsAus"
data-get="state"
data-icon="fs-general_aus_fuer_zeit"
data-states='["inactive","!inactive"]'
data-colors='["red","blue"]'
class="big compressed">
</div>
</div>
<div class="cell left-align">
<div class="big">Kugellampen aus</div>
<div data-type="label"
data-device="at.AussenbeleuchtungAbendsAus"
data-pre-text="schaltet die Kugellampen um "
data-get="state"
data-part="2"
data-post-text=" Uhr aus."
data-hide="state"
data-hide-on="inactive"
data-hide-off="inactive"
class="">
</div>
</div>
<div class="cell-90 "></div>
<div class="cell right-space">
<div data-type="checkbox"
data-device="at.AussenbeleuchtungAbendsAus"
data-get="state"
data-get-on="!inactive"
data-get-off="inactive"
data-set-on="active"
data-set_off="inactive"
class="small blue">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Hallo zusammen,
ich bin gerade dabei mir das FlexDesign zu gemüte zu führen, ich finde es echt klasse was da von Euch schon alles geschaffen wurde.
Eines vermisse ich allerdings, die Steuerung von Rollos. Diese konnte ich mit dem "alten System" mittels CircleMenue einbinden, wie wird das hier dargestellt, gibt es da schon Ansätze?
danke
Schau mal im ersten Post. Ist schon drin.
Zitat von: Gunther am 03 Januar 2019, 19:25:58
Schau mal im ersten Post. Ist schon drin.
meinst du das: Template für Jalousie Szenen bzw Template für Jalousien
damit kann ich aber "nur" auf/stop/ab durchführen, aber nicht auf verschiedene Postitionen (20/40/60/80 %)
müsste quasi noch die Auswahl auf diese Werte dazufügen, aber wie mach ich das am besten?
noch eine Frage, wie kann man beim Dimmer auch ein/aus dazu machen?
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-get="position" data-states='["0","1"]' data-colors='["red","green"]' data-icon="oa-fts_shutter_20" class="compressed"></div>
</div>
<div class="cell-20 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device" data-substitution='["on","Status: oben","off","Status: unten","up","Status: oben","down","Status: unten","undefined","Status: teilweise oben / unten"]' class=""></div>Status: halboffen
</div>
<div class="cell-60 right-align">
<div data-type="push" data-device="var_device" data-get="state" data-set-on="down" data-background-icon="" data-icon="fa-caret-down" class="compressed inline" style=""></div>
<div data-type="push" data-device="var_device" data-get="state" data-set-on="stop" data-background-icon="" data-icon="fa-stop" class="tiny inline"></div>
<div data-type="push" data-device="var_device" data-get="state" data-set-on="up" data-background-icon="" data-icon="fa-caret-up" class="compressed inline" style=""></div>
</div>
<div class="cell right-align">
</div>
</div>
Dimmer ein/aus:
z. B.
https://wiki.fhem.de/wiki/FTUI_Widget_Checkbox (https://wiki.fhem.de/wiki/FTUI_Widget_Checkbox)
Für Deine Jalousie z.B.
https://wiki.fhem.de/wiki/FTUI_Widget_Select (https://wiki.fhem.de/wiki/FTUI_Widget_Select)
oder
https://wiki.fhem.de/wiki/FTUI_Widget_Slider (https://wiki.fhem.de/wiki/FTUI_Widget_Slider)
feel free to try
super, danke!
werde mich da mal einlesen.
Zitat von: holle75 am 02 Januar 2018, 13:12:03
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
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 ;)
Gibt es da schon eine Lösung?
Mein Problem derzeit: Scollen auf Iphone geht leider nicht wie sonst gewohnt (anstupsen und es läuft).
Backbutton auf Iphone vorhanden aber auf breitem Device nicht.
Ich habe nun mal ein wenig rumprobiert (Achtung: Ich bin absoluter Laie in Sachen CSS und HTML).
Wenn ich die Schnipsel für das IOS-Scrollen einfüge, die ich überall im Web finde, funktioniert das weiche Scrollen auch aber überdeckt anscheinend den Backbutton.
Code für weiches Scollen:
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Warum das nun den Backbutton überdeckt weiß ich nicht.
Backbutton:
}
.phone-back-btn {
top: 0px;
left: 0px;
height: 39px;
width: 39px;
position: absolute;
background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}
Sehen kann ich das, wenn ich den Backbutton auf
height: 50px
vergrößere
Dann schaut dieser hervor und kann genutzt werden.
Frage: Warum überdeckt das Scrollen die obere Zeile?
Kann ich mitteilen, was in "Vordergrund" und was im "Hintergrund" ist?
Hallo zusammen,
neuerdings, es gab wohl ein update, fährt am Android Smartphone die Navigationsleiste nicht mehr rein und verdeckt somit die linke Seite meiner content-page.
wenn ich das Phone drehe auf "landscape" kann ich dafür nicht mehr nach oben scrollen. mir fehlen dann die obersten Zeilen.
auch wenn ich die orignal "index-html" aus der Zip-Datei, die im ersten Post enthalten ist verwende, kommen dennoch die gleichen fehler.
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="css/hdm-user-tablet-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
habt ihr ähnliche Phänomene? oder könnt ihr helfen?
Genau das Problem habe ich auch, das Menü fährt erst wieder ein wenn ich erneut auf den Menü Button klicke
Hast du eine Lösung gefunden?
Hallo SirMarco,
Leider nicht, ich hab schon die alten css von einem Backup wieder eingespielt, es mit den Originaldateien aus der ZipDatei des ersten Eintrages versucht. Nichts, ich bekomm diese "SmartphoneUI" nicht mehr so zum Fliegen.
Mir ist auch aufgefallen, dass die Charts auf dem Wetter-Untermenu nun mit einem scharzen Hintergrund dargestellt werden und keine Verläufe mehr erkennbar sind.
Bei mir fährt am Desktop die Navigationsbar gar nicht rein, ging glaub auch früher nicht und wäre für mich nicht tragisch, aber am Smartphone ist es genau das Feature was so toll war.
Wenn jemand ne Idee hat, bzw. noch die Orignal CSS und alles drum rum aus dem lib und js Ordner, dann bitte auch bereitstellen.
BITTE BITTE BITTE :-)
Hallo,
danke für die tolle Vorlage, hänge aktuell da dran das ich gerne die Breite der Menuleiste anpassen wollte und nur Icons ohne Text mittig.... leider bekomme ich weder die Breite eingestellt noch die Icons mittig.
Hat da einer eine gute Idee für mich wo ich meinen Denkfehler mache?!
Danke & Gruß
Gerhard
Hat jemand eine Idee wie ich das Menü auf dem Smartphone scrollbar machen kann?
Liebe Grüsse
Hallo,
ich habe die Vorlage entsprechend angepasst und habe soviele Menüpunkte das gescrollt werden muss. Dies habe ich mit den Anpassungen von GeoCeKid hinbekommen. Leider verhält sich das dann so, dass die Menüleiste nur soweit mit der Hintergrundfarbe gefüllt wird wie der Monitor hoch ist. Alles was darüber hinaus geht, ist grau (siehe Anhang).
Wie kann man dieses Verhalten ändern, sodass alle Menüpunkte auf dem richtigen Hintergrund angezeigt werden?
Hi, da ich das Thema https://forum.fhem.de/index.php/topic,104944.0.html nur für dieses Layout erstellt habe, verlinke ich die beiden Threads mal. Finde es deutlich bequemer so.
Lieben Dank auch an dieser Stelle nochmal für das Layout!
Es hat mir nicht nur ein wunderbares Gerüst verschafft, sondern auch den Umgang mit Templates gezeigt.
Hallo,
ich versuche auch gerade meine FTUI Oberfläche von Gridster auf Flexbox umzustellen, dank dieses Fadens klappt das auch schon ganz gut.
Es hat sich mir aber eine Frage aufgedrängt, ist das Konstrukt...
<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für HUE Lampen -->
</head>
<body>
</body>
</html>
...bei den Templates überhaupt nötig? Die Templates werden doch soweit ich das verstanden habe in die content_X.html Seiten eingebunden, die dieses Konstrukt bereits enthalten.
Oder handelt es sich bei den Templates um eigenständige Seiten?
Und noch eine Frage, ich habe versucht das Menü schmaler zu machen, führt aber auf dem Smartfon dazu, daß der Content um das breite Menü nach rechts gerückt ist und dafür die rechte Seite um diesen Teil abgeschnitten ist.
gm
Zitat von: Gunther am 01 Januar 2019, 21:26:36
Habe es gelöst. So sieht mein Detail-Template nun aus.
Falls auch jemand die Draugr-Lösung nachbaut: WICHTIG ist es auch die Subseiten in die index.html reinzubauen. Da habe ich mir eine halbe Stunde die Zähne dran ausgebissen.
<!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>
Irgendwie funktioniert das bei mir nicht so richtig .
Habe jetzt den Eintrag in der Index gemacht aber die Detailseite bleibt leer.
<div class="Page" id="kueche1"></div>Kannst du mir da einen Tip geben?
Zeig doch mal die Index, die Content und die Template-Seiten (Code)
Index
<!DOCTYPE html>
<html>
<!-- FHEM Tablet UI 2.6 -->
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='1'> <!-- keine Ausgabe von Protokollmeldungen -->
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
<script src="/fhem/pgm2/webviewcontrol.js" defer></script>
<title>SmartHome</title>
</head>
<body>
<div class="phone-header"></div>
<nav class="menu">
<div class="menu-trigger"></div>
<header>Menu</header>
<ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="Default large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_media.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_media"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_media.html)"
data-icon="fa-music" class="large"><span>Media</span></div>
</li>
<li>
<div data-type="link" data-url="#room_schlafzimmer.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#room_schlafzimmer"
data-text-align="left"
data-active-pattern="(.*index.html|.*#room_schlafzimmer.html)"
data-icon="fa-bed" class="large"><span>Eltern</span></div>
</li>
<li>
<div data-type="link" data-url="#room_wohnkueche.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#room_wohnkueche"
data-text-align="left"
data-active-pattern="(.*index.html|.*#room_wohnkueche.html)"
data-icon="fa-couch" class="large"><span>Wohnküche</span></div>
</li>
<li>
<div data-type="link" data-url="#content_chart.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_chart"
data-text-align="left"
data-active-pattern=".*(#content_chart.html)"
data-icon="mi-show_chart" class="large"><span>Grafiken</span></div>
</li>
<li>
<div data-type="link" data-url="#content_phone.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_phone"
data-text-align="left"
data-active-pattern=".*(#content_phone.html)"
data-icon="mi-phone" class="large"><span>Anrufe</span></div>
</li>
<li>
<div data-type="link" data-url="#content_settings.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_settings"
data-text-align="left"
data-active-pattern=".*(#content_settings.html)"
data-icon="mi-settings" class="large"><span>Einstellungen</span></div>
</li>
</ul>
</nav>
<main>
<div claa="page" id="1"></div>
<div class="page" id="content_home"></div>
<div class="page" id="room_schlafzimmer"></div>
<div class="page" id="content_light"></div>
<div class="page" id="content_media"></div>
<div class="page" id="content_contact"></div>
<div class="page" id="content_blinds"></div>
<div class="page" id="content_blinds_detail"></div>
<div class="page" id="room_wohnkueche"></div>
<div class="page" id="content_weather"></div>
<div class="page" id="content_phone"></div>
<div class="page" id="content_cam"></div>
<div class="page" id="content_chart"></div>
<div class="page" id="content_settings"></div>
<div class="page" id="detail_kueche1"></div>
</main>
</body>
</html>
Room
<!DOCTYPE html>
<html>
<body>
<div class="page" id="room_wohnkueche">
<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>Licht</header>
<section>
<div data-template="template_switch_hue.html" data-parameter='{"var_device":"HUEDevice2","var_name":"Kueche 1","var_url":"detail_kueche1"}'></div>
</section>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Rollos</header>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ","var_name":"Wintergarten"}'></div>
</section>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten Tür"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
ml>
</section>
<section>
<div data-template="template_blind.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten Tür"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>.html" data-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten Tür"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>ce":"Rollo_WZ_Tuer","var_name":"Wintergarten Tür"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
a-parameter='{"var_device":"Rollo_WZ_Tuer","var_name":"Wintergarten Tür"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Template_switsch_hue
<!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-active-pattern=".*(#var_url.html)" 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>
detail_kueche1
<!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>
Du hast in der index.html als ID:
<div class="page" id="detail_kueche1"></div> aber in der room.html
<div class="page" id="room_wohnkueche">
Das musst du anpassen, sonst kann er die Page nicht öffnen
Grüsse
Zitat von: SirMarco am 08 Dezember 2020, 12:13:02
Du hast in der index.html als ID:
<div class="page" id="detail_kueche1"></div> aber in der room.html
<div class="page" id="room_wohnkueche">
Das musst du anpassen, sonst kann er die Page nicht öffnen
Grüsse
Wenn ich das mache lädt der mir den ganzen Raum nicht mehr.
Welche Seite möchtest Du denn mit einem Template öffnen?
Die room_wohnkueche.html?
Sehe ich genauso
Sorry für meine späte Reaktion.
Mein Aufbau ist folgender:
Aus der Hauptseite rufe ich die room_wohnkueche.html auf in der sich das Template_switch_hue befindet. Aus dem Templaten soll dann die detail_kueche1 aufgerufen werden.
Edit: gerade nochmal alle Dateien durch geguckt und das Beispiel aus dem Forum angesehen und den Fehler gefunden. Hatte das komplett falsch aufgebaut. Danke für eure Hilfe :)
Hallo in die Runde,
ich habe schon seit 1 Jahr diese Oberfläche. Sie ist wirklich toll.
Jetzt sind einige neue Unterseiten dazu gekommen und das Menü wird immer Länger.
Besteht die Möglichkeit des Scrollens im Menü. Derzeit wird zb. im Querformat nicht alles angezeigt (Siehe Bild).
Ich habe diverses schon probiert aber nicht wirklich eine Lösung gefunden!
Habt ihr da einen hilfreichen Tip?
<!DOCTYPE html>
<html>
<!-- FHEM Tablet UI 2.6 -->
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="fhemweb_url" content="http://xxxxxxx/fhem/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->
<link rel="stylesheet" href="../css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<link rel="stylesheet" href="user-tablet-ui-user.css" />
<script src="../js/fhem-tablet-ui.js" defer></script>
<title>SmartHome</title>
</head>
<body>
<div class="phone-header"></div>
<nav class="menu">
<div class="menu-trigger"></div>
<header>Menu</header>
<ul>
<li>
<div data-type="link" data-url="#content_home.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_home"
data-text-align="left"
data-active-pattern="(.*index.html|.*#content_home.html)"
data-icon="fa-home" class="large"><span>Home</span></div>
</li>
<li>
<div data-type="link" data-url="#content_heating.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_heating"
data-text-align="left"
data-active-pattern=".*(#content_heating.html)"
data-icon="fa-thermometer-3" class="large"><span>Heizung</span></div>
</li>
<li>
<div data-type="link" data-url="#content_light.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_light"
data-text-align="left"
data-active-pattern=".*(#content_light.html)"
data-icon="mi-lightbulb_outline" class="large"><span>Licht</span></div>
</li>
<li>
<div data-type="link" data-url="#content_steckdose.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_steckdose"
data-text-align="left"
data-active-pattern=".*(#content_steckdose.html)"
data-icon="mi-power" class="large"><span>Steckdosen</span></div>
</li>
<li>
<div data-type="link" data-url="#content_contact.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_contact"
data-text-align="left"
data-active-pattern=".*(#content_contact.html)"
data-icon="fa-windows" class="large"><span>Fenster/Türen</span></div>
</li>
<li>
<div data-type="link" data-url="#content_door.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_door"
data-text-align="left"
data-active-pattern=".*(#content_door.html)"
data-icon="oa-fts_sliding_gate" class="large"><span>Tore</span></div>
</li>
<li>
<div data-type="link" data-url="#content_wassermelder.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_wassermelder"
data-text-align="left"
data-active-pattern=".*(#content_wassermelder.html)"
data-icon="fs-humidity" class="large"><span>Wassermelder</span></div>
</li>
<li>
<div data-type="link" data-url="#content_cam.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_cam"
data-text-align="left"
data-active-pattern=".*(#content_cam.html)"
data-icon="mi-videocam" class="large"><span>Kameras</span></div>
</li>
<li>
<div data-type="link" data-url="#content_technik.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_technik"
data-text-align="left"
data-active-pattern=".*(#content_technik.html)"
data-icon="oa-it_network" class="large"><span>Technik</span></div>
</li>
<li>
<div data-type="link" data-url="#content_e3dc.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_e3dc"
data-text-align="left"
data-active-pattern=".*(#content_e3dc.html)"
data-icon="oa-measure_photovoltaic_inst" class="large"><span>Solar</span></div>
</li>
<li>
<div data-type="link" data-url="#content_verbrauch.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_verbrauch"
data-text-align="left"
data-active-pattern=".*(#content_verbrauch.html)"
data-icon="fa fa-cog" class="large"><span>Verbrauch</span></div>
</li>
<li>
<div data-type="link" data-url="#content_weather.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_weather"
data-text-align="left"
data-active-pattern=".*(#content_weather.html)"
data-icon="oa-weather_cloudy" class="large"><span>Wetter</span></div>
</li>
<li>
<div data-type="link" data-url="#content_uwz.html"
data-color="white"
data-active-color="blue"
data-width="115"
data-load="#content_uwz"
data-text-align="left"
data-active-pattern=".*(#content_uwz.html)"
data-icon="fa fa-exclamation-triangle" class="large"><span>Unwetter</span></div>
</li>
</ul>
</nav>
<main>
<div class="page" id="content_home"></div>
<div class="page" id="content_heating"></div>
<div class="page" id="content_light"></div>
<div class="page" id="content_contact"></div>
<div class="page" id="content_wassermelder"></div>
<div class="page" id="content_blinds"></div>
<div class="page" id="content_blinds_detail"></div>
<div class="page" id="content_phone"></div>
<div class="page" id="content_cam"></div>
<div class="page" id="content_settings"></div>
<div class="page" id="content_steckdose"></div>
<div class="page" id="content_door"></div>
<div class="page" id="content_uwz"></div>
<div class="page" id="content_weather"></div>
<div class="page" id="content_technik"></div>
<div class="page" id="content_e3dc"></div>
<div class="page" id="content_verbrauch"></div>
</main>
</body>
</html>
MFG
Sig10680
Ich möchte mich nach längerer Zeit gern zurückmelden und euch gern auf mein aktuelles Projekt zum Thema responsive Design (flexbox) informieren.
Ich habe es hier https://forum.fhem.de/index.php/topic,119470.0.html (https://forum.fhem.de/index.php/topic,119470.0.html) im Forum veröffentlicht und wer Lust hat, kann sich das gern mal anschauen. :)