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

[Saschag]

Hallo zusammen,

ich hätte gerne einen raisedbutton oder flatbutton zum steuern von VT einer CCU oder zum triggern eines HM Programm.

Habe schon mit dem Hq Button gespielt aber der will nicht so richtig in die CSS (optisch)

Hat da jemand schon etwas?

Grüße

[sw23]

Hi,

ich bin ein Neuling hier.

Wie kann ich denn die Views (MD_Simple oder MD_Demo) importieren. Wenn ich auf Views gehe und importiern nutze, bekomme ich den Fehler "Cannot render view "NameDerView". Invalid settings. Projekt Import geht gar nicht, da falsches File Format und via der Suche habe ich leider auch noch nichts geeignetes gefunden.

Vielleicht hat ja wer einen Hinweis für mich

[sigi234]

@sw23

Zip einfügen, Name vergeben.

Das ist keine View sondern ein Projekt!

[sw23]

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

@sw23

Zip einfügen, Name vergeben.

Ohh, das ging ja einfach und schnell. Vielen Dank. Auf die Idee mit dem Zip hätte ich auch kommen können

Hat wunderbar geklappt.

[K_o_bold]

Hallo zusammen,

erst mal vielen Dank an Uhula für die tolle Arbeit und das kostenlose bereitstellen.
Da ich noch unerfahren mit CSS und HTML bin, benötige ich Unterstützung bei einer Fehlersuche.
Ich habe das MD_Demo Projekt importiert und bediene mich aus einzelnen Bereichen. Das funktionierte bisher auch ganz gut.
Aktuell bin ich dabei ein Flot Diagramm in meine VIS einzubinden und habe dazu die CardFlot integriert.
Mein Problem ist jetzt, dass das drop down Menü nicht funtioniert. Die einzelnen Buttons werden immer angezeigt und der im Bild gelb markierte Button hat keine Funktion.

Hat jemand eine Idee woran das liegen könnte?

[Saschag]

Hallo,

kann mir jemnad verraten wie ich den "blauen" Button (sieh Screenshort) bearbeiten kann?

Danke und Grüße

[Uhula]

@K_o_bold Hi, du musst den Schaltflächen noch mitteilen, welches Widget sie als Ziel nutzen sollen. Dieses Ziel gibst du bei der Schaltfläche unter "CSS Klasse" als "mdui-target-<dein ziel widget>" an.
Wenn dein Grafik-Widget z.B. die ID w00090 hat (siehst du rechts in den Optionen, wenn da das Widget markierst), dann gibts du in der Schaltfläche unter "CSS Klasse" den Wert "mdui-target-w00090" an.
Bei den anderen Schaltflächen zum Zoomen usw. auch.

[Uhula]

@Saschag Dieser "floating button" ist normalerweise im view "abar" eingefügt - bei mir hat er den Namen mainSTATE. Da es sich um einen floatenden Button handelt, ist er im Designer nicht leicht zu packen. Am besten den view "abar" wählen und dann über die Liste "Aktive Widgets" (links oben) das Widget "mainSTATE" wählen, dann kann man die Eigenschaften bearbeiten. Achtung: In der Liste sollte nur dieses eine Widget markiert sein.

[Saschag]

@Uhula

Super! Danke. Habe etwas suchen müssen war im „page1“ versteckt.

Danke nochmal für dein Mega tolles Projekt.

Bin etwas süchtig

[K_o_bold]

@Uhula , danke...Das hat funktioniert...

[Uhula]

Vorab-Info:
Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

[ThomasLPZ]

@Uhula
Das sieht gut aus und ich freue mich auf die Erweiterung

Danke und viele Grüße
ThomasLPZ

[lesiflo]

Cool ! Wann geht's los ?

[danyo80]

Hallo zusammen,

danke erstmal an Uhula, für diese tolle Projekt. Ich arbeite mich auch gerade ein wenig ein. Dank der guten Dokumentation aber nicht ganz so schwer.

Eine Frage habe ich mal. Ich nutze die iobroker.vis App. Wie definiere ich denn bei dem Design die Default Startseite. Ich möchte, dass immer pageMain aufgerufen wird, beim starten der App. Allerdings habe ich immer nur einen weißen Hintergrund ohne jegliche Inhalte. Das Kästchen für Default View im VIS ist nur auswählbar, wenn man eine View Größe angibt, aber bei dem Demoprojekt z.B. sind auch keine Größen definiert, dennoch startet immer die Landingpage _landing.

Habe ich vielleicht etwas übersehen?

Danke und Gruß
Danyo

[Uhula]

@danyo80 Wenn kein "Default"-View definiert wurde, wird - nach meinen Tests - immer der View genommen, der in der Sortierung ganz links/oben steht. Im Demo Projekt eben "_landing" (durch das _, ist kleiner als A). Ich habe mal eben einen View mit "__test" angelegt, in der vis-App wird dann dieser verwendet. Du müsstest also deine "pageMain" als Default markieren, oder in "_pageMain" umbenennen.
In der Vis App kann man m.E. keine Start-View direkt angeben. In Browsers in der URL schon, indem man den View Namen hinten nach einem # anhängt.
Bsp: http://x.x.x.x.:8082/vis/index.html?MD_Demo#pageStart

[danyo80]

@Uhula Hi, besten Dank.... funktioniert so.....

Gruß
danyo

[davincino]

Top, gefällt mir auch gut. Das Material Design gibt optisch einiges her und mit deiner Vorlage kommt man echt schnell zu guten Ergebnissen. Danke an dieser Stelle auch für die Weiterentwicklung. Freue mich schon auf das Update.

[foxriver76]

@Uhula ich habe auf einer Card, ein Widget, welches dynamisch die Höhe verändert, entsprechend habe ich ihm height: auto verpasst. Wenn ich nun der Card allerdings auf meinem Content View auch eine Auto Höhe festlegen möchte, erhält die Card dadurch 0px und ist nicht sichtbar. Hast du da einen guten Tipp um das Problem zu lösen?

[Uhula]

@foxriver76 Height:auto unter CSS ist mit Vorsicht zu genießen, funktioniert zwar bei reinen Text-Elementen ganz gut, hat aber ansonsten seine Grenzen; bei Cards geht es nicht, die benötigen eine feste Höhe oder eine berechnete Höhe zum Eltern-Element.
Im MD kannst du in der cont-Page dem Card-Container mit mdui-rows-n (n=1 bis 10) eine relative Höhe zuweisen. Bsp: "mdui-rows-3"

Wenn die Card immer 100% haben soll: Height=100%

Interessant ist auch, dass man in den Left/Top/Height/Width Zuweisungen "rechnen" kann um somit relative Werte anzugeben.

Bsp: Left=calc(100% - 59px); Height=calc(100% - 26px); Height=calc(50% + 20px) usw

Wichtig: "-" und "*" müssen mit Leerzeichen abgegrenzt sein, also " + ", " - "

[foxriver76]

@Uhula Danke für deine ausführliche Antwort.

Um es mal besser bildlich darzustellen, es geht um das folgende Widget, bei dem die Anzahl an Items variieren kann und somit entsprechend die Höhe, auf dem Bild sieht man den View für die Card, hier funktioniert es mit der auto Höhe prima.

So wie ich dich verstehe, kann ich es also wenn dann direkt ohne Card in den Content packen, damit die automatische Höhenanpassung läuft, ansonsten könnte ich wohl nur mit JS rumtricksen um die Höhe dynamisch zu ändern, wenn ein Item kommt/geht.