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

    • 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 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • 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
                                          • SmarthomeMF
                                            SmarthomeMF last edited by

                                            He noch ne Frage..

                                            wie kann ich da meine zip Datei einfügen?

                                            Die ist zu groß 46MB

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            776
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

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