[Projekt] MDCSS v2: Material Design CSS Version 2

[Uhula]

@Dominik-F Schau dir mal im MD_Demo die Bargraphs an, die können ihren Hintergrund wertabhängig einfärben. Für den Wert selbst musst du noch ein basic-String drüberlegen.

Beispiel (unterer Balken)

@SMARTY-ML Das wird ohne serverseitiges Script nicht gehen, da das input-Element wohl immer einen String im vis liefert, auch wenn der type=number ist. ALso nen string-State anlegen und via Serverscript und on-Event als Number in den eigentlichen State schreiben. Sorry, da kann ich nichts machen.

@foxriver76 Hast du den Auswahl-Widgets neben "mdui-timespan..." auch "mdui-menuitem" zugewiesen?

@bilberry flot/onload muss ich mir mal ansehen, muss dazu aber erst wieder flot einrichten (habe ich schon komplett durch Grafana ersetzt).

[der-eine]

@Uhula könntest Du das mit dem Basic-HTML, Script und iCal bitte nochmal erklären? Das wäre super!

[foxriver76]

@Uhula Ne, war nur mdui-timespan-1440 mdui-target-w00019 mdui-hide habe es nun um mdui-menuitem mdui-center erweitert, dann passt es, danke.

[Pittini]

@Uhula Danke für die neue Version, es sind jetzt tatsächlich alle alten Fehler weg. lnav und rnav haben jetzt korrekte Farbe, der Configdialog sieht aus wie er soll. Allerdings gibts nen neuen Fehler, die bnav wurde komplett weiss, die Buttons kann man aber "blind" bedienen.

Interessanter weiterer Effekt, schalte ich die Seite in Vollbild, wird die bnav von weiss zu gelb mit weisser Schrift.

