Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test Adapter Material Design Widgets v0.2.x

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.0k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    924

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Test Adapter Material Design Widgets v0.2.x

Scheduled Pinned Locked Moved Tester
visadapatervisualizationmaterialwidget
902 Posts 77 Posters 247.1k Views 79 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P PatrickFro

    @Oli Nun klappt es, vielen Dank!

    O Online
    O Online
    Oli
    wrote on last edited by
    #557

    @PatrickFro
    gerne

    Gruß
    Oliver

    1 Reply Last reply
    0
    • B Offline
      B Offline
      bommel_030
      wrote on last edited by
      #558

      @Scrounger

      Zumindest für den ersten Teil kann ich dir in gewissem geistigen Abstand folgen...
      Nicht schön, aber ich glaube ich hab zumindest die Grundzüge verstanden.
      Ich bastel mir in Java die Tabelle wie ich sie haben möchte.

      on({id: 'fb-checkpresence.0.json', change: "any"}, function (obj) {
      
      let mylist = [];
      
      let name = getState('0_userdata.0.Test.JSON.Name').val
      let datenpunkt = getState('0_userdata.0.Test.JSON.Datenpunkt').val
      let name2 = "testname"
      let datenpunkt2 = "testdatenpunkt"
      
      mylist.push(
                         {
                             Name: name,
                             Inhalt: datenpunkt,
                          } ,
                           {
                             Name: name2,
                             Inhalt: datenpunkt2,
                          }
                     )
      
      setState('0_userdata.0.Test.JSON.JSON', JSON.stringify(mylist))
      });
      


      Der Teil mit den Farben erschließt sich mir aber noch nicht mal ansatzweise...

      ScroungerS 1 Reply Last reply
      0
      • B bommel_030

        @Scrounger

        Zumindest für den ersten Teil kann ich dir in gewissem geistigen Abstand folgen...
        Nicht schön, aber ich glaube ich hab zumindest die Grundzüge verstanden.
        Ich bastel mir in Java die Tabelle wie ich sie haben möchte.

        on({id: 'fb-checkpresence.0.json', change: "any"}, function (obj) {
        
        let mylist = [];
        
        let name = getState('0_userdata.0.Test.JSON.Name').val
        let datenpunkt = getState('0_userdata.0.Test.JSON.Datenpunkt').val
        let name2 = "testname"
        let datenpunkt2 = "testdatenpunkt"
        
        mylist.push(
                           {
                               Name: name,
                               Inhalt: datenpunkt,
                            } ,
                             {
                               Name: name2,
                               Inhalt: datenpunkt2,
                            }
                       )
        
        setState('0_userdata.0.Test.JSON.JSON', JSON.stringify(mylist))
        });
        


        Der Teil mit den Farben erschließt sich mir aber noch nicht mal ansatzweise...

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by
        #559

        @bommel_030 sagte in Test Adapter Material Design Widgets v0.2.x:

        Der Teil mit den Farben erschließt sich mir aber noch nicht mal ansatzweise...

        Farben kannst du so z.B. ändern:

        mylist.push(
                           {
                               Name: '<font color="red">' + name + '</font>',
                               Inhalt: '<font color="blue">' + datenpunkt + '</font>',
                            } 
        

        Jetzt kannst die Farben auch in variablen packen und entsprechend mit Bedingungen andere Farben verwenden.

        1 Reply Last reply
        0
        • ScroungerS Offline
          ScroungerS Offline
          Scrounger
          Developer
          wrote on last edited by Scrounger
          #560

          Es gibt jetzt ein neues Select Widget, mit der Fehler das die daten ständig an den datenpunkt gesendet werden hoffentlich behoben sind. Weiter könnt ihr neben Einagbe der Menüpunkte über den Editor, einen JSON string verwenden oder eine Werteliste.
          Das alte Select Widget wird in der kommenden Version entfernt!

          select.gif

          Und da das Autocomplete quasi ein Nebenprodukt des select Widget ist, gibts das auch noch dazu ;)

          autocomplete.gif

          Wer testen will aktuellen master ziehen -> v 0.2.46

          K sigi234S 2 Replies Last reply
          3
          • ScroungerS Scrounger

            Es gibt jetzt ein neues Select Widget, mit der Fehler das die daten ständig an den datenpunkt gesendet werden hoffentlich behoben sind. Weiter könnt ihr neben Einagbe der Menüpunkte über den Editor, einen JSON string verwenden oder eine Werteliste.
            Das alte Select Widget wird in der kommenden Version entfernt!

            select.gif

            Und da das Autocomplete quasi ein Nebenprodukt des select Widget ist, gibts das auch noch dazu ;)

            autocomplete.gif

            Wer testen will aktuellen master ziehen -> v 0.2.46

            K Online
            K Online
            K_o_bold
            wrote on last edited by
            #561

            Ich teste gerade die widgets und stehe vor einem Problem.
            Wahrscheinlich eine dumme Frage ;-), aber wie kann ich denn die Größe des bool switch ändern?

            @Scrounger ,

            gefällt mir sehr gut was du da aus dem Ärmel zauberst :+1:

            1 Reply Last reply
            0
            • D Online
              D Online
              darkiop
              Most Active
              wrote on last edited by
              #562

              @Scrounger Klasse die neuen selects!

              So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

              3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

              Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

              ScroungerS 2 Replies Last reply
              0
              • D darkiop

                @Scrounger Klasse die neuen selects!

                So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                wrote on last edited by
                #563

                @darkiop sagte in Test Adapter Material Design Widgets v0.2.x:

                @Scrounger Klasse die neuen selects!

                So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                Stimmt da sind noch einige CSS Styling Fehler drin, schau ich mir an.

                1 Reply Last reply
                0
                • 0 Offline
                  0 Offline
                  0018
                  wrote on last edited by 0018
                  #564

                  Gibt es eine Möglichkeit im Widget "Top App Bar" die Zeilenüberschrift der Navigationsleiste in der Höhe zu verändern? Hintergrund hierfür ist das ich gerne "topAppBarLayout = dense" verwenden würde, hier aber dann die Höhe der Navigationsleistenüberschrift nicht übereinstimmt und hier dann das Gesamtbild nicht stimmig ist.

                  AppBar.png

                  Im Bild der Bereich in lila der in der Höhe dem grünen angepasst werden soll.

                  Mfg
                  0018

                  ScroungerS 1 Reply Last reply
                  0
                  • 0 0018

                    Gibt es eine Möglichkeit im Widget "Top App Bar" die Zeilenüberschrift der Navigationsleiste in der Höhe zu verändern? Hintergrund hierfür ist das ich gerne "topAppBarLayout = dense" verwenden würde, hier aber dann die Höhe der Navigationsleistenüberschrift nicht übereinstimmt und hier dann das Gesamtbild nicht stimmig ist.

                    AppBar.png

                    Im Bild der Bereich in lila der in der Höhe dem grünen angepasst werden soll.

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    wrote on last edited by
                    #565

                    @0018
                    Musst nen <font> Tag um den Text setzen.

                    0 2 Replies Last reply
                    0
                    • ScroungerS Scrounger

                      @0018
                      Musst nen <font> Tag um den Text setzen.

                      0 Offline
                      0 Offline
                      0018
                      wrote on last edited by
                      #566

                      @Scrounger Hast du ein Beispiel dafür damit es passen würde?

                      Mfg
                      0018

                      1 Reply Last reply
                      0
                      • B Offline
                        B Offline
                        bommel_030
                        wrote on last edited by
                        #567

                        @Scrounger
                        Nachdem ich meinen Farbflash überwunden habe, habe ich mal versucht mir das passende JSON für meine Tabelle aus nem Skript zu erstellen.
                        Der Zeilenumbruch in einer Zelle hat mich ein wenig zur Verzweifelung gebracht. Im Wohnzimmer gibt es halt Tür und Fenster...
                        76432291-ae00-4300-a0b6-dc390afa7b20-image.png

                        {
                                               Raum: name1,
                                               Temperatur: temp1 +' °C',
                           					Luftfeuchte: feuchte1 + '%',
                           					Ventilstand: ventil1 + '%',
                           					Fenster: [fenster1,  "\n" + tuer1],
                           					Lüften:	empfehlung1,
                           					Zustand: zustand1,
                                            } ,
                        


                        Jetzt hänge ich aber an der Spaltenbreite... Egal was ich im Widget eintrage, die Spalte bleibt so wie sie ist...
                        Hätte die Spalten gerne so breit, dass der Sortierpfeil keine zweite Zeile erzeugt. Und um zu sehen ob mein JSON Zeilenumbruch auch wirklich funktioniert ^^
                        Da ich für wechselnde Farben quasi für jede Zelle nen DP erzeugen muss bleibt sie jetzt erstmal einfarbig.
                        Und dank eines findigen Entwicklers übernimmt LinkedDevices die Übersetzung von Fenter true/false in offen/geschlossen von alleine...

                        ScroungerS 1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          Es gibt jetzt ein neues Select Widget, mit der Fehler das die daten ständig an den datenpunkt gesendet werden hoffentlich behoben sind. Weiter könnt ihr neben Einagbe der Menüpunkte über den Editor, einen JSON string verwenden oder eine Werteliste.
                          Das alte Select Widget wird in der kommenden Version entfernt!

                          select.gif

                          Und da das Autocomplete quasi ein Nebenprodukt des select Widget ist, gibts das auch noch dazu ;)

                          autocomplete.gif

                          Wer testen will aktuellen master ziehen -> v 0.2.46

                          sigi234S Online
                          sigi234S Online
                          sigi234
                          Forum Testing Most Active
                          wrote on last edited by sigi234
                          #568

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

                          Es gibt jetzt ein neues Select Widget

                          Der Intervall reagiert nicht in der Chart Line. Was mache ich Falsch?
                          Info: geht mit der alten Version auch nicht mehr?

                          Screenshot (1431).png

                          Screenshot (1433).png

                          Screenshot (1440).png

                          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                          Immer Daten sichern!

                          1 Reply Last reply
                          0
                          • B bommel_030

                            @Scrounger
                            Nachdem ich meinen Farbflash überwunden habe, habe ich mal versucht mir das passende JSON für meine Tabelle aus nem Skript zu erstellen.
                            Der Zeilenumbruch in einer Zelle hat mich ein wenig zur Verzweifelung gebracht. Im Wohnzimmer gibt es halt Tür und Fenster...
                            76432291-ae00-4300-a0b6-dc390afa7b20-image.png

                            {
                                                   Raum: name1,
                                                   Temperatur: temp1 +' °C',
                               					Luftfeuchte: feuchte1 + '%',
                               					Ventilstand: ventil1 + '%',
                               					Fenster: [fenster1,  "\n" + tuer1],
                               					Lüften:	empfehlung1,
                               					Zustand: zustand1,
                                                } ,
                            


                            Jetzt hänge ich aber an der Spaltenbreite... Egal was ich im Widget eintrage, die Spalte bleibt so wie sie ist...
                            Hätte die Spalten gerne so breit, dass der Sortierpfeil keine zweite Zeile erzeugt. Und um zu sehen ob mein JSON Zeilenumbruch auch wirklich funktioniert ^^
                            Da ich für wechselnde Farben quasi für jede Zelle nen DP erzeugen muss bleibt sie jetzt erstmal einfarbig.
                            Und dank eines findigen Entwicklers übernimmt LinkedDevices die Übersetzung von Fenter true/false in offen/geschlossen von alleine...

                            ScroungerS Offline
                            ScroungerS Offline
                            Scrounger
                            Developer
                            wrote on last edited by Scrounger
                            #569

                            @bommel_030
                            Stell Mal bitte den Wert des Datenpunkt und das Widget zur verfugung, dann schau ich es mir an.

                            @sigi234
                            Muss Englisch sein, 30 Sekunden muss als wert 30 seconds bekommen. Schau bitte in die Doku.

                            1 Reply Last reply
                            0
                            • D darkiop

                              @Scrounger Klasse die neuen selects!

                              So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                              3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              wrote on last edited by
                              #570

                              @darkiop sagte in Test Adapter Material Design Widgets v0.2.x:

                              @Scrounger Klasse die neuen selects!

                              So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                              3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                              Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

                              D 1 Reply Last reply
                              0
                              • I Online
                                I Online
                                intruder7
                                wrote on last edited by
                                #571

                                @Scrounger
                                Hallo, bei mir funktioniert das neue select widget überhaupt nicht (Crome)
                                Bei Werten über den Editor gehts. Aber sobald ich auf Werteliste umstelle und dort was eingebe verschwinden alle anderen Einstellungen( Farbe,Text usw.)

                                in der Konsole tauchen auch Fehler auf.

                                Vuetify Select]: error: Cannot read property 'split' of undefined, stack: TypeError: Cannot read property 'split' of undefined
                                    at Object.generateItemList (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:1:22620)
                                    at Object.vis.binds.materialdesign.select (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:5:5371)
                                    at Object.eval (tplVis-materialdesign-Select.js:29:86)
                                    at Function.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6166)
                                    at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
                                    at http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6147
                                    at HTMLDivElement.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1841)
                                    at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
                                    at Function.hookup (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1751)
                                    at Function.frag (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1344) 
                                vis.binds.materialdesign.select @ widgets.min.js:5
                                
                                
                                ScroungerS 1 Reply Last reply
                                0
                                • I intruder7

                                  @Scrounger
                                  Hallo, bei mir funktioniert das neue select widget überhaupt nicht (Crome)
                                  Bei Werten über den Editor gehts. Aber sobald ich auf Werteliste umstelle und dort was eingebe verschwinden alle anderen Einstellungen( Farbe,Text usw.)

                                  in der Konsole tauchen auch Fehler auf.

                                  Vuetify Select]: error: Cannot read property 'split' of undefined, stack: TypeError: Cannot read property 'split' of undefined
                                      at Object.generateItemList (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:1:22620)
                                      at Object.vis.binds.materialdesign.select (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:5:5371)
                                      at Object.eval (tplVis-materialdesign-Select.js:29:86)
                                      at Function.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6166)
                                      at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
                                      at http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6147
                                      at HTMLDivElement.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1841)
                                      at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
                                      at Function.hookup (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1751)
                                      at Function.frag (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1344) 
                                  vis.binds.materialdesign.select @ widgets.min.js:5
                                  
                                  
                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  wrote on last edited by
                                  #572

                                  @intruder7

                                  Ja das passiert wenn man für Label und Icon nichts eingibt. Muss ich noch einbauen das das abgefangen wird.

                                  I 1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

                                    @0018
                                    Musst nen <font> Tag um den Text setzen.

                                    0 Offline
                                    0 Offline
                                    0018
                                    wrote on last edited by
                                    #573

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

                                    @0018
                                    Musst nen <font> Tag um den Text setzen.

                                    Hast du dafür ein Beispiel? Bin leider nicht so fit in html tags

                                    Mfg
                                    0018

                                    ScroungerS 1 Reply Last reply
                                    0
                                    • B Offline
                                      B Offline
                                      bommel_030
                                      wrote on last edited by
                                      #574

                                      @Scrounger
                                      Ich nehme alles zurück und behaupte das Gegenteil...
                                      Hab die Version mal aktualisiert, jetzt klappt es auch mit der Spaltenbreite. Damit habe ich dann wieder das Problem, dass ich keinen Zeilenumbruch im JSON hinbekomme ^^
                                      Aber mal was anderes... NavBar...

                                      1. Ist es möglich, dass sich Menüpunkt [6] automatishc zusammenklappt wenn ein anderer Menüpunkt ausgewählt wird (abgesehen von den Untermenüs 7-9)?
                                      2. Man kann für Punkt 6 zwar eine View hinterlegen, bei klick auf Punkt 6 wird aber "nur" das Untermenü aufgeklappt. Soll das so sein, oder kann man das ändern?
                                        navbar.png
                                      1 Reply Last reply
                                      0
                                      • ScroungerS Scrounger
                                        Aktuelle Test Version 0.2.x
                                        Veröffentlichungsdatum 19.11.2019
                                        Github Link https://github.com/Scrounger/iobroker.vis-materialdesign

                                        Ich bitte Euch zukünftig alle Fragen bzgl. Einstellungen, Verständnis, Skripte, etc. im entsprechenden Thema des zugehörigen Widgets zu posten!

                                        • siehe Material Design Widgets Themen

                                        Hallo zusammen,
                                        ich arbeite aktuell an einem VIS-Adapter, der auf Google material components web Bibliothek basiert und "echte" Material Widgets zur Verfügung stellt inkl. der entsprechenden Effekt, wie Overlay, ripple, etc.

                                        Der Adapter befindet sich bereits im latest repository.
                                        Neue Funktionen (Widgets) werde ich zu erst hier vorstellen - wer dieses testen möchte muss direkt von github installieren: https://github.com/Scrounger/iobroker.vis-materialdesign.
                                        Nach erfolgreichem Feedback mach ich eine neue Version für das latest.

                                        Folgende Elemente sind bereits enthalten:

                                        review.gif

                                        Gemäß den Forumsrichtlinien ist das Thema in die Kategorie 'Test' umgezogen und ein neuer Thread wegen Anhebung Version aufgemacht worden.

                                        Die alten Threads findet ihr hier:

                                        • https://forum.iobroker.net/topic/26199/test-adapter-material-design-widgets-v0-1-x
                                        • https://forum.iobroker.net/topic/25374/neuer-vis-adpater-material-design-widgets

                                        Bitte bei Fragen zu den Widget Einstellungen diese zuerst durchlesen, da dort viele Fragen zu den Widget Einstellungen beantwortet wurden!

                                        paypal

                                        sigi234S Online
                                        sigi234S Online
                                        sigi234
                                        Forum Testing Most Active
                                        wrote on last edited by
                                        #575

                                        @Scrounger

                                        Kann ich die Zeilenhöhe im Spaltenlayout beeinflussen? Möchte den Abstand verkleinern.

                                        Screenshot (1458)_LI.jpg

                                        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                        Immer Daten sichern!

                                        1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

                                          @intruder7

                                          Ja das passiert wenn man für Label und Icon nichts eingibt. Muss ich noch einbauen das das abgefangen wird.

                                          I Online
                                          I Online
                                          intruder7
                                          wrote on last edited by
                                          #576

                                          @Scrounger :+1:
                                          gut zu wissen. Habs jetzt auch am laufen.
                                          Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.:disappointed:

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          707

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe