Webcam Bild in Widget "vergrößern"

topsurfer

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

Wenn du es an die Widgetgröße anpassen willst, dann mit object-fit.

OK, wo soll/muss der Code rein?
iFrame Widget ist das korrekte?

Bei Widget-Quelle, oder im Tab: CSS oder ...?
Sorry ...

MCU

Alternativen zu object-fit: cover

Wert	Verhalten
contain	Bild wird vollständig gezeigt, kann Lücken haben
fill	Bild wird gestreckt – ggf. verzerrt
cover	Füllt das Widget aus – ggf. schneidet etwas ab

crunchip

@topsurfer du musst schon angeben was transformiert wird. Man kann da ja noch ganz andere Dinge eingeben, siehe screen

scale(wert)

hier nochmal ein screen mit vis2

topsurfer

@crunchip
Super,
bei mir heißt es auch "Transform" und nicht "Druckeffekt" (sprachabhängig wohl),
Werte > 1 gehen auch!

crunchip

@topsurfer also klappt es nun wie gewünscht?

topsurfer

@crunchip Ja, genau. Danke!

Bei "Scale", gibt es da auch was zum rotieren des Bildes?

Homoran

@topsurfer sagte in Webcam Bild in Widget "vergrößern":

Bei "Scale", gibt es da auch was zum rotieren des Bildes?

nicht scale, sondern rotate

topsurfer

@homoran Dort meinte ich ja ;-)
Transform / Druckeffegt (dort wo zuvor "scale" genutzt wurde.

So geht auch das:
rotate(90deg)

(das "deg" musste ich googlen, das geht jetzt auch - jetzt wird noch eine herumliegende ESP32 Cam integriert, thx!)

vowill

@topsurfer Alternative Lösung (bei mir in vis-1): Lege einen Rahmen als Button auf das Bild, bei dessen Anklicken eine 'View in Pop-up' geöffnet wird mit dem entsprechend größeren Bild.

topsurfer

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

bei dessen Anklicken eine 'View in Pop-up' geöffnet wird

Könnte ich mal testen in vis-2,
aber was bzw wo finde ich "View in Pop-up" ?

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

Community Forum

NEWS

Webcam Bild in Widget "vergrößern"

Support us

567

32.5k

81.6k

1.3m