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.
    • liv-in-sky
      liv-in-sky @Scrounger last edited by liv-in-sky

      @Scrounger

      hoffentlich poste ich diesmal im richtigen thread

      habe ein seltsames problem

      habe das menu app widget - eine hauptseite mit 3 widgets - menu app, view8 und MDalarm - wenn ich einen refresh auf die seite mache kommt fehler in view - wenn ich dann einen unterpunkt auswähle kommt die ansicht - alle views sind definiert und da

      hast du eine ahnung, was das sein könnte ?

      smart17.gif

      Scrounger 1 Reply Last reply Reply Quote 0
      • Scrounger
        Scrounger Developer @liv-in-sky last edited by

        @liv-in-sky sagte in Test Adapter Material Design Widgets v0.2.x:

        @Scrounger

        hoffentlich poste ich diesmal im richtigen thread

        Kein Problem, ich verschiebe es dann ja entsprechend, wenns nicht passt 😉

        habe ein seltsames problem

        habe das menu app widget - eine hauptseite mit 3 widgets - menu app, view8 und MDalarm - wenn ich einen refresh auf die seite mache kommt fehler in view - wenn ich dann einen unterpunkt auswähle kommt die ansicht - alle views sind definiert und da

        Zwei Möglichkeiten:

        • Du hast keine View für All hinterlegt
        • kein gemeinsamer Datenpunkt (type: number) für TopAppBar und View in Widget 8. Spircht dafür, weil nach dem reload dann eigentlich die View TV wieder geladen werden müsste.
        liv-in-sky 2 Replies Last reply Reply Quote 0
        • liv-in-sky
          liv-in-sky @Scrounger last edited by liv-in-sky

          @Scrounger das kommt auch noch oft - es ist auch bei jedem umschalten dieser fehler zu sehen - nur kurz

          Image 1.png

          • der gemeinsam datenpunkt ist number und wenn ich von hand etwas eingebe, reagiert die vis auch und schaltet um

          • das ganze hatte schon funktioniert und ist 1,2 wochen gelaufen - ich kann leider nicht nehr nachvollziehen, wann das problem kam

          • was meinst du mit view für "All" -
            Image 2.png

          1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @Scrounger last edited by liv-in-sky

            @Scrounger hier noch ein bild - das passiert, wenn ich von hand in den gemeinsamen datenpunkt die zahlen eingebe
            smart17.gif

            Scrounger 1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer @liv-in-sky last edited by Scrounger

              @liv-in-sky
              Die Warnmeldung kommt nicht vom MDW Adapter.

              Ich hab an der TopAppBar seit Wochen nichts am Code geändert, d.h. du musst irgendwas bei dir verändert ahben, was zu diesem Phänomen führt - View Name geändert, Adapter updates, Irgend ne Einstellung verändert.
              Im Zweifel mal beide Widgets mal löschen und neu erstellen. Sorry mehr fällt mir aktuell dazu auch nicht ein.

              Was sehr komisch ist, dass du auf der View - Menüpunkt Name 'TV' bist, einen Reload machst und dann der Menüpunkt 'All' ausgewählt ist. Das spricht dafür das der DP nicht funktioniert.

              liv-in-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @Scrounger last edited by

                @Scrounger habe mal anderen datenpunkt und NUR das view8 genommen - ist die selbe reaktion - etwas anderer fehler
                wird wohl nicht an deinem widget liegen - sagen dir die meldungen irgendwas ?

                Image 3.png

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

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

                  @Scrounger

                  Hallo, die Charts werden im Edit Modus angezeigt, aber in der Runtime nicht?

                  Screenshot (2110).png

                  Edit: verschoben, da Funktion / Fehler betrifft

                  Hallo, den Fehler habe ich noch immer. Keine Ahnung warum.

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

                    Kann mir jemand ein Layout für den "Line History Chart" zur Verfügung stellen?

                    Möchte gerne 6 Temperaturwerte in einem Chart darstellen und einzelnd auswählen können, leider bekomme ich es aber nicht hin.
                    Im VIS wird er mir ab und zu mal angezeigt aber im Browser wiederum nicht.
                    16872b53-995b-40f2-92cf-d8151014e8a4-grafik.png

                    Danke!

                    liv-in-sky 1 Reply Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @stockics6 last edited by

                      @stockics6 ich habe den fehler auch - die frage war schon etwas früher- würde aber leider nicht beantwortet

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

                        @Mic sagte in [Vorlage] Google Charts Beispiel:

                        @Negalein
                        Super, so soll das sein 😎

                        Ich überlege gerade, ob man nicht auch das "Line History Chart" vom Materials Design Widget Adapter von @Scrounger nutzen könnte alternativ. Also noch zu prüfen, ob das Widghet ausschließlich "History"-Datenpunkte akzeptiert oder auch eigene zur Darstellung.

                        Hab ein neues Widget hinzugefügt, JSON Chart. Als Quelle wird ein DP mit json string benötigt und man kann bar und line Charts mischen.

                        Alle verwendbraren Properties sind hier beschrieben:
                        https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart

                        Beispiel:

                        {
                        	"axisLabels": ["Jan", "Feb", "Mrz", "asdsd"],
                        	"graphs": [
                        		{
                        			"data": ["80.4879", "40", "10", "30"],
                        			"legendText": "legend data 1",
                        			"type": "bar",
                        			"color": "blue",
                        			"barColorHover": "blue",
                        			"displayOrder": "2",
                        			"tooltip_AppendText": " %",
                        			"yAxis_appendix": " %",
                        			"tooltip_MaxDigits": "1",
                        			"yAxis_min": "0",
                        			"yAxis_max": "100",
                        			"yAxis_color": "red",
                        			"datalabel_maxDigits": "1"
                        		}, 
                        		{
                        			"data": ["35", "25", "88.1221243132", "10"],
                        			"legendText": "legend data 2",
                        			"type": "line",
                        			"displayOrder": "1",
                        			"line_Tension": "0.51",
                        			"line_Thikness": "1",
                        			"line_UseFillColor": "true",
                        			"tooltip_MaxDigits": "1",
                        			"tooltip_AppendText": " $",
                        			"yAxis_appendix": " $",
                        			"yAxis_position": "right",
                        			"yAxis_title_text": "axis title",
                        			"yAxis_title_color": "red",
                        			"yAxis_title_fontSize": "40",
                        			"yAxis_title_fontFamily": "Alegreya-BlackItalic",
                        			"yAxis_gridLines_show": "false"
                        		},
                        		{
                        			"data": ["23", "76", "66", "12"],
                        			"legendText": "legend data 3",
                        			"type": "bar",
                        			"displayOrder": "2",
                        			"tooltip_AppendText": " %",
                        			"yAxis_appendix": " %",
                        			"tooltip_MaxDigits": "1",
                        			"yAxis_min": "0",
                        			"yAxis_max": "100",
                        			"yAxis_color": "red",
                        			"datalabel_maxDigits": "1",
                        			"yAxis_id": "0"
                        		}
                        	]
                        }
                        

                        6cf18e50-b67c-48c1-b1ba-606c93f2ad8b-grafik.png

                        Bitte teste den aktuellen master -> v0.2.70.

                        Widget hat einen Debug Modus:
                        9013da10-4572-4d36-aac9-5a3dd4039e3f-grafik.png

                        Wenn dir Fehler aufallen bitte debug modus aktivieren und consolen log vom browser mit posten.

                        sigi234 Mic 2 Replies Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @Scrounger last edited by

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

                          Als Quelle wird ein DP mit json string

                          Hm, wie und wo lege ich den DP an?

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

                            @sigi234
                            Da wo du möchtest. Muss vom String sein - sorry vergess ich immer zu erwähnen 😉

                            1 Reply Last reply Reply Quote 0
                            • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.1k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

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