[Projekt] Material Design CSS für ioBroker.vis

Meistertr

@Uhula mir ist aufgefallen, dass die secondary_color nicht gesetzt wird

jpgorganizer

Guten Morgen,

eine Frage, kann man in VIS eigentlich Views/Widgets etc. zur Laufzeit erstellen u/o positionieren?
Wenn ja, wie?

Grüße
jpgorganizer

Uhula

@Dominik-F Du hast zwar die Projekt-CSS mit übernommen, aber nicht den Script-Anteil, den müsstest du auch noch kopieren. (vis - Eigenschaften - Scripte)

@Meistertr Habe ich mir angesehen, fehlte zumindest bei den chips, ist demnächst korrigiert.

@jpgorganizer Zur Laufzeit erstellen, also auf dem Client, ist HTML-seitig möglich, allerdings weiß ich nicht, wie ioBroker die Events verwaltet. Und Buttons ohne Click-Event sind sinnfrei.
Eine Repositionierung hingegen sollte funktionieren, "einfach" via Script die entsprechenden HTML-Teile des HTML-Element des Widgets in das neue Parent-Element verschieben. Ist nur nicht leicht, den richtigen Zeitpunkt dafür zu finden (onLoaded? MutateObserver auf #vis-container?)

BoehserWolf

@Uhula
Evtl. hast du eine Idee wie man ein Modales Popup mit einem iframe mit deinem v1 Design umsetzen könnte? Konkret möchte ich Grafana Charts auf ein Icon legen, welches als Zusatzinformation Fullscreen aufpopt.

Ich habe mich bereits an den üblichen Verdächtigen wie bspw. "container - Icon - view in jqui Dialog" versucht. Diese haben jedoch das "Problem", dass ich in jedem Fall eine feste Höhe und Breite mitgeben muss. Das Konzept widerspricht leider dem Aufbau eines Responsive Design, was ich mit deiner Vorlage konsequent umgesetzt habe.

Ich habe mir die Beispiele in deiner Doku zu v1 zum Thema Images und Flot Charts angesehen. Das würde prinzipiell funktionieren. Jedoch sind die Charts relativ Ressourcen-hungrig, so dass die Ladezeit unnötig erhöht wird.

Daher stelle ich mir eine Mischung aus der Umsetzung zu bspw. den Flot-Charts und einem Modalen Fullscreen Popup bei Click auf ein Icon vor.

Ich wäre über einen Tip sehr dankbar.

jpgorganizer

@Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

@jpgorganizer Zur Laufzeit erstellen, also auf dem Client, ist HTML-seitig möglich, allerdings weiß ich nicht, wie ioBroker die Events verwaltet. Und Buttons ohne Click-Event sind sinnfrei.
Eine Repositionierung hingegen sollte funktionieren, "einfach" via Script die entsprechenden HTML-Teile des HTML-Element des Widgets in das neue Parent-Element verschieben. Ist nur nicht leicht, den richtigen Zeitpunkt dafür zu finden (onLoaded? MutateObserver auf #vis-container?)

Ok, das geht wohl nicht so einfach. Das vertage ich mal auf später ... vielleicht. Muss erst mal die offenen Baustellen schließen.

@Uhula Danke für deinen super Support und für dein MD. Klasse. Ich habe lange gesucht, um etwas zu finden, mit dem ich für meine IoT Sachen eine Oberfläche für alle meine Geräte machen kann. Das wird richtig gut.

VG jpgorganizer

Uhula

@BoehserWolf Da muss ich etwas ausholen, denn das geht nicht ganz so einfach. Das genante Widget ist schon mal korrekt. Die volle Breite ist damit schon direkt zu erreichen, einfach bei Dialogbreite 100% eingeben. Klappt aber nicht bei der Dialoghöhe ... das liegt an der Umsetzung im vis, welche beim ui-dialog Elemente eine "height:auto" setzt, da wirkt sich eine "100%" Angabe im Child-Element nicht aus (0px).
Also muss man das "height:auto" im ui-dialog Element auf z.B. "height:100%;" ändern.

Schritt 1: Neuanlage eines CSS Styles

.mdui-dialog-fullheight {
   height: 100% !important;   
}
.mdui-dialog-fullheight .ui-dialog-content {
   min-height: calc(100% - 32px) !important;   
}

Nun bringt es nichts, dem Widget diese CCS Class zuzuweisen, denn es soll ja nicht 100% Höhe haben, sondern der Dialog. Im MD CSS habe ich aber eine solche Möglichkeit damals auch schon eingebaut, also die optionale Angabe von CSS Classes für den nachgeladenen Dialog. Mangels eigenem Feld nutze ich dafür die Titel-Eigenschaft des Dialogs und parse dort die Angaben raus. Dort musst du :

Mein Titeltext|class=mdui-dialog-fullheight

eingeben (Mein Titeltext natürlich frei). Für die Dialoghöhe kannst irgendwas angeben. Die Dialogbreite steht dir frei, 100% wären alles.

Alternativ (für fullscreen)

CSS anlegen:

.mdui-dialog-fullscreen {
   height: calc(100% - 16px) !important;   
   width: calc(100% - 16px) !important;   
   margin:8px;
}
.mdui-dialog-fullscreen .ui-dialog-content {
   min-height: calc(100% - 32px) !important;   
   min-width: 100% !important;   
}

und nutzen:

Ich habe beide CSS Classes mit in die MD CSS 2.0 aufgenommen; fullscreen-Dialoge sind sinnvoll.

Dominik F.

@Uhula

Schande über mein Haupt -.- Jetzt funktioniert es^^ Vielen Dank

Meistertr

es ist echt hamma. ein raum ist schonmal umgestellt, die anderen sollten dann schneller gehen

BoehserWolf

@Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

Ich habe beide CSS Classes mit in die MD CSS 2.0 aufgenommen; fullscreen-Dialoge sind sinnvoll.

Super, vielen Dank für die Umsetzung!

Ich hadere leider etwas mit der Umsetzung bei mir - sowohl mit fullheight als auch mit fullscreen. Um Fehler in meinem Projekt auszuschließen habe ich in deinem Demo Projekt v1 getestet. Leider bei mir ohne Erfolg.

Test Umsetzung in view cardDemoButtons mit fullscreen:

CSS erweitert:

Die CSS Klassen habe ich oben und unten getestet, scheint aber keinen Unterschied zu machen.

Ergebnis:

Dein v1 Projekt habe ich mir am 07.03.2018 vom github gezogen.
Hast du da evtl. noch eine Idee was falsch läuft?

Uhula

Im GitHub liegen aktualiserte Daten, V2.0.2, auf Wunsch nun auch separat in einzelnen CSS/JS Dateien.

V2.0.2 29.01.2020

mdui-center/-h/-v mit !important versehen damit die widgeteigenen Style zuweisungen überschrieben werden
mdui-flex: funktioniert nun auch mit contXXX in Widget view-8
mdui-label, mdui-value, mdui-title, mdui-subtitle: es wurde die vertikale Zentrierung mit display:flex entfernt damit die direkten Wigdet font- zuweisungen funktionieren. Das Zentrieren kann mit mdui-center erreicht werden
Öffnen/Schließen der fixierten lnav ist nun animation-iteration-count
mdui-navitem: im display:flex das !important entfernt, damit die Media Query mit mdui-show480 funktioniert
mdui-dialog-fullheight und mdui-dialog-fullscreen zur Nutzung in Dialogen hinzugefügt

@BoehserWolf Da kann ich mir nur vorstellen, dass das Script nicht korrekt ausgeführt wird. Ich habe natürlich mit V2 getestet. Wenn du mir der Projekt als ZIP gibst, kann ich mal rein schauen.

@Meistertr Respekt, du hast beherrschst MD CSS 2.0 ja (fast) besser als ich

eMd

Ich habe noch die alte Version, kann ich auch nur den Code übernehmen und dann sehen was doof aussieht und bereinigen oder muss ich ein komplett neues Projekt anlegen?

Uhula

@eMd Habe ich hier im Thema schon aufgeführt, du kannst es übernehmen (aber in einer Kopie deines Originals), und dann :

Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

MD CSS V1.x -> MD CSS V2.0

in den cardXXX

mdui-Classes anpassen, welche umbenannt wurden (Bsp: mdui-raisedbutton -> mdui-button-raised, mdui-flatbutton -> mdui-button). Die Umbenennungen habe ich in den Änderungen zur V2.0 im Post genannt

die Position der Widgets so anpassen, dass sie links und oben mind. 16 Px frei lassen

in den contXXX

mdui-Classes anpassen, welche umbenannt wurden (Bsp: mdui-card -> mdui-card-raised, mdui-tile -> mdui-card; oder mdui-card-outlined nutzen). Die Umbenennungen habe ich in den Änderungen zur V2.0 im Post genannt

[optional] haben die view-in-view cardXXX mit mdui-cols-<n> u/o mdui-rows-<n> Angaben, dann bezogen sich diese bisher auf ein 156er Raster, jetzt ist es ein 80er Raster. D.h. die <n> müssen angepasst werden, i.d.R. verdoppelt

[optional] die view-in-view cardXXX mit mdui-order-<n> versehen, wenn man die Reihenfolge selbst festlegen möchte

[optional] view-in-view cardXXX mit mdui-cols-<n>-toc-<m> versehen, wenn man mit einer automatischen Breitenanpassung der cardXXX arbeiten möchten

[optional] contXXX die view-in-view cardXXX mit mdui-rows-<n>-tor-<m> versehen, wenn man mit einer automatischen Höhenanpassung der cardXXX arbeiten möchten

abar

ein HTML-Widget einfügen und mdui-config zuweisen. Inhalt wie unter den Änderungen zur V2.0 im Post beschrieben setzen (für die Farben)

tnav, bnav

Widgets als mdui-navitem kennzeichnen

[optional] mit mdui-order-<n> für die Sortierung versehen

[optional] wenn die navitems versteckt werden sollen, wenn die lnav fixiert angezeigt wird, dann die Widgets im tnav um mdui-lnav-fixed-open-hide ergänzen

lnav, rnav

Widgets als mdui-navitem kennzeichnen

[optional] mit mdui-order-<n> für die Sortierung versehen

width auf 100% setzen

in den pageXXX

[optional] Anpassung an 80er Grid: abar.Height auf 40 setzen; tnav.Top auf 40 setzen, tnav.Height auf 40 setzen; content.Top auf 80 setzen, content.Height auf calc(100% - 80px) setzen

tnav, lnav und rnav um mdui-flex ergänzen

content um mdui-flex ergänzen

[optional] wenn eine automatische Höhenanpassung der cardXXX mit mdui-rows-<n>-tor-<m> im contXXX zugewiesen wurde, dann im pageXXX den content um mdui-flex-stretch erweitern

Meistertr

@Uhula ich kenn mich mit frontend eigentlich nicht aus, bin nur durch das Projekt an das thema rangeführt worden. Ich kann nur code verstehen und anpassen

sigi234

@Meistertr

Ich würde mich über einen Export sehr freuen.

jpgorganizer

Hi,

ich steh auf dem Schlauch. Ich kann nicht mal mehr einen Button definieren.
Ich möchte nur einen Button mit einem Bild drauf der mir wenn ich drücke einen bestimmten Wert (eine 0, alternativ auch "false") in einen DP schreibt.

Das macht mein Button auch, nur er blendet ein Popup ein mit dem Hinweis: "error: view not found"

hier mein Button:

Tipps?

Grüße jpgorganizer
(der, der sich gaaaaanz langsam an Frontend gewöhnt)

BoehserWolf

@Uhula
Das Projekt als zip: 2020-01-29-MD_Demo_20180307.zip
Der jqui container button view ist im View cardDemoButtons zu finden.

Danke!

jpgorganizer

@Uhula
hier nicht mein dringendstes Thema, aber bevor ich es vergesse:

ich habe eine Valuelist

die Anzeige sieht aus meiner Sicht etwas komisch aus, so als ob zwei Dreiecke übereinander liegen.
Bild vom Android Phone, stark vergrößert

Bug oder Feature?

Grüße
jpgorganizer

foxriver76

@Uhula
Top, gute Änderungen. Hast du das mit der Textfarbe bei den Filtern bei z. B. Flotgrafiken noch auf dem Schirm?

mdui-state war früher mal vertikal aligned, ist das mit Absicht weg? Bzw. hat mdui-state keinen sichtbaren Einfluss mehr auf das Aussehen. War früher mal ähnlich zu mdui-value.

jpgorganizer

@jpgorganizer said in [Projekt] Material Design CSS für ioBroker.vis:

ich habe einen Workaround ....

als Widget ein jqui Button state, aber das hat, ein Darstellungsproblem. Da werden aussen rum 1px breite Ränder nach dem Anklicken sichtbar. Mich stört es gerade nicht, denn das Widget wird ausgeblendet. Nach dem Wiedereinblenden sind die Ränder weg. Kommen aber wieder!

Ränder nur auf dem Handy, Firefox auf Windows macht kein Problem

Grüße
jpgorganizer

Uhula

@jpgorganizer Für deinen ganz einfachen Button nutzt du das falsches Widget, nämlich eines, was einen State setzen kann UND einen View nachlädt. Nimm eines, welches nur einen State setzen kann. Was den 1px Rahmen betrifft, das CSS hat keine browserspezifischen Abfragen - das kann ich nicht leisten. Mag sein, dass es sich je Browser teilweise unterschiedlich auswirkt.

@foxriver76 Jupp, beim mdui-state ist der bold Font verloren gegangen, demnächst wieder da. Die vertikale Zentrierung ist bewusst weg, sonst funktionieren left/right Aligns des Textinhalts nicht (hat mit display:flex zu tun). Kann aber individuell mit mdui-ceneter-v bzw. mdui-center gesetzt werden (ab V2.0.3).

NEWS

[Projekt] Material Design CSS für ioBroker.vis

Support us

674
Online

31.8k
Users

79.9k
Topics

1.3m
Posts

NEWS

[Projekt] Material Design CSS für ioBroker.vis

Support us

674Online

31.8kUsers

79.9kTopics

1.3mPosts

674
Online

31.8k
Users

79.9k
Topics

1.3m
Posts