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. Tester
  4. Test Adapter Material Design Widgets v0.2.x

NEWS

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

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

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

Test Adapter Material Design Widgets v0.2.x

Geplant Angeheftet Gesperrt Verschoben Tester
visadapatervisualizationmaterialwidget
902 Beiträge 77 Kommentatoren 233.7k Aufrufe 79 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.
  • I intruder7

    @Scrounger
    Hallo, bei mir funktioniert das neue select widget überhaupt nicht (Crome)
    Bei Werten über den Editor gehts. Aber sobald ich auf Werteliste umstelle und dort was eingebe verschwinden alle anderen Einstellungen( Farbe,Text usw.)

    in der Konsole tauchen auch Fehler auf.

    Vuetify Select]: error: Cannot read property 'split' of undefined, stack: TypeError: Cannot read property 'split' of undefined
        at Object.generateItemList (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:1:22620)
        at Object.vis.binds.materialdesign.select (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:5:5371)
        at Object.eval (tplVis-materialdesign-Select.js:29:86)
        at Function.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6166)
        at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
        at http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6147
        at HTMLDivElement.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1841)
        at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
        at Function.hookup (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1751)
        at Function.frag (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1344) 
    vis.binds.materialdesign.select @ widgets.min.js:5
    
    
    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #572

    @intruder7

    Ja das passiert wenn man für Label und Icon nichts eingibt. Muss ich noch einbauen das das abgefangen wird.

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

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

    I 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @0018
      Musst nen <font> Tag um den Text setzen.

      0 Offline
      0 Offline
      0018
      schrieb am zuletzt editiert von
      #573

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

      @0018
      Musst nen <font> Tag um den Text setzen.

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

      Mfg
      0018

      ScroungerS 1 Antwort Letzte Antwort
      0
      • B Offline
        B Offline
        bommel_030
        schrieb am zuletzt editiert von
        #574

        @Scrounger
        Ich nehme alles zurück und behaupte das Gegenteil...
        Hab die Version mal aktualisiert, jetzt klappt es auch mit der Spaltenbreite. Damit habe ich dann wieder das Problem, dass ich keinen Zeilenumbruch im JSON hinbekomme ^^
        Aber mal was anderes... NavBar...

        1. Ist es möglich, dass sich Menüpunkt [6] automatishc zusammenklappt wenn ein anderer Menüpunkt ausgewählt wird (abgesehen von den Untermenüs 7-9)?
        2. Man kann für Punkt 6 zwar eine View hinterlegen, bei klick auf Punkt 6 wird aber "nur" das Untermenü aufgeklappt. Soll das so sein, oder kann man das ändern?
          navbar.png
        1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger
          Aktuelle Test Version 0.2.x
          Veröffentlichungsdatum 19.11.2019
          Github Link https://github.com/Scrounger/iobroker.vis-materialdesign

          Ich bitte Euch zukünftig alle Fragen bzgl. Einstellungen, Verständnis, Skripte, etc. im entsprechenden Thema des zugehörigen Widgets zu posten!

          • siehe Material Design Widgets Themen

          Hallo zusammen,
          ich arbeite aktuell an einem VIS-Adapter, der auf Google material components web Bibliothek basiert und "echte" Material Widgets zur Verfügung stellt inkl. der entsprechenden Effekt, wie Overlay, ripple, etc.

          Der Adapter befindet sich bereits im latest repository.
          Neue Funktionen (Widgets) werde ich zu erst hier vorstellen - wer dieses testen möchte muss direkt von github installieren: https://github.com/Scrounger/iobroker.vis-materialdesign.
          Nach erfolgreichem Feedback mach ich eine neue Version für das latest.

          Folgende Elemente sind bereits enthalten:

          review.gif

          Gemäß den Forumsrichtlinien ist das Thema in die Kategorie 'Test' umgezogen und ein neuer Thread wegen Anhebung Version aufgemacht worden.

          Die alten Threads findet ihr hier:

          • https://forum.iobroker.net/topic/26199/test-adapter-material-design-widgets-v0-1-x
          • https://forum.iobroker.net/topic/25374/neuer-vis-adpater-material-design-widgets

          Bitte bei Fragen zu den Widget Einstellungen diese zuerst durchlesen, da dort viele Fragen zu den Widget Einstellungen beantwortet wurden!

          paypal

          sigi234S Online
          sigi234S Online
          sigi234
          Forum Testing Most Active
          schrieb am zuletzt editiert von
          #575

          @Scrounger

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

          Screenshot (1458)_LI.jpg

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

          1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

            @intruder7

            Ja das passiert wenn man für Label und Icon nichts eingibt. Muss ich noch einbauen das das abgefangen wird.

            I Offline
            I Offline
            intruder7
            schrieb am zuletzt editiert von
            #576

            @Scrounger :+1:
            gut zu wissen. Habs jetzt auch am laufen.
            Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.:disappointed:

            1 Antwort Letzte Antwort
            0
            • 0 0018

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

              @0018
              Musst nen <font> Tag um den Text setzen.

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

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              schrieb am zuletzt editiert von Scrounger
              #577

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

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

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

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

              @Scrounger
              Ich nehme alles zurück und behaupte das Gegenteil...
              Hab die Version mal aktualisiert, jetzt klappt es auch mit der Spaltenbreite. Damit habe ich dann wieder das Problem, dass ich keinen Zeilenumbruch im JSON hinbekomme ^^

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

              Aber mal was anderes... NavBar...

              1. Ist es möglich, dass sich Menüpunkt [6] automatishc zusammenklappt wenn ein anderer Menüpunkt ausgewählt wird (abgesehen von den Untermenüs 7-9)?

              Nein

              1. Man kann für Punkt 6 zwar eine View hinterlegen, bei klick auf Punkt 6 wird aber "nur" das Untermenü aufgeklappt. Soll das so sein, oder kann man das ändern?

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

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

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

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

              <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
              0
              • ScroungerS Scrounger

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

                @Scrounger Klasse die neuen selects!

                So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

                D Offline
                D Offline
                darkiop
                Most Active
                schrieb am zuletzt editiert von
                #578

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

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

                @Scrounger Klasse die neuen selects!

                So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

                Passt noch nicht:

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

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

                ScroungerS 1 Antwort Letzte Antwort
                0
                • B Offline
                  B Offline
                  Buddinski88
                  schrieb am zuletzt editiert von
                  #579

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

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

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

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

                  ScroungerS 1 Antwort Letzte Antwort
                  0
                  • D darkiop

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

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

                    @Scrounger Klasse die neuen selects!

                    So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

                    3f2efeb8-f265-4c13-9d8b-14fdc4de9ab2-grafik.png

                    Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

                    Passt noch nicht:

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

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    schrieb am zuletzt editiert von Scrounger
                    #580

                    @darkiop

                    Doch das geht, gibt zwei farben:

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

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

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

                    @Buddinski88

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

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

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

                    Steht schon auf meiner Todo Liste.

                    <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
                    0
                    • B Buddinski88

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

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

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

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

                      ScroungerS Offline
                      ScroungerS Offline
                      Scrounger
                      Developer
                      schrieb am zuletzt editiert von
                      #581

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

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

                      Hier das Beispielskript:

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

                      Widget dazu:


                      [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

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

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

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

                      I B 2 Antworten Letzte Antwort
                      1
                      • I Offline
                        I Offline
                        intruder7
                        schrieb am zuletzt editiert von
                        #582

                        ich wollte es nochmal hochbringen.

                        Bzw. @all ,hat dieses Problem auch jemand anders oder stimmt bei mir etwas nicht?
                        @Scrounger 👍
                        gut zu wissen. Habs jetzt auch am laufen.
                        Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.😞

                        ScroungerS 1 Antwort Letzte Antwort
                        0
                        • I intruder7

                          ich wollte es nochmal hochbringen.

                          Bzw. @all ,hat dieses Problem auch jemand anders oder stimmt bei mir etwas nicht?
                          @Scrounger 👍
                          gut zu wissen. Habs jetzt auch am laufen.
                          Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.😞

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          schrieb am zuletzt editiert von Scrounger
                          #583

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

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

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

                          <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
                          0
                          • ScroungerS Scrounger

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

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

                            Hier das Beispielskript:

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

                            Widget dazu:


                            [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

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

                            I Offline
                            I Offline
                            intruder7
                            schrieb am zuletzt editiert von
                            #584

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

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

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

                            Hier das Beispielskript:

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

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

                            stringify
                            

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

                            1 Antwort Letzte Antwort
                            0
                            • ScroungerS Scrounger

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

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

                              Hier das Beispielskript:

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

                              Widget dazu:


                              [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

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

                              B Offline
                              B Offline
                              Buddinski88
                              schrieb am zuletzt editiert von Buddinski88
                              #585

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

                              Hier mein Code:

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

                                Hi zusammen!

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

                                Hier mal ein vergrößerter Screenshot davon:

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

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

                                Anke für Eure Hilfe!

                                ScroungerS 1 Antwort Letzte Antwort
                                0
                                • D darkbrain85

                                  Hi zusammen!

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

                                  Hier mal ein vergrößerter Screenshot davon:

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

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

                                  Anke für Eure Hilfe!

                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  schrieb am zuletzt editiert von
                                  #587

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

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

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

                                  D 1 Antwort Letzte Antwort
                                  0
                                  • ScroungerS Scrounger

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

                                    D Offline
                                    D Offline
                                    darkbrain85
                                    schrieb am zuletzt editiert von
                                    #588

                                    @Scrounger

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

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

                                    ScroungerS 1 Antwort Letzte Antwort
                                    0
                                    • D darkbrain85

                                      @Scrounger

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

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

                                      ScroungerS Offline
                                      ScroungerS Offline
                                      Scrounger
                                      Developer
                                      schrieb am zuletzt editiert von
                                      #589

                                      @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

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

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

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        @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 Offline
                                        D Offline
                                        darkbrain85
                                        schrieb am zuletzt editiert von darkbrain85
                                        #590

                                        @Scrounger
                                        Danke!

                                        Das funktioniert für mich erstmal ganz gut. Je kleiner der padding Wert ist, desto mehr rutschen die Legendeneinträge aneinander. Das kann man aber mit Leerzeichen korrigieren. In so fern erstmal funktional, wenn auch noch nicht 100% sauber.

                                        6d2804be-8288-4f49-8c36-6fd887ff54d9-image.png

                                        Edit:
                                        Da fällt mir noch was auf: Mache ich drei Leerzeichen am Ende des Legendentextes, wird direkt hinter dem letzten Buchstaben ein Punkt (.) eingefügt.

                                        Edit2: Kann man die Angabe der Uhrzeit auf der X-Achse noch schöner bekommen?

                                        Edit3: Es wäre gut, wenn für den Tooltip dann auch die Füllfarbe genommen wird, wenn die Linienfarbe "transparent" ist.
                                        c7de8a3c-b18f-4b90-974b-b0922a16f50b-image.png

                                        ScroungerS 1 Antwort Letzte Antwort
                                        0
                                        • D darkbrain85

                                          @Scrounger
                                          Danke!

                                          Das funktioniert für mich erstmal ganz gut. Je kleiner der padding Wert ist, desto mehr rutschen die Legendeneinträge aneinander. Das kann man aber mit Leerzeichen korrigieren. In so fern erstmal funktional, wenn auch noch nicht 100% sauber.

                                          6d2804be-8288-4f49-8c36-6fd887ff54d9-image.png

                                          Edit:
                                          Da fällt mir noch was auf: Mache ich drei Leerzeichen am Ende des Legendentextes, wird direkt hinter dem letzten Buchstaben ein Punkt (.) eingefügt.

                                          Edit2: Kann man die Angabe der Uhrzeit auf der X-Achse noch schöner bekommen?

                                          Edit3: Es wäre gut, wenn für den Tooltip dann auch die Füllfarbe genommen wird, wenn die Linienfarbe "transparent" ist.
                                          c7de8a3c-b18f-4b90-974b-b0922a16f50b-image.png

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #591

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

                                          Das funktioniert für mich erstmal ganz gut. Je kleiner der padding Wert ist, desto mehr rutschen die Legendeneinträge aneinander. Das kann man aber mit Leerzeichen korrigieren. In so fern erstmal funktional, wenn auch noch nicht 100% sauber.

                                          Besser geht es leider nicht, da die chartjs api nur padding zur verfügung stellt und nicht explizit padding-left, padding-right, etc. Da die charts gerendert werden, kann ich hier nix machen.

                                          Da fällt mir noch was auf: Mache ich drei Leerzeichen am Ende des Legendentextes, wird direkt hinter dem letzten Buchstaben ein Punkt (.) eingefügt.

                                          Ich sehe weder in dem Screenshot einen . noch kann ich das bei mir reproduzieren. Leerzeichen wird als leerzeichen ausgegeben.

                                          Edit2: Kann man die Angabe der Uhrzeit auf der X-Achse noch schöner bekommen?

                                          Ja steht in der doku!

                                          Edit3: Es wäre gut, wenn für den Tooltip dann auch die Füllfarbe genommen wird, wenn die Linienfarbe "transparent" ist.

                                          Geht nicht, api nimmt immer die Farbe von der Linie.
                                          Dann würde ich dir empfehlen, für Linien und Füllfarbe die gleiche zu nehmen und Liniendicke auf 0 zu setzen.
                                          Oder blende in im Tooltip das farbfeld aus.

                                          <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
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          231

                                          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