Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Table Widget

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.3k

Material Design Widgets: Table Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
95 Beiträge 33 Kommentatoren 17.6k Aufrufe 38 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • GlasfaserG Glasfaser

    @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
    schrieb am zuletzt editiert von
    #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.

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

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

    1 Antwort Letzte Antwort
    1
    • 0 Offline
      0 Offline
      0018
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #84

          @0018

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

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

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

          0 1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

            @0018

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

            0 Offline
            0 Offline
            0018
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #86

              @Scrounger könntest du mir evtl helfen?

              Mfg
              0018

              ScroungerS 1 Antwort Letzte Antwort
              0
              • 0 0018

                @Scrounger könntest du mir evtl helfen?

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von 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

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

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

                XsevX 1 Antwort Letzte Antwort
                0
                • M Offline
                  M Offline
                  Mike_0815
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • svenomattS Offline
                    svenomattS Offline
                    svenomatt
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • S Offline
                      S Offline
                      Supermicha
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        0
                        • D Offline
                          D Offline
                          Danielbroker86
                          schrieb am zuletzt editiert von Danielbroker86
                          #92

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

                          T 1 Antwort Letzte Antwort
                          0
                          • D Danielbroker86

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

                            T Offline
                            T Offline
                            Tschaeens
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • V Offline
                              V Offline
                              Vippis
                              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                              0
                              • C Offline
                                C Offline
                                ck_coke
                                schrieb am zuletzt editiert von ck_coke
                                #95

                                Hallo,

                                ich würde bei folgendem Array gerne die Schriftfarbe nach Bedingungen des jeweiligen Wertes anpassen:

                                arr = 
                                [
                                        { 
                                            'Anlagenname': (await getObjectAsync('modbus.0.holdingRegisters.19006_G_ULL0')).common.name, 
                                            'Spannung': getState('modbus.0.holdingRegisters.19006_G_ULL0').val, 
                                            'Leistung': getState('modbus.0.holdingRegisters.19026_G_P_SUM3').val 
                                        }, 
                                        { 
                                            'Anlagenname': (await getObjectAsync('modbus.1.holdingRegisters.19006_G_ULL0')).common.name, 
                                            'Spannung': getState('modbus.1.holdingRegisters.19006_G_ULL0').val, 
                                            'Leistung': getState('modbus.1.holdingRegisters.19026_G_P_SUM3').val 
                                        }
                                ]
                                

                                Z.B.:
                                Wenn Spannung kleiner 0.1 dann Schriftfarbe rot
                                Wenn Spannung größer/gleich 0.1 dann grün

                                Wie lässt sich das am besten umsetzen?
                                Kann ich eine if-Abfrage in das array packen?

                                1 Antwort Letzte Antwort
                                0
                                Antworten
                                • In einem neuen Thema antworten
                                Anmelden zum Antworten
                                • Älteste zuerst
                                • Neuste zuerst
                                • Meiste Stimmen


                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                708

                                Online

                                32.4k

                                Benutzer

                                81.4k

                                Themen

                                1.3m

                                Beiträge
                                Community
                                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                ioBroker Community 2014-2025
                                logo
                                • Anmelden

                                • Du hast noch kein Konto? Registrieren

                                • Anmelden oder registrieren, um zu suchen
                                • Erster Beitrag
                                  Letzter Beitrag
                                0
                                • Home
                                • Aktuell
                                • Tags
                                • Ungelesen 0
                                • Kategorien
                                • Unreplied
                                • Beliebt
                                • GitHub
                                • Docu
                                • Hilfe