Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] Material Design CSS für ioBroker.vis

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.0k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.4k

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.6k Aufrufe 68 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • Z Abwesend
    Z Abwesend
    zahnheinrich
    schrieb am zuletzt editiert von
    #81

    Kommen keine Fehlermeldungen wie "View nicht gefunden" o.ä?

    Falls nein, hast du die "basic" und "jqui" Controls installiert?

    Die Anleitung GENAU (zwei bis dreimal) gelesen?

    MfG Ulrich

    1 Antwort Letzte Antwort
    0
    • kmxakK Offline
      kmxakK Offline
      kmxak
      Most Active
      schrieb am zuletzt editiert von
      #82

      @ zahnheinrich ich denke du baust die Heizungen mit einem Widget zusammengefasst ein?

      Dann geh mal unter css allgemein und unter height: entweder 100% oder einfach mal die zahl erhöhen.

      Geht es dann?

      Gruß Alex

      1 Antwort Letzte Antwort
      0
      • Z Abwesend
        Z Abwesend
        zahnheinrich
        schrieb am zuletzt editiert von
        #83

        @knxak

        Im content hat height keinen Eintrag wegen des responsiven Designs.

        Wenn ich dort einen Wert (auch 100%) entrage, nimmt jede Gruppierung für sich schon die ganze Bildschirmhöhe ein.

        In der Page steht die Höhe wie in der Anleitung angegeben auf "calc(100% - 2 * 48px)".

        Noch eine Idee?

        Ulrich

        MfG Ulrich

        1 Antwort Letzte Antwort
        0
        • kmxakK Offline
          kmxakK Offline
          kmxak
          Most Active
          schrieb am zuletzt editiert von
          #84

          ja in der page dort im view widget. kannst da mal testweise einen anderen wert nehmen?

          Gruß Alex

          1 Antwort Letzte Antwort
          0
          • Z Abwesend
            Z Abwesend
            zahnheinrich
            schrieb am zuletzt editiert von
            #85

            In der cont_Page7 100% für height ergibt:

            1841_screenshot__66_.png

            zur Anzeige der unteren Views muss ich nach unten scrollen, also eher Verschlimmbesserung :roll:

            Ulrich

            MfG Ulrich

            1 Antwort Letzte Antwort
            0
            • E Offline
              E Offline
              ErazorVIP
              schrieb am zuletzt editiert von
              #86

              @zahnheinrich:

              Kommen keine Fehlermeldungen wie "View nicht gefunden" o.ä?

              Falls nein, hast du die "basic" und "jqui" Controls installiert?

              Die Anleitung GENAU (zwei bis dreimal) gelesen? `

              Hallo,

              ich habe jetzt nochmal das Simple Projekt importiert. Dies sollte doch erstmal normal laufen oder nicht?

              1 Antwort Letzte Antwort
              0
              • UhulaU Offline
                UhulaU Offline
                Uhula
                schrieb am zuletzt editiert von
                #87

                @zahnheinrich

                Dein 3. SubContent (ich nenne es lieber Gruppe) scheint eine Angabe der height zu haben, das lässt sich aber nur durch die Screenshots nicht erkennen. Kannst du mir einen anonymisierten Export des Projekts per privater Nachricht senden? Dann schau ich mal rein, ob ich was erkennen kann.

                @ErazorVIP

                Ja, das MD-Simple sollte normal "laufen", es hat nur basic- und jqui-Widgets. Erfolgt im Editor die Anzeige aller card/cont/page korrekt? Evtl mal einen anderen Browser ausprobieren.

                Uhula - Leise und Weise
                Ex: ioBroker on Gigabyte NUC Proxmox

                1 Antwort Letzte Antwort
                0
                • E Offline
                  E Offline
                  ErazorVIP
                  schrieb am zuletzt editiert von
                  #88

                  Hallo,

                  so schaut es im Editor aus wenn ich auf page1 gehe.

                  Wenn ich dann auf contPage1 gehe sehe ich die Cards dazu… aber unter page1, 2, 3 irgendwie nicht.

                  Ich habe jetzt schon 3 verschiedene Browser ausprobiert und verschiedene Rechner.
                  3252_unbenannt.jpg

                  1 Antwort Letzte Antwort
                  0
                  • M Offline
                    M Offline
                    MaikB85
                    schrieb am zuletzt editiert von
                    #89

                    @ErazorVIP:

                    @zahnheinrich:

                    Kommen keine Fehlermeldungen wie "View nicht gefunden" o.ä?

                    Falls nein, hast du die "basic" und "jqui" Controls installiert?

                    Die Anleitung GENAU (zwei bis dreimal) gelesen? `

                    Hallo,

                    ich habe jetzt nochmal das Simple Projekt importiert. Dies sollte doch erstmal normal laufen oder nicht? `

                    Das Demo Projekt läuft bei mir genauso "normal". Irgendwas scheint bei dir nicht zu stimmen. Einfach auf Projekt importieren gehen und da die ZIP rein ziehen.

                    1 Antwort Letzte Antwort
                    0
                    • E Offline
                      E Offline
                      ErazorVIP
                      schrieb am zuletzt editiert von
                      #90

                      @MaikB85:

                      @ErazorVIP:

                      @zahnheinrich:

                      Kommen keine Fehlermeldungen wie "View nicht gefunden" o.ä?

                      Falls nein, hast du die "basic" und "jqui" Controls installiert?

                      Die Anleitung GENAU (zwei bis dreimal) gelesen? `

                      Hallo,

                      ich habe jetzt nochmal das Simple Projekt importiert. Dies sollte doch erstmal normal laufen oder nicht? `

                      Das Demo Projekt läuft bei mir genauso "normal". Irgendwas scheint bei dir nicht zu stimmen. Einfach auf Projekt importieren gehen und da die ZIP rein ziehen. `

                      Genau so habe ich es gemacht.

                      Nachtrag:

                      Sorry Leute ich hab gerade gemerkt das meine ioBroker Visualisation nicht auf der neusten Version war.

                      Hatte noch die 0.15.4 drauf.

                      Danke für eure Hilfe.

                      1 Antwort Letzte Antwort
                      0
                      • Z Abwesend
                        Z Abwesend
                        zahnheinrich
                        schrieb am zuletzt editiert von
                        #91

                        @Uhula

                        @kmxak

                        @zahnheinrich:

                        In der cont_Page7 100% für height ergibt:

                        filename="Screenshot (66).png" index="0">~~

                        zur Anzeige der unteren Views muss ich nach unten scrollen, also eher Verschlimmbesserung :roll:

                        Ulrich `

                        Nachdem ich die height von leer auf "auto" geändert habe, werden die "views in views in views" korrekt angezeigt und arbeiten auch im responsive Design wie sie sollen.

                        Vielen Dank für Eure Unterstützung!

                        Einen schönen Tag vor einem sonnigen Wochenende!

                        Ulrich

                        MfG Ulrich

                        1 Antwort Letzte Antwort
                        0
                        • UhulaU Offline
                          UhulaU Offline
                          Uhula
                          schrieb am zuletzt editiert von
                          #92

                          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

                          Uhula - Leise und Weise
                          Ex: ioBroker on Gigabyte NUC Proxmox

                          1 Antwort Letzte Antwort
                          0
                          • O Offline
                            O Offline
                            ok1
                            schrieb am zuletzt editiert von
                            #93

                            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

                            1 Antwort Letzte Antwort
                            0
                            • UhulaU Offline
                              UhulaU Offline
                              Uhula
                              schrieb am zuletzt editiert von
                              #94

                              @ok1

                              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.

                              Uhula - Leise und Weise
                              Ex: ioBroker on Gigabyte NUC Proxmox

                              1 Antwort Letzte Antwort
                              0
                              • M Offline
                                M Offline
                                MaikB85
                                schrieb am zuletzt editiert von
                                #95

                                @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

                                1 Antwort Letzte Antwort
                                0
                                • UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  schrieb am zuletzt editiert von
                                  #96

                                  @MaikB85

                                  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.

                                  Uhula - Leise und Weise
                                  Ex: ioBroker on Gigabyte NUC Proxmox

                                  1 Antwort Letzte Antwort
                                  0
                                  • M Offline
                                    M Offline
                                    MaikB85
                                    schrieb am zuletzt editiert von
                                    #97

                                    @Uhula:

                                    @MaikB85

                                    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. `
                                    :D

                                    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.

                                    1 Antwort Letzte Antwort
                                    0
                                    • UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      schrieb am zuletzt editiert von
                                      #98

                                      @MaikB85

                                      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 - Leise und Weise
                                      Ex: ioBroker on Gigabyte NUC Proxmox

                                      1 Antwort Letzte Antwort
                                      0
                                      • O Offline
                                        O Offline
                                        ok1
                                        schrieb am zuletzt editiert von
                                        #99

                                        @Uhula, vielen Dank für die schnelle Antwort - funktioniert bestens !

                                        1 Antwort Letzte Antwort
                                        0
                                        • M Offline
                                          M Offline
                                          MaikB85
                                          schrieb am zuletzt editiert von
                                          #100

                                          @Uhula:

                                          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

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          707

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe