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.
    • Mic
      Mic Developer @Scrounger last edited by Mic

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

      Hab ein neues Widget hinzugefügt, JSON Chart.

      Super Sache, vielen Dank hierfür 👍
      Funktioniert auch soweit gut bei mir.

      Ein paar Vorschläge:

      1. Tippfehler Property line_Thikness, Thikness --> Thickness

      2. y-Achsen-Layout: Wünschenswert wäre noch Option "Achsenberschriftung anzeigen true/false", also wie bei x-Achse. Als Workaround geht aber: Farbe auf transparent setzen.

      3. Würde gerne beim Hochwert (y-Achse) Minimum- und Maximum-Grenzen setzen, damit ich mehreren Linien dieselben Min/Max-Grenzen geben kann.
        Use Case: Ich zeige die nächsten 7 Tage des daswetter-Adapters an. So sollte es etwa aussehen (nur ein Beispiel, Farben nicht gut gewählt usw.):
        xx1.png
        So sieht es aus:
        xx2.png
        D.h. ich möchte beiden Linien dieselben Min/Max-Grenzen für die y-Achse zuordnen, daher wären Properties wie line_boundMin und line_boundMax als JSON-Option sehr nice.
        (die Ermittlung der min/max-Werte mache ich über JS - also kein Thema für das Widget)

      Möchtest du Github-Issues jeweils für diese Punkte, oder passt das hier? Lege ich gerne an im Fall.

      Scrounger 3 Replies Last reply Reply Quote 0
      • Scrounger
        Scrounger Developer @Mic last edited by Scrounger

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

        1. Tippfehler Property line_Thikness, Thikness --> Thickness

        korrigier ich

        1. y-Achsen-Layout: Wünschenswert wäre noch Option "Achsenberschriftung anzeigen true/false", also wie bei x-Achse. Als Workaround geht aber: Farbe auf transparent setzen.

        gibt schon:

        4c410f31-6120-49fb-b51f-41cfe7858399-grafik.png

        1. Würde gerne beim Hochwert (y-Achse) Minimum- und Maximum-Grenzen setzen, damit ich mehreren Linien dieselben Min/Max-Grenzen geben kann.

        gibts schon:

        f957ba56-561b-4296-8180-e7c23e73294d-grafik.png

        würde in deinem Fall beiden die gleiche
        bb19a605-891b-4b3e-8a10-be33e8763129-grafik.png

        geben -> gemeinsame y-achse

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

          @Scrounger
          Perfekt, danke für die Hilfe, hast ja schon wirklich alles bedacht und implementiert. Schön auch die Property yAxis_id, dann muss man nichts zusätzlich programmieren.
          👍

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

            @Mic
            Danke, bin mir aber ziemlich sicher das Ihr noch was findet was ich nicht bedacht habe 😁

            Dann entferne ich mal das Beta Label.

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

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

              Use Case: Ich zeige die nächsten 7 Tage des daswetter-Adapters an. So sollte es etwa aussehen (nur ein Beispiel, Farben nicht gut gewählt usw.):
              xx1.png

              Hab noch eingebaut, dass man Arrays für colors verwenden kann. Damit kann man dann Temperaturverläufe farbig darstellen.

              Anbei ein Beispiel, wo ich die chroma-js lib nutze um das zu realisieren:

              d1aaaf75-4b9d-4bbd-9c1c-9293a1d42269-grafik.png

              Skript:

              const chroma = require("chroma-js")
              
              let chart = {}
              let values = []
              let axisLabels = []
              let colors = [];
              
              for (var i = -10; i <= 40; i++) {
                  axisLabels.push('');
                  values.push(i);
              
                  colors.push(getColor(i));
              }
              
              chart = {
                  axisLabels: axisLabels,
                  graphs: [{
                      data: values,
                      type: 'line',
                      datalabel_color: colors,
                      line_PointColor: colors,
                      line_PointColorBorder: colors
                  }]
              }
              
              function getColor(temp) {
                  let scale = chroma.scale(['blue', 'orange', 'red']);
              
                  let tempMax = 30;
                  let tempMin = -10;
              
              
                  if (temp > tempMax) {
                      return scale(1).hex();
                  } else if (temp < tempMin) {
                      return scale(0).hex();
                  } else {
                      return scale(temp / (tempMax - tempMin)).hex();
                  }
              }
              
              setState('0_userdata.0.chart.tempColors', JSON.stringify(chart), true);
              

              Verlauf für die Linienfarbe wird aktuell von der API nicht unterstützt, issue gibt es aber schon dazu:https://github.com/chartjs/Chart.js/issues/4895

              Funktioniert mit der aktuellen master von git -> v0.2.71

              nawelittle created this issue in chartjs/Chart.js

              closed Multiple colors in line. #4895

              1 Reply Last reply Reply Quote 2
              • KLVN
                KLVN last edited by Scrounger

                Hi,
                ich bin gerade dabei etwas zum Repo beizutragen und wollte fragen, wie man seine eigenen Änderungen im ioBroker testet? Pushe ich die Änderungen erst in meinen Fork und installiere diesen dann mit ioBroker?
                Und wie fasse ich die ganzen einzelnen .js-Dateien zu widgets.min.js zusammen? 🤔

                Edit: verschoben, da Frage Fehlerbehbung betrifft und nicht Widget Einstellung

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

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

                  Und wie fasse ich die ganzen einzelnen .js-Dateien zu widgets.min.js zusammen? 🤔

                  Lass die Daten am besten raus, das führe ich dann zusammen.

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

                    @Scrounger Danke, habe deine Anmerkungen gerade ausgebessert.
                    Wie kann ich meine Änderungen vorher testen? Ich weiß nicht, wie man die ganzen .min-Files erstellt und dabei sind es genau die, die ich beim Testen brauche. Die erste Änderung mit dem Tippfehler konnte ich noch auf unschöne Art in der .min fixen, aber eine weitere Sache, die ich gerne implementieren würde, hat auf diese Weise nicht so gefruchtet.

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

                      @KLVN

                      Zu erst die .min. Dateien dürfen nicht manuell bearbeitet werden!
                      Ich verwende VS Code mit dem Plugin Minify, dass jedesmal nach dem speichern die *.min Dateien automatisch aus allen Dateien des Ordners erzeugt.
                      Alternativ kannst du auch in der *.html Datei die Verweise auf die *.js Dateien setzten - ist für den Beginn sicher einfacher. Wichtig Reihenfolge beachten, die helper .js dateinen müssen als erstes importiert werden.

                      Wie man die Änderungen testen kann ist hier beschrieben:
                      https://github.com/ioBroker/ioBroker.docs/blob/master/docs/de/dev/adaptervis.md

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

                        @Mic
                        Hab nochmal nen bissle weiter am JSON Chart gebastelt. Jetzt kann man damit auch Farbverläufe für Line und Füllfarbe verwenden.

                        Anbei ein Beispiel:
                        e85828b0-2aad-469f-8a1c-3aac86b38ab2-grafik.png

                        Skript:

                        const chromaJs = require("chroma-js")
                        
                        let chart = {}
                        let values = []
                        let axisLabels = []
                        let colors = [];
                        
                        let fakeLine = [];
                        
                        let gradientChartColors = [                                                                           // Gradient Farben für Charts, value = Temperatur
                            { value: -20, color: '#5b2c6f' },
                            { value: 0, color: '#2874a6' },
                            { value: 14, color: '#73c6b6' },
                            { value: 22, color: '#008000' },
                            { value: 27, color: '#FFA500' },
                            { value: 35, color: '#FF0000' }
                        ]
                        
                        let gradientColors = getGradientColors(-20, 40, gradientChartColors);
                        
                        for (var i = -20; i <= 40; i++) {
                            axisLabels.push('');
                        
                            let val = randomIntFromInterval(-15, 40)
                        
                            values.push(i);
                            colors.push(gradientColors.getColorByValue(i));
                        
                        
                            fakeLine.push(-20);
                        }
                        
                        chart = {
                            axisLabels: axisLabels,
                            graphs: [
                                {
                                    data: values,
                                    type: 'line',
                                    datalabel_color: 'white',
                                    datalabel_backgroundColor: colors,
                                    datalabel_offset: -12,
                                    // line_PointColor: colors,
                                    // line_PointColorBorder: colors,
                                    line_pointSize: 0,
                                    line_Thickness: 3,
                                    datalabel_show: true,
                                    datalabel_borderRadius: 15,
                                    legendText: 'Temperatur',
                                    yAxis_id: 0,
                                    yAxis_gridLines_show: true,
                                    yAxis_gridLines_border_show: true,
                                    yAxis_gridLines_ticks_show: true,
                                    yAxis_showTicks: false,
                                    yAxis_zeroLineWidth: 0.4,
                                    line_UseFillColor: true,
                                    datalabel_steps: 3,
                                    use_gradient_color: true,
                                    gradient_color: gradientChartColors,
                                    use_line_gradient_fill_color: true,
                                    line_gradient_fill_color: gradientColors.getGradientWithOpacity(60),
                                    line_FillBetweenLines: '+1'
                                },
                                {
                                    data: fakeLine,
                                    type: 'line',
                                    datalabel_color: 'transparent',
                                    datalabel_backgroundColor: colors,
                                    // line_PointColor: colors,
                                    // line_PointColorBorder: colors,
                                    line_pointSize: 0,
                                    line_Thickness: 0,
                                    datalabel_borderRadius: 15,
                                    yAxis_id: 0,
                                    datalabel_show: false,
                                }
                            ]
                        }
                        
                        function getGradientColors(min, max, colorValArray) {
                            let delta = max - min;
                        
                            let chromaColors = []
                            let chromaDomains = [];
                        
                            for (const item of colorValArray) {
                                chromaColors.push(item.color);
                                chromaDomains.push(item.value / delta);
                            }
                            let chroma = chromaJs.scale(chromaColors).domain(chromaDomains);
                        
                            return {
                                getColorByValue: function (val) {
                                    if (val > max) {
                                        return chroma(1).hex();
                                    } else if (val < min) {
                                        return chroma(0).hex();
                                    } else {
                                        return chroma(val / delta).hex();
                                    }
                                },
                                getGradientWithOpacity: function (opacity) {
                                    colorValArray.forEach(item => {
                                        item.color = chromaJs(item.color).alpha(opacity / 100).hex();
                                    });
                                    return colorValArray;
                                }
                            }
                        }
                        
                        function randomIntFromInterval(min, max) { // min and max included 
                            return Math.floor(Math.random() * (max - min + 1) + min);
                        }
                        
                        setState('0_userdata.0.chart.tempColors', JSON.stringify(chart), true);
                        

                        Funktioniert mit der aktuellen master von git -> v0.2.74

                        Weiter kann man jetzt auf Füllfarbe zwischen zwei Linien realisieren, sieht dann z.B. so aus.
                        0f86ff4a-c454-426d-ba95-2098d7e7d924-grafik.png

                        Ein Beispiel dazu ist auch im obigen Skript - property line_FillBetweenLines

                        D 1 Reply Last reply Reply Quote 4
                        • D
                          darkiop Most Active @Scrounger last edited by

                          @Scrounger Sieht Spannend aus. Hast du schon ein Beispiel wie man aus einem DP mit SQL Historie das neue Chart befüllen kann?

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

                            @darkiop
                            Nein hab bis jetzt dafür noch keinen UseCase.
                            Grundsätzlich kann man wie hier beschrieben vorgehen:
                            https://forum.iobroker.net/topic/2344/script-um-sql-auszulesen

                            Und Daten muss man danach nur noch richtig formatieren und an den JSON Chart übergeben.
                            So mal die Theorie 😉

                            Hätte auch den Vorteil ggü. dem Line Chart, dass die ganze Datenaufbereitung serverseitg dann läuft - mhh vielleicht doch grad ein UseCase gefunden 😁

                            1 Reply Last reply Reply Quote 0
                            • S
                              stockics6 last edited by

                              Hi,

                              ich versuche den "Line History Chart" einzubinden und stoße dabei auf folgendes Probelem:

                              • Obwohl beide Datenpunkte meiner Meinung nach richtig angelegt sind, wird mir nur einer angezeigt

                              31e7db00-f2c2-4e58-b001-05675b0914a1-grafik.png
                              34fe0c92-4a38-41d6-884b-fef867ba4ecf-grafik.png 5ebf8ade-7f7d-4121-b780-2270da7f61bc-grafik.png

                              Hat jemand einen Rat?

                              sigi234 1 Reply Last reply Reply Quote 0
                              • sigi234
                                sigi234 Forum Testing Most Active @stockics6 last edited by

                                @stockics6

                                Anzahl der Datensätze 1

                                0 wird auch mitgezählt!

                                S 1 Reply Last reply Reply Quote 0
                                • S
                                  stockics6 @sigi234 last edited by

                                  @sigi234

                                  ouh man wie dumm :D, vielen Dank 🙂

                                  1 Reply Last reply Reply Quote 0
                                  • C
                                    Coffeelover last edited by

                                    Hallo zusammen,
                                    habe mir ein Bar-Chart erstellt. Leider bekomme ich die Werte bei den größten Datensätzen nicht angezeigt, da sie die Breite des Widgets überschreiten. Gibt es dazu einen Tipp oder ist das ein Bug?
                                    Es geht um die abgeschnittenen Werte "Gesamt". Ein Überlagern durch andere Widgets kann ausgeschlossen werden.
                                    81865ad2-7134-41ce-9efe-9b38fbff3c56-grafik.png
                                    VG

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

                                      @Coffeelover
                                      Abstand von rechts anpassen:
                                      4d3fde49-e0c6-446a-9f05-e7d78e02397d-grafik.png

                                      1 Reply Last reply Reply Quote 1
                                      • S
                                        sveni_lee last edited by

                                        hallo @Scrounger

                                        kann man den minimal bzw maximal Wert auch mit gebrochenen Zahlen festlegen?
                                        Für dieselpreise würde ich gern min. 0,95 und max 1,30 angeben. Mit ganzen Zahlen lässt es sich grafisch nicht ganz so schön darstellen.

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

                                          @sveni_lee
                                          Welches Widget? Wo willst du was eingeben?
                                          Sorry aber ich versteh die Frage nicht.

                                          S 1 Reply Last reply Reply Quote 0
                                          • S
                                            sveni_lee @Scrounger last edited by

                                            In den History Charts Y-Achsen-Layout für Datensatz(x), kann ich doch einen Wertebereich min und max eingeben aber eben nur ganze Zahlen. Meine Frage ist ob man auch irgendwie gebrochene Zahlen also mit Nachmommastellen angeben kann.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            492
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material vis visualization widget
                                            77
                                            902
                                            161713
                                            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