[Projekt] MDCSS v2: Material Design CSS Version 2

[der-eine]

Gibt es jetzt schon einen neuen Thread wo nur mdui-Vis-Views drinnen sind? Könnte noch Anregungen brauchen.

[Dominik F.]

@der-eine

das wäre eine feine Sache....besonders bei der Vis für Heizungssteuerung bräuchte ich Anregungen

[der-eine]

Habe einen neuen Post erstellt und hoffe das ist ok? Wäre nett wenn sich ein paar beteiligen

https://forum.iobroker.net/topic/31335/material-design-style-vis-views-zur-inspiration

[mickym]

So ich habe mal wieder ein Problem - ich steh noch am Anfang - aber ich versuche doch wenigstens die Dinge nun soweit auszutesten, um ein Fehlverhalten bzw. eine Fehlkonfiguration möglichst einzugrenzen. Ich hab mir nun erst mal eingebildet - als Übersichtsseite mit so einem Grundriss - zumindest bei großen Bildschirmen - zu beginnen - vielleicht ändert sich das auch wieder.

Mir ist dabei ein Problem bei der Navigation aufgefallen - und ich dachte erst es liegt an meinen Seiten oder das ich das widget-in 8 view nicht als content Seite nutzen kann - aber das kann ich nun ausschließen.
Aufgrund des Grundrisses nutze ich die vis-Funktionalität als Startseiten nun je Auflösung verschiedene Startseiten (defaults) zu nutzen - die Folgeseiten kann ich dann ja mit dem responsive Design machen - so die Idee. Eine Layer-Struktur über das man die Widgets mit skalieren kann - habe ich irgenwie nicht gefunden - insofern scheidet das Flex damit erst mal aus.

Da in dem Demo-Projekt alles funktioniert - gehe ich davon aus, dass ich irgendwo einen Fehler mache - aber ich weiß nicht wo.

Rufe ich meine Defaultseiten beim 1. Mal aus dem Browser auf - wird der Seiteninhalt mit Hintergrundfarbe gefüllt - klickt man dann aus dem Menü heraus - ohne auf eine andere Seite navigiert zu haben, dann bleibt das Browserfenster leer.

Spoiler

Resultat ist eine leere Seite, wenn man kein Menüpunkt auswählt

Wenn man dann allerdings einmal intern wieder auf die gleiche Seite navigiert hat - dann funktioniert die Anzeige einwandfrei!!!

Ich hoffe Ihr Profis könnt helfen - sorry will auch nicht den Thread vollmüllen, können auch gerne einen anderen Thread aufmachen - aber vielleicht habt ihr ja ein paar Tipps!

Danke schon Mal!

[Uhula]

@der-eine Generell eine gute Idee, wobei es gut wäre, wenn du statt "[Material Design Style]" besser "[Material Design CSS]" verwendest, weil auch die Widgets von @Scrounger als "Material Design Style" zu verstehen sind. Wenn du in der Themen-Überschrift noch "MDCSS v2" unterbringst, wird dein Thema auch aus meinen 1.Beitrag heraus gefunden.

Ein Link auf den 1.Beitrags dieses Themas hier wäre auch gut, damit das MDCSS v2 von Interessierten gleich gefunden wird - und die von mir erstellten Views auch. Danke.

Freut mich, wenn es genutzt wird.

[Uhula]

@mickym Wenn du nur ein Widget skalieren möchtest, dann geht das über die "transform" Eigenschaft des Widgets in dem du dort "scale(f)" eingibst. f ist der Faktor 1=100% 0.5=50% 2=200% usw. Alternativ kannst du auch "mdui-scale-nnn" Klassen zuweisen. Schau mal in die CSS, dort stehen die drin.

mdui-scale-nnn

/* Skalierungen */
.mdui-scale-010 { transform: scale(0.1); transform-origin: 0% 0%; }
.mdui-scale-020 { transform: scale(0.2); transform-origin: 0% 0%; }
.mdui-scale-025 { transform: scale(0.25); transform-origin: 0% 0%; }
.mdui-scale-030 { transform: scale(0.30); transform-origin: 0% 0%; }
.mdui-scale-033 { transform: scale(0.33); transform-origin: 0% 0%; }
.mdui-scale-040 { transform: scale(0.40); transform-origin: 0% 0%; }
.mdui-scale-050 { transform: scale(0.5); transform-origin: 0% 0%; }
.mdui-scale-060 { transform: scale(0.6); transform-origin: 0% 0%; }
.mdui-scale-066 { transform: scale(0.66); transform-origin: 0% 0%; }
.mdui-scale-070 { transform: scale(0.7); transform-origin: 0% 0%; }
.mdui-scale-075 { transform: scale(0.75); transform-origin: 0% 0%; }
.mdui-scale-080 { transform: scale(0.8); transform-origin: 0% 0%; }
.mdui-scale-090 { transform: scale(0.9); transform-origin: 0% 0%; }

[der-eine]

@Uhula danke für die Hinweise hab ich angepasst. Würde mich freuen, wenn Du Dich auch an diesem Beitrag beteiligst.

[foxriver76]

Hi @Uhula,

