Webcam Bild in Widget "vergrößern"

topsurfer

@mcu
Wollte jetzt auch mal deinen Code testen
( https://forum.iobroker.net/topic/80939/webcam-bild-in-widget-vergrößern/6?_=1746462956983 )
Beim oberen längeren Code (16 Zeilen) erscheint kein Fullscreen oder größeres Bild, nur das Vorschaubild bleibt.

Der Dreizeiler darunter mit "....this.requestFullscreen()" funktioniert.
Aber wie kann ich das Fenster wieder schliessen (Tablet) ? Die "Zurück-Taste" ist ausgeblendet ...

Hintergrund:
Habe ein kleines Live-Vorschaubild der Kamera auf dem Dashboard (vis2), beim klick auf das Bild soll das Livebild größer (oder auch als Fullscreen) angezeigt werden. Das große Bild/Fullscreen muss aber auch auch wieder leicht geschlossen werden können.

MCU

@topsurfer

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

<script>
  function toggleFullscreen(elem) {
    if (!document.fullscreenElement) {
      elem.requestFullscreen().catch(err => {
        alert(`Fehler beim Vollbildmodus: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  }
</script>
</body>

Klick Fullscreen
Klick normal

topsurfer

@mcu Danke, hab den kompletten Code (den Source zuvor angepasst) in "HTML Basic-Widget =>Allgemein=> HTML gepastet.
Im Vis2-Editor zeigt er dann das Kamerabild zweimal an (Untereinander)(?), im Dashboard korrekt nur 1x.
Anklicken für Vollbild geht, aber weder im Browser noch am Handy (FullyKioskBrwoser) geht das Bild "weg" wenn man in das Bild klickt.

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();
  }
}

Nur img in HTML-Vorlage

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

topsurfer

@mcu Danke, bin leider nicht so fit in HTML, CSS, JS, ...
Thx!

vowill

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

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?

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

crunchip

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

OliverIO

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

in vis-2

platziere das widget "bulb on/off"
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.
lege einen neuen datenpunkt vom typ Logikwert/boolean an.
trage diesen datenpunkt bei object id des widgets ein.
dupliziere das widget so das es eine neue widget id erhält.
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
aktiviere im 2. widget die kategorie sichtbarkeit
bei sichtbarkeit /objektid trage wieder die objektid des angelegten datenpunkts ein
der rest bei sichtbarkeit müsste man so lassen können. bedingung ist == und wert ist 1
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

topsurfer

@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.

topsurfer

@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) ?

Crazy32

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

topsurfer

@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

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)
});

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 ?

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
-> +
->
-> Hinzufügen klicken
->
-> 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

-> DP anpassen, views anpassen für kameraFull und normal und Speichern

topsurfer

@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)
});

OliverIO

@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

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.

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

Community Forum

NEWS

Webcam Bild in Widget "vergrößern"

Support us

434

32.6k

82.3k

1.3m