Monatsrückblick Januar/Februar 2026 ist online!

[Sven2013]

Hallo liebe Uhula Fans,

ich möchte danke sagen für dieses großartige Design. DANKE UHULA!!!!!

Schön dass du uns dieses zur Verfügung stellst. Ich habe mir bereits deine Anleitung mehrfach durchgelesen, das Design in Vis importiert und angeschaut. Soweit funktioniert auch alles top.

Allerdings komme ich nun nicht so richtig in schwung um mein Design in das Material Design zu ändern. Kann mir und ich glaube auch einigen anderen mal jemand einen schubs in die richtige Richtung geben?

Also wie seid Ihr gestartet euer Design in Material umzusetzten? Bisher dachte ich immer ich seie garn nicht so begriffstutzig, aber ich finde einfach keinen Einstieg? Da sind so viele Views? Mit welchem starte ich am besten usw.

Über eine Rückmeldung würde ich mich sehr freuen.

Gruß Sven

[Uhula]

@Sven2013:

Mit welchem starte ich am besten usw. `
Zuerst einmal mit gar keinem, sondern nur mit einem Zettel und einem Bleistift. Mit diesem Werkzeug arbeitest du dich vom Grobkonzept über das Feinkonzept zum vis durch - erst dann kommen die Views ins Spiel. ;-)

OK, etwas genauer. Im Grobkonzept notierst du dir, welche Seiten (Pages) du am Ende haben möchtest, dabei erkennst du dann auch, ob eine Hauptnavigation ausreicht, oder ob du Unternavigationen benötigst. (Letzere würde ich immer vermeiden zu versuchen)

Bsp:

Haus, Außen, Klima, Sicherheit, Sonst

Haus -> Keller, EG, OG

Sicherheit -> Wasser, Feuer, Alarmanlage, Cams

Damit hast du dann deine Menge der Seiten (also die page-Views und die cont(ent)-Views) und legst dann im Feinkonzept fest, welche Informationen / Bedienungen du auf den Seiten sehen möchtest.

Bsp:

EG: Licht WZ, Licht Flur, Heizung, …

Das ergibt die Views für die Karten (card-Views).

Weiterhin hast du vielleicht noch Wünsche um weniger wichtige Daten anzuzeigen, wie Pi-Infos usw. Das ergibt dann weitere Views, die in Dialogen anzuzeigen sind.

Dann Ruckzuck die Navigation anpassen (tnav, lnav), sich noch überlegen, was als Funktionen/Links im rnav erscheinen soll - und fertig!

Ach ja, geh ruhig davon aus, dass du mit deinem ersten Entwurf nicht 100% glücklich sein wirst und einen weiteren anfangen wirst.

Viel Erfolg.

Btw: Ich habe das Material Design gerade in Arbeit und erweitere es um mdui-state (zur Darstellung von Stati "trocken - feucht - nass" usw) und um mdui-cols-N (ein spaltenbasiertes Grid-System für das responsive design). Weitere Infos werden folgen.

[Sven2013]

Hallo Uhula,

vielen Dank für deine Antwort. Ich freue mich sehr über deine detaillierte Antwort. Ich habe mir ja schon gedanken darum gemacht als ich meine jetzigen Views erstellt habe. Mit der Aufteilung bin ich bisher ganz zufrieden und würde die nu technisch gerne in dein Design umsetzen.

Doch da hapert es am "wie fange ich an". Vielleicht hast du da einen Tipp, wie gehe ich also vor anhand meines jetzigen Views.

Es tut mir leid, dass meine erste Frage scheinbar nicht präzise genug gestellt war. Sorry…

Hier mein jetziges Main View:

Die Unterview EG

Gruss Sven

[Uhula]

Da hast du doch schon eine prima Vorlage (korrekt, ich hatte deinen Eingangspost so verstanden, dass du noch nichts hast).

Home, EG, OG, Garten, Pool, Wetter, Klima und Energie, IT, Cam, Prog sowie Home ergeben deine page-Views mit zugehörigen cont-Views. Und demnach auch deine Navigationsflächen im tnav- und lnav-View.

Für die pageHome benötigst du die card-Views Familientermine, Geburtstage, Müllkalendar, Info (Tankstelle, Briefe, …), Sicherheit (Tür geschlossen, HWR, ...) und Lichtsteuerung (Fernsehen, Ab ins Bett, ...). Diese card-Views werden dann auf dem contHome angezeigt, welcher wiederrum im pageHome angezeigt wird.

Fürs EG benötigts du die card-Views Saugi, Lüftung, Wohnzimmer, Küche/HWR und IT (Tablet, Alexa). Diese card-Views werden dann auf dem contEG angezeigt, welcher wiederrum im pageEG angezeigt wird.

Die card-Views folgen alle einem Muster:

Titel

(bei Bedarf: Subtitel)

Label1 Value1/Switch1/Button1

Label2 Value2/Switch2/Button2

Die Gestaltung der card-Views ist stark davon abhängig, ob du die Ansichten nur auf einem Tablet oder zB auch auf dem Handy anzeigen möchtest. Wenn letzteres, dann solltest du die card-Views nicht breiter machen als die Breite des Handy-Hoch-Formats. Normalerweise max. 320 oder 360 Px (auch wenn es eine Auflösung von 1280x720 Px hat, werden daraus durch die "double-density" 640x360 Px für die Darstellung).

Im abar-View gehört die Anzeige der Uhrzeit und des Datums. Ob du die Anwesenheit auch dort anzeigen möchtest, musst du entscheiden.

[Sven2013]

Super Danke für die Starthilfe, bin mittlerweile acu schon kräftig dabei :-)

Gruß Sven