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

Offline derHeimwerker

  • Full Member
  • ***
  • Beiträge: 110
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #30 am: 10 September 2017, 14:03:48 »
Hallo jemu75,

wirklich tolle und sauber aufgeräumte Arbeit. Kannst du mir vielleicht einmal sagen, wie du das mit den Jalousien Szenarien gemacht hast ? Wie sieht dein device "Scn_Jalousien" aus, mit dem du die Jalousiengruppen steuerst  ? Ich hatte bisher mehrere Structuren gebildet. Das scheinst du aber anders gelöst zu haben.

Vielen Dank schon einmal vorweg !


Offline jemu75

  • Full Member
  • ***
  • Beiträge: 116
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #31 am: 10 September 2017, 21:39:06 »
Ich versuche gerade deinen content/template Code in Kombination mit den DOIF´s zu verstehen (zb. content_light / template_switch).
könntest du da mal ein Beispiel mit fhem.cfg Code ausführen?
edit: wo nimmst du das "mode" her? .... oder die overviews in content_home, auch sehr spannend, aber wo fragst du die ab?

was mache ich mit DOIF
Ich habe mit dem template_switch die Möglichkeit einen "Verbraucher" (z.B. Lampe oder Steckdose) einfach selbst ein- bzw. auszuschalten.
In vielen Situationen soll mir die Hausautomation aber auch Arbeit abnehmen. ;) Zum Beispiel das Außenlicht schalten wenn es dunkel ist.
Dazu nutze ich in FHEM gern DOIF.
Hier ein Beispiel aus meiner fhem.cfg:
define Licht_Haustuer DOIF ([08:00-23:00] and [HM_3DF0ED:brightness] < 120 and [HM_48CF1C:state] ne "on") (set HM_48CF1C on) DOELSEIF (([23:01] or [HM_3DF0ED:brightness] > 119) and [HM_48CF1C:state] ne "off") (set HM_48CF1C off)
attr Licht_Haustuer cmdState on|off
Die DOIF Funktionen kann man praktischer Weise aktivieren bzw. deaktivieren. Dazu kann man in FHEM das Komando "set Licht_Haustuer enable" absetzen. Das Ergebnis wird dann im Reading "mode" abgelegt.
Im template_switch zeige ich nun (optional) an, ob meine Funktion den "mode" enabled oder disable hat.
Lasse ich den Parameter "var_doif" leer (also wenn ich keine Funktion definiert habe) dann zeigt mein Template auch nichts an.

Im Bereich Einstellungen (content_settings.html) habe ich nun wiederum ein Template (template_setting_doif.html) indem ich die Funktion, wie oben beschrieben, aktivieren bzw. deaktivieren kann.

Overviews in content_home
Von der Seite content_home.html verlinke ich ja auf bestimmte Aktoren bzw. Sensoren. (z.B. Lichtschalter, Rauchmelder, Jalousien usw.)
Um bereits hier den "groben Zustand meines Hauses" zu sehen, nutze ich direkt in FHEM die sog. Strukturen (structure), mit denen ich mehrere Aktoren bzw. Sensoren zusammenfassen kann.
Auch hier ein Beispiel aus meiner fhem.cfg:
define overview_light structure room HM_33E4F2_Sw HM_48CF1C HM_3B5D45_Sw_01 HM_3B5D45_Sw_02 HM_1C8F54_Sw_01
attr overview_light clientstate_behavior relativeKnown
attr overview_light clientstate_priority on off
Die Strukturen nutze ich nun dazu um eben die Info zu bekommen, ob z.B. noch irgendwo Licht im Haus an ist, indem ich in template_link.html den Status meiner Struktur abfrage. Auch hier gilt wieder - gebe ich dem template_link den Parameter "var_device" optional mit, dann wird diese Info in meinem Link angezeigt. Ansonsten eben nicht :)

Ist in der Tat nicht ganz einfach, aber ich hoffe jetzt etwas Licht ins Dunkel gebracht zu haben. ;)
« Letzte Änderung: 10 September 2017, 21:49:15 von jemu75 »

Offline jemu75

  • Full Member
  • ***
  • Beiträge: 116
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #32 am: 10 September 2017, 21:59:45 »
Kannst du mir vielleicht einmal sagen, wie du das mit den Jalousien Szenarien gemacht hast ? Wie sieht dein device "Scn_Jalousien" aus, mit dem du die Jalousiengruppen steuerst  ?

