Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.4k

Webcam Bild in Widget "vergrößern"

Geplant Angeheftet Gesperrt Verschoben Visualisierung
43 Beiträge 7 Kommentatoren 4.2k Aufrufe 7 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO Offline
    OliverIOO Offline
    OliverIO
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #33

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

          T 1 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
            0
            • M Online
              M Online
              MCU
              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • OliverIOO Offline
                      OliverIOO Offline
                      OliverIO
                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                      0
                      • M Online
                        M Online
                        MCU
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antworten Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              1
                              Antworten
                              • In einem neuen Thema antworten
                              Anmelden zum Antworten
                              • Älteste zuerst
                              • Neuste zuerst
                              • Meiste Stimmen


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              823

                              Online

                              32.4k

                              Benutzer

                              81.6k

                              Themen

                              1.3m

                              Beiträge
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                              ioBroker Community 2014-2025
                              logo
                              • Anmelden

                              • Du hast noch kein Konto? Registrieren

                              • Anmelden oder registrieren, um zu suchen
                              • Erster Beitrag
                                Letzter Beitrag
                              0
                              • Home
                              • Aktuell
                              • Tags
                              • Ungelesen 0
                              • Kategorien
                              • Unreplied
                              • Beliebt
                              • GitHub
                              • Docu
                              • Hilfe