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

[Archimedeus A]

Hi, ich komme ein wenig voran und bin schon ein echter Fan. Frage: Wie ändere ich die Reihenfolge von Cards/Tiles? mdui-float ordnet die ja so an, wie es passt. Es schein so zu sein, dass die Reihenfolge des Anlegens darüber entscheidet. Kann ich die Reihenfolge ändern? Einfach mit der Maus verschieben geht nicht. Oder liegts am nur am Browser?

[darkiop]

@Archimedeus-A sagte in [Projekt] Material Design CSS für ioBroker.vis:

Es schein so zu sein, dass die Reihenfolge des Anlegens darüber entscheidet. Kann ich die Reihenfolge ändern?

Du kannst die Cards in VIS Edit in der Content View ausschneiden und wieder einfügen, so kannst du eine andere Reihenfolge aufbauen

[Archimedeus A]

Funzt! Danke

[Archimedeus A]

@darkiop
Wo wir schon dabei sind: Gibtv es ein Container, der als Button funktioniert oder ein Navibutton, der eine View enthält? Hab es "gelöst" in dem ich in den Content-Co!ntainer einen unsichtbaren Navi-Button über alles gelegt habe. Ist aber unschön (weil: muss dann beim Editieren immer die Widgets über Menü selektieren).
So sieht es gerade aus (responsive!):

[darkiop]

@Archimedeus-A Schau dir mal https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x an.

[Archimedeus A]

@darkiop
Sieht gut aus, ich werds mal ausprobieren

[Uhula]

Material Design CSS V2.0

Its done ! (fast, Doku usw. fehlt noch)

Wer gerne reinschauen möchte, was mit dem Material Design CSS V2.0 so geht, der kann sich dieses als MP4-Film (ca. 1 min, 63 MByte) ansehen, oder sich das neue Demo-Projekt als ZIP herunter laden. Beim Import muss dieses als MD_Demo benannt werden, da sich in der CSS Datei eine Pfadangabe für den Icon-Font darauf bezieht, wählt man einen anderen Projekt-Namen, muss der Pfad in der CSS angepasst werden.

Und wer dann noch Freude dran hat, kann sich weiter unten die Änderungen durchlesen ... es hat sich sehr viel verändert. Zwar ist das Prinzip mit card/aber/lnav/content usw. erhalten geblieben, trotzdem müssen in eigenen Projekten deutliche Anpassungen an den Widgets vorgenommen werden. Mag sich aber für den einen oder anderen lohnen.

MD_Demo V2 als MP4 Film (Download, 1:08 min, 62 MByte)

MD_Demo V2 Projekt (als MD_Demo aufnehmen)

Wenn ich alles fertig habe, erstelle ein neues Thema und verlinke dort alles rein.

Änderungen V2.0

Spoiler

• Umstellung auf helles Thema
  Das komplette Design wurde auf das helle Thema (light) umgesetzt und passt sich
  flexibel an die jeweils gewählten Hintergrundfarben für abra, tnav, lnav, rnav
  und content an in dem es automatisch eine weiße bzw. schwarze Schrift- und
  Stiftfarbe wählt. Somit ist das dunkle Schema zur Laufzeit einstellbar.
  Siehe auch "Symbole, Icons"!

