Ich bräuchte mal Hilfe bei einem Popup ...

[dt2510]

Auf meiner Startseite hab' ich den Kamera Stream als Thumbnail (nicht über die 192 Pixel wundern, bei 9,7" und 2048x1536 Pixeln ist das winzig ) unten rechts in der Ecke

Code Auswählen Erweitern

<div
  data-type="image"
  data-device="N5DL"
  data-get="StmKeymjpegHttp"
  data-size="192">
</div>


Ich möchte jetzt gerne das Bild groß als Popup anzeigen, wenn ich
- auf das Thumbnail clicke oder
- wenn mein Bewegungsmelder eine Bewegung registriert (notify kann z.B. einen Dummy setzen)

Leider finde ich keine vernünftige Dokumentation des Popup Widgets ...

[redlav]

Probiers mal so:

Code Auswählen Erweitern


<div data-type="popup" data-height="600px" data-width="600px">
     <div data-type="image"
             data-device="N5DL"
             data-get="StmKeymjpegHttp"
             data-size="192">
      </div>
      <div class="dialog" style="background-color: rgba(0,0,0,0.8)">
        <div data-type="image" data-device="KameraGarage" data-get="StmKeymjpegHttp"</div>
      </div>
      <div data-type="link" class="top-space-3x centered"
              data-width="130" data-height="50"
              data-color="white"
              data-background-color="#2A2A2A"
              onclick="$('.dialog-close').trigger('click');">Schliessen
      </div>
      </div>
</div>


[dt2510]

Werd' ich nachher mal testen.
Wenn ich das richtig interpretiere würde mein <DIV> Tag das Popup mit 600x600 Pixeln triggern (beim Click).
Danach folgt ein Dialog mit dem Bild und ein Link zum schließen des Dialogs (ist der auf dem Dialog oder auf der Webseite ?).
Wie würde ich das Popup zusätzlich per notify triggern ?

[redlav]

Wie würde ich das Popup zusätzlich per notify triggern ?

Da kann ich nicht wirklich mit dienen. Hier gab es mal was dazu:

Code Auswählen Erweitern

https://forum.fhem.de/index.php/topic,66672.msg580149.html#msg580149
und auch hier:

Code Auswählen Erweitern

https://forum.fhem.de/index.php/topic,55895.msg475925.html#msg475925

Musst du mal ausprobieren.

[dt2510]

Prinzipiell funktioniert es (du musst einen </div> Tag weiter nach unten ziehen, dann ist der Button auf dem Dialog), allerdings verdunkelt sich nur ein Teil meines Bildes - vermutlich wegen der hohen Auflösung.
Kann man das auch abstellen ?

edit:
kann auch daran liegen, daß mein Monitor hier (teste am PC) das Bild nicht komplett darstellt ... teste nachher direkt am Tablet.

[dt2510]

Ich hab' es jetzt so gelöst

Code Auswählen Erweitern

<div data-type="popup" data-width="1536px" data-height="1152px">
  <div
    data-type="image"
    data-device="N5DL"
    data-get="StmKeymjpegHttp"
    data-size="192">
  </div>
  <div class="dialog" style="background-color: rgba(0,0,0,0.4)">
    <div
      data-type="image"
      data-device="N5DL"
      data-get="StmKeymjpegHttp"
      data-size="1536"
      onclick="$('.dialog-close').trigger('click');">
    </div>
  </div>
</div>


Ein click auf das Vorschaubild öffnet den Dialog und ein click auf das große Bild schließt ihn. Fehlt noch der notify Trigger.

[takaze]

Hi,

du kannst bei dem popup auch direkt ein device angeben, welches das popup dann alternativ zum image öffnet
dann musst du nur noch das notify einen dummy setzen lassen und den dummy dann beim klicken auf das image auf 0 resetten, da sonst das popup nicht mehr geschlossen werden kann

Code Auswählen Erweitern

<div data-type="popup" data-width="1536px" data-height="1152px" data-device="PIR_motion_dummy" data-get-on="1" data-get-off="0">
  <div
    data-type="image"
    data-device="N5DL"
    data-get="StmKeymjpegHttp"
    data-size="192">
  </div>
  <div class="dialog" style="background-color: rgba(0,0,0,0.4)">
    <div
      data-type="image"
      data-device="N5DL"
      data-get="StmKeymjpegHttp"
      data-size="1536"
      data-fhem-cmd="set PIR_motion_dummy 0"
      onclick="$('.dialog-close').trigger('click');">
    </div>
  </div>
</div>


Schönes Wochenende,
Florian

[dt2510]

Danke Florian,

das wäre mein nächster Versuch gewesen - bin nur noch nicht dazu gekommen
Dir auch ein schönes Wochenende

Stefan

p.s.: lassen sich Popups/Dialoge auch kaskadieren (also einen Dialog vom Dialog aus öffnen) bzw. PageButtons verwenden ?

[dt2510]

Hat funktioniert

Ich setze die Variable auf on/off bei Bewegung und steuere damit gleichzeitig die Beleuchtung im Eingang. So schlage ich 2 Fliegen mit einer Klappe.
Muss das jetzt mal eine Weile testen, vor Allem wenn während oder vor der Bewegung der Lichtschalter das Licht umschaltet. Aber ein "normaler"
Bewegungsmelder macht denk' ich auch nix anderes, es sei denn der Lichtschalter überbrückt ihn (macht das bei einem Funkschalter Sinn ?)...