Autor Thema: Tablet UI - responsive Design (flexbox)  (Gelesen 28426 mal)

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Tablet UI - responsive Design (flexbox)
« am: 06 September 2017, 14:37:10 »
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&uuml;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="&deg;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&szlig;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="&deg;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="&deg;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="&deg;C max." class="large inline"></div>
<div data-type="label" data-device="var_device" data-get="fcvar_day_low_c" data-unit="&deg;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;
}
« Letzte Änderung: 09 September 2017, 15:50:25 von jemu75 »
Gefällt mir Gefällt mir x 21 Liste anzeigen

Offline klausw

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1894
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #1 am: 06 September 2017, 18:52:08 »
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?
« Letzte Änderung: 06 September 2017, 18:59:46 von klausw »
RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

Offline Hellspawn

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #2 am: 06 September 2017, 18:53:18 »
Wow, wirklich toll..
ich würde sogar um alle Dateien bitten...
Das gefällt mir wirklich gut...

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #3 am: 06 September 2017, 19:26:33 »
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&uuml;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&uuml;che","var_description":"Unterbrechung sobald alle Fenster geschlossen"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>

</html>
« Letzte Änderung: 09 September 2017, 14:12:57 von jemu75 »

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #4 am: 06 September 2017, 19:36:57 »
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>
« Letzte Änderung: 09 September 2017, 13:55:31 von jemu75 »
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline nanocosmos

  • Full Member
  • ***
  • Beiträge: 217
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #5 am: 07 September 2017, 18:14:35 »
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

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #6 am: 07 September 2017, 19:37:19 »
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.

Offline andy19850

  • New Member
  • *
  • Beiträge: 47
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #7 am: 08 September 2017, 08:07:53 »
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!

Offline Tedious

  • Hero Member
  • *****
  • Beiträge: 1324
  • Indocti discant et ament meminisse periti
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #8 am: 08 September 2017, 09:47:40 »
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
FHEM auf Brix N3150/4GB/250GB SSD mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max! und SonOff, Alexa mit HABridge, Kleinkram...

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #9 am: 08 September 2017, 10:00:24 »
@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.  :)

Offline andy19850

  • New Member
  • *
  • Beiträge: 47
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #10 am: 08 September 2017, 10:35:28 »
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  ::)

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #11 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.  :)

<!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>

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3413
  • Online
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #12 am: 08 September 2017, 14:02:07 »
@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..?
Intel-NUC i3: FHEM-Server 5.9 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 118
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #13 am: 08 September 2017, 14:44:17 »
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.  :)

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3413
  • Online
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #14 am: 08 September 2017, 14:46:42 »
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  :)
Intel-NUC i3: FHEM-Server 5.9 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM