Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.2.x

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter Material Design Widgets v0.2.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @darkiop last edited by

      @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 Reply Quote 0
      • I
        intruder7 last edited by

        @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
        
        
        Scrounger 1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @intruder7 last edited by

          @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 Reply Quote 0
          • 0
            0018 @Scrounger last edited by

            @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

            Scrounger 1 Reply Last reply Reply Quote 0
            • B
              bommel_030 last edited by

              @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 Reply Quote 0
              • sigi234
                sigi234 Forum Testing Most Active @Scrounger last edited by

                @Scrounger

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

                Screenshot (1458)_LI.jpg

                1 Reply Last reply Reply Quote 0
                • I
                  intruder7 @Scrounger last edited by

                  @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.😞

                  1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @0018 last edited by Scrounger

                    @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 Reply Quote 0
                    • D
                      darkiop Most Active @Scrounger last edited by

                      @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

                      Scrounger 1 Reply Last reply Reply Quote 0
                      • B
                        Buddinski88 last edited by

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

                        Scrounger 1 Reply Last reply Reply Quote 0
                        • Scrounger
                          Scrounger Developer @darkiop last edited by Scrounger

                          @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 Reply Quote 0
                          • Scrounger
                            Scrounger Developer @Buddinski88 last edited by

                            @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 Reply Quote 1
                            • I
                              intruder7 last edited by

                              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.😞

                              Scrounger 1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @intruder7 last edited by Scrounger

                                @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 Reply Quote 0
                                • I
                                  intruder7 @Scrounger last edited by

                                  @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.👏 😁

                                  1 Reply Last reply Reply Quote 0
                                  • B
                                    Buddinski88 @Scrounger last edited by Buddinski88

                                    @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 Reply Quote 0
                                    • D
                                      darkbrain85 last edited by

                                      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!

                                      Scrounger 1 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer @darkbrain85 last edited by

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

                                        D 1 Reply Last reply Reply Quote 0
                                        • D
                                          darkbrain85 @Scrounger last edited by

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

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @darkbrain85 last edited by

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

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

                                            Habs eingebaut, aktullen master testen

                                            D 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material vis visualization widget
                                            77
                                            902
                                            172945
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo