[Projekt] MDCSS v2: Material Design CSS Version 2

[maloross]

Hallo in die Runde!

Möchte gern neue Views mit dem neuen MDCSS gestalten, bekomme aber schon gleich zu Anfang in der CSS einige Fehler angezeigt:

Ich habe die MD_Demo importiert, Skript und CSS werden auch angezeigt, aber halt diese Fehler. Was habe ich falsch gemacht?

[ak1]

@maloross
Ich glaube fast nicht, dass dies wirklich ein ernstes Problem ist.
Die Fehlermeldung ist wohl in so ziemlich jeder Zeile "Expected RBRACE in line...".
RBRACE ist die geschweifte rechte Klammer. Bei mir sieht das ähnlich aus, wie bei Dir. Aber weder fehlt irgendwo eine Klammer, noch habe ich irgendwelche Probleme.

Aber vielleicht kann sich ja noch jemand äußern, der tatsächlich Ahnung von CSS hat.

[Dominik F.]

@maloross

ich habe diese Fehler auch. Bei mir läuft alles einwandfrei, ich denke also du kannst sie ignorieren solange dir keine wirklichen Fehler in den Views etc auffallen.

Wenn dir aber jemand genau etwas dazu sagen kann, dann ist es @Uhula

[tp1de]

Hallo,

nach nun mehr 3 Jahren ioBroker und Vis möchte ich nun mein VIS neu aufstellen und mit MDCSS v2 realisieren. Also habe ich nun die ersten Versuche auf Basis des Simple Templates gestartet. Vieles habe ich prinzipiell verstanden und funktioniert auch. Ich habe aber noch ein paar grundsätzliche Verständnisfragen und ich hoffe, dass mir jemand aus dem Forum helfen kann:

• Was muss ich als Auflösung / Raster /Rastermaß in den Views eintragen?
  Soweit ich das richtig sehe muss in der Auflösung etwas eingetragen sein, sonst ist keine Default-View wählbar - oder?
• Wie kann ich die Darstellungsbreite der lnav-View beeinflussen (verkleinern)?
• Bei höherer Auflösung (FHD / 4K) werden die Texte sehr klein. Wie kann ich die allgemeine Textgröße beeinflussen? Am Besten über ein Menü / Datenpunkte / in Abhängigkeit vom Endgerät
• Bei mobilen Endgeräten (Handy / Tablet) findet ein Viewwechsel statt, wenn ich von Portrait- auf Landscape Modus wechsle, d.h. das Endgerät drehe. Wie kann ich das verhindern? Der aktive View soll aktiv bleiben.

Diese Punkte würde ich gerne verstehen / anpassen bevor ich alle meine bisherigen Views in MDCSS umsetze. Ich hoffe auf Eure Unterstützung ....

[Dominik F.]

@tom57

Du brauchst keine Auflösung eintragen, da du mit dem CSS das so einstellen kannst, dass sich die Widgets automatisch an die unterschiedlichen Auflösungen anpassen. Mit calc(100% - 32px) z.B. sind die Widgets immer 32px vom rechten Rand entfernt, egal was du für n Bildschirm nutzt.

Raster ist dir selbst überlassen, ich nutze eins von 8. Die Defaultview legst du fest, in dem du das Häckchen bei default setzt neben der Auflösung. Ich habe z.B. keinen Haken dort, weil ich keine Defaultview brauche. Ich lasse mir alles in Chrome darstellen und habe dort die Startpage verlinkt so das ich immer zu dieser gelange.

Mit dem Viewwechsel hab ich keine Ahnung, das passiert bei mir nicht wenn ich das Handy drehe.

Die Größe kannst du mit mdui-scale verändern. Ich habe bei mir folgendes im CSS hinzugefügt:

.mdui-scale-130 { transform: scale(1.3); transform-origin: 0% 0%; }
.mdui-scale-140 { transform: scale(1.4); transform-origin: 0% 0%; }
.mdui-scale-150 { transform: scale(1.5); transform-origin: 0% 0%; }
.mdui-scale-160 { transform: scale(1.6); transform-origin: 0% 0%; }

Das CSS von Uhula hat nur diese im Code drin:

