Tablet UI - responsive Design (flexbox)

[holle75]

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.

[eppi]

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

Code Auswählen Erweitern

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

Hallo zusammen
Ich habe dasselbe Problem. Gibt es dafür bereits eine Lösung?
Gruss Eppi

[holle75]

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.

[choetzu]

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

Code Auswählen Erweitern

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

[fireb]

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

[PingPong]

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.

[Gunther]

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.

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<body>

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

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

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

</html>


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

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

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

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

</html>


Content-Seite einer weißen Wohnzimmerlampe.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

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

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

</html>


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

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

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

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

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

</html>



Template für die Detaileinstellungen einer weißen Birne

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

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

<body>

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

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

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

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

</html>


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

Code Auswählen Erweitern

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

[Gunther]

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.

Code Auswählen Erweitern

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

[PingPong]

Hallo zusammen,

hat niemand eine Idee für mich?

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.

[TWART016]

Hallo zusammen,

hat niemand eine Idee für mich?

Poste doch mal deinen Code.

[PingPong]

Sehr gerne.

Code Auswählen Erweitern


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


[australien]

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

[Gunther]

Schau mal im ersten Post. Ist schon drin.

[australien]

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?

Code Auswählen Erweitern

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

[Gunther]

Dimmer ein/aus:
z. B.
https://wiki.fhem.de/wiki/FTUI_Widget_Checkbox

Für Deine Jalousie z.B.
https://wiki.fhem.de/wiki/FTUI_Widget_Select

oder
https://wiki.fhem.de/wiki/FTUI_Widget_Slider

feel free to try