• Konfiguration
  Die Farben werden nicht mehr direkt den abra, tnav, lnav, rnav und content
  -Elementen zugeordnet, sondern es wird z.B. im abar ein HTML-Element mit der
  CSS-Class mdui-config ausgewertet, in welchem alle Farbangaben zentral
  verzeichnet sind.
  Das HTML-Element muss folgenden Aufbau haben:
  "primary_color":"<farbe>",
  "lnav_color":"<farbe>",
  "rnav_color":"<farbe>",
  "secondary_color":"<farbe>",
  "content_color":"<farbe>",
  "lnav_fixed_width":"0..9999",
  "lnav_fixed_open":"true"
  Für <farbe> können die Werte:
  red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green,
  lightgreen, lime, yellow, amber, orange, deeporange, brown, grey,
  darkgrey, bluegrey, white, black
  sowie jede Farbangabe im Format #rrggbb (Bsp: #8050FF) verwendet werden.
  In "lnav_fixed_width" wird die Breite in Pixel angegeben, ab der die lnav
  links permanent angezeigt werden soll.
  In "lnav_fixed_open" wird über true bzw. false festgelegt, ob die lnav beim
  Seitenwechsel geöffnet dargestellt werden soll (wenn die Breite ausreicht)

  Natürlich kann in allen Angaben auch von der binding-Fähigkeit von ioBroker
  Gebrauch gemacht werden um die Angaben über vis-States zu setzen und somit
  z.B. tagsüber ein helles Design und nachts ein dunkles Design zu verwenden.
  Beispiel: "primary_color":"{vis.0.md.primary_color}" verwendet dann die akutell in
  vis.0.md.primary_color eingestellte Farbe

• mdui-flex (Responsive Design)
  Die Handhabung des responsive design, also die Anpassung des Inhalts an
  die Breite der Darstellung, wurde komplett geändert. Statt bisher mit
  dem float-Attribut zu arbeiten, wird nun flex verwendet. Dieses ist
  deutlich mächtiger und bietet u.a. die Möglichkeit die Reihenfolge der
  Child-Elemente unabhängig von ihrem Auftreten im HTML über die CSS-Class
  mdui-order-<nn> (<nn>=1..99) zu setzen. Damit entfällt das unständliche
  Kopieren/Einfügen von Elementen im Designer!
  Im Demo-Projekt wird flex für tnav, lnav, rnav und den content verwendet.
  Die mdui-flex CSS-Class wird dem Containerelement (z.B. mdui-content) zugeordnet,
  nicht den Child-Elementen (z.B. den mdui-card).

• mdui-cols-<n>, mdui-rows-<n>
  Die Größenangaben der Cards mit mdui-cols-<n> (Breite) und mdui-rows-<n> (Höhe)
  basiert nun auf einem 80 Pixel Raster mit <n>=1-24 (bisher 156 Pixel Raster).
  Damit ist eine feinere Größenzuweisung möglich.
  Weiterhin kann nun jeweils auch eine maximale Größe mit angegeben werden. Dazu
  muss nur mdui-cols-<n> zu mdui-cols-<n>-toc-<m> ergänzt werden <m>=1-24, bzw.
  mdui-rows-<n> zu mdui-rows-<n>-tor-<m>.
  Beispiel: mdui-cols-4-toc-8 führt dazu, dass das Card-Element je nach Platz
  320 bis 640 Pixel breit dargestellt wird.
  (wenn der Container "mdui-content" die CSS-Class mdui-flex besitzt)
  Beispiel: mdui-rows-4-tor-8 führt dazu, dass das Card-Element je nach Platz
  320 bis 640 Pixel hoch dargestellt wird
  (wenn der Container "mdui-content" die CSS-Class mdui-flex-stretch besitzt)

• Cards
  Die Darstellung der Cards wurde verändert. Sie fügen nun keine margins mehr hinzu,
  sondern stellen die Vard-Views so dar, wie sie designt wurden. Es empfiehlt sich
  in den Card-Views 16 Px linke und oben frei zu lassen.
  mdui-card : Darstellung als flache Card, mit 2px Außen-, 14px Innenabstand (früher: mdui-tile)
  mdui-card-raised : Darstellung mit Schatten, mit 8px Außen-, 8px Innenabstand (früher: mdui-card)
  mdui-card-outlined: Darstellung mit Rahmen, mit 8px Außen-, 8px Innenabstand

• Buttons
  Hier wurden die CSS-Class namentlich verändert und vereinheitlicht:
  mdui-flatbutton -> mdui-button
  mdui-raisedbutton -> mdui-button-raised
  mdui-button-outlined: NEU Stellt Buttons mit einer Rahmenlinie dar, über
  mdui-<colorname>-ol kann die Rahmenfarbe gesetzt werden. Vorgabe: grau