Um Szenarien festzulegen, nutze ich direkt in FHEM die sog. "LightScene" (der Name hat mich zu Beginn etwas verwirrt).  ;)
Hiermit kann ich fanktisch für alle möglichen Aktoren "Szenen" definieren. Die Anlage einer LightScene ist sehr einfach.
Hier wieder ein Beispiel aus meiner fhem.cfg
define Scn_Jalousien LightScene HM_469672 HM_469657 HM_46965E HM_46964F HM_49DD50 HM_3394D6
In der fhem.cfg werden also erstmal nur die Aktoren festgelegt, die in meinen Szenarien "mitspielen" sollen.
Die eigentlichen Szenarien z.B. "alle Jalousien offen"  legt man dann direkt in der FHEM Oberfläche an. (siehe Bild im Anhang)
Wie das im Detail funktioniert und wie man diese Szenarien abspeichert, kann man gut in der comandref in FHEM nachlesen.
Ist aber letztlich auch sehr einfach. Du stellst alle betreffenden Aktoren, die du in deiner LightScene definiert hast, auf den gewünschten Zustand ein und speichert danach in deiner LightScene diese "Szene" mit einem passenden Name (z.B. alle_Jalousien_offen") ab.
« Letzte Änderung: 10 September 2017, 22:05:08 von jemu75 »

Offline derHeimwerker

  • Full Member
  • ***
  • Beiträge: 110
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #33 am: 10 September 2017, 22:28:09 »
wow .... davon habe ich bisher noch nichts gelesen. Klingt aber super interessant. Vielen Dank für die Info !

Offline holle75

  • Full Member
  • ***
  • Beiträge: 436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #34 am: 11 September 2017, 10:00:38 »
Die DOIF Funktionen kann man praktischer Weise aktivieren bzw. deaktivieren. Dazu kann man in FHEM das Komando "set Licht_Haustuer enable" absetzen. Das Ergebnis wird dann im Reading "mode" abgelegt.

Hallo jemu, nice..... so mache ich das im Prinzip auch, aber ich finde das Reading "mode" nicht in meinen DOIF´s. Hab mal mit state gespielt, aber da hats dann natürlich die cmd´s drin und nicht enabled/disabled. Ist das ein Userreading? Falls ja, wie genau hast du dieses angelegt?

Offline Yepe

  • New Member
  • *
  • Beiträge: 13
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #35 am: 11 September 2017, 10:08:51 »
Hallo Zusammen,

ich habe gestern FTUI aktualisiert seitdem passen die Abstände zwischen den Zeilen nicht mehr.

Hat jemand eine Idee was ich anpassen muss.

es sind die orginal Seiten aus dem ersten Beitrag.

Christian

Offline holle75

  • Full Member
  • ***
  • Beiträge: 436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #36 am: 11 September 2017, 11:08:48 »
hast du es dir nur im Browser angeschaut, oder auch auf dem Phone? Bei mir gibts da häufiger Unterschiede.

Ansonsten sind die Web-Entwickler Tools im jeweiligen Browser dein Freund. Die zeigen dir schön, welches Objekt, div, Schriftgrad, etc welchen Platz einnimmt.
« Letzte Änderung: 11 September 2017, 11:11:12 von holle75 »

Offline andy19850

  • New Member
  • *
  • Beiträge: 41
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #37 am: 11 September 2017, 11:10:14 »
Hat sich irgendwo ein <br> eingemogelt? Das war bei mir mal der Fall :D

Offline Yepe

  • New Member
  • *
  • Beiträge: 13
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #38 am: 11 September 2017, 11:18:19 »
Der "Fehler" tritt am PC (FF & IE) und auf meinem Iphone auf.
vor dem Update war alles gut.

<br> habe ich nicht verwendet.

Ich vermuhte es hat sich was in den CSS Dateien geändert



Offline holle75

  • Full Member
  • ***
  • Beiträge: 436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #39 am: 11 September 2017, 11:24:35 »
in FF kannst du über Extras -> Web-Entwickler -> Inspektor die Konsole öffnen. Dann klickst du (bei mir) oben ganz links in der Ecke den Button mit Rechteck und Pfeil an und fährst mit der Maus über den Bereich in deiner Page der dich interessiert. Dann sollten dir alle die Divs, etc mit jeweiligem css angezeigt werden. Inkl. in welcher css-Datei die Definition liegt.
« Letzte Änderung: 11 September 2017, 11:26:36 von holle75 »

Offline Yepe

  • New Member
  • *
  • Beiträge: 13
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #40 am: 11 September 2017, 13:00:19 »
Hallo Holle,

danke für den Hinweis.


Ich habe mir gerade einen ältern Stand besorgt und werde mir das heute abend anschauen.
« Letzte Änderung: 11 September 2017, 13:16:16 von Yepe »

Offline sku

  • Jr. Member
  • **
  • Beiträge: 83
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #41 am: 11 September 2017, 13:43:28 »
Hallo,

ich habe in Chrome und Fully einen Darstellungsfehler: Wenn ich class card grow-0 in der untersten card eine vbox verwende, wird diese ohne Hintergrund ausserhalb des sichtbaren Bereichs dargestellt. Habe dazu diesen thread eroeffnet: https://forum.fhem.de/index.php/topic,76431.0.html
In Firefox schaut alles fein aus.
Falls das bei noch jemandem auftritt, bitte meine vorgeschlagene Loesung probieren und in meinem Thread kommentieren.

Danke!

Offline edank

  • Jr. Member
  • **
  • Beiträge: 97
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #42 am: 11 September 2017, 18:06:24 »
Hallo an Alle!

Bin jetzt auch am umbauen, habe aber ein kleines Problem mit dem Menü.
Das Verhalten habe ich am PC (Chrome) und am Handy im Querformat.
Wenn das Menü ganz ausgefahren oder ganz eingefahren  ist, passt alles aber wenn es den Zwischen-Status hat, verdeckt es den Content. Was muss ich da ändern? Kann mir da wer helfen?
Im Prinzip habe ich das von jemu75 nachgebaut.

jemu75  ist das bei dir auch so?

Danke im Voraus!

Offline holle75

  • Full Member
  • ***
  • Beiträge: 436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #43 am: 11 September 2017, 19:15:30 »
.... hatte auch ein paar Probleme bei verschiedenen Queerbreiten.

habe dann in der fhem-tablet-ui.css in der Zeile 983 (da in der Nähe)


.menu ul li:focus {
    outline: none;
}
/* hdm -webkit-transform zu allen transform hinzugefuegt / min-width auf 481 */
@media screen and (max-width: 900px) and (min-width: 481px) {
    .menu ~ main > .page {
        padding-left: 90px;
    }
    .menu {
        width: 90px;
    }
    .menu ul li {
        height: 60px;
        position: relative;
        padding: 0.5em 1em 0.5em 2.1em;
    }

min-width auf 481 geändert. Und in der my-css.css (je nachdem wie sie bei dir heißt) noch diese Änderungen gemacht (mit hdm kommentiert).

/* FHEM Tablet UI 2.6 - eigene Anpassungen */

/* Phone-Header und Phone-Backbutton Definition */
.phone-header {
display: none;
}

.phone-back-btn {
display: none;
}


/* Menübreite und Zeilenabstand der Menüpunkte korrigiert*/
/* hdm start .....  min-width von 480 auf 481 ..... zeile 983 in fhem-tablet-ui.css ebenfalls anpassen */
@media screen and (max-width: 900px) and (min-width: 481px) {
.menu {
width: 90px !important;
overflow: hidden;
}

.menu ul li div[data-type="link"] {
width: 65px !important;
}
.menu ul li div[data-type="link"] > div > span {
display: none !important;
}
/* hdm  end */
}

/* Menüleiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr überdeckt werden */

@media screen and (max-width: 480px) {
.menu ~ main > .page {
padding-left: 0px;
padding-top: 40px;
}
.phone-header {
        top: 0px;
        left: 0px;
height: 40px;
width: 100%;
position: absolute;
background: #1D1F20;
z-index: 4;
display: block;
}
.phone-back-btn {
        top: 0px;
        left: 0px;
height: 39px;
width: 39px;
        position: absolute;
        background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}

Außerdem in der  fhem-tablet-ui.css

-webkit-transform zu allen transform hinzugefuegt.

zb statt nur

transform: translate3d(-1em, -50%, 0);

transform: translate3d(-1em, -50%, 0);
-webkit-transform: translate3d(-1em, -50%, 0);

Wobei das wahrscheinlich nur ein Problem bei alten Devices ist.

Schau mal, obs hilft?

Man muß dazusagen, dass das weder (noch) updatefest, noch besonders sauber ist. Ich wollte in einer Breite von 480px noch nicht das "halbausgeklappte" Menu, da man so keinen Platzgewinn hat..... aber, und das könnte für dich interessant sein, auch keine Darstellungsfehler.

Edit: und so hängen die Menu-Divs bei mehr als 480px (bis 900px) auch nicht mehr in den Hauptbereich. Wenn man vorher scrollen wollte (im linken Bereich des Hauptbereiches) hat man immer einen Menupunkt erwischt.
« Letzte Änderung: 11 September 2017, 19:49:14 von holle75 »
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline edank

  • Jr. Member
  • **
  • Beiträge: 97
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #44 am: 11 September 2017, 20:25:25 »
holl75, ich danke dir!

So siehts gut aus!

 

decade-submarginal