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
    24
    1
    1.3k

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

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

Material Design Widgets: Table Widget

Scheduled Pinned Locked Moved Visualisierung
vis
95 Posts 33 Posters 18.2k 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 DevChannel-de

    @rosi8818
    Dafür sorgt der ical Adapter bereits. Wenn Du in das Skript genauer schaust, werden die Daten aus den ical.*.data.table Objekten ausgelesen, also aus ical.0.data.table, ical.1.data.table, usw. In jedem von diesen table-Objekten sind Daten aller Kalender enthalten.

    R Offline
    R Offline
    Rosi8818
    wrote on last edited by
    #75

    @devchannel-de danke für die Info, dann muss ich nochmal schauen, denn im ical.1 habe ich drei Kalender drin und nur der erste darin wird gelesen aber ansonsten liest er alle Instanzen ical.0, ical.1

    D 1 Reply Last reply
    0
    • R Rosi8818

      @devchannel-de danke für die Info, dann muss ich nochmal schauen, denn im ical.1 habe ich drei Kalender drin und nur der erste darin wird gelesen aber ansonsten liest er alle Instanzen ical.0, ical.1

      D Offline
      D Offline
      DevChannel-de
      wrote on last edited by DevChannel-de
      #76

      @rosi8818
      Eine häufige Stolperfalle ist der "Tagesvorschau"-Wert. Der Default ist nur auf wenige Tage gestellt. Wie du hier siehst, habe ich es z.B. bei mir auf 365 gestellt:
      667b6799-c6e0-4d19-bdc6-f86be003851c-image.png

      Ansonsten immer in den Logs schauen, ob dort etwas steht...

      R 1 Reply Last reply
      0
      • D DevChannel-de

        @rosi8818
        Eine häufige Stolperfalle ist der "Tagesvorschau"-Wert. Der Default ist nur auf wenige Tage gestellt. Wie du hier siehst, habe ich es z.B. bei mir auf 365 gestellt:
        667b6799-c6e0-4d19-bdc6-f86be003851c-image.png

        Ansonsten immer in den Logs schauen, ob dort etwas steht...

        R Offline
        R Offline
        Rosi8818
        wrote on last edited by
        #77

        @devchannel-de das habe ich auch schob probiert, im zweiten Kalender einer Instanz habe ich extra für morgen ein Termin eingestellt aber den Kalender zeigt er überhaupt nicht an... das wird bestimmt wieder eine Kleinigkeit sein (wie immer).
        Auch interessant, den Filter kann man einstellen und funktioniert aber mit zwei Werten auch nicht bspw. Test;Bio
        Ich muss noch viel suchen und lernen ;)

        1 Reply Last reply
        0
        • ScroungerS Scrounger

          @rosi8818
          Also der Json String sieht soweit ok aus. Erstell Mal das Widget komplett neue, also kein import. Evtl. Ist das noch ne sehr alte Version.

          O Offline
          O Offline
          Oli
          wrote on last edited by
          #78

          @scrounger

          sorry ich checks mal wieder nicht.

          ich fülle mir über ein Script eine Tabelle, was muss ich in die Json mit einbauen, damit ich über alle Spalten einen Button_State habe?

          Hier mal der Codeschnipsel für mein Json:

          deviceList.push({
                image: image,                    
                subText: subText,
                ist: temp + " °C",
                soll: stemp + " °C",
                ventil: ventil + " %", 
               status: status,
               etage: etage,                                                                                                                    
          });
          

          Gruß
          Oliver

          ScroungerS 1 Reply Last reply
          0
          • O Oli

            @scrounger

            sorry ich checks mal wieder nicht.

            ich fülle mir über ein Script eine Tabelle, was muss ich in die Json mit einbauen, damit ich über alle Spalten einen Button_State habe?

            Hier mal der Codeschnipsel für mein Json:

            deviceList.push({
                  image: image,                    
                  subText: subText,
                  ist: temp + " °C",
                  soll: stemp + " °C",
                  ventil: ventil + " %", 
                 status: status,
                 etage: etage,                                                                                                                    
            });
            
            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by Scrounger
            #79

            @oli
            Warte bitte auf die v0.5.x, ich hab hier nochmal was geändert. Version gibts als beta wahrscheinlich am Wochenende.

            Du kannst aber auch die aktuelle github version testen, hier ist beschrieben wie das geht inkl. einem Beispiel:
            https://github.com/Scrounger/ioBroker.vis-materialdesign#control-elements-using-html-widgets

            GlasfaserG 1 Reply Last reply
            1
            • ScroungerS Scrounger

              @oli
              Warte bitte auf die v0.5.x, ich hab hier nochmal was geändert. Version gibts als beta wahrscheinlich am Wochenende.

              Du kannst aber auch die aktuelle github version testen, hier ist beschrieben wie das geht inkl. einem Beispiel:
              https://github.com/Scrounger/ioBroker.vis-materialdesign#control-elements-using-html-widgets

              GlasfaserG Offline
              GlasfaserG Offline
              Glasfaser
              wrote on last edited by
              #80

              @liv-in-sky
              siehe oben ...
              das wäre was für dich HTML Control Widgets , zum eventuellen einbauen in deine Script´s !!!!

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

              ScroungerS 1 Reply Last reply
              1
              • GlasfaserG Glasfaser

                @liv-in-sky
                siehe oben ...
                das wäre was für dich HTML Control Widgets , zum eventuellen einbauen in deine Script´s !!!!

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

                @glasfaser sagte in Material Design Widgets: Table Widget:

                @liv-in-sky
                siehe oben ...
                das wäre was für dich HTML Control Widgets , zum eventuellen einbauen in deine Script´s !!!!

                Genau, gutes Beispiel wo man das sehr gut anwenden könnte.
                Aber bitte wartet bis ich die v0.5.0-beta hier im Forum zum testen freigebe - wahrscheinlich am WE.

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

                  Hallo zusammen,

                  wie bekomme ich den Wert eines Datenpunktes z.B. "tankerkoenig.0.stations.0.diesel.short" in das Feld "Daten aus JSON"
                  integriert, damit mir der Wert des DP angezeigt wird? Geht das nur über dem Umweg mit einem Script eine Json zu erstellen?

                  EDIT: Hat sich erledigt, habe es über ein Script realisiert.

                  Mfg
                  0018

                  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"}]
                    

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

                    @scrounger sagte in Material Design Widgets: Table Widget:

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

                    Hi Scrounger,

                    ist es möglich die heutigen Termine in einer anderen Schriftfarbe zu kennzeichnen?

                    Mfg
                    0018

                    ScroungerS 1 Reply Last reply
                    0
                    • 0 0018

                      @scrounger sagte in Material Design Widgets: Table Widget:

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

                      Hi Scrounger,

                      ist es möglich die heutigen Termine in einer anderen Schriftfarbe zu kennzeichnen?

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

                      @0018

                      klar, musst aber das skript anpassen und per html tags dann die farbe verandern

                      0 1 Reply Last reply
                      0
                      • ScroungerS Scrounger

                        @0018

                        klar, musst aber das skript anpassen und per html tags dann die farbe verandern

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

                        @scrounger ich fürchte da wird es bei mir scheitern... kannst du evtl eine Demo erstellen worauf ich aufbauen kann?

                        Mfg
                        0018

                        0 1 Reply Last reply
                        0
                        • 0 0018

                          @scrounger ich fürchte da wird es bei mir scheitern... kannst du evtl eine Demo erstellen worauf ich aufbauen kann?

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

                          @Scrounger könntest du mir evtl helfen?

                          Mfg
                          0018

                          ScroungerS 1 Reply Last reply
                          0
                          • 0 0018

                            @Scrounger könntest du mir evtl helfen?

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

                            @0018

                            demo gibts doch oben schon. musst halt noch erweitern um die erkennung ob termin von heute und dann text z.b. in ein <font> tag setzen und entsprechend Farbe zuweisen

                            XsevX 1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              Mike_0815
                              wrote on last edited by
                              #88

                              Hallo Leute,
                              sorry, wenn ich hier möglicherweise eine 'überflüssige' Frage stelle. Möglicherweise auch an der falschen Stelle Jedoch finde ich mich nicht zurecht.

                              Ich habe folgende Adapter installiert: Material Design, Material Design Widgets und Material Advanced.
                              Da ich nicht alle Widgets gefunden habe, nehme ich welche aus beiden Lagern.
                              Nun passen die nicht wirklich gut optisch zusammen.

                              Ich habe einfach mal versucht die Instanz von Material Design zu löschen - hat nix gebracht. Nur meine Widgets waren verschwunden.

                              Gibt es einen stabilen Migrationspfad???? Was ist mit dem Skript von Uhula?? Ich habe hierzu nur 'Versuche' gefunden aber keine 'Anleitung'. Kann mir bitte irgendjemand hierbei helfen?

                              Besten Dank
                              -Mike

                              1 Reply Last reply
                              0
                              • svenomattS Offline
                                svenomattS Offline
                                svenomatt
                                wrote on last edited by
                                #89

                                Hallo zusammen,

                                Beschäfigt mich seit kurzem mit Material Degsin Wigdets und versuche mich gerade mit der Umsetzung der verpassten Anrufe in dem Table Widget. (wenn es den geht)

                                Ausgangsiuation ist die calllists.missed.json die ja alle werte mit sich bringt

                                Ich habe vorher das Widget /// JSON Table Basics genutzt und konnte dort über "Attribut in Json" die Spalten befüllen. (siehe Bild)

                                Kann mir jemand sagen ob dies auch beim Table Widget geht bzw. wie ich es dort umsetze das nur der Name die Nummer und das Datum angezeigt wird.

                                Konnte im editor nicht finden wo ich den Wert (Attribut) eintrage

                                Bild

                                1 Reply Last reply
                                0
                                • S Offline
                                  S Offline
                                  Supermicha
                                  wrote on last edited by
                                  #90

                                  Moin zusammen...

                                  Gibt es eine Möglichkeit Zahlenwerte mit Tausenderpunkt zu formatieren??

                                  Mein Problem:
                                  Ich nutze im Table-Widget mehrere Spalten mit großen Zahlen...

                                  derzeit formatiere ich direkt das json mit 'formatValue()' das klappt, dadurch ist aber die Sortierung nicht mehr vernünftig, da dann erst der Wert vor dem Punkt sortiert wird...
                                  (gleiches Problem übrigens, wenn man das Komma verwendet, wie im englischen)

                                  Es müsste die Formatierung also nach der Sortierung stattfinden, leider habe ich bisher im Table-Widget keine Möglichkeit der Formatierung gefunden. oder übersehe ich da was?

                                  1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

                                    @0018

                                    demo gibts doch oben schon. musst halt noch erweitern um die erkennung ob termin von heute und dann text z.b. in ein <font> tag setzen und entsprechend Farbe zuweisen

                                    XsevX Offline
                                    XsevX Offline
                                    Xsev
                                    wrote on last edited by Xsev
                                    #91

                                    @scrounger
                                    Ich steure das Table Widget über die Sichtbarkeit in meiner Vis. Jetzt ist mir aufgefallen, das es im Vis Editor nicht mehr auftaucht wenn der Datenpunkt auf "unsichtbar" ist. Normalerweise hat das ja nur Auswirkungen in Vis selbst aber nicht im Editor, dort sollte das Widget doch immer angezeigt werden ( so kenne ich es zumindest von anderen Widgets). Hat das mit dem Widget zu tun oder eher mit Vis bzw. Vis-Editor?

                                    Edit;
                                    Hab das Widget mal neu erstellt, bislang tritt der Fehler nicht wieder auf. Werde es mal beobachten...

                                    1 Reply Last reply
                                    0
                                    • D Offline
                                      D Offline
                                      Danielbroker86
                                      wrote on last edited by Danielbroker86
                                      #92

                                      Gibt es eine Möglichkeit timestamps (zb von einer Datenbank) zu formatieren?

                                      T 1 Reply Last reply
                                      0
                                      • D Danielbroker86

                                        Gibt es eine Möglichkeit timestamps (zb von einer Datenbank) zu formatieren?

                                        T Offline
                                        T Offline
                                        Tschaeens
                                        wrote on last edited by
                                        #93

                                        @scrounger
                                        Ich habe die aktuelle Version 0.59 installiert. Leider ist in den Table Widgets der Scrollbalken weg. Gehe ich zurück auf die 0.42 gehts wieder. Kannst du dir das vielleicht mal ansehen? Schonmal besten Dank.

                                        1 Reply Last reply
                                        0
                                        • V Offline
                                          V Offline
                                          Vippis
                                          wrote on last edited by Vippis
                                          #94

                                          @Scrounger
                                          Ich komme nicht darauf wie ich die Überschriften der Tabelle aus dem JSON extrahieren kann. Du sagst es geht nur im Editor, aber wie?

                                          Ich generiere mir die zeilen per JS in einer for-Schleife. Wie kann ich im Editor einstellen, dass er als Überschrift die Dict-Keys nehmen soll?

                                          var zeile = {
                                                      "Von": von.format("D.MM.YYYY HH:mm"),
                                                      "Bis": bis.format("D.MM.YYYY HH:mm"),
                                                      "Tibber kWh": i_kwh_tibber,
                                                      "Tibber €": i_cost_tibber,
                                                      "Stand Kompressor first": i_stand_komp_h_first,
                                                      "Stand Kompressor last": i_stand_komp_h_last,
                                                      "WP Kompressor H": i_kwh_komp_h,
                                                      "WP Kompressor WW": i_kwh_komp_ww,
                                                      "WP Zusatz H": i_kwh_zusatz_h,
                                                      "WP Zusatz WW": i_kwh_zusatz_ww,
                                                      "Wallbox kWh": i_kwh_wallbox,
                                                      "Anteil WP Kompressor H": anteil_wp_komp_h.toFixed(1),
                                                      "Anteil WP Kompressor WW": anteil_wp_komp_ww.toFixed(1),
                                                      "Anteil WP Zusatz H": anteil_wp_zusatz_h.toFixed(1),
                                                      "Anteil WP Zusatz WW": anteil_wp_zusatz_ww.toFixed(1),
                                                      "Anteil Wallbox": anteil_wallbox.toFixed(1),
                                                      "Header1": "Von"
                                                  }
                                                  table.push(zeile)
                                          

                                          Ich hab mal versucht eine Pseudo-Spalte "Header1" einzufügen, die ich mir nicht in der Tabelle anzeigen lasse als Object Binding. Aber das geht nur bei voran- und nachgestelltem Text für das Zeilenelement...

                                          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

                                          440

                                          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