• Symbole, Icons
  Wenn man mit der Umschaltung heller und dunkler Schema arbeiten möchte, muss
  man auch dafür sorgen, dass Symbole und Icons z.B. von schwar auf weiß wechseln.
  Da dieses mit diskreten Bilddateien (img) nicht per CSS lösbar ist, können nun die
  Material Design Icons genutzt werden.
  Link: https://material.io/resources/icons/?style=baseline
  Hierzu werden alle Icons als Font in der CSS-Datei eingebunden und können dann in
  jeder HTML Eingabe als Icon durch <i class="material-icons">iconname</i> genutzt werden.
  Bsp:<i class="material-icons">home</i>
  Dadruch werden die Icons wie normaler Text behandelt und passen sich sowohl in der
  Größe (font-size) als auch in der Farbe (color) an!
  Wichtig: Die font-Dateien (Material-Icons-...) liegen im Demo-Projektordner
  (Bsp: /vis.0/MD_Demo/) im Images-Ordner. Wird ein eigenes Projekt verwendet, müssen
  die font-Dateien kopiert werden und die Pfadangaben in der CSS-Datei müssen
  für @font-face {} angepasst werden!!!

• Slider
  Die Dartellung der Slider wurde erweitert, so ist nun sowohl die segmentierte
  Darstellung als auch die Anzeige des aktuellen Wertes während des slidens möglich.
  mdui-segment-<n> : Anzeige mit entspr. vielen Segmenten <n>=5,10,20,25,33,50
  mdui-show-hint : Während des Bedienens wird der aktuelle Wert angezeigt (0-100)
  mdui-range-<from>-<to> : Da kein Zugriff auf den aktuellen Wert im vis möglich ist
  und nur die Info 0 bis 100% im Slider zur Verfügung steht, kann über die mdui-range
  Angabe ein Sliderbereich für mdui-show-hint festgelegt werden. 0%=<from> 100%=<to>
  Beispiel: mdui-range-0-255 für die Festlegung eines Rot-Wertes

• Tabellen
  Die Tabellen CSS-Classes haben sich ein wenig verändert, ebenso die Angabe der Optionen.
  Weiterhin wurde die Darstellung an die flat/raised/outlined Darstellung der Cards
  angepasst.
  mdui-table: Darstellung der Tabelle in normaler Tabellenform
  mdui-table-list : Darstellung in Zeilen (rows) Listenform
  mdui-table-raised : Darstellung der Zeilen (rows) als Cards, erhaben, mit Schatten
  mdui-table-outlined : Darstellung der Zeilen (rows) als Cards, mit Rahmen
  Die Optionen werden nun in einer seperaten CSS-Class angegeben:
  mdui-table-opt-[-r<responsewidth>][-w<colwidth>][-c<colcount>][-l]

• Diverses

  • box-sizing wird global auf box-model gesetzt damit die width und height
    Berechnungen besser passen. Hinweis: Größenangaben werden nun inklusive
    Border+Padding interpretiert.
  • Werden mdui-toggle 100% Buttons in der lnav bzw. rnav verwendet um strukturierte
    Menüs zu erzeugen, so zeigen sie nun bereits einen Pfeil nach unten bzw.
    nach oben am rechten Rand automatisch an

