Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Top App Bar Widget

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: Top App Bar Widget

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

      @glasfaser
      Hat bei mir bis zum vorletzten Update auch funktioniert. Dann fingen die Fehler an.
      Ich habe gerade zum Testen das Vies von dos1973 importiert. Und hier tritt der selbe Fehler auf. Also sollte es nicht an Einstellungen in meiner View liegen. Und wie gesagt , die ersten drei, also [0] - [2], Elemente funktionieren, danach nicht mehr. Das selbe im importierten Vis.

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

        @ckmartens

        kannst du das TopAppBar Widget von dir mal hier hochladen .

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

          @glasfaser
          Klar...

          [{"tpl":"tplVis-materialdesign-TopAppBar-Navigation","data":{"oid":"0_userdata.0.vis.wohnzimmer.pageid","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"navItemCount":"5","navDefaultValue":"0","topAppBarLayout":"standard","titleTopAppBar":"Casa Martens","colorTopAppBarTitle":"{0_userdata.0.vis.Design.TopAppBar.Title.Farbe}","colorTopAppBarBackground":"{0_userdata.0.vis.Design.TopAppBar.BackgroundColor}","titleFont":"{0_userdata.0.vis.Design.TopAppBar.Title.Schriftart}","titleFontSize":"","topAppBarZ_index":"998","vibrateTopAppBarOnMobilDevices":"50","drawerLayout":"modal","drawerItemLayout":"standard","listItemDividerStyle":"standard","z_index":"1000","showHeader":false,"headerLabel":"<h4 class='mdc-drawer__title'>Casa Martens</h4><h6 class='mdc-drawer__subtitle'>Gugelitze 2</h6>","showLabels":"true","listItemAlignment":"left","listItemTextFont":"{0_userdata.0.vis.Design.TopAppBar.ListItem.Font-Family}","listItemTextFontDisabled":"","listItemTextSize":"","listItemHeaderFont":"","listItemHeaderTextSize":"","backdropLabelBackgroundHeight":"30","vibrateDrawerOnMobilDevices":"0","colorDrawerBackground":"{0_userdata.0.vis.Design.TopAppBar.ListItem.BackgroundColor}","colorDrawerItemBackground":"","colorDrawerHeaderBackground":"","colorListItemHover":"{0_userdata.0.vis.Design.TopAppBar.ListItem.HoverColor}","colorListItemSelected":"","colorListItemText":"{0_userdata.0.vis.Design.TopAppBar.ListItem.ItemTextColor}","colorListItemTextSelected":"","colorListItemTextDisabled":"","colorListItemIconDisabled":"","colorListItemHeaders":"","colorListItemDivider":"","colorSubItemToggleIcon":"","colorDrawerbackdropLabelBackground":"","colorDrawerbackdropLabelBackgroundActive":"","drawerSubItemLayout":"standard","listSubItemDividerStyle":"standard","colorListSubItemDivider":"{0_userdata.0.vis.Design.TopAppBar.ListItem.SubMenuDeviderColor}","listSubItemAlignment":"left","listItemSubTextFont":"{0_userdata.0.vis.Design.TopAppBar.ListItem.Font-Family}","listSubItemTextSize":"","listItemSubTextFontDisabled":"","showSubItemsLabels":true,"colorDrawerSubBackground":"","colorDrawerSubItemBackground":"","colorListSubItemHover":"","colorListSubItemSelected":"","colorListSubItemText":"","colorListSubItemTextSelected":"","colorDrawerbackdropSubLabelBackground":"","colorDrawerbackdropSubLabelBackgroundActive":"","iconDrawer0":"/vis.0/CasaMartens_WZ_new/icons/menue/home.svg","iconDrawerColor0":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility0":"hide","iconDrawer1":"/vis.0/CasaMartens_WZ_new/menue/humidity_02.png","iconDrawerColor1":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility1":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/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/signals/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/signals/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,"showIndexNum":true,"dividers0":false,"labels0":"Übersicht","labels1":"Raumklima","iconDrawer2":"/vis-icontwo/Navigations/nav_i.png","iconDrawerColor2":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility2":"hide","submenus2":"[\n\t{\n\t\t\"text\": \"Heizung\",\n\t\t\"icon\": \"/vis.0/CasaMartens_WZ_new/icons/menue/heater.svg\"\n\t}, \n\t{\n\t\t\"text\": \"Fenster\",\n\t\t\"icon\": \"/vis-icontwo/Doors_Windows/window_open.png\"\n\t}, \n\t{\n\t\t\"text\": \"Licht\",\n\t\t\"icon\": \"/vis-icontwo/Lights/light_on.png\"\n\t}\n]","labels2":"Räume","iconDrawer3":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawerColor3":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility3":"hide","iconDrawer4":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawerColor4":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility4":"hide","iconDrawer5":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawerColor5":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.top_app_bar.item_icon;dark:vis-materialdesign.0.colors.dark.top_app_bar.item_icon; mode === \"true\" ? dark : light}","permissionVisibility5":"hide","permissionGroupSelector2":null,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","labels3":"Covid","submenus1":"","showSelectedItemAsTitle":true,"drawerIconHeight":"25"},"style":{"left":"0px","top":"0px","width":"100%"},"widgetSet":"materialdesign"}]
          
          Glasfaser 1 Reply Last reply Reply Quote 0
          • Glasfaser
            Glasfaser @CKMartens last edited by

            @ckmartens

            Mhh ... funktioniert.

            Habe auch das VIS Projekt von dos1973 importiert ,
            gemeinsamen Datenpunkt in TopAppBar und im View in Widget 8 eingetragen , funktioniert.

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

              @glasfaser sehr seltsam. Ich schau morgen mal was der Debuger vom Browser ausgibt

              Glasfaser Scrounger 2 Replies Last reply Reply Quote 0
              • Glasfaser
                Glasfaser @CKMartens last edited by

                @ckmartens

                Schau mal nach , wie sich der gemeinsame Datenpunkt verändert , beim umschalten und dann wenn der Fehler kommt auf welchen Wert er springt .

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

                  @ckmartens
                  Welche Version vom vis Adapter hast du?

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

                    @scrounger
                    VIS ist 1.3.7
                    Und Web 3.3.0

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

                      @glasfaser er springt immer auf 0 zurück. Auch wenn ich den Wert händisch eingebe. Im Fallback ist egal was steht. Kann da z. B. 2 eintragen und es geht trotzdem auf 0

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

                        @ckmartens

                        beim view in widget 8 ist
                        e46d5af5-ddc6-4f92-8177-64e06187909b-grafik.png
                        aktiviert?

                        brauch das consolen log (F12) zur runtime, wenn das phänomen auftritt.

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

                          @scrounger
                          Ja, ist aktiviert.
                          Ich stelle das Log Montage rein, am Wochenende komme ich nicht dazu. GöGa hat Aufgaben verteilt 🤷‍♂️

                          Scrounger Glasfaser 2 Replies Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @CKMartens last edited by

                            @ckmartens
                            Versuch davor Mal noch das Widget komplett neu zu erstellen

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

                              @ckmartens

                              Ich habe noch mal getestet ... ich finde kein Fehler .

                              Ich habe mal ein Test Projekt erstellt .

                              Teste es mal bei dir :

                              ( den gemeinsamen Datenpunkt bei beiden Widgets ergänzen )

                              2021-02-06-zumBasteln.zip

                              1.JPG

                              1 Reply Last reply Reply Quote 1
                              • Negalein
                                Negalein Global Moderator @Glasfaser last edited by

                                @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

                                111111111111111111111111111111111111111.JPG

                                Servus

                                Wie schaffst du im Widget den Verlauf für den Hintergrund?

                                Trag ich es so ein, wird der Hintergrund transparent.
                                Screenshot 2021-02-12 173249.png

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

                                  @negalein

                                  Bitteschön 😉

                                  /**Top App Bar Hintergrund und Auswahlbutton @Glasfaser**/
                                  .mdc-drawer {
                                  
                                      background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                                  }
                                  
                                  .mdc-top-app-bar {
                                        background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                                  }
                                  
                                  
                                  Negalein 1 Reply Last reply Reply Quote 0
                                  • Negalein
                                    Negalein Global Moderator @Glasfaser last edited by

                                    @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

                                    Bitteschön

                                    Dankeschön 🙂

                                    Und lässt du dann das Feld "Hintergrund" einfach leer?

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

                                      @negalein
                                      Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

                                      Negalein 1 Reply Last reply Reply Quote 0
                                      • Negalein
                                        Negalein Global Moderator @Glasfaser last edited by Negalein

                                        @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

                                        Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

                                        bräuchte nochmal deine Hilfe 🙂

                                        Ich würde gern den Hintergrund in zB Schwarz haben.
                                        Finde aber nicht den passenden Menüpunkt.
                                        Screenshot 2021-02-13 000607.png

                                        Und ist das normal? Version ist aktuell. Das steht bei jedem Feld für Schriftart und Farbe.


                                        Screenshot_2021-02-13 Edit vis.png
                                        Screenshot_2021-02-13 Edit vis(1).png
                                        Screenshot_2021-02-13 Edit vis(2).png
                                        Screenshot_2021-02-13 Edit vis(3).png
                                        Screenshot_2021-02-13 Edit vis(4).png
                                        Screenshot_2021-02-13 Edit vis(5).png

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

                                          @negalein sagte in Material Design Widgets: Top App Bar Widget:

                                          Und ist das normal? Version ist aktuell. Das steht bei jedem Feld für Schriftart und Farbe.

                                          Ja das sind die Bindings für die themes die du über Adapter settings konfigurieren kannst.
                                          Einfach nach Top App Bar Filtern und dort dann Farben, Schriftart und Schriftgröße einstellen:

                                          cc1ef8f2-12f3-4a2d-b5f3-c3fb749e5859-grafik.png

                                          1 Reply Last reply Reply Quote 0
                                          • Horst Böttcher
                                            Horst Böttcher last edited by

                                            Wie kann ich das lösen View schaut durchs Menü
                                            wnn ich den den Z-indedx verändere kann ich nicht mehr schalten aber dann wird es Richtig angezeigt
                                            4164c8c359e83cde281dee8f75190a68.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            813
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            74
                                            412
                                            65968
                                            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