/* ----- 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%; }

Diese dienen jedoch nur zum Verkleindern. Daher hab ich meine noch hinzugefügt. Einfach in die erste Zeile kopieren und dann kannst du es nutzen.

[tp1de]

@Dominik-F
Vielen Dank für Deine Hilfe zu meinen Fragen. Auflösung ist nun im Prinzip klar.

Sobald eine Default-View gesetzt wird, wird bei Drehung des Handys/Tablets auf die Default View gesprungen. Sowohl im Browser als auch in der ioBroker-App. Kann man das ausschalten?

Im Browser kann ich die gewünschte Start-Seite direkt anspringen. Die App nimmt immer die alphabetisch 1. View im Editor. In den Demos: _landing.

Zur Not kann ich die Seiten-Viewes mit "_" beginnen lassen .... aber vielleicht geht es auch anders?

[Dominik F.]

@tom57

Also ich nutze die App nicht, da ich die kacke finde, hatte anfangs nur Probleme damit. Ich nutze das ganze mit Google Chrome, alternativ hatte ich auch lange den fullybrowser im Einsatz. Die Frage ist, brauchst du die App überhaupt? Wenn du zufällig auch Chrome hast, probiere den doch mal auch auf dem Handy. Dann hättest du eines deiner Probleme schon mal gelöst.

Im Editor gibt es unter Tools zwischen Auflösung und Rendern die Einstellung Default, wenn du dort den Hacken rausmachst könnte das eine mögliche Lösung sein. Ich hatte das Phänomen bisher noch nicht was du beschreibst, könnte mir aber vorstellen das es an dem gesetzten Häckchen liegt.

[tp1de]

@Dominik-F

Ja genau, der Seitenwechsel beim Drehen liegt an der Default-Wahl einer View. Ohne Default-View bleibt bei Drehung die aktive View. Aber diese Default View wird bei der App verwendet und ist auch notwendig.

Meine über die letzten 3-4 Jahre "gewachsenen" Views habe viele Grafiken, Flot-Diagramme etc. und viele davon auf jeweils einer View. Auf meinen 4k-Monitor sieht das super aus und auf meinem Tablet verwende ich den Fully Browser, da ich damit gut skalieren konnte um alles auf den Bildschirm zu bekommen. Im Wohnzimmer habe ich ein altes Tablet liegen mit der App, um Rolläden / Markisen und die Heizung zu steuern (Foolproof). Nur die eine App ist installiert.

So nun muss ich "umdenken" wo und wie ich das responsive Design benutze und wie ich meine großen Views in Cards aufteile und ggfs. weniger komplexe Darstellungen verwende. Noch bin ich aber in der Phase das MDCSS erst einmal grundsätzlich zu verstehen. Ggfs. mache ich aber mehrere Projekte daraus - Mal mit MDCSS und mal in alter Form für die App. Muss ich aber noch mal überlegen. Die App hat auch Nachteile (nicht alle widgets werden unterstützt und CSS Einstellungen werden nicht alle richtig übernommen). Sie ist aber wenn die App läuft, als elektronische Fernbedienung im Fullscreen-Modus weniger anfällig für Fehlbedienungen.

Vielen Dank für Dein Feedback ....

P.S: Mit MDCSS und der Aufteilung in Cards funktionieren natürlich auch die Browser (Chrome / Firefox etc)

[Dominik F.]

@tom57

Als Tipp, gehe von dem kleinsten Display aus wenn du responsive anwendest. Du kannst die Cards so einstellen, dass sie sich automatisch dem Platz anpassen, in deinem Handy sind die Cards dann z.B. untereinander, auf größeren Displays nebeneinander. Dazu kannst du die minimale und maximale Breite der Cards anpassen die automatisch je nach Platz ausgewählt wird.
Zum Schluss kannst du dann alles nur über den Browser nutzen und alles passt sich automatisch der Größe des Displays an.

So siehts z.B. bei mir aus, hat sich zwar mittlerweile das ein oder andere verändert, aber grundsätzlich siehts noch gleich aus. Das ist jetzt die View vom Handy, auf meinem Browser sind die Cards dann nebeneinander oder füllen bei Diagrammen die ganze Breite aus.

https://forum.iobroker.net/topic/31335/material-design-css-mdcss-v2-vis-views-zur-inspiration/4

[tp1de]

@Dominik-F
Danke für die Tips und den Link. Sieht ja Klasse aus.
Dass ich die Breite der Cards variabel gestalten kann, wusste ich noch nicht.
Das muss ich nochmal in der Anleitung nachlesen.

[Dominik F.]

@tom57

schreib mich einfach an, wenn du noch fragen haben solltest.

[Pittini]

Moin, ich bräuchte bitte mal kurz Hilfe um nen Fehler einzugrenzen bevor ich ein Issue aufmach. Ich verwende recht intensiv die Tooltips, das klappt auch prima. Allerdings, gestern das erste mal mit Boolscher Checkbox probiert. Da hab ich den Effekt dass zwar der Tooltip funktioniert, aber die Checkbox nimmer.
Kann das jemand bestätigen (oder eben nicht)?

[Dominik F.]

@Pittini

Ich habs jetzt auch mal ausprobiert. Die Checkbox funktioniert auch bei mir nicht

[jpgorganizer]

Hallo zusammen,
ich war länger nicht mehr in eurem Thread aktiv. Heute habe ich angefangen meine Shelly's in meine VIS zu integrieren. Und brauche ich mal eure Hilfe - ich bin einfach kein Frontend-Entwickler, Backend ist eher meine Welt.

Ich möchte für meine Shelly's eine einfache Seite ohne Funktionalität (außer eine kleine Ausnahme, dazu aber später), auf der ich den Status und ein paar Info's des jeweiligen Shelly's sehen kann. Aufgerufen wird die Seite über einen mdui-button (zumindest habe ich das mal derzeit so aufgeplant).

Die Seite soll dann so (ähnlich) aussehen:

Eine solche Seite soll es dann für jeden meiner Shelly's geben, die dann von unterschiedlichen mdui-button's aufgerufen werden.

Jetzt zu meiner Frage: wie baut man sowas am besten auf, so dass man nicht zig solche Seiten erstellen muss?

Die Frage hört sich für euch evtl. etwas seltsam an, aber ich habe da jetzt gerade keine Idee. Man müsste eigentlich sowas wie eine Parameterübergabe an die Seite haben. Dann könnte man die Id des Shelly's mitgeben.

Zu der o.a. Ausnahme bzgl. Funktionalität der Seite: Im Bild seht Ihr eine IP-Adresse. Kann man die so gestalten, dass daraus ein Link wird und sich beim draufklicken der Browser öffnet und die Seite aufruft?

Please help.

Danke
jpgorganizer

[Dominik F.]

@jpgorganizer

Du erstellst eine Card/Seite mit allem was du möchtest und kannst die ganze View oder auch die Widgets dann duplizieren. Die einzelnen Werte musst du dann wieder auf den neuen Shelly ändern und das leider einzelnd. Sind aber immer nur n paar klicks.

Ja, du kannst einen Link erstellen und der dann eine Seite im Browser öffnet. Die Demo hat z.B. solche Links, da kannst du dich dran halten.

[jpgorganizer]

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

Du erstellst eine Card/Seite mit allem was du möchtest und kannst die ganze View oder auch die Widgets dann duplizieren. Die einzelnen Werte musst du dann wieder auf den neuen Shelly ändern und das leider einzelnd. Sind aber immer nur n paar klicks.

ach nee, das hatte ich befürchtet. Mir geht es auch gar nicht um die initiale Erstellung, aber wenn dann Änderungen kommen ....

Ich frag mal anders: kann man einen Button erstellen, der zwei Dinge tut:

• einmal einen bestimmten Wert in einen Datenpunkt schreiben
• und zum zweiten eine Seite aufrufen

Wenn das ginge, dann könnte man eine allgemeine Seite erstellen und im Hintergrund immer mit einem kleinen Script beim Aufruf befüllen.

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

Ja, du kannst einen Link erstellen und der dann eine Seite im Browser öffnet. Die Demo hat z.B. solche Links, da kannst du dich dran halten.

ok, dann schaue ich da mal durch.

Danke für deine Antwort.

VG jpgorganizer

[tp1de]

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

schreib mich einfach an, wenn du noch fragen haben solltest.

Ich bräuchte nochmal Deine Hilfe. Bisher habe ich ganz erfolgreich auf MDCSS umgestellt. Es gibt aber ein Phänomen, welches ich mir nicht richtig erklären kann:

Ich habe als content color #121212 vorgegeben, also Dark Theme. Beim ersten Aufruf der Views (Page 1...n) funktioniert das auch richtig. Bei den meisten Views wird aber nach 30 Sekunden der Hintergrund ca. 30% heller und damit der Kontrast schlechter. Ein Reload im Browser ändert nichts. Erst wenn ich über das Menü eine andere Seite auswähle und wieder auf diese View zurückgehe, dann ist der Hintergrund wieder für 30 Sekunden richtig. Das betrifft alle Browser und die Android App.

Weiss jemand woran das liegt und wie ich dies abstellen kann?

[jpgorganizer]

@jpgorganizer sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Ich frag mal anders: kann man einen Button erstellen, der zwei Dinge tut:

einmal einen bestimmten Wert in einen Datenpunkt schreiben
und zum zweiten eine Seite aufrufen

würde folgendes hier evtl. gehen ... ich probier das jetzt mal aus

[jpgorganizer]

Hi,
gefühlt bin ich einen Schritt weiter. Aber jetzt funktioniert etwas nicht und ich kann gerade nicht entscheiden, ob ich einen Fehler gemacht habe oder ob ich ein Problem gefunden habe.

ich habe ein basic-html Widget als mdui-button

Wenn ich nun mdui-click?action noch dazu mache, dann geht es mit einer Action, aber nicht mit zwei Actions.

es geht, d.h. der Wert bad wird in den angegeben State geschrieben:

mdui-click?action:setValue(0_userdata.0.Shelly25Info,bad)

es geht auch, d.h. die angegebene Page öffnet sich

mdui-click?action:changeView(pageRolloBadDetail)

es geht nicht, bzw. es wird nur die jeweils zuletzt angegebene Action ausgeführt

mdui-click?action:setValue(0_userdata.0.Shelly25Info,bad);action:changeView(pageRolloBadDetail)

mdui-click?action:changeView(pageRolloBadDetail);action:setValue(0_userdata.0.Shelly25Info,bad)

Hat jemand einen Tipp für mich?

Grüße
jpgorganizer

[jpgorganizer]

juhu, ich hab's

in der folgenden Funktion im Script musste ich anpassen. Diese Funktion hat m.M. nach nie mehrere Actions ausgeführt

// ----------------------------
// click
// ----------------------------
function _click(event, $ele) { try {
console.log('_click');

    // durch swipe gelockt?
/*
if (ele.classList.contains('mdui-lockclick')) {
        ele.classList.remove('mdui-lockclick');
        return;
    }
*/
    if (lockclick) {
        lockclick=false;
        return;
    }
    let s = _getSuffix( $ele[0].className, 'mdui-click?' );
    if (!s || s=='') return;
    s = '{"'+s.replace(/:/g,'":"')+'"}';
    s = s.replace(/;/g,'","');
    s = s.replace(/\+/g,' ');
    
    //change start
    s = s.replace(/action/ig,'action');  // just make "action" case-insensitive
    
    let i = 0;
    while (s.indexOf('"action"') !== -1) 
    {
	s = s.replace('"action"', '"action' + i + '"');
        i = i + 1;
    }
    let anz = i;
    let opt = JSON.parse(s);
    
    for (i = 0; i < anz; i++) {		
	if (opt['action' + i])
    	     _executeAction(opt['action' + i]);
    }
    // change end

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
        
} catch(err) { console.log( "[MDUI._click] " + err.message ); } 
}

@Uhula kannst du das bitte prüfen und wenn ok dann in deine Version übernehmen? Ich habe den Abschnitt, den ich tatsächlich geändert habe mit change start- change end markiert

EDIT: noch "action" case-insensitive gemacht -> kleine Änderung im o.a. Code
Danke im Voraus
jpgorganizer