• Neue bzw. geänderte CSS Classes

  • mdui-center: Zentriert die Ausgabe im Element horizontal und vertikal
  • mdui-center-h: Zentriert die Ausgabe im Element horizontal
  • mdui-center-v: Zentriert die Ausgabe im Element vertikal
  • mdui-cols-<n>-toc-<m>: Über "-toc-<m>" kann nun eine max. Breite angegeben
    werden, mit <m>=1 bis 24
  • mdui-divider : zeichnet eine dünne horizontale Linie, kann z.B. in lnav
    verwendet werden, passt sich dem light-dark-Thema an
  • mdui-expand[-<height>]: Kann einer Schaltfläche zugewiesen werden um ein Element
    zu kollabieren/expandieren. Normalerweise also innerhalb eines Views, der als
    Card verwendet werden soll. Sinnvoll für Phone-Screens.
    In [-<height>] kann optional eine Zielhöhe in px im collabierten Zustand
    angegeben werden, wenn nicht, werden 64px angenommen
  • mdui-flex : Wird einem Container (view-in-view) zugeordnet und führt dazu,
    dass enthaltene Elemente automatisch angeordnet werden und je nach deren
    mdui-cols- Zuweisungen sich in der Breite anpassen
  • mdui-flex-stretch : Wird einem Container (view-in-view) zugeordnet und
    führt dazu, dass enthaltene Elemente je nach mdui-rows- Zuweisungen
    sich in der Höhe anpassen
  • mdui-noflex : Das Element wird im mdui-flex nicht berücksichtigt
  • mdui-h-flow bzw. mdui-v-flow: umbenannt zu mdui-flow, da man h/v flow durch
    das Drehen mit mdui-rotate-<grad> erreichen kann
  • mdui-input mdui-center-horizontal umbenannt zu mdui-input mdui-center-h
  • mdui-order-N: Festlegung der Reihenfolge dwer Elemente in flex-Darstellung,
    wird zur Designzeit im ElElement mit angezeigt
  • mdui-rotate-<grad> : Dreht ein Element um <grad>°. 0° entspricht der horizontalen
    Darstellung. 15° Schritte sind möglich.
    <grad>=000,015,030,045,060,075,090,105,120,135,150,165,180,195,210,225,
    240,255,270,285,300,315,330,345
  • mdui-rotateX-cw, mdui-rotateX-ccw : Lässt ein Element um seine X-Achse
    rotieren, die Rotationsgeschwindigkeit kann über mdui-slowest, mdui-slower,
    mdui-slow, ..., mdui-fast, mdui-faster, mdui-fastest festgelegt werden.
    cw=im Uhrzeigersinn, ccw=gegen den Uhrzeigersinn
  • mdui-rotateY-cw, mdui-rotateY-ccw : Lässt ein Element um seine Y-Achse
    rotieren, die Rotationsgeschwindigkeit kann über mdui-slowest, mdui-slower,
    mdui-slow, ..., mdui-fast, mdui-faster, mdui-fastest festgelegt werden.
    cw=im Uhrzeigersinn, ccw=gegen den Uhrzeigersinn
  • mdui-rotateZ-cw, mdui-rotateZ-ccw : Lässt ein Element um seine Z-Achse
    rotieren, die Rotationsgeschwindigkeit kann über mdui-slowest, mdui-slower,
    mdui-slow, ..., mdui-fast, mdui-faster, mdui-fastest festgelegt werden.
    cw=im Uhrzeigersinn, ccw=gegen den Uhrzeigersinn
  • mdui-rows-<n>-tor-<m>: Über "-tor-<m>" kann nun eine max. Höhe angegeben
    werden, mit <m>=1 bis 24
  • .mdui-scale-<n> : Dient der Skalierung des Elements/Widgets.
    Mit <n>=010,020,025,030,033,040,050,060,066,070,075,080,090

[zahnheinrich]

@Uhula
Freu mich schon wie Bolle

[sigi234]

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

MD_DemoV2 Projekt

Import Funktioniert nicht.
Edit:
Via Github geht es.

[Meistertr]

gerade mal reingeschaut und ich bin beeindruckt und begeistert!!! hamma projekt

[lesiflo]

@sigi234 Klappt bei mir ohne Probleme

[kmxak]

@Uhula moin, mal eine Frage kann man auch von v1 updaten? Oder wäre das Zuviel Aufwand? Denke aber du hast das Grundgerüst so arg umgebaut das ich leider neu aufbauen muss.

Klasse Arbeit die du da leistest! Danke dafür!

@sigi234 bei mir geht der Import auch. Allerdings gehen manche Funktionen nicht wie im Video zu sehen.

[lesiflo]

