Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.3.x

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter Material Design Widgets v0.3.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • sainthein
      sainthein last edited by

      Ja das mit der Schriftart habe ich auch vermutet, habe alle ersetzt, aber keine Änderung.

      Der debug modus war definitv beide male aktiv. Seltsam das das nicht hinhaut.

      Habe jetzt eine neues Projekt erstellt, hier läuft alles bestens.

      👍

      AxelF1977 1 Reply Last reply Reply Quote 0
      • AxelF1977
        AxelF1977 @sainthein last edited by

        Hi zusammen,

        ich glaube ich stelle ich ein wenig blöd an. Ich bin gerade dabei auf die Material Design Widgets umzusteigen.

        Bei der Navigation in der Top App Bar bekomme ich keine Links hin. Beschriftung etc. ist klar. In der Beispiel VIS bezieht sich das Widget auf eine Datei 0_userdata.0.materialdesignwidgets.topappbar

        Wurde diese manuell angelegt? Wenn ja, wie? Die ganze Ordnungsstruktur gibt es bei mir nicht, und ja, der Adapter ist installiert

        9cef5e74-fb5a-4a2b-a41d-fcca686ed848-image.png

        Glasfaser 1 Reply Last reply Reply Quote 0
        • Glasfaser
          Glasfaser @AxelF1977 last edited by

          @AxelF1977

          Alles gut ... hast bis jetzt alles richtig gemacht !

          Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
          Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

          Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

          hier der Thread dazu : top-app-bar-widget

          hier auch zum schauen wie es geht : Link Text

          AxelF1977 1 Reply Last reply Reply Quote 0
          • AxelF1977
            AxelF1977 @Glasfaser last edited by AxelF1977

            @Glasfaser sagte in Test Adapter Material Design Widgets v0.3.x:

            @AxelF1977

            Alles gut ... hast bis jetzt alles richtig gemacht !

            Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
            Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

            Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

            hier der Thread dazu : top-app-bar-widget

            hier auch zum schauen wie es geht : Link Text

            Großartig, vielen Dank! Das hat geholfen.

            Allerdings habe ich mit dem View in Widget 8. Stellt der views anders dar?

            So sieht es mit View in Widget 8 aus

            bda9f1d7-f80c-4e2e-8c9d-5ea474587446-image.png

            so soll es aussehen

            1c9ab5e3-71bf-4ecd-aaa5-6c0046d0c146-image.png

            Richtig angezeigt wird es mit widget in view, es ist die selbe View die jeweils angezeigt wird, sehr merkwürdig

            AxelF1977 P 2 Replies Last reply Reply Quote 0
            • AxelF1977
              AxelF1977 @AxelF1977 last edited by

              Nach einigem Tüfteln habe ich rausgefunden was los ist. Da ich hier noch mit Float arbeite, wegen den verschiedenen Höhen habe ich es bisher weder mit Grid noch Masonry Layouts hinbekommen, wird das in View in Widget 8 nicht richtig dargestellt. Wenn ich aber meine cont Datei mit Floats in View in Widget lade, und das dann wiederum und View in Widget 8 einbinde, geht es.

              Also kann View in Widget 8 keine Float Layouts darstellen? Wo ist der Unterschied zu View in Widget, außer dass ich mehrere Quellen einbinden kann?

              1 Reply Last reply Reply Quote 0
              • J
                jobe451 last edited by Scrounger

                @Scrounger
                Vielen dank für den Hinweis. Das war der Trick, hätte ich eigentlich selber drauf kommen müssen. Ich hatte noch nie mit rohen CSS-Variablen gearbeitet.

                Ich hätte da noch eine Frage: Wie kann sich eine HTML-Card dynamisch an die Höhe eines dynamischen Inhalts anpassen?

                Ich finde dazu keine Lösung. Als Inhalt kann ich nur ein fixes HTML definieren. Evtl kann darin zwar per "Object Binding" Datenpunkte referenzieren (nicht ausprobiert). Ich suche aber viel eher aber einen Weg, wie ich eine beliebige "view" als Inhalt konfigurieren könnte. So dass der Inhalt zum Beispiel eine dynamische Icon-List ist oder wie in meinem Screenshot unten eine ganze Hirarchie von verschachtelten Details-Views.

                Aktuell positioniere ich einfach absolut Elemente über der Card.

                2262fc9f-051d-4204-b7a0-f6f6ee495fc6-image.png

                Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                Scrounger 1 Reply Last reply Reply Quote 0
                • Scrounger
                  Scrounger Developer @jobe451 last edited by Scrounger

                  @jobe451
                  Kannst du mit Grid View Widget oder Masonry Widget realisieren.
                  Schau Dir am besten dazu das Online Beispiel und die Doku an.
                  https://github.com/Scrounger/ioBroker.vis-materialdesign

                  Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                  1 Reply Last reply Reply Quote 0
                  • J
                    jobe451 last edited by Scrounger

                    @jobe451 said in Material Design Widgets: Top App Bar Widget:

                    @Scrounger

                    Ich hab nun den ganzen Abend rumprobiert, Dokus angeschaut und die Beispiel-App und kriegs nicht hin. Bei allen verfügbaren Beispielen zu Grid und Masonry wurden die Höhe der einzelnen views explizit mit einem Pixelwert definiert. Wenn sich dann bei Masonry die "Höhe der view[0]" auf leer setze, dann findet sich im entsprechenden DIV dennoch ein Default Wert von 100px im Style des entsprechenden divs.

                    Ich suche hingegen eine Möglichkeit, dass die Höhe sich dynamisch an den Inhalt der View anpasst. Wenn ich nun über die Browser-F12-Dev-Tools manuell auf dem entsprechenden View-Div-Style (.materialdesign-masonry-item) dann style="height: 100px;" entferne, dann krieg ich genau das Verhalten, was ich Suche.

                    Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                    1 Reply Last reply Reply Quote 0
                    • J
                      jobe451 last edited by Scrounger

                      Ich hab mich selber an einem Fix des Problemes versucht und einen Fork erstellt:
                      https://github.com/jobe451/ioBroker.vis-materialdesign/blob/master/widgets/materialdesign/js/widgets/materialdesign.views.js

                      Statt einfach einen 100px default zu setzen

                      style="height: ${myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), 100)}px; ${viewWidth}; display: none;">
                      

                      Mach ich darin vorgängig:

                                      let viewHeightValue = myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), -1);
                                      let viewHeight = "";
                                      if (viewHeightValue !== -1) {
                                          viewHeight = "height: " + viewHeightValue.toString() + "px; ";
                                      }
                      

                      Obs funktioniert, ich glaubs. Ich kriegs aber nicht getestet. Ich installier zwar den Adapter von meinem Fork, aber irgendwo bleibt das alte Script im cache. Alle iobroker uploads und restarts bringen nichts.

                      Anyway, damit würde das Problem gelöst sein. Vorher:
                      6f0f3ff1-9a9f-48a9-9358-790482085e59-image.png

                      Nachher:
                      2071abc4-3a05-4abc-9098-4aa838886693-image.png

                      Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                      Scrounger 1 Reply Last reply Reply Quote 1
                      • Scrounger
                        Scrounger Developer @jobe451 last edited by Scrounger

                        @jobe451
                        Mach Mal bitte nen Export von der View die du anbinden möchtest, oder besser vom ganzen Projekt. Variable Höhe hat bei mir nie funktioniert. Muss das testen.

                        Dein Foto geht deshalb nicht, weil du sämtliche Dateien minifiy erstellen musst.

                        Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                        1 Reply Last reply Reply Quote 0
                        • J
                          jobe451 last edited by jobe451

                          Okey, ich hab mal einen "export (anonymized)" gemacht:
                          [entfernt]

                          Kommentare zum aktuellen Stand:

                          • Wenn du die 4 "height: 100px" entfernst, passen sich die Höhen am Inhalt an, am einfachsten in der Konsole mit:
                            $(".materialdesign-masonry-item").attr("style", "");
                          • Aktuell fehlt noch die vertikale Scrollbar, warum, muss ich erst noch rausfinden
                          • In der Endversion sollten sämtliche absoluten positionierungen wegfallen

                          Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                          Scrounger 2 Replies Last reply Reply Quote 1
                          • Scrounger
                            Scrounger Developer @jobe451 last edited by Scrounger

                            @jobe451
                            Scrollbar musst du overlay Auto beim grid / masonry aktivieren.

                            Und ob die absoluten Höhe Angabe wegfallen kann muss ich erstmal im Detail anschauen, weil es muss mit widgets funktionieren und nicht mit selbstgebauten HTML Elementen!

                            Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

                            1 Reply Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer @jobe451 last edited by

                              @jobe451 sagte in Test Adapter Material Design Widgets v0.3.x:

                              • In der Endversion sollten sämtliche absoluten positionierungen wegfallen

                              Mega, das war genau das was ich immer noch gesucht hatte 👍

                              Wenn man das Wigdet mit der größten Höhe im eingebundenen view auf relative stellt, klappt es.

                              613a2886-d016-402b-909c-ed1a2770d1c7-grafik.png

                              An diesen Lösungsweg hatte ich noch nie gedacht. Dann werd ich die Höhe optional machen.

                              J 1 Reply Last reply Reply Quote 1
                              • J
                                jobe451 @Scrounger last edited by jobe451

                                @Scrounger
                                Danke! Dank dem Tipp mit dem Minify hab ich nun auch meinen Fork zum laufen gebracht und hab nun alle cards mit adaptiver Höhe am funktionieren.

                                d6285761-9730-4efe-a152-7ca8f5498eba-image.png

                                d5e1add4-9e83-4a4e-af28-faccec812756-image.png

                                Den card-look erreiche ich mit

                                .materialdesign-masonry-item > div > div.vis-view  {
                                    padding:  1rem 0.5rem;
                                    border-radius: 4px;
                                    background-color: var(--materialdesign-color-card-background);
                                    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
                                    box-sizing: border-box;
                                }
                                
                                1 Reply Last reply Reply Quote 0
                                • Latzi
                                  Latzi @Scrounger last edited by Scrounger

                                  @Scrounger
                                  ich habe das update auf version 0.3.9 durchgeführt, seither werden meine Tabelleneinträge auf die gesamte Tabellenhöhe gleichmäßig aufgeteilt
                                  5234ad97-b3e1-48cf-a565-9b5acbc77869-grafik.png
                                  Gibt es eine Einstellung, damit ich die Einträge in konstantem Zeilenabstand erhalte?

                                  Edit: Hab ich nur bei firefox, chrome stellt es normal dar.
                                  ffcf976f-9850-4730-8097-cef86bd7e649-grafik.png

                                  Edit: Verschoben, da Frage Fehler betrifft

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @Latzi last edited by

                                    @Latzi
                                    Das sollte eigentlich nicht sein.
                                    Stell mir bitte mal nen Export von dem Widget zur Verfügung.

                                    Latzi 1 Reply Last reply Reply Quote 0
                                    • Latzi
                                      Latzi @Scrounger last edited by

                                      @Scrounger sagte in Test Adapter Material Design Widgets v0.3.x:

                                      Stell mir bitte mal nen Export von dem Widget zur Verfügung.

                                      Hi @Scrounger klar doch, vielen Dank!

                                      [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.Adapter.Adapter_update","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"countCols":"2","tableLayout":"standard","showHeader":true,"headerTextSize":"14px","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"center","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Test_Delete/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis.0/Test_Delete/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis.0/Test_Delete/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"showColumn2":"true","colType2":"text","textAlign2":"center","showColumn3":true,"colType3":"text","textAlign3":"left","label0":"Adpater","label2":"installiert","label1":"verfügbar","padding_left0":"9","label3":"Log-Eintrag","dataJson":"","padding_left2":"","class":"","textSize3":"small","textColor2":"#8f8f8f","textSize2":"small","padding_right3":"","rowHeight":"","textSize0":"small","textSize1":"small","padding_left1":"","textColor0":"#8f8f8f","textColor1":"#8f8f8f","textColor3":"#8f8f8f","imageSize1":"","prefix3":"<span style=\"word-wrap:break-all\">","suffix3":"</span>","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowBackground":"#2e2e2e","colorRowText":"#fff","dividers":"","colorBackground":"transparent","prefix2":"","prefix1":"","suffix2":"","suffix1":"","columnWidth0":"","columnWidth1":"","columnWidth3":"","columnWidth2":"","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","fontFamily1":"Arial, Helvetica, sans-serif","fontFamily3":"Jura-DemiBold","fontFamily2":"Arial, Helvetica, sans-serif","fontFamily0":"Arial, Helvetica, sans-serif","colTextSize2":"14px","colTextSize3":"16px","colTextSize1":"14px","colTextSize0":"14px","name":"Adapter_updates","headerRowHeight":"35","headerFontFamily":"Arial, Helvetica, sans-serif","colNoWrap1":false,"colNoWrap0":false,"colTextColor0":"#d5d4de","colTextColor1":"#afaccd","colTextColor2":"","colTextColor3":"#d5d4de","colNoWrap3":false,"imageSize0":"","padding_right1":"","imageSize2":"","showColumn4":"true","colType4":"text","textAlign4":"center","padding_right0":"0","fixedHeader":"false","comment":""},"style":{"left":"25px","top":"72px","width":"300px","height":"500px","z-index":"10","background":"rgba(32,32,32,0.5)","background-color":"","overflow-y":"auto","border-radius":"10px"},"widgetSet":"materialdesign"}]
                                      

                                      1 Reply Last reply Reply Quote 0
                                      • C
                                        Coffeelover last edited by

                                        @jobe451 sagte in Test Adapter Material Design Widgets v0.3.x:

                                        Den card-look erreiche ich mit...

                                        Wo muss ich das denn eintragen. Im CSS hatte bei mir keinen Effekt.

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

                                          Hi @Scrounger, wenn ich das Spotify-Symbol verwenden möchte, scheint es ein Problem zu geben:

                                          d8cbe825-e638-4c95-b4ca-3ce185fc89e9-image.png

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @Bostil last edited by

                                            @Bostil
                                            Danke für die Info, dadurch hab ich noch nen ganz groben Schnitzer entdeckt. Ist in der nächsten Version dann behoben.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            703
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material material design widgets vis visualization widget
                                            33
                                            169
                                            17151
                                            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