Dieses Verhalten ist identisch bei einer frisch importierten MD_Demo.zip (hab ausschliesslich zum Vergleich den Vollbildbutton eingesetzt, sonst außer Farbeinstellung nix geändert.

[Dominik F.]

@Pittini

könntest du mir vielleicht bei Grafana helfen? Ich bekomme zwar die Grafik angezeigt, muss jedoch immer einen Doppelklick oder Vollbild auswählen, damit die Grafik angezeigt wird. Auch klappen bei mir die Einstellungen für die Zeitspanne und so nicht einstellen. Kannst du mir erklären wie du das gemacht hast?

[Uhula]

@Pittini Kleiner Fehler, leicht zu beheben, "background" statt "color":
.mdui-bnav {
background:var(--bnav-background) !important;
z-index:98;
border:none;
box-shadow:0px -2px 4px -1px rgba(0,0,0,0.45);
transition: left 0.25s ease;
}

@der-eine Ich habe noch nichts mit iCal erklärt - oder kann mich zumindest daran nicht erinnern. Worum geht es? Termine aus dem Kalender via Script in einen HTML-State als table zu setzen um ihn als mdui-table anzuzeigen?

Wenn ja, dann

Ablauf, Serverseitiges Javascript

• das Script Legt einen HTML-State unter javascript.X.ical.0.HTML an (X=Script-Instanz)
• es setzt ein on-Event auf den State ical.0.Data.Table
• wenn sich der Wert dort verändert, wird das Script ausgeführt und dieses bildet aus dem ical.0.Data.Table Inhalt dann den javascript.X.ical.0.HTML Inhalt
• der javascript.X.ical.0.HTML Inhalt kann als HTML Wert für eine mdui-table genutzt werden, Widget: "basic-string (unexcaped)"

var idCal = "ical.0";
var idCalTrigger   = idCal + ".data.trigger";
var idCalTable     = idCal + ".data.table";
var idCalHTML      = idCal + ".data.html";
var idCalHTMLtable = idCal + ".html";

createState(idCalHTMLtable, " ");



function iCalToHTMLTable() {
    var html     = "<table style='font-size:0.9em;'><thead><tr><th style='text-align:left;'>Zeit</th><th style='text-align:left;'>Text</th><th style='text-align:left;'>Kalendar</th></tr></thead><tbody>";
    var calTable = getState(idCalTable);
    var inst     = getObject("system.adapter."+idCal);
    var instopt  = inst.native;
    var calendar = {};

    for (var i = 0; i < calTable.val.length; i++) { 
        var entry = calTable.val[i];
        if ( entry._calName != calendar.name ) {
            calendar = {};
            for (var c = 0; c < instopt.calendars.length; c++ ) {
                if (entry._calName == instopt.calendars[c].name ) {
                    calendar = instopt.calendars[c];
                    break;
                }
            }
        }    
        if (calendar.color !== "")
            html+="<tr style='background:transparent; background-image: linear-gradient("+calendar.color+","+calendar.color+"); background-size: 4px 90%; background-repeat: no-repeat;'>";
        else
            html+="<tr>";
        html+="<td style='font-size:1.1em;'>"+entry.date+"</td>"
        html+="<td>"+entry.event+"</td>"
        html+="<td>"+entry._calName+"</td>"
        html+="</tr>";
    }
    html+="</body></table>";    
    setState(idCalHTMLtable, html);    
//dump( html );
}


on({id: idCalTable, change: "ne"}, function (obj) {
    iCalToHTMLTable();
});

iCalToHTMLTable();

[Pittini]

@Uhula sagte in [Projekt] Material Design CSS v2:

Kleiner Fehler, leicht zu beheben, "background" statt "color":

Jap, das wars, jetzt läuft alles. Danke Dir.

[reini]

ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

[sigi234]

@reini sagte in [Projekt] Material Design CSS v2:

ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

Jupp

[der-eine]

@Uhula super genau das hab ich gemeint! Du hast im ersten Posting schon mal ein Skript zur verfügung gestellt. Dieses hat bei mir leider nicht funktioniert aber diese schon. Das meinte ich mit "erklärt". Sollte die Farbe des Kalenders bis ans Ende des Borders gehen?

@Dominik-F ich bin zwar nicht Pittini aber evtl kann ich Dir helfen. Bei mir funktioniert das anzeigen der Diagramme.

Den Link kopieren

http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen

und hinten noch

&kiosk&theme=dark

anhängen.

http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen&kiosk&theme=dark

In der Vis bei dem markiertem basic-html in jedem Bedienfeld (auch bei den 3 Punkten) das target angeben. (Widgetnr. vom iFrame)

[Dominik F.]

@der-eine

Vielen Dank, das hat jetzt soweit funktioniert bis auf eine Sache. Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

[der-eine]

@Dominik-F versuche mal den Link in der Dashboard Übersicht über Share zu kopieren.
Es entstehen wohl zwei unterschiedliche links wenn man entweder direkt im Trend über Share den Link erzeugt oder im Dashboard. Vergleich mal welcher der beiden links dem von mir am ähnlichsten ist und nutze den.

Bin gerade nicht zuhause ansonsten würd ich selber schnell schauen...

[Pittini]

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

Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

Das hab ich auch und zwar immer dann wenn beim Laden der Seite die Card zusammengeklappt ist. Offenbar merkt Grafana dass zu wenig Platz zum anzeigen im collapsed Zustand ist und mault. Geht weg wenn man manuell iwas verändert (Zeitraum/Refresh) oder einfach wartet bis der normale refresh passiert.

[Dominik F.]

@Pittini

Da sagst du was. wenn ich das mdui-unload rausnehme hab ich das nicht mehr. Was mir jedoch aufgefallen ist, ist das wenn ich das komplette Dashboard share, was ja nicht so dolle aussieht, hab ich das problem nicht.

[mrFenyx]

Hi, mach ich da wider was falsch? Wenn ich von 2.0.3 auf 2.1.1 wechsele werden die Cards schmaler:

v2.0.3:

v2.1.1:

Ist das so normal?

Danke!

[Uhula]

@mrFenyx ja, ist es. Bis zur 2.1 haben mdui-cols-N eine Größenänderung von 10% gehabt, mdui-cols-4 konnte also 320-352 px breit sein. Das führte zu einiger Verwirrung. Deswegen habe ich diese Toleranz entfernt. Über zb mdui-cols-4-toc-5 kannst du es aber nachbilden (320-400 pcx)

[mrFenyx]

@Uhula Danke, hab's gefixed.

[Glasfaser]

@Uhula

Hallo Uhula ,

im Thread View Adapterstatus , haben wir herrausgefunden ,
das es Probleme mit dem Widget ContainerIconDialog und Container Dialog
in Verbindung mit deinem Skript CSSv1 und wie auch CSSv2 gibt .

Kannst du hier weiterhelfen , da ich das Elegante Design vom Widget schon behalten wollte.
View Thema ist dark-hive

Die Select Widget öffnen nicht , bzw sind im Hintergrund , wo sie dann nicht Sichtbar sind .

[Bastelritius]

Hallo,

ich habe bei mir die MD_Demo importiert. Leider funktioniert es nicht so wie es soll.

• Das Menü an der Seite kann ich zwar aufklappen, ich kann dort aber nichts anklicken. Beim Klick, geht das Menü wieder zu und es passiert nichts.
  

• Die cards kann ich auch nicht zuklappen.

• Den Vollbildmodus, z.b. von der Uhr kann ich zwar aktivieren, aber es sieht dann sehr komisch aus.
  

Kann mir jemand sagen wodran das liegen kann?

Danke schon mal

[mrFenyx]

@Bastelritius Hi, wenn du ioBroker.vis-material benutzt dann bitte deinstallieren. Es benutzt eine alte Version von MDUI und macht alles durcheinander.