@kmxak Das befürchte ich auch. Ich habe mal mein altes Projekt genommen und das neue CSS und Script reinkopiert. Danach sah meine Vis recht "unschön" aus. Kann man zwar alles wieder hinbiegen, der Aufwand ist mit aber zu groß.

[darkiop]

@Uhula Na Klasse, jetzt geht dafür das halbe Wochenende drauf Danke dafür! Freu mich drauf - das Video macht lust auf mehr! Jetzt muss man entscheiden an welcher Stelle man auf dein CSS baut und wo mein Scroungers Widgets einsetzt.

[Uhula]

@kmxak ja, man kann von V1 auf V2 updaten, man muss nicht neu beginnen. An der Struktur hat sich ja nichts verändert, man muss "nur" die CSS-Class Zuweisungen und left/top Angaben anpassen. Die ersten Änderungen werden sperrig sein, da man nicht weiß was und wo - aber es wird mit der Zeit leichter. Der Aufwand ist aber nicht zu unterschätzen.

Ich sag es mal so: Wenn man mit seiner vis bisher zufrieden war, muss man auch nichts umstellen.

Ein Tipp dazu: Um nicht alle mdui-raisedbutton einzeln zu mdui-button-raised umbenennen zu müssen, habe ich direkt die Projekt JSON Datei bearbeitet und in einem Editor mit "replace" gearbeitet.

[kmxak]

@Uhula ja top... genauso mache ich das auch immer. Wenn es wirklich nur die CSS Klassen sind die man ändern muss geht es ja eigentlich. Kannst du noch eine Info geben was genau geändert werden muss das wäre top.

[Pittini]

@Uhula Schaut sehr gut aus, da hast nen super Job gemacht. Ich verwende das alte ja recht intensiv bei rund 100 Seiten und werde erst mal warten bis auch die Doku steht. Siehst Du bei der neuen Version die Möglichkeit die "Flot Skalierung" auch mit Grafana hinzukriegen (ich nutze Flot nicht wegen häßlich)?

[Uhula]

@Pittini Mit Grafana kann ich so nichts anfangen, kenne ich nicht. Wie wird es eingebunden? Ist es ein ioBroker Adapter? Wird es im vis via iFrame-URL eingebunden? Wenn ja, sind in der URL die Zeitangaben zugänglich? Wenn ja, dann kann ich die wie die flots bearbeiten.

@kmxak "Ganz genau" kann ich das nicht angeben, denn das ist ja abhängig von der Art und Weise, wie MD V1.x genutzt wurde. Generell gilt aber:

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

Ich werde beim Schreiben der Doku das mit aufnehmen. Demnächst.

[foxriver76]

@Uhula Wieso packst du eigentlich das JS-File nicht mal eigenständig auf GitHub. Sehe ich das richtig, dass ich immer erst das Projekt importieren muss (bzw. aus dem File ziehen, dann jedoch noch schick formatieren)?
Ebenfalls kann man dann in Zukunft die Änderungen auch auf GitHub auf Code-Ebene nachvollziehen.

[Pittini]

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

Mit Grafana kann ich so nichts anfangen, kenne ich nicht. Wie wird es eingebunden? Ist es ein ioBroker Adapter? Wird es im vis via iFrame-URL eingebunden? Wenn ja, sind in der URL die Zeitangaben zugänglich? Wenn ja, dann kann ich die wie die flots bearbeiten.

Sorry, ich nahm an Du kennst Grafana. Es wird genauso eingebunden wie Flot, also via Iframe. Nen Adapter gibts dazu nicht, das Ding hat ne Weboberfläche um die Grafiken zu erstellen. Is halt viel mächtiger als Flot, kann auch Tortengrafiken usw. Die Befehlszeile für das Iframe sieht so aus:

http://192.168.2.15:3000/d-solo/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&panelId=2" width="450" height="200" frameborder="0"

Und wenn ich mir das so anschau kann ich fast meine Frage selber beantworten, geht nicht weil die Zeiten nicht drin sind. Und aussehen tut das ganze so z.B.