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 2

    NEWS

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • haselchen
      haselchen Most Active last edited by

      Meinst Du das hier?

      3723_unbenannt.png

      Einfach den Autor anschreiben 😄

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

        @dtp:

        Hier mal ein kleines Video meiner aktuellen Views:

        filename="ioBroker_vis_dtp_201812.gif" index="0">~~

        Die teilweise zu sehenden "Scheinbilder" sind wohl durch die Komprimierung von Screenpresso entstanden. Im Original sind die Views "sauber". 😉 `

        Hi,

        Was nutzt du zur Anzeige? Tablet, Pc?

        Danke

        Gesendet von iPhone mit Tapatalk Pro

        1 Reply Last reply Reply Quote 0
        • D
          dtp last edited by Jey Cee

          Ich wurde gefragt, wie ich das mit den täglichen Strom-, Gas- und Wasserständen realisiert habe.

          Nun, zunächst erfasse ich diese mit jeweils einer HomeMatic Zählersensor-Sendeeinheit, HM-ES-TX-WM, samt passendem Cyble-Sensor. https://homematic-forum.de/forum/viewtopic.php?f=31&t=30606#p279598 hatte ich mal die zugehörigen Skripte für die HomeMatic beschrieben. Das ist aber eigentlich für vis von zweitrangiger Bedeutung.

          Mit dem nachfolgenden Javaskript erfasse ich täglich um 23:58 Uhr die Tageszählerstände aus den in der HomeMatic angelegten Systemvariablen für die entsprechenden Tagesverbräuche und erzeuge nachfolgend mit dem phantomjs-Adapter um 23:59 Uhr einen Screenshot der per SQL-Adapter gespeicherten und per FLOT-Adapter erstellten Diagramme.

          var path = 'javascript.'+instance+'.vis.'; // Pfad der String-Datenpunkte
          var listd = ['VerbrauchStromTag','VerbrauchGasTag','VerbrauchWasserTag'];
          for(i = 0; i < listd.length; i++){
            createState(path+listd[i], 0, {
              read: true,
              write: true,
              name: 'Tagesverbrauchswert',
              type: 'string',
              def: '0'
            });
          }
           schedule('10 58 23 * * *', function(){//
            setState(path+listd[0], getState('hm-rega.0.5483').val + ' kWh'); // Strom
            setState(path+listd[1], getState('hm-rega.0.5482').val + ' m%B3'); // Gas
            setState(path+listd[2], getState('hm-rega.0.5584').val + ' m%B3'); // Wasser
          });
           schedule('20 59 23 * * *', function(){
            sendTo('phantomjs.0', 'send', {
                url: 'http://localhost:8082/flot/index.html?l%5B0%5D%5Bid%5D=javascript.0.vis.VerbrauchStromTag&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23FFD500&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=2&l%5B0%5D%5BchartType%5D=bar&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5BafterComma%5D=1&l%5B0%5D%5Bfill%5D=0.5&l%5B0%5D%5Bunit%5D=kWh&l%5B0%5D%5Bxaxe%5D=top&timeType=relative&relativeEnd=now&range=20160&aggregateType=count&width=600&height=300&noBorder=noborder&window_bg=rgb(86%2C+86%2C+86)&bg=rgba(128%2C+128%2C+128%2C+1)&titleColor=rgb(0%2C+0%2C+0)&titleSize=18&hoverDetail=true&timeFormat=%25a&useComma=true&zoom=true&noedit=true&animation=0&grid_color=rgba(214%2C+214%2C+214%2C+0.85)&legBg=rgb(255%2C+255%2C+255)&x_labels_color=rgb(255%2C+255%2C+255)&y_labels_color=rgb(255%2C+255%2C+255)&barWidth=0.6&barFontSize=10&barFontColor=%23ffffff&barLabels=topover&aggregateSpan=300',
                output: '/opt/iobroker/phantomjs_images/Stromverbrauch.png',
                width: 1024,
                height: 768,
                'clip-width': 600,
                'clip-height': 300
            }, function (result) {
                console.log(result.error + ' ' + result.output);
            });
          
            sendTo('phantomjs.0', 'send', {
                url: 'http://localhost:8082/flot/index.html?l%5B0%5D%5Bid%5D=javascript.0.vis.VerbrauchGasTag&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23FF5A00&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=2&l%5B0%5D%5BchartType%5D=bar&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5BafterComma%5D=2&l%5B0%5D%5Bunit%5D=m%C2%B3&l%5B0%5D%5Bfill%5D=0.5&l%5B0%5D%5Bxaxe%5D=top&timeType=relative&relativeEnd=now&range=20160&aggregateType=count&width=600&height=300&noBorder=noborder&window_bg=rgb(86%2C+86%2C+86)&bg=rgba(128%2C+128%2C+128%2C+1)&titleColor=rgb(0%2C+0%2C+0)&titleSize=18&hoverDetail=true&timeFormat=%25a&useComma=true&zoom=true&noedit=true&animation=0&grid_color=rgba(214%2C+214%2C+214%2C+0.85)&legBg=rgb(255%2C+255%2C+255)&x_labels_color=rgb(255%2C+255%2C+255)&y_labels_color=rgb(255%2C+255%2C+255)&barWidth=0.6&barFontSize=10&barFontColor=%23ffffff&barLabels=topover&aggregateSpan=300',
                output: '/opt/iobroker/phantomjs_images/Gasverbrauch.png',
                width: 1024,
                height: 768,
                'clip-width': 600,
                'clip-height': 300
            }, function (result) {
                console.log(result.error + ' ' + result.output);
            });
             sendTo('phantomjs.0', 'send', {
                url: 'http://localhost:8082/flot/index.html?l%5B0%5D%5Bid%5D=javascript.0.vis.VerbrauchWasserTag&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%230F00FF&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=2&l%5B0%5D%5BchartType%5D=bar&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5BafterComma%5D=2&l%5B0%5D%5Bfill%5D=0.5&l%5B0%5D%5Bunit%5D=m%C2%B3&l%5B0%5D%5Bxaxe%5D=top&timeType=relative&relativeEnd=now&range=20160&aggregateType=count&width=600&height=300&noBorder=noborder&window_bg=rgb(86%2C+86%2C+86)&bg=rgba(128%2C+128%2C+128%2C+1)&titleColor=rgb(0%2C+0%2C+0)&titleSize=18&hoverDetail=true&timeFormat=%25a&useComma=true&zoom=true&noedit=true&animation=0&grid_color=rgba(214%2C+214%2C+214%2C+0.85)&legBg=rgb(255%2C+255%2C+255)&x_labels_color=rgb(255%2C+255%2C+255)&y_labels_color=rgb(255%2C+255%2C+255)&barWidth=0.6&barFontSize=10&barFontColor=rgb(255%2C+255%2C+255)&barLabels=topover&aggregateSpan=300',
                output: '/opt/iobroker/phantomjs_images/Wasserverbrauch.png',
                width: 1024,
                height: 768,
                'clip-width': 600,
                'clip-height': 300
            }, function (result) {
                console.log(result.error + ' ' + result.output);
            });
          });
          

          Das mit dem phantomjs-Adapter kann man auch weglassen, da es lediglich für den nachträglichen Versand der Screenshots per Push-Nachricht von Bedeutung ist.
          Hier mal zwei Screenshots für die Flot-Einstellungen für den Parameter "javascript.0.vis.VerbrauchStromTag".
          996_2018-12-31_11h56_24.png
          996_2018-12-31_11h57_29.png
          Gruß,
          Thorsten

          1 Reply Last reply Reply Quote 0
          • D
            dtp last edited by

            @wendy2702:

            Was nutzt du zur Anzeige? Tablet, Pc? `

            Sowohl, als auch. 😉

            Primär nutze ich ein Wandtablet. Dieses hängt im Flur des EG und ist 24/7 eingeschaltet (auch der Screen). Hab noch ein zweites mit entsprechendem Rahmen, doch im Moment habe ich noch keine Idee, wo ich das am besten im Haus platziere.

            996_wandtablet_dtp_01.jpg
            996_wandtablet_dtp_02.jpg

            Die beiden Tablets sind Lifetab P9701 von Mediom, die von den Abmessungen her mit denen eines iPad mit 9,7"-Screen nahezu perfekt übereinstimmen. So kann ich die Rahmen problemlos auch mal für entsprechende iPads verwenden.

            1 Reply Last reply Reply Quote 0
            • D
              dondaik last edited by

              sehr schön !

              1 Reply Last reply Reply Quote 0
              • I
                IOkev last edited by Jey Cee

                Ich bin anfänger in VIS. Ich würde gerne an der seite ein Paar Buttons erstellen mit Bildern im Hintergrund. Ich würde dafür Vie Bars nehmen weil ich damit auf meine anderen Views umschalten möchte. Wie kann ich als Hintergrund bei den Buttons bilder machen so wie du? Wie bekomme ich so etwas wie auf dem Bild im anhang aus diesem Beitrag weitervorn hin?MFG Kev
                14780_screenshot_20181115-212218.jpg

                1 Reply Last reply Reply Quote 0
                • Homoran
                  Homoran Global Moderator Administrators last edited by

                  @IOkev:

                  Wie kann ich als Hintergrund bei den Buttons bilder machen so wie du? `

                  So:
                  144_knoepfe.png

                  Gruß

                  Rainer

                  1 Reply Last reply Reply Quote 0
                  • I
                    IOkev last edited by

                    Danke das hatte ich schon rausgefunden, aber bei dem Beispiel sieht man ja ist der Hintergrund quasi das Bild. Wenn ich bei dem Knopf ein Bild einfüge kann ich es nicht voll machen? Mit freundlichen Grüßen kev

                    1 Reply Last reply Reply Quote 0
                    • I
                      IOkev last edited by

                      Also ich würde zum Beispiel nur einen Knopf machen wollen mit dem Name Wohnzimmer am Rand und als Hintergrund ein Bild vom Wohnzimmer. Da kann ich dann drauf drücken und komme von der Hauptseite zu dem Wohnzimmer view. Oben bei dem Beispiel ist es wahrscheinlich ein Bild als Hintergrund und dann wurden die Knöpfe vorn drauf gelegt?! Mfg Kevin

                      1 Reply Last reply Reply Quote 0
                      • Jeeper.at
                        Jeeper.at last edited by

                        Mache einfach ein Bild dahinter. Du kannst immer mehrere Widgets übereinanderlegen. Die Ebene steuerst du über den Z-Index.

                        Je höher desto weiter vorne.

                        1 Reply Last reply Reply Quote 0
                        • I
                          IOkev last edited by Jey Cee

                          Danke, habe das gleich ausprobiert. das geht, aber ich müsste bei dem Button den Hintergrund auf Transparent machen, das geht aber nicht. weil wenn ich das Bild nach vorne mache kann ich den button nicht mehr betätigen. Auf dem bild sieht man was ich meine, das Bild habe ich nur zur ansicht daneben plaziert, weil es ja dahinter nicht sichtbar ist.
                          14780_2019-01-01_13h33_37.png

                          1 Reply Last reply Reply Quote 0
                          • Jeeper.at
                            Jeeper.at last edited by

                            Du kannst bei dem Color Tag bei den Buttons „transparent“ (ohne die Quotes) eintragen.

                            1 Reply Last reply Reply Quote 0
                            • H
                              Holzwurm1976 last edited by

                              @haselchen:

                              Meinst Du das hier?

                              Unbenannt.PNG

                              Einfach den Autor anschreiben 😄 `

                              genau die meinte ich…

                              1 Reply Last reply Reply Quote 0
                              • L
                                lesiflo Most Active last edited by Jey Cee

                                Hallo zusammen und ein frohes neues Jahr auch noch,

                                unter viewtopic.php?f=35&t=13917&start=60#p154795 hatte ich ja schon mal meine view eingestellt. Da es immer mal wieder was zu erweitern/verändern/erneuern gibt stelle ich mal wieder was neues ein. Wem's gefällt und etwas davon haben möchte einfach melden.

                                Gruß

                                Axel
                                2716_bad.jpg 2716_einstellungen.jpg 2716_backup.jpg 2716_fenster.jpg 2716_haustechnik.jpg 2716_licht.jpg 2716_robby.jpg 2716_wohnen.jpg 2716_heizung.jpg

                                1 Reply Last reply Reply Quote 0
                                • arteck
                                  arteck Developer Most Active last edited by

                                  der Sauger sieht gut aus.. könntest du mal ein Export zur Verfügung stellen

                                  1 Reply Last reply Reply Quote 0
                                  • L
                                    lesiflo Most Active last edited by Jey Cee

                                    @arteck:

                                    der Sauger sieht gut aus.. könntest du mal ein Export zur Verfügung stellen `

                                    Hier die Dateien,

                                    sind insgesamt 4 Subviews die in Hauptview eingebaut sind.

                                    2716_saugroboter.rar

                                    1 Reply Last reply Reply Quote -1
                                    • H
                                      Holzwurm1976 last edited by

                                      @lesiflo:

                                      Hallo zusammen und ein frohes neues Jahr auch noch,

                                      unter viewtopic.php?f=35&t=13917&start=60#p154795 hatte ich ja schon mal meine view eingestellt. Da es immer mal wieder was zu erweitern/verändern/erneuern gibt stelle ich mal wieder was neues ein. Wem's gefällt und etwas davon haben möchte einfach melden.

                                      Gruß

                                      Axel

                                      Bad.JPG

                                      Einstellungen.JPG

                                      Backup.JPG

                                      Fenster.JPG

                                      Haustechnik.JPG

                                      Licht.JPG

                                      Robby.JPG

                                      Wohnen.JPG

                                      Heizung.JPG `

                                      Hallo Axel,

                                      könntest Du auch das gesamte Projekt zur Verfügung stellen?

                                      Sieht echt toll aus…

                                      1 Reply Last reply Reply Quote 0
                                      • L
                                        lesiflo Most Active last edited by Jey Cee

                                        @Holzwurm1976:

                                        @lesiflo:

                                        Hallo zusammen und ein frohes neues Jahr auch noch,

                                        unter viewtopic.php?f=35&t=13917&start=60#p154795 hatte ich ja schon mal meine view eingestellt. Da es immer mal wieder was zu erweitern/verändern/erneuern gibt stelle ich mal wieder was neues ein. Wem's gefällt und etwas davon haben möchte einfach melden.

                                        Gruß

                                        Axel

                                        Bad.JPG

                                        Einstellungen.JPG

                                        Backup.JPG

                                        Fenster.JPG

                                        Haustechnik.JPG

                                        Licht.JPG

                                        Robby.JPG

                                        Wohnen.JPG

                                        Heizung.JPG `

                                        Hallo Axel,

                                        könntest Du auch das gesamte Projekt zur Verfügung stellen?

                                        Sieht echt toll aus… `

                                        Hi, hier ist der Export. Anonymisiert klappt bei leider nicht.

                                        2716_2019-01-02-1_tablet_new.rar

                                        1 Reply Last reply Reply Quote 2
                                        • H
                                          Holzwurm1976 last edited by

                                          vielen Dank dafür und viele Grüße…

                                          1 Reply Last reply Reply Quote 1
                                          • SmarthomeMF
                                            SmarthomeMF last edited by

                                            Hallo

                                            Wegen einer Anfrage noch mal meine VIS
                                            4668_01_grundriss.png 4668_02_keller.png 4668_03_medienraum.png 4668_04_heizung.png 4668_04__bersicht.png 4668_06_verbrauch.png 4668_07_poolhaus.png 4668_08_skripte.png 4668_09_samsung_tv.png 4668_10_wetter.png 4668_12_kamera.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            185
                                            916
                                            351234
                                            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