mal wieder eine mehr oder minder blöde Frage. Ich habe einen Kamera Stream, der wird auf einem Webserver auf meinem Host in 1280x720px als mjpeg ausgegeben. Diesen versuche ich aktuell in die klassische MDCSS Logik einzubauen, sprich habe ganz normal Page->Content und auf der Card dann die Seite als iFrame eingebunden. In den meisten Browsern insbesondere Mobil, ist die Anzeige leider nicht responsiv und das iFrame bekommt Scrollbalken. Wenn ich die Seite hinter dem iFrame aufrufe, skaliert der Stream allerdings durchaus mit der Fenstergröße. Hast du hierzu eine Idee, wo das Problem liegen könnte? Einziger Browser wo es einigermaßen läuft ist Firefox auf dem Desktop (mobil auch nicht). Anbei mal zwei Bilder.
Mobil vis:

Mobil direkter Aufruf:

[Uhula]

@foxriver76 Warum nutzt du ein iFrame dafür, wenn du einen mpeg Stream hast? Ich nutze das basic-Image Widget und gebe bei "Quelle" dann die URL an

Quelle: "http://192.168.2.133/video2.mjpg?user=Viewer&pw=XXXX"

darin skaliert das Bild. Alternativ für dich möglich?

[foxriver76]

@Uhula Ah, ja.. vielen Dank - das schaut schon mal mit am Besten aus. Das hatte ich schon mal kurz und hat am Desktop net gepasst, deshalb wieder außer Betracht gezogen. Habe dann nur das Problem, dass es am Desktop etwas unschick ausschaut. Vermutlich muss ich hart die Anzahl cols rows vergeben? Aktuell hat die card im cont die folgenden CSS Klassen: mdui-card-raised mdui-cols-4-toc-20 mdui-rows-4-tor-16 mdui-order-1 jetzt passiert auf dem Desktop folgendes Verhalten:

Er nimmt sich die Cols, die er hat, jedoch nicht die Rows um das Image komplett zu zeigen. Weite und Höhe des Basic Image Widgets sind jeweils calc(100% - paar Pixel) Wenn ich das Fenster auf Smartphone Größe klein ziehe, passt es auch echt gut. Sprich das Problem ist nur noch die Höhe der Card.

[Uhula]

@foxriver76 In der page-View, dort im content-Widget hast du sicher "mdui-flex" gesetzt - damit werden die Breitenanpassungen (MM-toc-NN) aktiviert. Wenn auch die Höhen (MM-tor-NN) angepasst werden sollen, musst du im content-Widget zusätzlich "mdui-flex-stretch" setzen.

[foxriver76]

@Uhula Hmm.. das ist gesetzt.

Edit: Deja-vu .. height war vom kopieren auf der card gesetzt

[der-eine]

@Uhula bin schon den ganzen Nachmittag dran aber bekomme es einfach nicht hin...
Ich hätte gerne einen türkisen Ring der animiert einen Farbverlauf anzeigt. Er soll
die LED eines Alexa Smartspeakers imitieren. Hättest Du eine Idee wie ich das machen könnte?

AlexaLed.mov

Würde gut zur Alexatimer-View passen...

[Uhula]

@der-eine Wenn es ohne Verlauf geht, dann sollte dir dieses helfen. Einfach in die Projekt CSS kopieren, ein basic-html in die View einfügen und "mdui-loader" als CSS-Class zuweisen.

CSS

.mdui-loader {
  border:8px solid;
  border-radius:50%;
  border-color:blue aqua aqua aqua;
  animation:mdui-loader-spin 2s linear infinite;
}
  
@keyframes mdui-loader-spin{
  100%{transform:rotate(360deg)}
}

[Uhula]

Neu:

• [Vorlage] MDCSS v2: Homatic-Log in vis anzeigen

Bisher:

• [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen
• [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen
• [Vorlage] MDCSS v2: tr-064/devices-Adapter in vis anzeigen

[Pittini]

@Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

....besonders bei der Vis für Heizungssteuerung bräuchte ich Anregungen

Falls noch nicht bekannt: Hier ein Vis für Heizungssteuerung mit "Unterbau" durch MD2 von @Uhula. Vorraussetzung Du verwendest den HeatingControl Adapter.

[liv-in-sky]

ich versuche gerade meinen vis-editor zu verschönern - hat das schon jmd gemacht und hätte eine vorlage ?

das sind meine ersten schritte mit diesen css einstellungen (respekt - tolle und vor allem viel arbeit ) und evtl könnt mir jmd sagen, ob ich die farben ändern kann

roter pfeil -die schriftfarbe in schwarz
lila - das icon sichtbarer - evt. dunkelgrün
blau - den hintergrund leicht gräulich

[Dominik F.]

@Pittini

War noch nicht bekannt Vielen Dank, werde das gleich mal einbauen

[Uhula]

@liv-in-sky Ja, habe ich vor 2 Jahren schon mal gemacht. Wenn du die global.css in deiner vis als CSS/global einspielst, sieht deine vis dann so aus:

Kannst du als Basis für eigene Verschönerungen nehmen.

[liv-in-sky]

@Uhula danke - aber das habe ich schon hinbekommen - ich wollte aber die farben ändern , die in meinem bild oben mit den pfeilen gekennzeichnet sind - diese einstellungen finde ich nicht