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

Draugr

  • Gast
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #120 am: 23 Dezember 2017, 15:09:05 »
Hallo zusammen,

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

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

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

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

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

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

Online Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #121 am: 23 Dezember 2017, 15:52:16 »
verschachtelte Templates gehen meines Wissens leider noch(?) nicht.

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

Edit: Ohne mir das im Detail angeschaut zu haben. Schau mal hier:
https://forum.fhem.de/index.php/topic,81471.0.html
« Letzte Änderung: 23 Dezember 2017, 17:11:12 von Gunther »
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Draugr

  • Gast
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #122 am: 23 Dezember 2017, 16:29:56 »
Hallo Gunther,
 
vielen Dank für deine Antwort.

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

Edit: Ich probiere mal den Ansatz der Parameterübergabe über die URL (s.a. https://forum.fhem.de/index.php/topic,81493.0.html)
« Letzte Änderung: 23 Dezember 2017, 16:41:36 von Draugr »

Online Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #123 am: 23 Dezember 2017, 17:17:01 »
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>
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Mpomp

  • New Member
  • *
  • Beiträge: 12
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #124 am: 25 Dezember 2017, 11:53:55 »
Hallo

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

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

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

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

Danke für eure Hilfe
Ubuntu 14.04 auf Atom Zotac IONITX-E/ FHEM 5.7 / Homematic LAN und HM Aktoren, LMS, AVR Denon 3808, mehrere RasPi´s als Squeezebox.

Draugr

  • Gast
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #125 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é
Hilfreich Hilfreich x 1 Liste anzeigen

Offline somansch

  • Full Member
  • ***
  • Beiträge: 306
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #126 am: 29 Dezember 2017, 23:49:26 »
Ich habe meine HUE Lampen mit einem Template angelegt. Das erspart doppelte Pflege.

Vielleicht hilft dir diese Umsetzung?

Viele Grüße
Andreas

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 129
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #127 am: 30 Dezember 2017, 00:22:51 »
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

Online Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #128 am: 30 Dezember 2017, 03:32:03 »
@Andre und Andreas: Mich interessieren beide Umsetzungen als Code. 👍
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline somansch

  • Full Member
  • ***
  • Beiträge: 306
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #129 am: 30 Dezember 2017, 11:11:02 »
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&uuml;che</header>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice15","var_name":"Tisch 1"}'></div>
</section>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice14","var_name":"Tisch 2"}'></div>
</section>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice19","var_name":"Unterbau"}'></div>
</section>
</div>
<div class="card lift">
<header>Bad</header>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice21","var_name":"Decke"}'></div>
</section>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEGroup9","var_name":"Spiegel"}'></div>
</section>
</div>
<div class="card lift">
<header>Schlafzimmer</header>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice20","var_name":"Decke"}'></div>
</section>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice10","var_name":"Andreas"}'></div>
</section>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice13","var_name":"Peggy"}'></div>
</section>
</div>
<div class="card lift">
<header>Abstellraum</header>
<section>
<div data-template="template_hue_lamp.html" data-parameter='{"var_device":"HUEDevice24","var_name":"Decke"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>

</html>

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

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

Um "hdm-flexbox" für zuverlässige Breiten zu verwenden, braucht ihr die Erweiterung in der "user-tablet-ui.css":
/* 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
Gefällt mir Gefällt mir x 2 Liste anzeigen

Online Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #130 am: 30 Dezember 2017, 12:20:49 »
Danke!
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Draugr

  • Gast
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #131 am: 31 Dezember 2017, 13:17: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.

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>

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>
Gefällt mir Gefällt mir x 1 Liste anzeigen

Online Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #132 am: 31 Dezember 2017, 14:44:08 »
sehr schön. Da kann ich mir eine Menge Anregungen holen! Danke!
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline holle75

  • Sr. Member
  • ****
  • Beiträge: 652
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #133 am: 02 Januar 2018, 13:12:03 »
Zitat
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:
    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 ;)

Offline ulli

  • Sr. Member
  • ****
  • Beiträge: 558
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #134 am: 10 Januar 2018, 20:35:23 »
@holle75
Ich finde deine Grafik bzw. Diagramm sehr gelungen. Würdest du den code bzw. das template teilen?

Grüße,
   Ulla

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
FHEM auf Beaglebone Black mit Debian.
1x Jeenode (433MHz): IR send/receive; Baumarkt Funksteckdosen HX2262 send/receive; LEDs
1x Jeenode (868MHz): FS20 send/receive; 2x Heizungsthermostate ETH200 comfort; 2x LaCrosse Temperatursensoren (send)/receive; Piezo Summer für akustische Rückmeldung