Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. Einfach mal zeigen will….. :-) - Teil 3

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Einfach mal zeigen will….. :-) - Teil 3

    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      woupi @dos1973 last edited by

      @dos1973
      mir gefällt es richtig gut.
      Ich möchte glaube ich gar nicht wissen, wieviel Arbeit da drin steckt.
      Irgendwann komme ich hoffentlich auch mal dazu.

      1 Reply Last reply Reply Quote 0
      • K
        Kuddel @Ro75 last edited by

        @ro75 wie hast du deine PiHole Statistiken in die VIS integriert?

        Ro75 1 Reply Last reply Reply Quote 0
        • Ro75
          Ro75 @Kuddel last edited by Ro75

          @kuddel ich nutze den Phiole Adapter und zur Darstellung den MaterialDesign Adapter. Das Json aus dem pihole Adapter konvertiere ich in ein passendes Json für das MaterialDesign Balkendiagramm.

          Ro75.

          Nachtrag:

          JS:

          const ubuntu_PiHoleJSON         = 'pi-hole.0.overTimeData10mins.domains_over_time.data-table';
          
          createState('0_userdata.0.piHole', "[]", {read: true, write: true, desc: "JSON String", type: "string", def: "[]"});
          
          on(ubuntu_PiHoleJSON, function(dp) {
              let ConsumList = [];
              var text = dp.state.val.split(',');
              for (let i = 0; i <= text.length-1; i++) {
                  let startTime = moment((text[i].split(':')[0].replace('"','').replace('"','').replace('[{',''))*1000);
                  ConsumList.push({
                      label: startTime.format('HH:mm').replace('Invalid date',''),
                      value: parseFloat(text[i].split(':')[1]),
                      valueColor: '#ffffff'
                  })
              }
              setState('0_userdata.0.piHole', JSON.stringify(ConsumList), true);
              ConsumList = [];
          });
          

          Widget:

          [{"tpl":"tplVis-materialdesign-Chart-Bar","data":{"oid":"0_userdata.0.RPI.piHole","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","chartDataMethod":"jsonStringObject","dataCount":"0","chartType":"vertical","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","globalColor":"rgba(120, 144, 156, 0.45)","hoverColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover","hoverBorderColor":"#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover_border","showValues":"showValuesOff","valuesFontColor":"#ffffff","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor":"end","valuesPositionAlign":"top","valuesTextAlign":"center","yAxisPosition":"left","yAxisTitleColor":"#ffffff","yAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title","yAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title","yAxisValueLabelColor":"#ffffff","yAxisValueFontFamily":"RobotoCondensed-Regular","yAxisValueFontSize":"10","yAxisValueDistanceToAxis":"2","yAxisShowAxis":false,"yAxisShowAxisLabels":true,"yAxisShowGridLines":false,"yAxisGridLinesColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines","yAxisShowTicks":true,"yAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","xAxisPosition":"bottom","xAxisTicksSource":"auto","xAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title","xAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title","xAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title","xAxisValueLabelColor":"#ffffff","xAxisValueFontFamily":"RobotoCondensed-Regular","xAxisValueFontSize":"10","xAxisValueDistanceToAxis":"7","xAxisShowAxis":true,"xAxisShowAxisLabels":true,"xAxisShowGridLines":false,"xAxisGridLinesColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines","xAxisShowTicks":false,"xAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline","xAxisMinRotation":"0","xAxisMaxRotation":"0","legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true","showTooltip":false,"tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text","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,"g_oids":false,"g_layoutForData_§0":false,"colorScheme":"","cardUse":false,"axisMaxLabel":"","chartPaddingTop":"","animationDuration":"0","disableHoverEffects":true},"style":{"left":"1409px","top":"545px","width":"494px","height":"95px","z-index":"3"},"widgetSet":"materialdesign"}]
          
          K 1 Reply Last reply Reply Quote 0
          • K
            Kuddel @Ro75 last edited by

            @ro75 und die Hintergründe hinter den Zahlen hast du wie gemacht? Sieht halt genau so aus wie direkt im PiHole

            Ro75 1 Reply Last reply Reply Quote 0
            • Ro75
              Ro75 @Kuddel last edited by

              @kuddel die 4 Bildchen habe ich mir zurechtgebastelt.

              Ro75.

              K 1 Reply Last reply Reply Quote 0
              • K
                Kuddel @Ro75 last edited by

                @ro75 magst du mir die vllt. zur Verfügung stellen?

                Ro75 1 Reply Last reply Reply Quote 0
                • Ro75
                  Ro75 @Kuddel last edited by Ro75

                  @kuddel kommt in den nächsten Tagen. Stelledie hier rein.

                  pihole2_4.png pihole2_3.png pihole2_2.png pihole2_1.png

                  Ro75.

                  K 1 Reply Last reply Reply Quote 2
                  • K
                    Kuddel @Ro75 last edited by

                    @ro75 vielen Dank für die Bilder etc.

                    Ich habe selber parallel angefangen. Die vier Grafiken haben ich schon hinbekommen

                    7fcdc71d-de24-47a2-821a-8a3261694f17-grafik.png

                    Beim Skript für das Widget, läuft aber noch irgendetwas schief

                    javascript.0	2023-11-08 13:58:17.896	error	at processImmediate (node:internal/timers:466:21)
                    javascript.0	2023-11-08 13:58:17.896	error	at Immediate._onImmediate (/opt/iobroker/node_modules/@iobroker/js-controller-adapter/build/lib/adapter/adapter.js:8462:62)
                    javascript.0	2023-11-08 13:58:17.896	error	at Object.stateChange (/opt/iobroker/node_modules/iobroker.javascript/main.js:645:29)
                    javascript.0	2023-11-08 13:58:17.896	error	at Object.callback (/opt/iobroker/node_modules/iobroker.javascript/lib/sandbox.js:1266:38)
                    javascript.0	2023-11-08 13:58:17.896	error	at Object.<anonymous> (script.js.java.abfragen.pihole_diagramme:11:25)
                    javascript.0	2023-11-08 13:58:17.896	error	Error in callback: ReferenceError: moment is not defined
                    

                    Skript

                    const pihole_1_data = 'pi-hole.0.overTimeData10mins.domains_over_time.data-table';
                    
                    if(!existsState('0_userdata.0.PiHole-Diagramme.PiHole-1-Diagramm')){
                       createState('0_userdata.0.PiHole-Diagramme.PiHole-1-Diagramm', "[]", {read: true, write: true, desc: "JSON String", type: "string", def: "[]"});
                    }
                    
                    on(pihole_1_data, function(dp) {
                       let ConsumList = [];
                       var text = dp.state.val.split(',');
                       for (let i = 0; i <= text.length-1; i++) {
                           let startTime = moment((text[i].split(':')[0].replace('"','').replace('"','').replace('[{',''))*1000);
                           ConsumList.push({
                               label: startTime.format('HH:mm').replace('Invalid date',''),
                               value: parseFloat(text[i].split(':')[1]),
                               valueColor: '#ffffff'
                           })
                       }
                       setState('0_userdata.0.PiHole-Diagramme.PiHole-1-Diagramm', JSON.stringify(ConsumList), true);
                       ConsumList = [];
                    });
                    

                    Muss ich bzgl. "moment" noch was in der Javascript Adapter Konfig ergänzen?

                    Ro75 1 Reply Last reply Reply Quote 0
                    • Ro75
                      Ro75 @Kuddel last edited by

                      @kuddel genau, muss rein

                      K 1 Reply Last reply Reply Quote 0
                      • K
                        Kuddel @Ro75 last edited by

                        @ro75 hmm, komisch. Ist schon eingetragen. Habe den Eintrag mal entfernt, die Instanz neu gestartet und "moment" wieder eingetragen.

                        Der Fehler kommt trotzdem noch.

                        Ro75 1 Reply Last reply Reply Quote 0
                        • Ro75
                          Ro75 @Kuddel last edited by

                          @kuddel zeig Mal bitte

                          K 1 Reply Last reply Reply Quote 0
                          • K
                            Kuddel @Ro75 last edited by

                            @ro75

                            79efd09d-b031-46eb-9475-8371fd323f23-grafik.png

                            Ro75 1 Reply Last reply Reply Quote 0
                            • Ro75
                              Ro75 @Kuddel last edited by

                              @kuddel füge Mal ganz am Anfang ein

                              const moment = require('moment');
                              

                              Ro75.

                              K 1 Reply Last reply Reply Quote 1
                              • K
                                Kuddel @Ro75 last edited by

                                @ro75 sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                @kuddel füge Mal ganz am Anfang ein

                                const moment = require('moment');
                                

                                Ro75.

                                Super, jetzt läuft es

                                1 Reply Last reply Reply Quote 0
                                • Flexer
                                  Flexer last edited by

                                  Habe heute mal mit Vis2 angefangen. Es wird eine neue Vis fürs Handy. Hier einfach mal zwei Screenshots.

                                  Ist alles noch work in progress
                                  IMG_8186.png

                                  IMG_8185.png

                                  Grüße

                                  Negalein 1 Reply Last reply Reply Quote 1
                                  • Negalein
                                    Negalein Global Moderator @Flexer last edited by

                                    @flexer sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                    IMG_8185.png

                                    Hab dir im Chat geschrieben, da ich dachte das ist der Vis-2 Thread. 😉

                                    Hier nochmal öffentlich. 🙂

                                    Hast du für Vis-1 auch eine Unifi-View?
                                    VIS-2 ist mir noch zu buggie. 😉

                                    Flexer 1 Reply Last reply Reply Quote 0
                                    • Flexer
                                      Flexer @Negalein last edited by

                                      @negalein Hast du Telegram? Kann dir mal was schicken was ich früher mal gebaut habe. Ist uralt aber so in der Art plane ich es wieder

                                      1 Reply Last reply Reply Quote 1
                                      • Frederik Buss
                                        Frederik Buss @dos1973 last edited by

                                        @dos1973 Schönes Design... Eins interessiert mich: Wie hast Du die Graphen in die VIS eingebunden? Grafana oder was anderes? Ich habe seit kurzem ein 14" Touch Display am Raspi hängen und bin auch dabei die VIS etwas aufzupeppen...

                                        D 1 Reply Last reply Reply Quote 0
                                        • D
                                          dos1973 @Frederik Buss last edited by

                                          @frederik-buss
                                          hier habe ich es beschrieben: https://forum.iobroker.net/topic/23917/einfach-mal-zeigen-will-teil-3/722?_=1701952775588

                                          W Frederik Buss 2 Replies Last reply Reply Quote 0
                                          • W
                                            woupi @dos1973 last edited by

                                            @dos1973 sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                            @frederik-buss
                                            hier habe ich es beschrieben: https://forum.iobroker.net/topic/23917/einfach-mal-zeigen-will-teil-3/722?_=1701952775588

                                            Und das hat auch super funktioniert. Danke an dieser Stelle nochmal 😀

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            960
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis vis editor visualisierung visualization
                                            155
                                            813
                                            267427
                                            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