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. Visualisierung
  4. Material Design Widgets: Table Widget

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.2k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.2k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

Material Design Widgets: Table Widget

Scheduled Pinned Locked Moved Visualisierung
vis
95 Posts 33 Posters 18.1k Views 38 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.
  • D Offline
    D Offline
    David St.
    wrote on last edited by David St.
    #39

    @Scrounger

    Vielen Dank für deine schnelle Antwort. Der Haken "Dauernd" war tatsächlich gesetzt. Auch wenn ich die Funktion der Checkbox nicht verstehe: Der Inhalt des Table Widgets wird nach Entfernen des Hakens auch dann angezeigt, wenn ich zwischen den Views wechsel. Allerdings habe ich eben festgestellt, dass der Inhalt nun auf den Views nach einer gewissen Zeitdauer der Inaktivität verschwindet. Wenn ich den Haken "Dauernd" wieder setze, habe ich das ungewünschte Verhalten bei Inaktivität nicht - Dann wird der Inhalt des Table Widgets allerdings nach Wechsel der View wieder nicht mehr angezeigt. Hast du dazu noch einen Tipp?

    ScroungerS 1 Reply Last reply
    0
    • D David St.

      @Scrounger

      Vielen Dank für deine schnelle Antwort. Der Haken "Dauernd" war tatsächlich gesetzt. Auch wenn ich die Funktion der Checkbox nicht verstehe: Der Inhalt des Table Widgets wird nach Entfernen des Hakens auch dann angezeigt, wenn ich zwischen den Views wechsel. Allerdings habe ich eben festgestellt, dass der Inhalt nun auf den Views nach einer gewissen Zeitdauer der Inaktivität verschwindet. Wenn ich den Haken "Dauernd" wieder setze, habe ich das ungewünschte Verhalten bei Inaktivität nicht - Dann wird der Inhalt des Table Widgets allerdings nach Wechsel der View wieder nicht mehr angezeigt. Hast du dazu noch einen Tipp?

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

      @David-St
      Was steht in der console des browser (F12), wenn die table verschwunden ist?

      1 Reply Last reply
      0
      • G Offline
        G Offline
        gender
        wrote on last edited by gender
        #41

        Muss hier auch nochmal eine Frage stellen:

        Ich habe eine Tabelle mit ein paar Datenwerten meiner CCU:

        [
        {
        "1": "Duty-Cycle",
        "2":    "{hm-rega.0.1919}"   
        }          	
        ,
        {
        "1":  "Watch-Dog-Alarm",
        "2": "{hm-rega.0.2254}"
        }
        ,
        {
        "1":  "Servicemeldungen",
        "2": "{hm-rega.0.maintenance}"
        }
        ]
        

        Gibt es nun eine Möglichkeit, die Werte bei bestimmten Bedinungen in bestimmten Farben anzuzeigen?

        Im HTML-Card geht es ja so

        {ccu:hm-rega.0.1919; ccu <= 10 ? "lime" : ccu <= 20 ? "orange" : "red"}
        

        Leider klappt das in der Tabelle so nicht.

        ScroungerS 1 Reply Last reply
        0
        • G gender

          Muss hier auch nochmal eine Frage stellen:

          Ich habe eine Tabelle mit ein paar Datenwerten meiner CCU:

          [
          {
          "1": "Duty-Cycle",
          "2":    "{hm-rega.0.1919}"   
          }          	
          ,
          {
          "1":  "Watch-Dog-Alarm",
          "2": "{hm-rega.0.2254}"
          }
          ,
          {
          "1":  "Servicemeldungen",
          "2": "{hm-rega.0.maintenance}"
          }
          ]
          

          Gibt es nun eine Möglichkeit, die Werte bei bestimmten Bedinungen in bestimmten Farben anzuzeigen?

          Im HTML-Card geht es ja so

          {ccu:hm-rega.0.1919; ccu <= 10 ? "lime" : ccu <= 20 ? "orange" : "red"}
          

          Leider klappt das in der Tabelle so nicht.

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

          @gender sagte in Material Design Widgets: Table Widget:

          Im HTML-Card geht es ja so

          {ccu:hm-rega.0.1919; ccu <= 10 ? "lime" : ccu <= 20 ? "orange" : "red"}
          

          Leider klappt das in der Tabelle so nicht.

          Da die Funktion in einem json string steckt, musst du hier hochkommas verwenden anstatt Anfrührungszeichen, so geht es:

          {ccu:hm-rega.0.1919; ccu <= 10 ? 'lime' : ccu <= 20 ? 'orange' : 'red'}
          
          1 Reply Last reply
          0
          • G Offline
            G Offline
            gender
            wrote on last edited by
            #43

            Perfekt, danke. Das klappt.
            Die Frage bleibt leider, wie man einen farbigen Text im JSON unterbringt:

            {
            
            "1":  "Servicemeldungen",
            
            "2":  {
                        text: 'Mein Text',
                        color:  '{ccu:hm-rega.0.1919; ccu <= 10 ? 'lime' : ccu <= 20 ? 'orange' : 'red'} ' 
                      }
            }
            

            So hätte ich z.B. gedacht. Klappt aber nicht.

            ScroungerS 1 Reply Last reply
            0
            • G gender

              Perfekt, danke. Das klappt.
              Die Frage bleibt leider, wie man einen farbigen Text im JSON unterbringt:

              {
              
              "1":  "Servicemeldungen",
              
              "2":  {
                          text: 'Mein Text',
                          color:  '{ccu:hm-rega.0.1919; ccu <= 10 ? 'lime' : ccu <= 20 ? 'orange' : 'red'} ' 
                        }
              }
              

              So hätte ich z.B. gedacht. Klappt aber nicht.

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

              @gender
              Die Hochkommas nur innerhalb der property verwenden!
              Farbe geht z.B. so

              [
              	{
              		"1": "Servicemeldungen",
              		"2": "<font color='{ccu:hm-rega.0.1919; ccu <= 10 ? 'lime' : ccu <= 20 ? 'orange' : 'red'}'>mein farbiger Text</font>"
              	}
              ]
              
              

              Kannst auch alternativ html tags einsetzen.

              1 Reply Last reply
              1
              • NegaleinN Offline
                NegaleinN Offline
                Negalein
                Global Moderator
                wrote on last edited by
                #45

                mir ist heute aufgefallen, dass alle Tables jetzt weiß sind!
                vis.png

                Kann es sein, dass sich der "Material Advanced" nicht mit "Material Design" verträgt?
                adapters - ioBroker.png

                [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.VIS.Synology.DS211+_Volumeanzeige","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"countCols":"4","tableLayout":"card","showHeader":true,"headerTextSize":"small","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"center","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":"center","label0":"Laufwerk","label2":"Used","label1":"Gesamt","padding_left0":"6","dataJson":"","padding_left2":"","class":"mdui-table mdui-table-ascard-r250-l mdui-table-striped noSwipe","textSize3":"small","textColor2":"#8f8f8f","textSize2":"small","rowHeight":"","textSize0":"small","textSize1":"small","padding_left1":"22","textColor0":"#8f8f8f","textColor1":"#8f8f8f","textColor3":"#8f8f8f","imageSize1":"0","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowBackground":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","colorRowText":"#d7cec1","dividers":"","colorBackground":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","prefix2":"<span style=\"display: inline-block; word-wrap:break-word;\">","prefix1":"<span style=\"display: inline-block; word-wrap:break-word;\">","suffix2":"</span>","suffix1":"</span>","columnWidth0":"","columnWidth1":"2","columnWidth2":"32","fontFamily2":"Jura-DemiBold","fontFamily1":"Jura-DemiBold","fontFamily0":"Jura-DemiBold","showColumn4":"true","colType4":"text","textAlign4":"center","name":"Tab_Warn-Error","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","imageSize0":"0","colNoWrap0":false,"colNoWrap1":true,"padding_right1":"22","g_columnLayout_§3":true,"showColumn3":"true","colType3":"text","textAlign3":"center","label4":"%","label3":"Free","colNoWrap4":false,"padding_right0":"0","colTextColor2":"","colNoWrap2":false,"colTextSize0":"11","colTextSize1":"11","colTextSize2":"11","colTextSize3":"11","headerRowHeight":"0","colTextColor0":"","sortKey0":"","showColumn5":"true","colType5":"text","textAlign5":"center","padding_right2":"","colTextSize4":"11"},"style":{"left":"198px","top":"83px","width":"343px","height":"202px","z-index":"20","background":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","background-color":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","color":"","overflow-y":"","border-radius":"","font-family":"Jura-DemiBold"},"widgetSet":"materialdesign"}]
                

                Material-Design ist auf 0.3.19

                Screenshot_2020-09-01 6 Edit vis.png Screenshot_2020-09-01 5 Edit vis.png Screenshot_2020-09-01 4 Edit vis.png Screenshot_2020-09-01 3 Edit vis.png Screenshot_2020-09-01 2 Edit vis.png Screenshot_2020-09-01 1 Edit vis.png

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

                sigi234S 1 Reply Last reply
                0
                • NegaleinN Negalein

                  mir ist heute aufgefallen, dass alle Tables jetzt weiß sind!
                  vis.png

                  Kann es sein, dass sich der "Material Advanced" nicht mit "Material Design" verträgt?
                  adapters - ioBroker.png

                  [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.VIS.Synology.DS211+_Volumeanzeige","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"countCols":"4","tableLayout":"card","showHeader":true,"headerTextSize":"small","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"center","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":"center","label0":"Laufwerk","label2":"Used","label1":"Gesamt","padding_left0":"6","dataJson":"","padding_left2":"","class":"mdui-table mdui-table-ascard-r250-l mdui-table-striped noSwipe","textSize3":"small","textColor2":"#8f8f8f","textSize2":"small","rowHeight":"","textSize0":"small","textSize1":"small","padding_left1":"22","textColor0":"#8f8f8f","textColor1":"#8f8f8f","textColor3":"#8f8f8f","imageSize1":"0","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowBackground":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","colorRowText":"#d7cec1","dividers":"","colorBackground":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","prefix2":"<span style=\"display: inline-block; word-wrap:break-word;\">","prefix1":"<span style=\"display: inline-block; word-wrap:break-word;\">","suffix2":"</span>","suffix1":"</span>","columnWidth0":"","columnWidth1":"2","columnWidth2":"32","fontFamily2":"Jura-DemiBold","fontFamily1":"Jura-DemiBold","fontFamily0":"Jura-DemiBold","showColumn4":"true","colType4":"text","textAlign4":"center","name":"Tab_Warn-Error","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","imageSize0":"0","colNoWrap0":false,"colNoWrap1":true,"padding_right1":"22","g_columnLayout_§3":true,"showColumn3":"true","colType3":"text","textAlign3":"center","label4":"%","label3":"Free","colNoWrap4":false,"padding_right0":"0","colTextColor2":"","colNoWrap2":false,"colTextSize0":"11","colTextSize1":"11","colTextSize2":"11","colTextSize3":"11","headerRowHeight":"0","colTextColor0":"","sortKey0":"","showColumn5":"true","colType5":"text","textAlign5":"center","padding_right2":"","colTextSize4":"11"},"style":{"left":"198px","top":"83px","width":"343px","height":"202px","z-index":"20","background":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","background-color":"linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)","color":"","overflow-y":"","border-radius":"","font-family":"Jura-DemiBold"},"widgetSet":"materialdesign"}]
                  

                  Material-Design ist auf 0.3.19

                  Screenshot_2020-09-01 6 Edit vis.png Screenshot_2020-09-01 5 Edit vis.png Screenshot_2020-09-01 4 Edit vis.png Screenshot_2020-09-01 3 Edit vis.png Screenshot_2020-09-01 2 Edit vis.png Screenshot_2020-09-01 1 Edit vis.png

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

                  @Negalein sagte in Material Design Widgets: Table Widget:

                  mir ist heute aufgefallen, dass alle Tables jetzt weiß sind!

                  Kann ich bestätigen.

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

                  M 1 Reply Last reply
                  0
                  • sigi234S sigi234

                    @Negalein sagte in Material Design Widgets: Table Widget:

                    mir ist heute aufgefallen, dass alle Tables jetzt weiß sind!

                    Kann ich bestätigen.

                    M Online
                    M Online
                    michihorn
                    wrote on last edited by michihorn
                    #47

                    @sigi234 @Negalein ich habe eine ähnliche Verhaltensweise in einem anderen Chat (https://forum.iobroker.net/topic/36473/edit-vis-1-2-11) angemerkt. ich habe nun Material Advanced gelöscht und schon sehen meine Views wieder aus wie zuvor.
                    Gruß
                    MH

                    1 Reply Last reply
                    0
                    • C Offline
                      C Offline
                      coalado
                      wrote on last edited by
                      #48

                      Ich "füttere" die Table über eine JSON. Wie wird ein JSON property auf die richtige Spalte "gemapped"?

                      ScroungerS 1 Reply Last reply
                      0
                      • C coalado

                        Ich "füttere" die Table über eine JSON. Wie wird ein JSON property auf die richtige Spalte "gemapped"?

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

                        @coalado

                        So z.B.:

                        [
                        	{
                        		"col1": "Reihe 1, Spalte 1",
                        		"col2": "Reihe 1, Spalte 2",
                        		"col3": "Reihe 1, Spalte 3"
                        	}, {
                        		"col1": "Reihe 2, Spalte 1",
                        		"col2": "Reihe 2, Spalte 2",
                        		"col3": "Reihe 2, Spalte 3"
                        	}, {
                        		"col1": "Reihe 3, Spalte 1",
                        		"col2": "Reihe 3, Spalte 2",
                        		"col3": "Reihe 3, Spalte 3"
                        	}
                        ]
                        

                        13e35555-eb2b-4336-9de5-686e568a1f6c-grafik.png

                        d.h. 1. Property = 1. Spalte, 2. Property = 2. Spalte, usw.

                        C 1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          @coalado

                          So z.B.:

                          [
                          	{
                          		"col1": "Reihe 1, Spalte 1",
                          		"col2": "Reihe 1, Spalte 2",
                          		"col3": "Reihe 1, Spalte 3"
                          	}, {
                          		"col1": "Reihe 2, Spalte 1",
                          		"col2": "Reihe 2, Spalte 2",
                          		"col3": "Reihe 2, Spalte 3"
                          	}, {
                          		"col1": "Reihe 3, Spalte 1",
                          		"col2": "Reihe 3, Spalte 2",
                          		"col3": "Reihe 3, Spalte 3"
                          	}
                          ]
                          

                          13e35555-eb2b-4336-9de5-686e568a1f6c-grafik.png

                          d.h. 1. Property = 1. Spalte, 2. Property = 2. Spalte, usw.

                          C Offline
                          C Offline
                          coalado
                          wrote on last edited by
                          #50

                          @Scrounger
                          Ich habe eben im Code gesehen, dass die Reihenfolge der Properties zählt.

                            let colElement = getColElement(row, col, Object.values(jsonData[row])[col], textSize, jsonData[row]);
                          

                          Das ist eher "ungewöhnlich".

                          Wäre es nicht eine schöne Erweiterung wenn man für jede Spalte optional einen Wert "mapping" definieren könnte? Setze ich Spalte1.mapping = "banane", wird dafür immer das property {banane:"gelb"} verwendet.

                          Also

                          if(mapping){
                            let colElement = getColElement(row, col, jsonData[row][mapping], textSize, jsonData[row]);
                          }else{
                           let colElement = getColElement(row, col, Object.values(jsonData[row])[col], textSize, jsonData[row]);
                          }
                          

                          Ansonsten mal an dieser Stelle ein DICKES DANKESCHÖN. Deine Widgets sind wirklich super.

                          ScroungerS 1 Reply Last reply
                          0
                          • C coalado

                            @Scrounger
                            Ich habe eben im Code gesehen, dass die Reihenfolge der Properties zählt.

                              let colElement = getColElement(row, col, Object.values(jsonData[row])[col], textSize, jsonData[row]);
                            

                            Das ist eher "ungewöhnlich".

                            Wäre es nicht eine schöne Erweiterung wenn man für jede Spalte optional einen Wert "mapping" definieren könnte? Setze ich Spalte1.mapping = "banane", wird dafür immer das property {banane:"gelb"} verwendet.

                            Also

                            if(mapping){
                              let colElement = getColElement(row, col, jsonData[row][mapping], textSize, jsonData[row]);
                            }else{
                             let colElement = getColElement(row, col, Object.values(jsonData[row])[col], textSize, jsonData[row]);
                            }
                            

                            Ansonsten mal an dieser Stelle ein DICKES DANKESCHÖN. Deine Widgets sind wirklich super.

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

                            @coalado sagte in Material Design Widgets: Table Widget:

                            Das ist eher "ungewöhnlich".

                            Wieso soll das "ungewöhnlich" sein. Man kann es auf beide arten realisieren. Allerdings hab ich das Widget an das "orginale" table Widget vom vis adapter angelehnt, damit ggf. ein Umstieg sehr einfach ist.
                            Ich seh den Vorteil eines Mappings nicht. Man muss doch bloß die reihenfolge der Props z.B. durch copy paste ändern oder halt per skript?

                            Wäre es nicht eine schöne Erweiterung wenn man für jede Spalte optional einen Wert "mapping" definieren könnte? Setze ich Spalte1.mapping = "banane", wird dafür immer das property {banane:"gelb"} verwendet.

                            Also

                            if(mapping){
                              let colElement = getColElement(row, col, jsonData[row][mapping], textSize, jsonData[row]);
                            }else{
                             let colElement = getColElement(row, col, Object.values(jsonData[row])[col], textSize, jsonData[row]);
                            }
                            

                            Du kannst gerne einen PR machen. Allerdings dabei bitte drauf achten, dass das mapping auf die Sortierung, die Controls und das update entsprechend auch angepasst werden muss.

                            1 Reply Last reply
                            0
                            • C Offline
                              C Offline
                              coalado
                              wrote on last edited by
                              #52

                              Es ist sicher völlig OK das so zu machen. Für mich ist es einfach ungewohnt.

                              Die Gefahr dass ich dabei einiges kaputt mache überwiegt vermutlich.
                              Ich baue einfach einen Wrapper, der mir am Ende nochmal die Properties in die passende Reihenfolge setzt.
                              Vielen Dank soweit

                              1 Reply Last reply
                              0
                              • S Offline
                                S Offline
                                Snapergy
                                wrote on last edited by Snapergy
                                #53

                                Ich glaube ich bin zu blöd... wie kriege ich denn den Scrollbar hin? Habe eine Tabelle, die wesentlich mehr Inhalt besitzt als angezeigt, aber einen Scrollbar zeigt er mir nicht. Bedarf es irgendeiner Einstellung? Habe mich schon durch den Thread und die Anleitung gelesen, aber nichts gefunden....

                                habs gerade gefunden :face_with_rolling_eyes:

                                1 Reply Last reply
                                0
                                • ScroungerS Scrounger

                                  Hab das ical2Table skript nochmal überarbeitet:

                                  • nun werden alle ical instanzen berücksichtigt
                                  • Sortierung nach Zeit aufsteigend hinzugefügt
                                  var instances = $(`[id=ical.*.data.table]`);
                                  instances.on(ical2TableWidget);
                                  
                                  function ical2TableWidget() {
                                      try {
                                          let calList = [];
                                  
                                          for (var inst = 0; inst <= instances.length - 1; inst++) {
                                              let icalObj = getState(instances[inst]).val;
                                  
                                              if (icalObj) {
                                                  for (var i = 0; i <= icalObj.length - 1; i++) {
                                                      let item = icalObj[i];
                                  
                                                      let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                  
                                                      // Objekt für Tabelle erzeugen
                                                      calList.push({
                                                          farbe: `<div style="background: ${getMyCalendarColor(calendarName)}; width: 3px; height: 20px"></div>`,
                                                          zeit: item.date,
                                                          termin: item.event,
                                                          kalender: calendarName,
                                                          timestamp: Date.parse(item._date)
                                                      })
                                                  }
                                              }
                                          }
                                  
                                          // Liste sort by timestamp asc
                                          calList.sort(function (a, b) {
                                              return a.timestamp == b.timestamp ? 0 : +(a.timestamp > b.timestamp) || -1;
                                          });
                                  
                                          // Enter the destination data point that is to be used as object ID in the widget
                                          setState('0_userdata.0.ical', JSON.stringify(calList), true);
                                  
                                          function getMyCalendarColor(calendarName) {
                                              // assign colors via the calendar names, use calendar name as set in ical
                                              if (calendarName === 'calendar1') {
                                                  return '#FF0000';
                                              } else if (calendarName === 'calendar2') {
                                                  return '#44739e'
                                              } else if (calendarName === 'calendar3') {
                                                  return '#32a852'
                                              }
                                          }
                                  
                                      } catch (e) {
                                          console.error(`ical2MaterialDesignTableWidget: message: ${e.message}, stack: ${e.stack}`);
                                      }
                                  }
                                  
                                  ical2TableWidget();
                                  

                                  fc84b25f-c6f0-4b0b-b197-eefd74fdaa97-grafik.png

                                  Widget:

                                  [{"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":"480px"},"widgetSet":"materialdesign"}]
                                  

                                  F Offline
                                  F Offline
                                  fabian.krauss
                                  wrote on last edited by
                                  #54

                                  @Scrounger
                                  Danke für das schöne Skript und das Widget!
                                  Ich glaube das Widget müsste aber aktualisiert werden, dass Bild und Widget zusammen passen. Ich musste noch bei Spaltenlayout[0] die Spaltenbreite von 0 auf 1 erhöhen, um die Farbmarkierungen zu sehen.

                                  Grüße
                                  Fabi

                                  1 Reply Last reply
                                  0
                                  • jackblacksonJ Offline
                                    jackblacksonJ Offline
                                    jackblackson
                                    wrote on last edited by
                                    #55

                                    Servus! Ich hab dein Widget schon länger in Verwendung, um das JSON vom Log Parser auszugeben. Seit einiger Zeit (weiß leider nicht wie lange, aber es kann nicht so lange her sein) zeigt es mir nur noch drei Zeilen an:
                                    bca7ec0f-83f4-4e50-87e2-0dc9a0242b76-grafik.png

                                    Ich hab es grad neu hinzugefügt, sobald ich das Widget größer ziehe, wird nur die Zeilenhöhe größer, aber nicht mehr Inhalt. Hat jemand da eine Idee? Das JSON enthält definitiv mehr Einträge als 3. Overflow-y hab ich auf Scroll eingestellt.

                                    S 1 Reply Last reply
                                    0
                                    • jackblacksonJ jackblackson

                                      Servus! Ich hab dein Widget schon länger in Verwendung, um das JSON vom Log Parser auszugeben. Seit einiger Zeit (weiß leider nicht wie lange, aber es kann nicht so lange her sein) zeigt es mir nur noch drei Zeilen an:
                                      bca7ec0f-83f4-4e50-87e2-0dc9a0242b76-grafik.png

                                      Ich hab es grad neu hinzugefügt, sobald ich das Widget größer ziehe, wird nur die Zeilenhöhe größer, aber nicht mehr Inhalt. Hat jemand da eine Idee? Das JSON enthält definitiv mehr Einträge als 3. Overflow-y hab ich auf Scroll eingestellt.

                                      S Offline
                                      S Offline
                                      Snapergy
                                      wrote on last edited by
                                      #56

                                      @jackblackson

                                      das Problem hatte ich ja auch. Gehe mal in den Einstellungen des Widgets im Reiter Layout auf "feste Zeilenüberschrift" und setze da den Haken. Dann war das Problem bei mir gelöst.

                                      jackblacksonJ 1 Reply Last reply
                                      0
                                      • S Snapergy

                                        @jackblackson

                                        das Problem hatte ich ja auch. Gehe mal in den Einstellungen des Widgets im Reiter Layout auf "feste Zeilenüberschrift" und setze da den Haken. Dann war das Problem bei mir gelöst.

                                        jackblacksonJ Offline
                                        jackblacksonJ Offline
                                        jackblackson
                                        wrote on last edited by
                                        #57

                                        @Snapergy Danke für den Tipp, hab ich probiert. Ich konnte es nun etwas eingrenzen. Wenn ich bei countcols 2 eingebe, klappt alles:
                                        ffb42632-42a4-4ba4-8cc4-930bef54602f-grafik.png
                                        Sobald ich es auf 3 ändere, weil ich ja den Warntext sehen will, schaut es dann so aus:
                                        7c84eb03-f7f6-4936-a6d1-8763d9a573f7-grafik.png

                                        1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

                                          Bar Chart Widget

                                          table.giftable_html_widget_example.gif

                                          Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

                                          Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

                                          • Dokumentation
                                          • Online Beispiel

                                          Themen zu anderen Widgets findest du hier!

                                          P Offline
                                          P Offline
                                          PeterPan
                                          wrote on last edited by PeterPan
                                          #58

                                          @Scrounger Hallo,
                                          ich würde gerne einen Datenpunkt direkt in der Tabelle anzeigen lassen wollen. Über Beispiele habe ich für das Feld "Daten als JSON" zunächst das gefunden:

                                          "test": {
                                                  "type" : "textfield",
                                          	"inputLayout": "solo",
                                          	"inputAlignment": "center",
                                          	"oid": "deconz.0.Sensors.20.battery"
                                          	},
                                          "test2": {
                                          	    "type": "html",
                                          

                                          Wie sähe der Punkt "oid" im Falle des Typs "html" aus?

                                          Es mag simpel sein, aber meine Kenntnisse sind so olaola ...

                                          Vielen Dank und Gruß

                                          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

                                          782

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          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