[Projekt] Material Design CSS für ioBroker.vis
-
Es gab ein kleines Update:
2017-10-11 V1.5
CSS: mdui-table Klassen für die table-Behandlung hinzugefügt
Script: Tabellenbehandlung hinzugefügt
ioBroker Projekte: MD-Demo aktualisiert und ergänzt um Tabellenbeispiel, MD-Simple aktualisiert
Anleitung: Ergänzt um Tabellenbeschreibung, optisch überarbeitet
Wie bekannt, alles hier: https://github.com/Uhula/ioBroker-Material-Design-Style
ve fun
-
Hallo, bei mir funktioniert der Einsatz des "jqui-container - Icon - view in jqui Dialog" - Widgets in Verbindung mit der Einbindung von FLOT-Diagrammen noch nicht ganz.
In dem sich öffnenden modalen Dialog reagiert der "Pfeil unten"-Button nicht, so dass auch die Schaltflächen nicht angezeigt werden. Gibt es hier für die jqui-Dialog-Boxen evtl. eine Lösung ?
Eine Frage am Rande: wie mergt ihr Eure aktuellen und individuell bearbeiteten vis-views.json und vis-user.css - Versionen mit den neuen Update-Versionen ? Z.Zt. mache dich das über View-Export und Import, sowie bei CSS über manuelles Kopieren.
Vielen Dank !
3515_icon-view-in-jqui-dialog.png -
Die Funktionalität war nicht für Views in Dialogen gedacht, sondern nur für solche im Hauptfenster (vis_container) selbst. Es wurde im Script nur ein Eventhandler für das Hauptfenster gesetzt. Ich habe es mal ausprobiert, diese auf den gesamten body zu setzen, dann funktioniert es auch in Dialogen.
Dazu musst du im Script, in der unteren setTimeout() Funktion die "#vis_container" durch "body" ersetzen (insgesamt 4x).
Bisher:
setTimeout(function () {
// click-Eventhandler für "mdui-scale-" setzen
$("#vis_container").on( "click", "[class*='mdui-scale-']", function(event) {
MDUI.scale( $(this) );
} );
…
});
Neu:
setTimeout(function () {
// click-Eventhandler für "mdui-scale-" setzen
$("body").on( "click", "[class*='mdui-scale-']", function(event) {
MDUI.scale( $(this) );
} );
…
});
Werde ich so auch in die Scripte übernehmen. Danke für den Hinweis.
-
@ok1:Hallo, bei mir funktioniert der Einsatz des "jqui-container - Icon - view in jqui Dialog" - Widgets in Verbindung mit der Einbindung von FLOT-Diagrammen noch nicht ganz.
In dem sich öffnenden modalen Dialog reagiert der "Pfeil unten"-Button nicht, so dass auch die Schaltflächen nicht angezeigt werden. Gibt es hier für die jqui-Dialog-Boxen evtl. eine Lösung ?
Eine Frage am Rande: wie mergt ihr Eure aktuellen und individuell bearbeiteten vis-views.json und vis-user.css - Versionen mit den neuen Update-Versionen ? Z.Zt. mache dich das über View-Export und Import, sowie bei CSS über manuelles Kopieren.
Vielen Dank ! `
Hast du bei den CSS-Klassen der Buttons den Klasseneintrag "mdui-target-w00xxx" auf dein Flot Element angepasst?
Ich hatte im übrigen ein ähnliches Problem. Ich habe bei mir alles mit Cards aufgebaut, die zusätzlich noch die Eigenschaft "title" haben. das Problem ist, dass sich dann der halbtransparente Balken des Titels sich über die Buttons legt und diese dann nicht mehr "klickbar" sind. Musste das dann etwas umständlich anders lösen, indem ich dem Card View, wo ich mein Flot habe einen halbtransparenten Balken eingefügt habe, der unter den Buttons liegt und dann entsprechend die transparenz der Schrift geändert, damit es gleich aussieht.
Gruß Maik
1528_screenshot2.png -
Du Schelm, "mdui-title" ist doch für Cards und Tiles gar nicht dokumentiert
Dein Problem kannst du aber leichter lösen: Ordne den beiden Schaltflächen zum [Öffnen] und [Zoomen] einfach die Eigenschaft "z-index = 2" zu; dann liegen sie "über" den Titelhintergründen.
Freut mich, wie intensiv du das MD nutzt.
-
Du Schelm, "mdui-title" ist doch für Cards und Tiles gar nicht dokumentiert
Dein Problem kannst du aber leichter lösen: Ordne den beiden Schaltflächen zum [Öffnen] und [Zoomen] einfach die Eigenschaft "z-index = 2" zu; dann liegen sie "über" den Titelhintergründen.
Freut mich, wie intensiv du das MD nutzt. `
Okay gut das du das sagst, so gehts natürlich auf. Aber die Transparenz der Buttons müsste ich dann trotzdem anpassen damit sie nicht heller sind wie die anderen oder? Das MD ist einfach genau das was ich mir immer vorgestellt habe für meine vis!
Achso was mir gerade einfällt. Die linke Nav-Bar ist ja mit aufklappbaren Gruppen aufgebaut. Einmal Group "Pages" und einmal "Links". Wie kann man da noch mehr hinzufügen? Habe jetzt einmal eine Gruppe Innenbereich und einmal Außenbereich. Würde gerne aber noch eine Dabei haben und das ändern in Räume, Gruppen und Außenbereich.
-
Da die Schaltflächen mit einem größeren z-Index "vor" der Aufhellung liegen, werden sie korrekt dargestellt. Den z-Index musst du dir als Folien vorstellen, die übereinander liegen. Je größer der Wert, desto weiter oben liegen sie auf dem Folienstapel, du guckst von oben drauf.
Im lnav kannst du weitere Objekte/Einträge hinzufügen. Am einfachsten ist es, einen kompletten "Ast" - also Open/Close Schlatfläche PLUS darunter liegende Schaltflächen - via "Widgets exportieren" und "Widgets importieren" zu duplizieren und dann anzupassen. Da die Widgets immer in der Reihenfolge des Einfügens gerendert werden, musst du evtl. bestehende Widgets, die weiter unten dargestellt werden sollen, auf dem gleichen Weg verschieben.
-
@Uhula, vielen Dank für die schnelle Antwort - funktioniert bestens !
-
Im lnav kannst du weitere Objekte/Einträge hinzufügen. Am einfachsten ist es, einen kompletten "Ast" - also Open/Close Schlatfläche PLUS darunter liegende Schaltflächen - via "Widgets exportieren" und "Widgets importieren" zu duplizieren und dann anzupassen. Da die Widgets immer in der Reihenfolge des Einfügens gerendert werden, musst du evtl. bestehende Widgets, die weiter unten dargestellt werden sollen, auf dem gleichen Weg verschieben. `
Ah okay. Werde ich mal so probieren. Meine Frage war aber eigentlich anders gemeint. Hab es jetzt aber rausgefunden. Mir ging es um die Eigenschaft "mdui-group-xxx". Ich wusste erst nicht dass man da selber Gruppen definieren kann z.B. "mdui-group-rooms". Dachte der erkennt nur "mdui-group-pages" und "mdui-group-links"
Gruß Maik
-
Die Funktionalität war nicht für Views in Dialogen gedacht, sondern nur für solche im Hauptfenster (vis_container) selbst. Es wurde im Script nur ein Eventhandler für das Hauptfenster gesetzt. Ich habe es mal ausprobiert, diese auf den gesamten body zu setzen, dann funktioniert es auch in Dialogen.
Dazu musst du im Script, in der unteren setTimeout() Funktion die "#vis_container" durch "body" ersetzen (insgesamt 4x).
Bisher:
setTimeout(function () {
// click-Eventhandler für "mdui-scale-" setzen
$("#vis_container").on( "click", "[class*='mdui-scale-']", function(event) {
MDUI.scale( $(this) );
} );
…
});
Neu:
setTimeout(function () {
// click-Eventhandler für "mdui-scale-" setzen
$("body").on( "click", "[class*='mdui-scale-']", function(event) {
MDUI.scale( $(this) );
} );
…
});
Werde ich so auch in die Scripte übernehmen. Danke für den Hinweis. `
Ich bin noch auf ein Problem gestoßen. Im normalen Anzeigemodus funktioniert die Lösung oben wunderbar. Geht man dann aber in den Fullscreen-Modus (über das Widget basic-FullScreen) verschwindet der Dialog unter der Fullscreen-Anzeige bzw. wird unter der Fullscreen-Anzeige erzeugt, ist aber nicht sichtbar. Erst wenn man den Fullscreen-Modus wieder verlässt erscheint die Dialog-Box. Leider habe ich bislang keine funktionierende CSS- bzw. Script-Lösung gefunden. Daher im Voraus vielen Dank für Eure Unterstützung.
-
@ok1:Ich bin noch auf ein Problem gestoßen. Im normalen Anzeigemodus funktioniert die Lösung oben wunderbar. Geht man dann aber in den Fullscreen-Modus (über das Widget basic-FullScreen) verschwindet der Dialog unter der Fullscreen-Anzeige bzw. wird unter der Fullscreen-Anzeige erzeugt, ist aber nicht sichtbar. Erst wenn man den Fullscreen-Modus wieder verlässt erscheint die Dialog-Box. Leider habe ich bislang keine funktionierende CSS- bzw. Script-Lösung gefunden. Daher im Voraus vielen Dank für Eure Unterstützung. `
Das liegt daran, da im Fullscreen-Modus der z-index über die CSS-Klasse ":-webkit-full-screen { }" auf 2147483647 gesetzt wird (warum auch immer). Widget-Dialoge hingegen setzen den z-index nur auf 998; das Material Design Fullscreen auf z-index 2000. Wenn man beides auf 2147483647 anpasst und am Script eine kleine Änderungen vornimmt, geht es. Es bleibt aber die Frage, was dann nicht mehr geht. Kannst du ja mal testen, ob ich das generell ändern kann.Manuell:
<u>In der MD CSS:</u>
/* –---
Dialog
----- */
.mdui-runtime .ui-dialog {
...
z-index: 2147483647 !important;
}
<u>In der MD Script:</u>
function _toggleFullscreen( $ele ){
…
$target.attr("style","position:fixed; left:0; top:0; width:100%; height:100%; ****z-index: 2147483647 !important;****background:#212121 !important; ");
$target.appendTo( "body" );
//$target.appendTo( "body #vis_container" );
}
}
-
Ein Video-Tutorial habe ich derzeit nicht geplant (dann würde ich lieber ein MD-vis Adapter machen …). Durch die MD-Demo bzw. MD-Simpel Projekte, die man als Basis eines eigenen Projekts nehmen sollte und dem PDF-Handbuch mit der Beschreibung der "mdui-" CSS sollte man aber auch so voran kommen. Wenn nicht, hier im Forum fragen. `
Danke, leider fehlt mir etwas die Zeit mich da reinzuarbeiten. Evtl im Winter.
Wenn man die Demos aufmacht, sind das natürlich für einen Einsteiger bömische Dörfer.
In FHEM hatte mir das damals geholfen: https://www.youtube.com/watch?v=O5DsCKTNF8c
Ist aber natürlich ein ganz anderer Funktionsumfang.
Gruß
-
Das liegt daran, da im Fullscreen-Modus der z-index über die CSS-Klasse ":-webkit-full-screen { }" auf 2147483647 gesetzt wird (warum auch immer). Widget-Dialoge hingegen setzen den z-index nur auf 998; das Material Design Fullscreen auf z-index 2000. Wenn man beides auf 2147483647 anpasst und am Script eine kleine Änderungen vornimmt, geht es. Es bleibt aber die Frage, was dann nicht mehr geht. Kannst du ja mal testen, ob ich das generell ändern kann.
Manuell:
<u>In der MD CSS:</u>
/* –---
Dialog
----- */
.mdui-runtime .ui-dialog {
...
z-index: 2147483647 !important;
}
<u>In der MD Script:</u>
function _toggleFullscreen( $ele ){
…
$target.attr("style","position:fixed; left:0; top:0; width:100%; height:100%; ****z-index: 2147483647 !important;****background:#212121 !important; ");
$target.appendTo( "body" );
//$target.appendTo( "body #vis_container" );
}
} `
Hallo Uhula,
das Setzen des z-index hat sofort zum gewünschten Ergebnis geführt. Allerdings konnte ich bislang noch nicht intensiv testen, da ich mich weiterhin an den jquery-Dialogboxen festgebissen habe.
Zum einen habe ich ein Problem mit dem Stacken von 2 Dialogen. Diese erscheinen nicht übereinander, sondern der 2. Dialog liegt unter dem ersten Dialog.
Zum anderen gibt es noch einen Darstellungsfehler auf dem Tablet unter Android Chrome (die Darstellung auf dem Desktop Chrome ist ok). Der erste Aufruf des Dialogs funktioniert wie erwartet. Schließt man den Dialog über "Close" und öffnet den Dialog erneut, dann erscheint der Content nur zum Teil und ist nach oben verschoben. Über die Wisch-Geste kann man den Content dann nach unten ziehen. Es scheint auf dem Tablet eine Fehlberechnung des Content-Bereichs beim 2. Aufruf zu geben zu geben. Zudem ändert der "Close"-Button beim 2. Aufruf seine Farbe.
Für beide Probleme wäre wahrscheinlich der direkte Eingriff für die Dialoge über das MD-Script sinnvoll, um z.B. statt "Dialog-Close" "Dialog-Destroy" o.ä. zu testen. Oder aber um das Stacking mit moveToTop() zu beeinflussen. Aber leider habe ich VIS noch nicht so verstanden, dass ich über das MD-Script den Zugriff auf die Dialog-Methoden, Events und Optionen erhalte um die implementierten Jquery-Standards zu modifizieren.
Meine bisherigen Versuche waren noch nicht erfolgreich. Daher wäre ich für jede Hilfestellung sehr dankbar.
3515_jqui-html-dialog-stack.png
3515_jqui-html-dialog.png -
@ok1:Zum anderen gibt es noch einen Darstellungsfehler auf dem Tablet unter Android Chrome (die Darstellung auf dem Desktop Chrome ist ok). Der erste Aufruf des Dialogs funktioniert wie erwartet. Schließt man den Dialog über "Close" und öffnet den Dialog erneut, dann erscheint der Content nur zum Teil und ist nach oben verschoben. Über die Wisch-Geste kann man den Content dann nach unten ziehen. Es scheint auf dem Tablet eine Fehlberechnung des Content-Bereichs beim 2. Aufruf zu geben zu geben. Zudem ändert der "Close"-Button beim 2. Aufruf seine Farbe. `
Den Darstellungsfehler konnte ich fixen. Es lag in einem Missverständnis über das Setzen der Auflösung unter "Tools" im VIS-Editor. Nachdem ich für den darzustellenden View im Dialog die Auflösung von Tablet-Auflösung auf "nicht definiert" gesetzt habe funktioniert die Dialog-Darstellung einwandfrei.Es bleibt damit noch das Problem der nicht übereinander liegenden, gestackten Dialoge.
-
@ok1:Es bleibt damit noch das Problem der nicht übereinander liegenden, gestackten Dialoge. `
Das Dialog-Stacking schau ich mir mal an. jquery-UI kann es eigentlich. Ob aber vis es auch unterstützt, werde ich mal untersuchen.Alternativ kannst du aber versuchen auf das Dialog-Stacking zu verzichten in dem du auf deinem Main-Screen die Schaltfläche nicht wie bisher zum Öffnen des Konfigurationsdialogs und von dort aus weiter zur Graphanzeige designst, sondern die Schaltfläche im Main-Screen lediglich ein Kontextmenü öffnet, mit den beiden Einträgen "Konfiguration" und "Verlauf" (Kontextmenü wie es im Material Design für die FLOT Anpassung verwendet wird). Oder eben im Main-Screen zwei Schaltflächen.
-
Hallo,
ich hätte nochmal eine Frage bezüglich der CSS Klasse.
Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…
Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.
Hat jemand eine Idee wie ich das am besten umsetzen kann?
Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?:
-
Hallo,
ich hätte nochmal eine Frage bezüglich der CSS Klasse.
Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…
Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.
Hat jemand eine Idee wie ich das am besten umsetzen kann?
Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?: ` Du musst das unter den Reiter widget eintragen und nicht bei view. Dann geht es
Gesendet von meinem Handy
-
Hallo,
ich hätte nochmal eine Frage bezüglich der CSS Klasse.
Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…
Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.
Hat jemand eine Idee wie ich das am besten umsetzen kann?
Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?: ` Du musst das unter den Reiter widget eintragen und nicht bei view. Dann geht es
Gesendet von meinem Handy `
Ja das habe ich unter Widget eingetragen:
~~http://up.picr.de/30746075bk.png" />
~~http://up.picr.de/30746076ix.png" />Das Problem ist halt nur ich möchte es nur bei ein Systembild haben wenn der Signalzustand auf true springt z.B.!~~~~
-
Das Problem ist halt nur ich möchte es nur bei ein Systembild haben wenn der Signalzustand auf true springt z.B.! `
CSS Klassen, die nur für die Signalbilder gelten sollen, sind dort unter der Eigenschaft "Klassen[x]" einzugeben. Z.B. "Klassen[0]" = "mdui-red-blink"Damit blinkt dann das Signalbild, nicht das Widget! Letzteres ist auch via CSS-Klassen nicht erreichbar, da die Signale eigene HTML-Elemente auf gleicher Ebene wie das Widget selbst sind.
Eine Lösung, wo das Widget selbst den Blink-Style annimmt, wäre folgende: Du legst über dein Widget eine identische Kopie, setzt dort als CSS-Klasse für das Widget "mdui-red-blink" und unter "Sichtbarkeit" setzt du die Eigenschaft so, dass dieses Widget nur sichtbar ist, wenn dein gewünschter State gesetzt ist.
-
Also erstmal vielen dank für diese Arbeit. Sieht sehr gut aus.
Jetzt habe ich nur eine Frage wie fange ich am besten an mit dem VIS Editor umzugehen. Hat jemand vielleicht eine Anleitung damit man mal richtig darein kommt um dann das hier besser umsetzen zu können.
Vielen dank im voraus.
( Neuling )
