Navigationsleiste mit Beschrifung innen | Griddarstellung

[TG70]

Hallo,
gibt es ein Widget mit dem ich folgende Art von Navigationsleiste basteln kann, ohne das
ich wie getan einzelne Widgets nutze:

Ich habs mit dem "materialdesign icon list" Widget probiert. Hier schaffe ich es allerdings nicht, die Schrit im
Button zu haben.

Des weiteren hätte ich die Frage ob man es auch mit einem Widget schafft, solch eine Seitendarstellung
zu basteln ohne die einzelnen Widget händisch ausrichten zu müssen.

Oder in welcher Art und Weise erstellt ihr solche Seitendarstellungen?

[Dominik F.]

@tg70

Ich nutze das MDCSS von Uhula
https://github.com/Uhula/ioBroker-Material-Design-Style#4-anleitung

Du wirst da zwar die Widgets einzeln erstellen müssen, kannst aber vieles automatisch anordnen lassen. Dauert etwas, bis man sich eingearbeitet hat, aber die Möglichkeiten sind doch immens. Ich lasse mir dort Widgets z.B. prozentual von der Breite ausrichten. Muss jedoch in jedem Widget einzeln eingestellt werden.

Eventuell wäre der Jarvis Adapter auch was für dich um dir eine Vis zu erstellen, die sieht sehr gut aus, aber wie schwierig die Einstellungen dafür sind kann ich dir nicht sagen da ich den nicht nutze.

Den Jarvis adapter findest du recht einfach über die Suche.

[TG70]

@dominik-f .. Danke dir für die interessanten Tipps.

Was hat das MDCSS für Vorteile?
Jarvis ist sehr interessant, wenn man auf die schnelle was basteln will. Ist aber doch eher ein starres System.
Mein Projekt ist doch schon "sehr " umfangreich geworden und ich bin einfach immer auf der Suche
nach Verbesserungen oder auch Vereinfachungen in der Erstellung.
Wenn man zb so eine "Material Design Icon List" verwendet erspart man sich das gebastel mit 5 eignen Buttons.
Leider ist das in einigen Dingen nicht konfigurierbar. Mir fehlt die Farbeinstellung für den Rand der einzelnen Tabs usw...

[Dominik F.]

@tg70

Ich schreib dir erstmal den Nachteil, du wirst deine Vis wahrscheinlich dann komplett neu aufbauen müssen^^ Das MDCSS setzt einen gewissen Aufbau der Views vorraus.
Als erstes eine View wo du dir alles drauf bastelts, die Card. Dann eine View wo du dir im View im View Widget alles zusammenfügst, die Cont. Dann die eigentliche Page.
Das schöne ist, der Aufbau ist immer gleich und vieles lässt sich später mit Copy & Paste übertragen.

Hier mal ein Beispiel aus meiner View, mit meinen beiden Navigationsleisten:

Die obere Navigation verändert sich je nachdem was man dort anklickt, Hier ein Beispiel:

Nutze ich die Vis am Handy, dann steht da anstatt Erdgeschoss EG als Beispiel aus Platzmangel. Die Abstände und Anordnung geschehen automatisch. Genauso wie die 3 Bausteine für die Steckdosen, die verändern sich automatisch in der Breite je nach Platz. Das ganze ist also responsive gestaltet.

Das ganze sieht dem Jarvis sehr ähnlich, dass liegt daran, dass beides auf auf der "Goggle" Optik basiert.

Jetzt also zum Vorteil. Du bist frei frei frei und hast imense Möglichkeiten der Gestaltung. MDCSS verändert ausschließlich die Optik der Widgets, du kannst sie farblich verändern, sich drehen, blinken, glühen etc lassen. Du hast zwar weiterhin das einmalige gebastel mit den Widgets, aber hast viel mehr Möglichkeiten was die Optik angeht.
Genauso kann ich mit ein paar klicks in der Vis die Farbe der Schriftart etc einstellen, hier ein Beispiel:
Nicht schön, aber selten

Die Farbe der Schrift passt sich automatisch dem Hintergrund an.

[TG70]

@dominik-f ... ist ziemlich krass! Oja wenn ich alles neu aufbaue wird das schon sehr heftig, bei der Anzahl
meiner Views.

Ich bin aktuell immer noch so in dem Button/Icon Trip. Was halt auch aufwändig ist.
Gerade bastel ich einfach wieder an der Optik und an Varianten herum. Aber immer wieder
fehlt irgendwas bei einem Widget. Suche zb ein Widget welches "Navigation" zu einer anderen Seite und zusätzlich
den on/off Status eines Adapters anzeigt.... ohne viele übereinandergelegte Widgets bauen muss... so wie ich es aktuell mache.

[Dominik F.]

@tg70

Also es gibt die Möglichkeit mit Bindings zu arbeiten, ich weiß nur nicht wie das bei den normalen Widgets funktioniert.
Damit lasse ich z.B. meine Symbole gelb werden wenn etwas angeschaltet ist, oder die Schrift rot/grün. Da ist ist natürlich auch das grüne glühen wie bei dir möglich.

Ein Binding fügt man unter CSS Klasse in der Vis ein. Hier ein Beispiel:

{val:javascript.0.SteckdosenUeberwachung.AllSocketsOff;val==true||val=="true"?'mdui-grey':'mdui-yellow'}

Heisst soviel wie, wenn der Datenpunkt auf True steht, dann mach das Widget gelb, ansonsten grau. Das grau hab ich nur eingefügt für dich, damit du siehst wo du was eintragen musst, wenn die Bedingung nicht erfüllt wird.
True ist dabei optional, da kannst du jede Bedingung einfügen die du brauchst, auch false, >100 etc.
Ich kann dir halt nur nicht sagen was du einfügen musst bei den Farben ohne das MDCSS.
Da kann dir vielleicht jemand anders helfen.

[TG70]

@dominik-f .. oja das hört sich echt cool an.
Damit könnte ich es dann echt schaffen "Navigation" und "On/Off Status" gleichzeitig zu realisieren.
Wäre Top wenn da jemand eine Idee hat ohne MDCSS.

[Dominik F.]

@tg70

Ansonsten, hab dir oben ja mal n Link zu dem MDCSS geschickt, da gibt es auch ein Demo Projekt, kannst es dir ja einfach mal anschauen, n bissel rumklicken etc.
Wenn man da einmal das Prinzip verstanden hat und den grundsätzlichen Aufbau, dann geht alles recht fix, vorallem da dort auch die Griddarstellung implementiert ist. Ich bin selber kein Programmierer und habs hinbekommen muss aber sagen, ich hab mich sehr lange dagegen gesträubt wegen dem Aufwand etc, hat sich aber gelohnt.

[TG70]

@dominik-f .. ja da sagst du was.... der Aufwand... ich habe unendlich Zeit in mein Projekt gesteckt....
aner du hast echt recht. Ja das Demo Projekt habe ich schon importiert