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

[darkiop]

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

@zahnheinrich

Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

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

@davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

Ganz genau, @Uhula s CSS ist das Framework für VIS selbst - die Widgets von @Scrounger passen/ergänzen das perfekt.

Zusammen mit den Neuerungen in Uhula's Version 2 können wir da wohl was sehr brauchbares Erwarten!

[Uhula]

Ja, das MD-Widget Project und mein MD-CSS Project sind zwei vollkommen verschiedene Wege, ersteres setzt auf die MD web components von Google auf (welche natürlich mit installiert werden), meins hingegen spielt mit viel CSS und ein wenig Script nur mit den originalen vis Ausgaben herum, unter Nutzung der basic/HTML Komponenten.

Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden. Die Adaption der MD web components für ioBroker von Scrounger sieht aber schon mal sehr gut aus, muss ich später mal testen (wenn denn der Tag nicht nur 24 Std hätte).

[AxelF1977]

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

Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

Ja genau, dies ständige exportieren und importieren nervt mich nämlich auch wie sau. Da die Möglichkeit besteht fest Scripte in VIS einzubinden, wie CSS, hatte ich die Hoffnung, den Code dort einzubinden und die CSS Klassen dann nutzen zu können. Und siehe da, Drag&Drop.

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

Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden.

Und genau diese Freiheiten machen es für mich perfekt. Also ist es perfekt!

[frieda99]

@Uhula
Super! ...ick freu mir

[darkiop]

@frieda99 Ebenso, @Uhula wenn du einen Beta Tester um die Feiertage brauchst ... sag bescheid

[Buddinski88]

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

@frieda99 Ebenso, @Uhula wenn du einen Beta Tester um die Feiertage brauchst ... sag bescheid

Melde mich auch, da ich eh die ganze Visualisierung überarbeiten möchte

[MaikB85]

kurze Frage: hab mal auf die aktuelle Version aktualisiert, jetzt ist bei der Top-Navigation Bar was anders. Kann ich von dem weißen Balken des aktiven Tabs die Farbe ändern? Wo kann ich das machen? Der Text vom aktiven Tab ist über die CSS-Klasse mdui-amber-acc eingefärbt aber der Balken nicht mehr, bzw. wird von einem weißen Balken überlagert.

Ach und noch was. Die Top-Navigation-Bar ist bei mir für das Smartphone zu klein. Ich kann so leider nur auf die ersten Elemente zugreifen. Hast du ne Idee wie man das anders umsetzen könnte? z.B. scrollen der tnavbar oder das die Elemente in die nächste Zeile springen. Geht sowas?

Gruß Maik

[EDIT] Für der Farbe hab ich das Attribut gefunden. In Zeile 511 des CSS Codes:

.mdui-tnav .mdui-flatbutton.ui-state-active {
  box-shadow: inset 0px -3px 0px 0px #FFCA28;
}

Da hab ich die Farbe von #FFFFFF auf #FFCA28 angepasst für "amber"

[ljmarkus]

Hallo...
gibt es eine Möglichkeit einen Timer laufen zulassen sobald man die Startseite verlassen hat nach einem Timeout (keine Touchfunktion ausgelöst hat) das er wieder auf die Startseite geht?

lg, Markus

[Pittini]

@ljmarkus Ja, da gibts nen Script für. Das ganze hat aber halt mal grundsätzlich rein gar nichts mit dem Material Design zu tun, also separaten Thread aufmachen oder die Suche bemühen.

[DJNick134]

Guten Abend zusammen,
ich habe ein Problem mit dem Material Design.
Die VIS läuft auf einem Fire HD 10 mit dem Fully Kiosk Browser.
In der Top Navigation wird bei einigen "Kategorien" ein weißer Strich neben dem "Kategorienamen" angezeigt (siehe Bild) und bei anderen nicht...
Wie bekomme ich diesen Strich weg?

Vielen Dank schon mal.

[Maverick78]

Ich habe eine kurze Frage, vielleicht habe ich es auch überlesen. Im Handbuch finde ich dazu leider nichts.
Ich nutze ein Material Design Bar Chart aus Einzelobjekten. Ich bekomme es einfach nicht hin das der Barchart nach Höhe der Werte eingefärbt wird. Außerdem hätte ich die x-Werte auch gerne Datenobjekten zugewiesen.

Ich möchte das sehr ungern auf flot und history umbauen müssen.

Jemad eine Idee

[darkiop]

@Maverick78 dann bist du hier in diesem Thread aber falsch ... hier geht es um das Material (CSS) Design von Uhula.

Du meinst sicher den hier: https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

[Maverick78]

sorry wer lesen kann ist klar im Vorteil. Ich geh in den anderen Thread. Vielleicht kann ein Moderator den Post ja löschen.

[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