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. Material Design Widgets: Top App Bar Widget

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

Material Design Widgets: Top App Bar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
412 Beiträge 74 Kommentatoren 88.2k Aufrufe 79 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.
  • GlasfaserG Glasfaser

    @ckmartens

    Mhh ... funktioniert.

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

    CKMartensC Offline
    CKMartensC Offline
    CKMartens
    schrieb am zuletzt editiert von CKMartens
    #247

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

    GlasfaserG ScroungerS 2 Antworten Letzte Antwort
    0
    • CKMartensC CKMartens

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

      GlasfaserG Offline
      GlasfaserG Offline
      Glasfaser
      schrieb am zuletzt editiert von
      #248

      @ckmartens

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

      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

      CKMartensC 1 Antwort Letzte Antwort
      0
      • CKMartensC CKMartens

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

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von
        #249

        @ckmartens
        Welche Version vom vis Adapter hast du?

        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

        CKMartensC 1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger

          @ckmartens
          Welche Version vom vis Adapter hast du?

          CKMartensC Offline
          CKMartensC Offline
          CKMartens
          schrieb am zuletzt editiert von
          #250

          @scrounger
          VIS ist 1.3.7
          Und Web 3.3.0

          1 Antwort Letzte Antwort
          0
          • GlasfaserG Glasfaser

            @ckmartens

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

            CKMartensC Offline
            CKMartensC Offline
            CKMartens
            schrieb am zuletzt editiert von
            #251

            @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

            ScroungerS 1 Antwort Letzte Antwort
            0
            • CKMartensC CKMartens

              @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

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              schrieb am zuletzt editiert von Scrounger
              #252

              @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.

              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

              CKMartensC 1 Antwort Letzte Antwort
              0
              • ScroungerS 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.

                CKMartensC Offline
                CKMartensC Offline
                CKMartens
                schrieb am zuletzt editiert von
                #253

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

                ScroungerS GlasfaserG 2 Antworten Letzte Antwort
                0
                • CKMartensC CKMartens

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

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  schrieb am zuletzt editiert von
                  #254

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

                  <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                  <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                  CKMartensC 1 Antwort Letzte Antwort
                  0
                  • CKMartensC CKMartens

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

                    GlasfaserG Offline
                    GlasfaserG Offline
                    Glasfaser
                    schrieb am zuletzt editiert von
                    #255

                    @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

                    Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                    1 Antwort Letzte Antwort
                    1
                    • GlasfaserG 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

                      NegaleinN Offline
                      NegaleinN Offline
                      Negalein
                      Global Moderator
                      schrieb am zuletzt editiert von
                      #256

                      @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

                      ° Node.js: 20.17.0 NPM: 10.8.2
                      ° Proxmox, Ubuntu 22.04.3 LTS
                      ° Fixer ---> iob fix

                      GlasfaserG 1 Antwort Letzte Antwort
                      0
                      • NegaleinN Negalein

                        @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

                        GlasfaserG Offline
                        GlasfaserG Offline
                        Glasfaser
                        schrieb am zuletzt editiert von
                        #257

                        @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;
                        }
                        
                        

                        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                        NegaleinN 1 Antwort Letzte Antwort
                        0
                        • GlasfaserG Glasfaser

                          @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;
                          }
                          
                          
                          NegaleinN Offline
                          NegaleinN Offline
                          Negalein
                          Global Moderator
                          schrieb am zuletzt editiert von
                          #258

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

                          Bitteschön

                          Dankeschön :)

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

                          ° Node.js: 20.17.0 NPM: 10.8.2
                          ° Proxmox, Ubuntu 22.04.3 LTS
                          ° Fixer ---> iob fix

                          GlasfaserG 1 Antwort Letzte Antwort
                          0
                          • NegaleinN Negalein

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

                            Bitteschön

                            Dankeschön :)

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

                            GlasfaserG Offline
                            GlasfaserG Offline
                            Glasfaser
                            schrieb am zuletzt editiert von
                            #259

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

                            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                            NegaleinN 1 Antwort Letzte Antwort
                            0
                            • GlasfaserG Glasfaser

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

                              NegaleinN Offline
                              NegaleinN Offline
                              Negalein
                              Global Moderator
                              schrieb am zuletzt editiert von Negalein
                              #260

                              @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

                              ° Node.js: 20.17.0 NPM: 10.8.2
                              ° Proxmox, Ubuntu 22.04.3 LTS
                              ° Fixer ---> iob fix

                              ScroungerS 1 Antwort Letzte Antwort
                              0
                              • NegaleinN 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

                                ScroungerS Offline
                                ScroungerS Offline
                                Scrounger
                                Developer
                                schrieb am zuletzt editiert von
                                #261

                                @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

                                <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                1 Antwort Letzte Antwort
                                0
                                • Horst BöttcherH Offline
                                  Horst BöttcherH Offline
                                  Horst Böttcher
                                  schrieb am zuletzt editiert von
                                  #262

                                  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

                                  NegaleinN 1 Antwort Letzte Antwort
                                  0
                                  • Horst BöttcherH Horst Böttcher

                                    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

                                    NegaleinN Offline
                                    NegaleinN Offline
                                    Negalein
                                    Global Moderator
                                    schrieb am zuletzt editiert von
                                    #263

                                    @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                    Wie kann ich das lösen View schaut durchs Menü

                                    wie ist der Z-Index vom Menü und von dem was durchscheint?
                                    Du musst mit dem Menü höher gehen.

                                    ° Node.js: 20.17.0 NPM: 10.8.2
                                    ° Proxmox, Ubuntu 22.04.3 LTS
                                    ° Fixer ---> iob fix

                                    Horst BöttcherH 1 Antwort Letzte Antwort
                                    0
                                    • NegaleinN Negalein

                                      @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                      Wie kann ich das lösen View schaut durchs Menü

                                      wie ist der Z-Index vom Menü und von dem was durchscheint?
                                      Du musst mit dem Menü höher gehen.

                                      Horst BöttcherH Offline
                                      Horst BöttcherH Offline
                                      Horst Böttcher
                                      schrieb am zuletzt editiert von
                                      #264

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

                                      @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                      Wie kann ich das lösen View schaut durchs Menü

                                      wie ist der Z-Index vom Menü und von dem was durchscheint?
                                      Du musst mit dem Menü höher gehen.

                                      Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

                                      NegaleinN 1 Antwort Letzte Antwort
                                      0
                                      • Horst BöttcherH Horst Böttcher

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

                                        @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                        Wie kann ich das lösen View schaut durchs Menü

                                        wie ist der Z-Index vom Menü und von dem was durchscheint?
                                        Du musst mit dem Menü höher gehen.

                                        Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

                                        NegaleinN Offline
                                        NegaleinN Offline
                                        Negalein
                                        Global Moderator
                                        schrieb am zuletzt editiert von
                                        #265

                                        @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                        Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

                                        schick mir mal einen Export der View oder des ganzen Projekts.

                                        ° Node.js: 20.17.0 NPM: 10.8.2
                                        ° Proxmox, Ubuntu 22.04.3 LTS
                                        ° Fixer ---> iob fix

                                        Horst BöttcherH 1 Antwort Letzte Antwort
                                        0
                                        • O Oli

                                          @Scrounger

                                          das habe ich auch gemacht

                                          58be143d-7822-4669-b1d2-c4535bd4937c-image.png

                                          Mit folgenden Ergebiss
                                          7f63290c-57cb-49b8-87dd-7d91495bc0d8-image.png

                                          C Offline
                                          C Offline
                                          Chilihead
                                          schrieb am zuletzt editiert von
                                          #266

                                          @oli darf ich fragen wie du die Warnungsbuttons "beleuchtet" hast? Danke

                                          O 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

                                          513

                                          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