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?
@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.
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?
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.
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
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!):
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.
Wenn ich alles fertig habe, erstelle ein neues Thema und verlinke dort alles rein.
Änderungen V2.0
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
@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.
@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ß.
@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.
sorry wer lesen kann ist klar im Vorteil. Ich geh in den anderen Thread. Vielleicht kann ein Moderator den Post ja löschen.
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.
