Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] Material Design CSS für ioBroker.vis

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • Uhula
      Uhula @Dominik F. last edited by

      @Dominik-F Bevor wir hier nun hin und her fragen, wäre es sinnvoller, wenn ich dein Projekt kurz bekommen könnte. Dürfte ja noch nichts persönliches drin sein.

      Dominik F. 1 Reply Last reply Reply Quote 0
      • Dominik F.
        Dominik F. @Uhula last edited by

        @Uhula

        Ich danke dir. Ich hab es wirklich versucht für den Anfang total simpel zu halten daher habe ich auch nur die 3 Views, die für mich für die Navigation wichtig sind, exportiert. Ich werde bestimmt auch ein Detail übersehen haben.

        2020-01-27-Handy.zip

        Uhula 1 Reply Last reply Reply Quote 0
        • jpgorganizer
          jpgorganizer @Uhula last edited by

          @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

          Für die VIS schlage ich dir eine Tabelle mit zwei Zeilenarten vor, 1x für die Überschriften, 1x für die Lüfter.

          Danke, das schau ich mir morgen/übermorgen mal an. Melde mich, wenn ich was habe, was brauchbar ist.

          Grüße
          jpgorganizer

          1 Reply Last reply Reply Quote 0
          • Meistertr
            Meistertr Developer last edited by

            @Uhula mir ist aufgefallen, dass die secondary_color nicht gesetzt wird

            1 Reply Last reply Reply Quote 0
            • jpgorganizer
              jpgorganizer last edited by

              Guten Morgen,

              eine Frage, kann man in VIS eigentlich Views/Widgets etc. zur Laufzeit erstellen u/o positionieren?
              Wenn ja, wie?

              Grüße
              jpgorganizer

              1 Reply Last reply Reply Quote 0
              • Uhula
                Uhula @Dominik F. last edited by

                @Dominik-F Du hast zwar die Projekt-CSS mit übernommen, aber nicht den Script-Anteil, den müsstest du auch noch kopieren. (vis - Eigenschaften - Scripte)

                @Meistertr Habe ich mir angesehen, fehlte zumindest bei den chips, ist demnächst korrigiert.

                @jpgorganizer Zur Laufzeit erstellen, also auf dem Client, ist HTML-seitig möglich, allerdings weiß ich nicht, wie ioBroker die Events verwaltet. Und Buttons ohne Click-Event sind sinnfrei.
                Eine Repositionierung hingegen sollte funktionieren, "einfach" via Script die entsprechenden HTML-Teile des HTML-Element des Widgets in das neue Parent-Element verschieben. Ist nur nicht leicht, den richtigen Zeitpunkt dafür zu finden (onLoaded? MutateObserver auf #vis-container?)

                B jpgorganizer Dominik F. 3 Replies Last reply Reply Quote 0
                • B
                  BoehserWolf @Uhula last edited by

                  @Uhula
                  Evtl. hast du eine Idee wie man ein Modales Popup mit einem iframe mit deinem v1 Design umsetzen könnte? Konkret möchte ich Grafana Charts auf ein Icon legen, welches als Zusatzinformation Fullscreen aufpopt.

                  Ich habe mich bereits an den üblichen Verdächtigen wie bspw. "container - Icon - view in jqui Dialog" versucht. Diese haben jedoch das "Problem", dass ich in jedem Fall eine feste Höhe und Breite mitgeben muss. Das Konzept widerspricht leider dem Aufbau eines Responsive Design, was ich mit deiner Vorlage konsequent umgesetzt habe.

                  Ich habe mir die Beispiele in deiner Doku zu v1 zum Thema Images und Flot Charts angesehen. Das würde prinzipiell funktionieren. Jedoch sind die Charts relativ Ressourcen-hungrig, so dass die Ladezeit unnötig erhöht wird.

                  Daher stelle ich mir eine Mischung aus der Umsetzung zu bspw. den Flot-Charts und einem Modalen Fullscreen Popup bei Click auf ein Icon vor.

                  Ich wäre über einen Tip sehr dankbar.

                  Uhula 1 Reply Last reply Reply Quote 0
                  • jpgorganizer
                    jpgorganizer @Uhula last edited by

                    @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

                    @jpgorganizer Zur Laufzeit erstellen, also auf dem Client, ist HTML-seitig möglich, allerdings weiß ich nicht, wie ioBroker die Events verwaltet. Und Buttons ohne Click-Event sind sinnfrei.
                    Eine Repositionierung hingegen sollte funktionieren, "einfach" via Script die entsprechenden HTML-Teile des HTML-Element des Widgets in das neue Parent-Element verschieben. Ist nur nicht leicht, den richtigen Zeitpunkt dafür zu finden (onLoaded? MutateObserver auf #vis-container?)

                    Ok, das geht wohl nicht so einfach. Das vertage ich mal auf später ... vielleicht. Muss erst mal die offenen Baustellen schließen.

                    @Uhula Danke für deinen super Support und für dein MD. Klasse. Ich habe lange gesucht, um etwas zu finden, mit dem ich für meine IoT Sachen eine Oberfläche für alle meine Geräte machen kann. Das wird richtig gut.

                    VG jpgorganizer

                    1 Reply Last reply Reply Quote 0
                    • Uhula
                      Uhula @BoehserWolf last edited by Uhula

                      @BoehserWolf Da muss ich etwas ausholen, denn das geht nicht ganz so einfach. Das genante Widget ist schon mal korrekt. Die volle Breite ist damit schon direkt zu erreichen, einfach bei Dialogbreite 100% eingeben. Klappt aber nicht bei der Dialoghöhe ... das liegt an der Umsetzung im vis, welche beim ui-dialog Elemente eine "height:auto" setzt, da wirkt sich eine "100%" Angabe im Child-Element nicht aus (0px).
                      Also muss man das "height:auto" im ui-dialog Element auf z.B. "height:100%;" ändern.

                      Schritt 1: Neuanlage eines CSS Styles

                      .mdui-dialog-fullheight {
                         height: 100% !important;   
                      }
                      .mdui-dialog-fullheight .ui-dialog-content {
                         min-height: calc(100% - 32px) !important;   
                      }
                      

                      Nun bringt es nichts, dem Widget diese CCS Class zuzuweisen, denn es soll ja nicht 100% Höhe haben, sondern der Dialog. Im MD CSS habe ich aber eine solche Möglichkeit damals auch schon eingebaut, also die optionale Angabe von CSS Classes für den nachgeladenen Dialog. Mangels eigenem Feld nutze ich dafür die Titel-Eigenschaft des Dialogs und parse dort die Angaben raus. Dort musst du :

                      Mein Titeltext|class=mdui-dialog-fullheight
                      

                      eingeben (Mein Titeltext natürlich frei). Für die Dialoghöhe kannst irgendwas angeben. Die Dialogbreite steht dir frei, 100% wären alles.

                      cfda4ddd-a47d-4459-8fca-3be42426bbd4-image.png

                      Alternativ (für fullscreen)

                      CSS anlegen:

                      .mdui-dialog-fullscreen {
                         height: calc(100% - 16px) !important;   
                         width: calc(100% - 16px) !important;   
                         margin:8px;
                      }
                      .mdui-dialog-fullscreen .ui-dialog-content {
                         min-height: calc(100% - 32px) !important;   
                         min-width: 100% !important;   
                      }
                      

                      und nutzen:
                      2ae31111-529e-4f74-82fb-ad9448665ddd-image.png

                      Ich habe beide CSS Classes mit in die MD CSS 2.0 aufgenommen; fullscreen-Dialoge sind sinnvoll.

                      B 1 Reply Last reply Reply Quote 0
                      • Dominik F.
                        Dominik F. @Uhula last edited by

                        @Uhula

                        Schande über mein Haupt -.- Jetzt funktioniert es^^ Vielen Dank

                        1 Reply Last reply Reply Quote 0
                        • Meistertr
                          Meistertr Developer last edited by

                          es ist echt hamma. ein raum ist schonmal umgestellt, die anderen sollten dann schneller gehen 🙂

                          responsiv4.gif

                          sigi234 1 Reply Last reply Reply Quote 1
                          • B
                            BoehserWolf @Uhula last edited by BoehserWolf

                            @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

                            Ich habe beide CSS Classes mit in die MD CSS 2.0 aufgenommen; fullscreen-Dialoge sind sinnvoll.

                            Super, vielen Dank für die Umsetzung!

                            Ich hadere leider etwas mit der Umsetzung bei mir - sowohl mit fullheight als auch mit fullscreen. Um Fehler in meinem Projekt auszuschließen habe ich in deinem Demo Projekt v1 getestet. Leider bei mir ohne Erfolg.

                            Test Umsetzung in view cardDemoButtons mit fullscreen:
                            18938e47-6f88-49ef-ba6e-03558481d4a4-grafik.png

                            CSS erweitert:
                            f08d0ab9-db18-4e43-8b93-1d982ed747d1-grafik.png

                            Die CSS Klassen habe ich oben und unten getestet, scheint aber keinen Unterschied zu machen.

                            Ergebnis:
                            57eafdab-fb86-465e-b44c-0af5d10a6204-grafik.png

                            Dein v1 Projekt habe ich mir am 07.03.2018 vom github gezogen.
                            Hast du da evtl. noch eine Idee was falsch läuft?

                            Uhula 1 Reply Last reply Reply Quote 0
                            • Uhula
                              Uhula @BoehserWolf last edited by

                              Im GitHub liegen aktualiserte Daten, V2.0.2, auf Wunsch nun auch separat in einzelnen CSS/JS Dateien.

                              V2.0.2 29.01.2020

                              • mdui-center/-h/-v mit !important versehen damit die widgeteigenen Style zuweisungen überschrieben werden
                              • mdui-flex: funktioniert nun auch mit contXXX in Widget view-8
                              • mdui-label, mdui-value, mdui-title, mdui-subtitle: es wurde die vertikale Zentrierung mit display:flex entfernt damit die direkten Wigdet font- zuweisungen funktionieren. Das Zentrieren kann mit mdui-center erreicht werden
                              • Öffnen/Schließen der fixierten lnav ist nun animation-iteration-count
                              • mdui-navitem: im display:flex das !important entfernt, damit die Media Query mit mdui-show480 funktioniert
                              • mdui-dialog-fullheight und mdui-dialog-fullscreen zur Nutzung in Dialogen hinzugefügt

                              @BoehserWolf Da kann ich mir nur vorstellen, dass das Script nicht korrekt ausgeführt wird. Ich habe natürlich mit V2 getestet. Wenn du mir der Projekt als ZIP gibst, kann ich mal rein schauen.

                              @Meistertr Respekt, du hast beherrschst MD CSS 2.0 ja (fast) besser als ich 😉

                              Meistertr B foxriver76 3 Replies Last reply Reply Quote 1
                              • E
                                eMd last edited by

                                Ich habe noch die alte Version, kann ich auch nur den Code übernehmen und dann sehen was doof aussieht und bereinigen oder muss ich ein komplett neues Projekt anlegen?

                                Uhula 1 Reply Last reply Reply Quote 0
                                • Uhula
                                  Uhula @eMd last edited by

                                  @eMd Habe ich hier im Thema schon aufgeführt, du kannst es übernehmen (aber in einer Kopie deines Originals), und dann :

                                  Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                  MD CSS V1.x -> MD CSS V2.0

                                  • in den cardXXX
                                    • mdui-Classes anpassen, welche umbenannt wurden (Bsp: mdui-raisedbutton -> mdui-button-raised, mdui-flatbutton -> mdui-button). Die Umbenennungen habe ich in den Änderungen zur V2.0 im Post genannt
                                    • die Position der Widgets so anpassen, dass sie links und oben mind. 16 Px frei lassen
                                  • in den contXXX
                                    • mdui-Classes anpassen, welche umbenannt wurden (Bsp: mdui-card -> mdui-card-raised, mdui-tile -> mdui-card; oder mdui-card-outlined nutzen). Die Umbenennungen habe ich in den Änderungen zur V2.0 im Post genannt
                                    • [optional] haben die view-in-view cardXXX mit mdui-cols-<n> u/o mdui-rows-<n> Angaben, dann bezogen sich diese bisher auf ein 156er Raster, jetzt ist es ein 80er Raster. D.h. die <n> müssen angepasst werden, i.d.R. verdoppelt
                                    • [optional] die view-in-view cardXXX mit mdui-order-<n> versehen, wenn man die Reihenfolge selbst festlegen möchte
                                    • [optional] view-in-view cardXXX mit mdui-cols-<n>-toc-<m> versehen, wenn man mit einer automatischen Breitenanpassung der cardXXX arbeiten möchten
                                    • [optional] contXXX die view-in-view cardXXX mit mdui-rows-<n>-tor-<m> versehen, wenn man mit einer automatischen Höhenanpassung der cardXXX arbeiten möchten
                                  • abar
                                    • ein HTML-Widget einfügen und mdui-config zuweisen. Inhalt wie unter den Änderungen zur V2.0 im Post beschrieben setzen (für die Farben)
                                  • tnav, bnav
                                    • Widgets als mdui-navitem kennzeichnen
                                    • [optional] mit mdui-order-<n> für die Sortierung versehen
                                  • [optional] wenn die navitems versteckt werden sollen, wenn die lnav fixiert angezeigt wird, dann die Widgets im tnav um mdui-lnav-fixed-open-hide ergänzen
                                  • lnav, rnav
                                    • Widgets als mdui-navitem kennzeichnen
                                    • [optional] mit mdui-order-<n> für die Sortierung versehen
                                    • width auf 100% setzen
                                  • in den pageXXX
                                    • [optional] Anpassung an 80er Grid: abar.Height auf 40 setzen; tnav.Top auf 40 setzen, tnav.Height auf 40 setzen; content.Top auf 80 setzen, content.Height auf calc(100% - 80px) setzen
                                    • tnav, lnav und rnav um mdui-flex ergänzen
                                    • content um mdui-flex ergänzen
                                    • [optional] wenn eine automatische Höhenanpassung der cardXXX mit mdui-rows-<n>-tor-<m> im contXXX zugewiesen wurde, dann im pageXXX den content um mdui-flex-stretch erweitern
                                  1 Reply Last reply Reply Quote 1
                                  • Meistertr
                                    Meistertr Developer @Uhula last edited by

                                    @Uhula ich kenn mich mit frontend eigentlich nicht aus, bin nur durch das Projekt an das thema rangeführt worden. Ich kann nur code verstehen und anpassen 🙂

                                    1 Reply Last reply Reply Quote 0
                                    • sigi234
                                      sigi234 Forum Testing Most Active @Meistertr last edited by sigi234

                                      @Meistertr

                                      Ich würde mich über einen Export sehr freuen. 😏

                                      blauholsten Meistertr 2 Replies Last reply Reply Quote 0
                                      • jpgorganizer
                                        jpgorganizer last edited by

                                        Hi,

                                        ich steh auf dem Schlauch. Ich kann nicht mal mehr einen Button definieren.
                                        Ich möchte nur einen Button mit einem Bild drauf der mir wenn ich drücke einen bestimmten Wert (eine 0, alternativ auch "false") in einen DP schreibt.

                                        Das macht mein Button auch, nur er blendet ein Popup ein mit dem Hinweis: "error: view not found"
                                        6f211034-ffe3-462d-a4fc-3f8a8afa4259-grafik.png

                                        hier mein Button:
                                        6d895e0b-aa79-45a9-a77c-008828462d0f-grafik.png

                                        Tipps?

                                        Grüße jpgorganizer
                                        (der, der sich gaaaaanz langsam an Frontend gewöhnt)

                                        jpgorganizer Uhula 2 Replies Last reply Reply Quote 0
                                        • B
                                          BoehserWolf @Uhula last edited by

                                          @Uhula
                                          Das Projekt als zip: 2020-01-29-MD_Demo_20180307.zip
                                          Der jqui container button view ist im View cardDemoButtons zu finden.

                                          Danke!

                                          B 1 Reply Last reply Reply Quote 0
                                          • jpgorganizer
                                            jpgorganizer last edited by

                                            @Uhula
                                            hier nicht mein dringendstes Thema, aber bevor ich es vergesse:

                                            ich habe eine Valuelist
                                            1f2c46c0-8303-4961-b785-1b864fa8a845-grafik.png

                                            die Anzeige sieht aus meiner Sicht etwas komisch aus, so als ob zwei Dreiecke übereinander liegen.
                                            Bild vom Android Phone, stark vergrößert

                                            nsmail-1.jpg

                                            Bug oder Feature?

                                            Grüße
                                            jpgorganizer

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            603
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            111
                                            650
                                            189506
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo