Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Webcam Bild in Widget "vergrößern"

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    565

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    5.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.4k

Webcam Bild in Widget "vergrößern"

Scheduled Pinned Locked Moved Visualisierung
43 Posts 7 Posters 4.8k Views 7 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T topsurfer

    @vowill said in Webcam Bild in Widget "vergrößern":

    @topsurfer Das "View in Pop-up" ist eine Option des Universal Widgets in vis-1 (neben den Funktionen Button, State, ....).

    Danke, in vis-2 gibt es so was dann wohl nicht, oder?

    crunchipC Away
    crunchipC Away
    crunchip
    Forum Testing Most Active
    wrote on last edited by
    #29

    @topsurfer https://forum.iobroker.net/topic/68577/vis-inventwo-adapter-kompatibilität-mit-vis-2?_=1703921701772

    umgestiegen von Proxmox auf Unraid

    1 Reply Last reply
    0
    • OliverIOO Offline
      OliverIOO Offline
      OliverIO
      wrote on last edited by OliverIO
      #30

      warum eigentlich so kompliziert.
      mit javascript, mit scale.
      eigentlich geht das doch ganz einfach mit iobroker bordmitteln.

      in vis-2

      1. platziere das widget "bulb on/off"
      2. trage bei icon off und on deine url ein. falls es eine dynamische ist, trag es als binding ein, das dann im ergebnis die url ergibt. getestet habe ich es nur mit einem bild was bereits im iobroker dateimanager vorhanden ist.
      3. lege einen neuen datenpunkt vom typ Logikwert/boolean an.
      4. trage diesen datenpunkt bei object id des widgets ein.
      5. dupliziere das widget so das es eine neue widget id erhält.
      6. stelle im 2. widget nun die größe und position so ein wie du es haben möchtest. also größer und wahrscheinlich zentriert über dem 1. widget
      7. aktiviere im 2. widget die kategorie sichtbarkeit
      8. bei sichtbarkeit /objektid trage wieder die objektid des angelegten datenpunkts ein
      9. der rest bei sichtbarkeit müsste man so lassen können. bedingung ist == und wert ist 1
      10. das 2. widget sollte über dem ersten widget liegen. im zweifel den zindex pflegen

      dann in den runtime mode gehen. nur das erste (kleinere) widget dürfte sichtbar sein.
      bei klick wird der datenpunkt auf true gesetzt. dadurch wird die sichtbarkeit aktiviert und das 2.(größere) widget erscheint.
      durch erneuten klick (diesmal auf dem 2. widget) wird der datenpunkt wieder auf false gesetzt. die sichtbarkeit wird deaktiviert und das kleinere widget erscheint wieder.

      1aa79c4a-21bf-457d-80f5-40d500396345-20250506-2149-20.6285452.mp4

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      1 Reply Last reply
      1
      • vowillV vowill

        @topsurfer Doch: Meines Wissens gibt es die 'vis-inventwo'-Widgets auch bei vis-2; zumindest konnte ich sie laden. Dort kann unter 'Widget Typ' das 'ViewinPopup' ausgewählt werden, siehe Bild:
        Screenshot 2025-05-06 220722.png

        T Offline
        T Offline
        topsurfer
        wrote on last edited by
        #31

        @vowill said in Webcam Bild in Widget "vergrößern":

        Doch: Meines Wissens gibt es die 'vis-inventwo'-Widgets auch bei vis-2; zumindest konnte ich sie laden. Dort kann unter 'Widget Typ' das 'ViewinPopup' ausgewählt werden, siehe Bild:

        Danke, jetzt gefunden, teste ich mal.

        @oliverio said in Webcam Bild in Widget "vergrößern":

        warum eigentlich so kompliziert.
        mit javascript, mit scale.

        So in der Art mach ich es aktuell, frage war ob es auch "direkt" (und evtl. "besser") mit einem Widget geht.

        1 Reply Last reply
        0
        • M MCU

          @topsurfer Die Funktion in den Reiter "Skripte" einfügen

          function toggleFullscreen(elem) {
            if (!document.fullscreenElement) {
              elem.requestFullscreen().catch(err => {
                console.error(`Fullscreen error: ${err.message}`);
              });
            } else {
              document.exitFullscreen();
            }
          }
          

          0d629da7-f74a-4479-baf1-fc47521780d5-image.png
          Nur img in HTML-Vorlage

          <img src="http://192.168.55.xx:5000/webapi/entry.cgi?..." 
               style="width: 100%; cursor: pointer;" 
               onclick="toggleFullscreen(this)">
          

          5daa28b1-76c3-4c55-8fad-f83ecd729510-image.png

          vis2-Bild-Fullscreen.gif

          T Offline
          T Offline
          topsurfer
          wrote on last edited by
          #32

          @mcu
          Das hier mit dem händigen anklicken des Vorschau-Thumbs um ein Vollbild zu bekommen funktioniert ja gut, danke!
          https://forum.iobroker.net/topic/80939/webcam-bild-in-widget-vergrößern/22?_=1746774469792

          Aktuell wird bei einer erkannten Bewegung ein DP auf True gesetzt, und ein iFrame Widget nutzt die Option "Sichtbarkeit": Bewegung=true" dass dieses iFrame/Kamerabild in einem definierten Rahmen dann eingeblendet wird.

          Wie könnte ich es umsetzen, dass das Kamerabild bei Bewegungserkennung als Vollbild angezeigt wird und per druck auf den Bildschirm wieder vorzeitig "geclosed" wird (oder wenn der DP auf false springt auch wieder verschwindet) ?

          1 Reply Last reply
          0
          • T topsurfer

            Hallo,
            über meine Surveilance-Station habe ich ein Livebild meiner Kamera ( http://192.168.55.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey="2a06decfb60e9xxxxxxxxxxxxxxcc86" ).

            Dieses versuche ich nun per HTML- oder iFrame Widget in vis-2 auf dem Dashboard groß darzustellen.
            Aber das eigentliche Bild läßt sich nur bis zu einem bestimmten Wert großziehen (wohl die Auflösung vom Livebild), danach vergrößert sich zwar der "Rahmen", aber das Bild wird nicht weiter mit vergrößert.

            Gibt es einen Parameter in html, iframe oder css, mit dem ich das Bild auch größer bekommen kann?
            (in HTML hab ich schon Werte von >100% versucht, aber ohne Erfolg (width="120%" height="120%"))

            2025-05-03_112500.png

            Crazy32C Offline
            Crazy32C Offline
            Crazy32
            wrote on last edited by
            #33

            @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

            T 1 Reply Last reply
            0
            • Crazy32C Crazy32

              @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

              T Offline
              T Offline
              topsurfer
              wrote on last edited by topsurfer
              #34

              @crazy32 said in Webcam Bild in Widget "vergrößern":

              @topsurfer Wo hast Du den http-Stream her? In meiner Surveillance Station finde ich nur einen rtsp-Stream.

              Gute Frage, woher oder wer mir das genannt hat.
              Ist der Key vom RTSP Stream der Surveilance,
              sieht dann so aus und geht im Browser (!):
              http://192.168.yy.xx:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=5&StmKey=2a06decfzzzzzzzzzzzzzzzzzzcc86

              1 Reply Last reply
              0
              • M Online
                M Online
                MCU
                wrote on last edited by MCU
                #35

                @topsurfer Nee, das funktioniert leider so nicht. Für die Funktion muss der User klicken!
                Aber du kannst eine andere View nutzen mit Vollbild von dem Kamerabild und dann bei DP true die VIEW umschalten.

                on({id: '0_userdata.0.showCamFullscreen', change: 'ne'}, obj => {
                  if (obj.state.val === true) {
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'cam_fullscreen'}));
                    setState('vis-2.0.control.command', 'changeView');
                  }
                setTimeout(function(){
                   /* zurück auf Standard-Bildschirm */
                    setState('vis-2.0.control.instance', 'vis.0');
                    setState('vis-2.0.control.data', JSON.stringify({view: 'cam_normal'}));
                    setState('vis-2.0.control.command', 'changeView');
                },10000)
                });
                

                NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                T 1 Reply Last reply
                0
                • M MCU

                  @topsurfer Nee, das funktioniert leider so nicht. Für die Funktion muss der User klicken!
                  Aber du kannst eine andere View nutzen mit Vollbild von dem Kamerabild und dann bei DP true die VIEW umschalten.

                  on({id: '0_userdata.0.showCamFullscreen', change: 'ne'}, obj => {
                    if (obj.state.val === true) {
                      setState('vis-2.0.control.instance', 'vis.0');
                      setState('vis-2.0.control.data', JSON.stringify({view: 'cam_fullscreen'}));
                      setState('vis-2.0.control.command', 'changeView');
                    }
                  setTimeout(function(){
                     /* zurück auf Standard-Bildschirm */
                      setState('vis-2.0.control.instance', 'vis.0');
                      setState('vis-2.0.control.data', JSON.stringify({view: 'cam_normal'}));
                      setState('vis-2.0.control.command', 'changeView');
                  },10000)
                  });
                  
                  T Offline
                  T Offline
                  topsurfer
                  wrote on last edited by
                  #36

                  @mcu Puhh, danke;
                  hört sich kompliziert an ...
                  Mit dem "anderen DP" meinst du einen/den DP, der das Vollbild ein/ausschaltet?

                  Und obiges Code würde wieder nach "Scripte" gehören ?

                  M 1 Reply Last reply
                  0
                  • T topsurfer

                    @mcu Puhh, danke;
                    hört sich kompliziert an ...
                    Mit dem "anderen DP" meinst du einen/den DP, der das Vollbild ein/ausschaltet?

                    Und obiges Code würde wieder nach "Scripte" gehören ?

                    M Online
                    M Online
                    MCU
                    wrote on last edited by
                    #37

                    @topsurfer Eigentlich nicht sooo kompliziert.

                    • In der VIS2 eine neue Seite (kameraFull) anlegen in dem das Kamerabild auf der ganzen Seite angezeigt wird.
                    • in ioBroker unter Skripte ein neues javascript anlegen Name KameraUmschaltung

                    Diesen Code in das neue javascript enifügen
                    Skripte
                    -> +
                    -> 361f7e4d-bbff-4509-86c8-94700f587300-image.png
                    -> Hinzufügen klicken
                    -> 9ebc6329-6488-424b-abf4-2afc40b47942-image.png
                    -> Namen Eintragen und ok klicken
                    ->

                    /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                    let dp = '0_userdata.0.besuchanderTuer'
                    
                    on({id: dp , change: 'ne'}, obj => {
                      if (obj.state.val === true) {
                        setState('vis-2.0.control.instance', 'vis.0');
                        setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                        setState('vis-2.0.control.command', 'changeView');
                      }
                    setTimeout(function(){
                       /* zurück auf Standard-Bildschirm */
                        setState('vis-2.0.control.instance', 'vis.0');
                        setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                        setState('vis-2.0.control.command', 'changeView');
                    },10000)
                    });
                    

                    -> Code einfügen und Speichern
                    fda39d70-ed55-41da-afbe-c5d5b0760895-image.png
                    -> DP anpassen, views anpassen für kameraFull und normal und Speichern

                    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                    T 1 Reply Last reply
                    1
                    • M MCU

                      @topsurfer Eigentlich nicht sooo kompliziert.

                      • In der VIS2 eine neue Seite (kameraFull) anlegen in dem das Kamerabild auf der ganzen Seite angezeigt wird.
                      • in ioBroker unter Skripte ein neues javascript anlegen Name KameraUmschaltung

                      Diesen Code in das neue javascript enifügen
                      Skripte
                      -> +
                      -> 361f7e4d-bbff-4509-86c8-94700f587300-image.png
                      -> Hinzufügen klicken
                      -> 9ebc6329-6488-424b-abf4-2afc40b47942-image.png
                      -> Namen Eintragen und ok klicken
                      ->

                      /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                      let dp = '0_userdata.0.besuchanderTuer'
                      
                      on({id: dp , change: 'ne'}, obj => {
                        if (obj.state.val === true) {
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                          setState('vis-2.0.control.command', 'changeView');
                        }
                      setTimeout(function(){
                         /* zurück auf Standard-Bildschirm */
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                          setState('vis-2.0.control.command', 'changeView');
                      },10000)
                      });
                      

                      -> Code einfügen und Speichern
                      fda39d70-ed55-41da-afbe-c5d5b0760895-image.png
                      -> DP anpassen, views anpassen für kameraFull und normal und Speichern

                      T Offline
                      T Offline
                      topsurfer
                      wrote on last edited by
                      #38

                      @mcu said in Webcam Bild in Widget "vergrößern":

                      Kurze Frage noch ;-)

                      Für einen andere Kamera habe ich bereits einen Datenpunkt, wo der aktuelle Timestamp der erkannten Bewegung immer reingeschrieben wird.
                      Wie kann man diesen DP (Objekttyp: Text) zum umschalten der View nutzen, sobald sich dieser Wert geändert/aktuallisiert hat?

                      Kenn mich mit Java leider nicht aus,
                      diese zwei Zeilen sind/wären es wohl:

                      on({id: dp , change: 'ne'}, obj =>
                      { if (obj.state.val === true) {
                      ...

                      /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                      
                      let dp = '0_userdata.0.besuchanderTuer'
                      on({id: dp , change: 'ne'}, obj => {
                        if (obj.state.val === true) {
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', JSON.stringify({view: 'kameraFull'}));
                          setState('vis-2.0.control.command', 'changeView');
                        }
                      setTimeout(function(){
                         /* zurück auf Standard-Bildschirm */
                          setState('vis-2.0.control.instance', 'vis.0');
                          setState('vis-2.0.control.data', JSON.stringify({view: 'normal'}));
                          setState('vis-2.0.control.command', 'changeView');
                      },10000)
                      });
                      
                      1 Reply Last reply
                      0
                      • OliverIOO Offline
                        OliverIOO Offline
                        OliverIO
                        wrote on last edited by OliverIO
                        #39

                        @topsurfer

                        auf dieser seite ist ein Beispiel
                        https://www.smarthome-tricks.de/software-iobroker/vis-ereignisgesteuerter-view-wechsel/

                        die Zeile mit instance und data sieht anders aus.
                        Ich glaube die Notation fürt die view ist
                        projekt/viewname
                        und kein json objekt
                        instance ist die browser instanz, die man in der vis definieren kann. in allen vis-client die view umschalten soll, dann diese mehrachen Fs. Ansonsten die genaue Angabe der Browserinstanz.
                        Die sieht man in vis1 im Tools-Reiter
                        e5628086-c4e1-4553-9b87-fff8c14772ad-image.png

                        passt auch besser zur Dokumentation hier
                        https://github.com/ioBroker/ioBroker.vis?tab=readme-ov-file#control-interface

                        Aber keine Ahnung ob der Code von MCU auch funktionieren könnte.

                        Meine Adapter und Widgets
                        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                        Links im Profil

                        1 Reply Last reply
                        0
                        • M Online
                          M Online
                          MCU
                          wrote on last edited by MCU
                          #40

                          @oliverio Da wirst du wohl Recht haben.

                          /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                          let dp = '0_userdata.0.besuchanderTuer'
                           
                          on({id: dp , change: 'ne'}, obj => {
                          //  if (obj.state.val === true) {
                              setState('vis-2.0.control.instance', 'vis.0');
                              setState('vis-2.0.control.data', 'project/kameraFull');
                              setState('vis-2.0.control.command', 'changeView');
                          //  }
                          setTimeout(function(){
                             /* zurück auf Standard-Bildschirm */
                              setState('vis-2.0.control.instance', 'vis.0');
                              setState('vis-2.0.control.data', 'projekt/normal');
                              setState('vis-2.0.control.command', 'changeView');
                          },10000)
                          });
                          
                          

                          @topsurfer Der Zeitpunkt der eingetragen wird ist ja nie gleich, oder?
                          Also würde es auch so funktionieren.
                          -> dp anpassen

                          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                          T 1 Reply Last reply
                          0
                          • M MCU

                            @oliverio Da wirst du wohl Recht haben.

                            /* Dein DP mit dem man erkennt, dass da jemand an der Tür ist , KlingelDP oder so */
                            let dp = '0_userdata.0.besuchanderTuer'
                             
                            on({id: dp , change: 'ne'}, obj => {
                            //  if (obj.state.val === true) {
                                setState('vis-2.0.control.instance', 'vis.0');
                                setState('vis-2.0.control.data', 'project/kameraFull');
                                setState('vis-2.0.control.command', 'changeView');
                            //  }
                            setTimeout(function(){
                               /* zurück auf Standard-Bildschirm */
                                setState('vis-2.0.control.instance', 'vis.0');
                                setState('vis-2.0.control.data', 'projekt/normal');
                                setState('vis-2.0.control.command', 'changeView');
                            },10000)
                            });
                            
                            

                            @topsurfer Der Zeitpunkt der eingetragen wird ist ja nie gleich, oder?
                            Also würde es auch so funktionieren.
                            -> dp anpassen

                            T Offline
                            T Offline
                            topsurfer
                            wrote on last edited by
                            #41

                            @mcu
                            OK, also sollte es genügen, wenn ich nur den DP ändere?
                            Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                            2025-05-20_125120.png
                            In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                            2025-05-20_124630.png

                            M OliverIOO 2 Replies Last reply
                            0
                            • T topsurfer

                              @mcu
                              OK, also sollte es genügen, wenn ich nur den DP ändere?
                              Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                              2025-05-20_125120.png
                              In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                              2025-05-20_124630.png

                              M Online
                              M Online
                              MCU
                              wrote on last edited by
                              #42

                              @topsurfer ja,dorry die if obj.state.val Zeile muss raus und dir klammer dazu unten weiter

                              NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                              Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                              1 Reply Last reply
                              1
                              • T topsurfer

                                @mcu
                                OK, also sollte es genügen, wenn ich nur den DP ändere?
                                Hab ich gemacht, der Inhalt vom DP ändert sich auch, aber das Umschalten der Kamera erfolgt nicht.

                                2025-05-20_125120.png
                                In der Log-Ausgabe sieht man den Scriptstart, und dann das starten des Timeouts, aber in den Teil "true" (mit umschalten der Kamera) springt er nicht.

                                2025-05-20_124630.png

                                OliverIOO Offline
                                OliverIOO Offline
                                OliverIO
                                wrote on last edited by
                                #43

                                @topsurfer

                                Hier noch ein Artikel zur Verwendung der Instanz id des Browsers.
                                https://www.smarthome-tricks.de/software-iobroker/iobroker-vis-browser-id/amp/

                                Also soe wie es da steht ist nicht falsch, insbesondere dann wenn du mehrere Clients/Browser hast über du dann deine views abrufen wills, aber der View Wechsel genau nur auf einem Browser ändern willst.
                                Da sich die aus Versehen aber auch mal ändern kann und wenn du überall alles gleich funktionieren lassen willst, würde ich lieber als Instanz id das hier verwenden FFFFFFFF

                                Meine Adapter und Widgets
                                TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                                Links im Profil

                                1 Reply Last reply
                                1
                                Reply
                                • Reply as topic
                                Log in to reply
                                • Oldest to Newest
                                • Newest to Oldest
                                • Most Votes


                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                437

                                Online

                                32.7k

                                Users

                                82.6k

                                Topics

                                1.3m

                                Posts
                                Community
                                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                ioBroker Community 2014-2025
                                logo
                                • Login

                                • Don't have an account? Register

                                • Login or register to search.
                                • First post
                                  Last post
                                0
                                • Home
                                • Recent
                                • Tags
                                • Unread 0
                                • Categories
                                • Unreplied
                                • Popular
                                • GitHub
                                • Docu
                                • Hilfe