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 @g.polat last edited by CKMartens

      @g-polat @BobBruni
      Ich habe auch das Problem. Das View wird kurz angezeigt und verschwindet dann auf das Fallback. In Gruppen steht bei mir auch "Alle Gruppen" und in den Submenü habe ich keine Gruppen angelegt.

      Ich habe mal ein Issue angelegt.

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

        @ckmartens

        Sehr komisch das hier so viele damit Probleme haben !??

        Funktioniert seit Anfang an Super die TopAppBar, eingerichtet / geändert nach der Github Anleitung .

        Hier mal meine Einstellungen :

        1.JPG
        .
        2.JPG
        .
        und im Submenue

        [
        	{
        		"text": "Rollladen Erdgeschoß",
        		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
        		"userGroups": ["administrator", "user"],
        		"behaviorNotInUserGroup": "disabled"
        	
        	}, 
        	{
        		"text": "Rollladen Obergeschoß",
        		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
        		"divider": "true",
        		"userGroups": ["administrator", "user"],
        		"behaviorNotInUserGroup": "disabled"
        	}, 
        	{
        		"text": "Timer",
        		"divider": "true",
        		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
        		"userGroups": ["administrator", "user"],
        		"behaviorNotInUserGroup": "disabled"
        		
        	}
        ]
        

        .
        111111111111111111111111111111111111111.JPG

        CKMartens Negalein 2 Replies Last reply Reply Quote 0
        • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            739
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

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