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
    16
    1
    1.9k

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

  • 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 246.8k 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.
  • 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 Offline
        I Offline
        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 Do not disturb
              B Do not disturb
              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 Offline
                  I Offline
                  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
                  • 0 0018

                    @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

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

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

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

                    https://www.w3schools.com/tags/tag_font.asp

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

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

                    Muss auch für die Spalte aktiviert bzw. deaktiviert sein:
                    9fae240c-c023-44a8-af2f-acea1ca1cb02-grafik.png

                    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)?

                    Nein

                    1. 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?

                    Ja soll so sein und kann man auch nicht ändern.

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

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

                    In deinem konkreten Fall kannst du sie nur vergrößern. Verkleinern geht nur über die Schriftgröße und per css überschreiben des padding

                    1 Reply Last reply
                    0
                    • ScroungerS Scrounger

                      @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 Online
                      D Online
                      darkiop
                      Most Active
                      wrote on last edited by
                      #578

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

                      @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

                      Passt noch nicht:

                      0266a9ab-5492-45ae-8410-3aa8079e2985-grafik.png

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

                      ScroungerS 1 Reply Last reply
                      0
                      • B Offline
                        B Offline
                        Buddinski88
                        wrote on last edited by
                        #579

                        @Scrounger, gibt es die Möglichkeit noch ein "Feld" für den iCal-Adapter einzubauen, in welchem ich sagen kann, wenn "ical_Oelkuchs" dann "Oelkuchs"?

                        cf097019-9b84-41a2-8767-a7c50935e76b-image.png

                        Ich habe schon versucht auf Basis des Beispiels für den Enigma-Adapter ein Skript zu schreiben, aber ich scheitere schon daran, welches Node_Module ich für die constate als require nehmen muss :-(

                        Oben auf dem Bild sieht man den Kalender aus dem MaterialDesign von Uhula. Dieser Zeigt in der ersten Spalte auch die Kalenderfarbe aus dem iCal-Adapter an. Geht sowas auch?
                        Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde. Gerne auch gegen Einwurf von Geld.

                        ScroungerS 1 Reply Last reply
                        0
                        • D darkiop

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

                          @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

                          Passt noch nicht:

                          0266a9ab-5492-45ae-8410-3aa8079e2985-grafik.png

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

                          @darkiop

                          Doch das geht, gibt zwei farben:

                          ead577d1-603e-46f0-aa62-9f37f8a3f47a-grafik.png

                          select ist leer:
                          40d6f441-0ed2-481b-aaee-c5f504e3559f-grafik.png

                          select hat nen wert:
                          484c2eb0-095d-43ee-965c-0ecd92b106a2-grafik.png

                          @Buddinski88

                          Aktuell geht das nur per Skript. Vielleicht mach ich die Tage mal ein Beispiel dafür.

                          Und für ical hab ich noch eine viel bessere idee ;)
                          https://vuetifyjs.com/en/components/calendars#usage

                          ac41a6d9-4934-4db4-9420-7000013f4dd7-grafik.png

                          Steht schon auf meiner Todo Liste.

                          1 Reply Last reply
                          0
                          • B Buddinski88

                            @Scrounger, gibt es die Möglichkeit noch ein "Feld" für den iCal-Adapter einzubauen, in welchem ich sagen kann, wenn "ical_Oelkuchs" dann "Oelkuchs"?

                            cf097019-9b84-41a2-8767-a7c50935e76b-image.png

                            Ich habe schon versucht auf Basis des Beispiels für den Enigma-Adapter ein Skript zu schreiben, aber ich scheitere schon daran, welches Node_Module ich für die constate als require nehmen muss :-(

                            Oben auf dem Bild sieht man den Kalender aus dem MaterialDesign von Uhula. Dieser Zeigt in der ersten Spalte auch die Kalenderfarbe aus dem iCal-Adapter an. Geht sowas auch?
                            Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde. Gerne auch gegen Einwurf von Geld.

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

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

                            Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

                            Hier das Beispielskript:

                            on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                let icalObj = obj.state.val;
                                let calList = [];
                            
                                for (var i = 0; i <= icalObj.length - 1; i++) {
                                    let item = icalObj[i];
                            
                                    // Kalendername extrahieren
                                    let kalenderName = item._class.split(' ')[0].replace('ical_', '');
                            
                                    // Objekt für Tabelle erzeugen
                                    calList.push({
                                        farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
                                        zeit: item.date,
                                        termin: item.event,
                                        kalender: kalenderName,
                                        timestamp: Date.parse(item._date) 
                                    })
                                }
                            
                                function getMyKalenderFarbe(kalenderName) {
                                    // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
                                    if (kalenderName === 'calendar1') {
                                        return 'red';
                                    } else if (kalenderName === 'calendar2') {
                                        return '#44739e'
                                    }
                                }
                            
                                // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
                                setState('0_userdata.0.ical', JSON.stringify(calList), true);
                            });
                            

                            Widget dazu:


                            [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","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,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

                            Und so sieht das dann aus:
                            4a54252c-a3b1-4c0f-b01d-f209222540ad-grafik.png

                            I B 2 Replies Last reply
                            1
                            • I Offline
                              I Offline
                              intruder7
                              wrote on last edited by
                              #582

                              ich wollte es nochmal hochbringen.

                              Bzw. @all ,hat dieses Problem auch jemand anders oder stimmt bei mir etwas nicht?
                              @Scrounger 👍
                              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.😞

                              ScroungerS 1 Reply Last reply
                              0
                              • I intruder7

                                ich wollte es nochmal hochbringen.

                                Bzw. @all ,hat dieses Problem auch jemand anders oder stimmt bei mir etwas nicht?
                                @Scrounger 👍
                                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.😞

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

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

                                Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.😞

                                Das funktioniert auch nicht beim tabl - basic Widget. Schätze das das Problem im vis Adapter liegt bei aktualiserung von Datenpunkten des typ objekts. Hab ich mich aber noch nicht beschäftigt und werde ich sicher in naher Zukunft auch nicht, weil ich mir meine Daten für Tabellen immer per skript aufbereitet und dann als json string speichere.
                                Kannst dazu aber gerne ein git issue erstellen, dann gerät es nicht in vergessenheit.

                                1 Reply Last reply
                                0
                                • ScroungerS Scrounger

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

                                  Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

                                  Hier das Beispielskript:

                                  on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                      let icalObj = obj.state.val;
                                      let calList = [];
                                  
                                      for (var i = 0; i <= icalObj.length - 1; i++) {
                                          let item = icalObj[i];
                                  
                                          // Kalendername extrahieren
                                          let kalenderName = item._class.split(' ')[0].replace('ical_', '');
                                  
                                          // Objekt für Tabelle erzeugen
                                          calList.push({
                                              farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
                                              zeit: item.date,
                                              termin: item.event,
                                              kalender: kalenderName,
                                              timestamp: Date.parse(item._date) 
                                          })
                                      }
                                  
                                      function getMyKalenderFarbe(kalenderName) {
                                          // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
                                          if (kalenderName === 'calendar1') {
                                              return 'red';
                                          } else if (kalenderName === 'calendar2') {
                                              return '#44739e'
                                          }
                                      }
                                  
                                      // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
                                      setState('0_userdata.0.ical', JSON.stringify(calList), true);
                                  });
                                  

                                  Widget dazu:


                                  [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","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,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

                                  Und so sieht das dann aus:
                                  4a54252c-a3b1-4c0f-b01d-f209222540ad-grafik.png

                                  I Offline
                                  I Offline
                                  intruder7
                                  wrote on last edited by
                                  #584

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

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

                                  Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

                                  Hier das Beispielskript:

                                  on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                      let icalObj = obj.state.val;
                                      let calList = [];
                                  
                                      for (var i = 0; i <= icalObj.length - 1; i++) {
                                          let item = icalObj[i];
                                  
                                          // Kalendername extrahieren
                                          let kalenderName = item._class.split(' ')[0].replace('ical_', '');
                                  
                                          // Objekt für Tabelle erzeugen
                                          calList.push({
                                              farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
                                              zeit: item.date,
                                              termin: item.event,
                                              kalender: kalenderName,
                                              timestamp: Date.parse(item._date) 
                                          })
                                      }
                                  
                                      function getMyKalenderFarbe(kalenderName) {
                                          // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
                                          if (kalenderName === 'calendar1') {
                                              return 'red';
                                          } else if (kalenderName === 'calendar2') {
                                              return '#44739e'
                                          }
                                      }
                                  
                                      // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
                                      setState('0_userdata.0.ical', JSON.stringify(calList), true);
                                  });
                                  

                                  Du bist der Beste. genau da lag der Fehler. Ich habe das reine JSON als Objekt genutzt. Habe in deinem Skript gesehen dass du

                                  stringify
                                  

                                  nutzt. Habs damit probiert. Jetzt aktualisiert er auch.:clap: :grin:

                                  1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

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

                                    Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

                                    Hier das Beispielskript:

                                    on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                        let icalObj = obj.state.val;
                                        let calList = [];
                                    
                                        for (var i = 0; i <= icalObj.length - 1; i++) {
                                            let item = icalObj[i];
                                    
                                            // Kalendername extrahieren
                                            let kalenderName = item._class.split(' ')[0].replace('ical_', '');
                                    
                                            // Objekt für Tabelle erzeugen
                                            calList.push({
                                                farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
                                                zeit: item.date,
                                                termin: item.event,
                                                kalender: kalenderName,
                                                timestamp: Date.parse(item._date) 
                                            })
                                        }
                                    
                                        function getMyKalenderFarbe(kalenderName) {
                                            // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
                                            if (kalenderName === 'calendar1') {
                                                return 'red';
                                            } else if (kalenderName === 'calendar2') {
                                                return '#44739e'
                                            }
                                        }
                                    
                                        // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
                                        setState('0_userdata.0.ical', JSON.stringify(calList), true);
                                    });
                                    

                                    Widget dazu:


                                    [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","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,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

                                    Und so sieht das dann aus:
                                    4a54252c-a3b1-4c0f-b01d-f209222540ad-grafik.png

                                    B Offline
                                    B Offline
                                    Buddinski88
                                    wrote on last edited by Buddinski88
                                    #585

                                    @Scrounger, auch hier noch mal einen großen Dank an dich! (Spende ging raus) :-)
                                    Ich habe die Abfrage des Kalenders für dessen Farbe noch etwas erweitert, damit mehrere/beliebig viele Kalender abgefragt werden können.

                                    Hier mein Code:

                                    on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                        let icalObj = obj.state.val;
                                        let calList = [];
                                     
                                        for (var i = 0; i <= icalObj.length - 1; i++) {
                                            let item = icalObj[i];
                                     
                                            // Kalendername extrahieren
                                            let kalenderName = item._class.split(' ')[0].replace('ical_', '');
                                     
                                            // Objekt für Tabelle erzeugen
                                            calList.push({
                                                farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
                                                zeit: item.date,
                                                termin: item.event,
                                                kalender: kalenderName,
                                                timestamp: Date.parse(item._date) 
                                            })
                                        }
                                     
                                        function getMyKalenderFarbe(kalenderName) {
                                            // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
                                            switch (kalenderName){
                                                case 'Abfall':
                                                    return '795548';
                                                    break;
                                                case 'Familie':
                                                    return '#0b8044';
                                                    break;
                                                case 'Familie Arbeit':
                                                    return '#f6c226';
                                                    break;
                                                case 'Geburtstage':
                                                    return '#d50000';
                                                    break;
                                                case 'Aquascape':
                                                    return '#1baade';
                                                    break;
                                                default:
                                                    return '#000000'
                                                    break;
                                            }
                                        }
                                     
                                        // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
                                        setState('javascript.0.variables.vis.ical.convertedData', JSON.stringify(calList), true);
                                    });
                                    
                                    
                                    1 Reply Last reply
                                    0
                                    • D Offline
                                      D Offline
                                      darkbrain85
                                      wrote on last edited by
                                      #586

                                      Hi zusammen!

                                      Ich würde gerne meine Flot Diagramme alle auf Line History Chart umstellen.
                                      Für meine PV Anlage habe ich ein Diagramm in dem mehrere Datensätze übereinander liegen.
                                      Dort benötige ich zwar eine Farbige Füllung, aber keine Linie . Wenn die Liniendicke auf 0 ist wird immer noch eine ganz dünne Linie angezeigt. Diese ist dann leider auch auf den darüber liegenden Flächen zu sehen.

                                      Hier mal ein vergrößerter Screenshot davon:

                                      e060b68d-212b-48db-b828-c6f9ca6431c1-image.png

                                      Wie kann ich diese rote Linie in diesem Fall ausblenden? Schon wäre, wenn bei Liniendicke "0" einfach die Linie ganz verschwinden würde.

                                      Anke für Eure Hilfe!

                                      ScroungerS 1 Reply Last reply
                                      0
                                      • D darkbrain85

                                        Hi zusammen!

                                        Ich würde gerne meine Flot Diagramme alle auf Line History Chart umstellen.
                                        Für meine PV Anlage habe ich ein Diagramm in dem mehrere Datensätze übereinander liegen.
                                        Dort benötige ich zwar eine Farbige Füllung, aber keine Linie . Wenn die Liniendicke auf 0 ist wird immer noch eine ganz dünne Linie angezeigt. Diese ist dann leider auch auf den darüber liegenden Flächen zu sehen.

                                        Hier mal ein vergrößerter Screenshot davon:

                                        e060b68d-212b-48db-b828-c6f9ca6431c1-image.png

                                        Wie kann ich diese rote Linie in diesem Fall ausblenden? Schon wäre, wenn bei Liniendicke "0" einfach die Linie ganz verschwinden würde.

                                        Anke für Eure Hilfe!

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

                                        @darkbrain85
                                        Versuch mal die Linienfarbe / Datenfarbe auf transparentzu setzen.

                                        D 1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

                                          @darkbrain85
                                          Versuch mal die Linienfarbe / Datenfarbe auf transparentzu setzen.

                                          D Offline
                                          D Offline
                                          darkbrain85
                                          wrote on last edited by
                                          #588

                                          @Scrounger

                                          Ja klar, das ich da nicht selber drauf gekommen bin... Danke für den Tip!

                                          Eine Sache noch:
                                          Lässt sich der Abstand von einer unten angeordneten Legende zur X-Achse verkleinern? Da geht IMHO viel Platz verloren...

                                          ScroungerS 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

                                          629

                                          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