Kamerabild Popup im Floorplan durch Aktor

[Eisbaer79]

Hallo liebe Forumsmitglieder!

Hausautomatisierung mit dem FS20 System ist nichts neues für mich, jedoch bin ich absoluter Anfänger was FHEM betrifft. FHEM läuft bei mir auf einem Raspberry Pi mit COC Modul. Nun bastel ich seit einiger Zeit mit den Floorplänen herum, da das System am Ende über ein Touchscreen gesteuert werden soll.

So weit so gut. Als nächstes möchte ich eine IP Cam in die Floorpläne einbinden, so das ich über ein Dummy Schalter das Bild der IP Cam in einem Popup Fenster öffnen kann. Dafür gibt es ja schon Scriptvorschläge im Netz. Das Bild der Kamera kann ich auch schon mit FHEM darstellen, nur das mit dem Dummy und Popup im Floorplan klappt noch nicht ganz.

Jetzt aber mein eigentliches Anliegen: Ich möchte das es am Ende zusätzlich zu der Möglichkeit der Bildanzeige über den Dummyschalter möglich ist, dass Kamerabild automatisch (am liebsten für eine vordefinierte Zeit, aber kein Muss) über den Empfang eines Schaltersignals anzeigen zu lassen.

Also, wenn das FS20 Klingelsignalerkennungsmodul einen Schaltbefehl sendet, soll FHEM für eine bestimmte Zeit (oder halt wenn so nicht möglich auch mit manuellen schließen des Fensters) ein Popup Fenster mit dem Kamerabild im Floorplan öffnen. Das Ganze soll in allen Floorplänen passieren, also nicht auf einen bestimmten beschränkt sein.

Ist so etwas realisierbar? Bitte bedenkt, ich bin absoluter Neuling was die Config Files von FHEM betrifft...

Vielen Dank und viele Grüße,
René

[fiedel]

Hallo René,

ja das geht prinzipiell. Dafür gibt es das IP-Cam Modul. Schau mal in die Commandref und zu Einsteigerfragen ins Wiki, in das Einsteiger- PDF! Sehr interessant dazu ist auch die Webseite von Martin Fischer, der das Modul geschrieben hat.

Ich habe das mit dem Popup auch mal gehabt, dann aber wieder verworfen zugunsten eines Kamerasnaphots, der bei neuem Event (z.B. FS20KSE) aktualisiert wird. Das mit dem Symlink am Anfang dient nur dazu die Bilder aus meinem Google-Drive-Ordner in das FHEM- Verzeichnis zu verlinken. Du kannst die Snapshots auch direkt nach FHEM schicken lassen. Hier mal meine Konfiguration und etwas "Knoff Hoff" dazu:

Code Auswählen Erweitern



###########
# ACHTUNG #
###########

# Damit das holen der Bilder in die Weboberfläche funktioniert,
# muss unter Linux folgender Symlink gesetzt sein:
# ln -s /home/user/g_drive/Surveillance/Snapshots /usr/share/fhem/www/images/default/snapshots


# Kameramodul "ipcam" definieren:
define 01_Cam IPCAM 192.168.1.20
attr 01_Cam basicauth {USERNAME}:{PASSWORD}
attr 01_Cam credentials /media/sd/fhem/ipcam.conf
attr 01_Cam delay 0
attr 01_Cam path jpg/image.jpg
attr 01_Cam room 3_Alarm
attr 01_Cam snapshots 1
attr 01_Cam storage /home/user/g_drive/Surveillance/Snapshots
attr 01_Cam timestamp 1


# Bewegungsmelder Haustür Aktionen (Log, Bild machen, Surv.- Ordner syncen):
# später auf echten Bewegungsmelder umschreiben (FS20)
define AL_1_N notify AL_1_N:.*on.* { \
      if (OldValue("AL_1_N") ne "on") { \
       fhem("get 01_Cam image");;\
       fhem("define Sync1_A at +00:00:16 trigger Func_Sync_GD_N");;\
       Log 1, 'Melder Haustür hat angesprochen';; \
       }\
 }
attr AL_1_N group Programm
attr AL_1_N room 5_System


# Synchronisieren des Google Drive:
define Func_Sync_GD_N notify Func_Sync_GD_N { \
 Log 1, 'Google Drive wurde synchronisiert';; \
 system("/home/user/g_drive/./grive -p /home/user/g_drive/");;\
 }
attr Func_Sync_GD_N group Programm
attr Func_Sync_GD_N room 5_System


# Popup mit Livebild der Kamera über Klick auf letztes Standbild
# http://www.homepage-buttons.de/tipps-und-tricks/javascript/popup-ohne-javascript.html
# Bindet das letzte Kamerabild in den FP ein und erzeugt einen Link für das Livebild:
# Formatierung des Button- Bildes (Größe + Rundung) steckt in darkfloorplanstyle.css
# Todo: ggf. Lightbox 2 anstatt Popup verwenden!
define Cam_01_Stream weblink htmlCode <a onClick="window.open "href="/fhem/floorplan/8_Surveillance"><img src="/fhem/icons/snapshots/01_Cam_snapshot"></a>
attr Cam_01_Stream fp_0_Hauptbildschirm 20,836,0,
attr Cam_01_Stream room 5_System

# Livebild der Kamera auf Surv.- FP mit Link zurück zu Hauptfloorplan
define Cam_01_Stream_FP weblink htmlCode <a onClick="window.open "href="/fhem/floorplan"><img src="http://user.no-ip.org:80/mjpg/video.mjpg"></a>
attr Cam_01_Stream_FP fp_8_Surveillance 30,37,0,
attr Cam_01_Stream_FP room 5_System

# Letzter Snapshot der Kamera auf Surv.- FP mit Link zurück zu Hauptfloorplan
define Cam_01_Snap_FP weblink htmlCode <a onClick="window.open "href="/fhem/floorplan"><img src="/fhem/icons/snapshots/01_Cam_snapshot.jpg"></a>
attr Cam_01_Snap_FP fp_8_Surveillance 31,615,0,
attr Cam_01_Snap_FP room 5_System



# Programmierbeispiele Kamerabild und HTML:

### Vorlagen zum Einbinden vom Kamerabild ohne Linkfunktion:
# define 01_Kamera weblink image http://user.no-ip.org:80/jpg/image.jpg
# define 01_Kamera weblink iframe http://user.no-ip.org:80/mjpg/video.mjpg
# attr 01_Kamera fp_0_Hauptbildschirm 40,800,0,
# attr 01_Kamera htmlattr width="530" height="330" frameborder="0" marginheight="0" marginwidth="0"
# attr 01_Kamera room 0_Überblick

### Popup mit Livebild der Kamera über Button (Vorlage für Button Funktion!!!):
# define Cam_01_Stream weblink htmlCode <a target="popup" onclick="window.open ('', 'popup', 'width=640,height=480,scrollbars=no, toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=10,left=10') "href="http://user.no-ip.org:80/mjpg/video.mjpg"><img src="/fhem/icons/button1" width="100" height="34" border="0" alt="Home"></a>
# attr Cam_01_Stream fp_0_Hauptbildschirm 40,700,0,
# attr Cam_01_Stream room 5_System

### unsichtbarer Link Beispiel ohne Veränderung des Mauszeigers:
# "Transparent" ist ein kleines komplett Transparentes png- Icon
# define Lower_Floor weblink htmlCode <a onClick="location.href='/fhem'"><div>fhem</div><img src="/fhem/icons/Transparent" width="300" height="230" border="0" alt="Home"></a>
# attr Lower_Floor fp_0_Hauptbildschirm 452,244,0,
# attr Lower_Floor room 5_System

### Vorlage für Einfügen des Snapshots in den Popup- Link:
# img width="530" height="330" marginwidth="0" marginheight="0" frameborder="0" src="/fhem/icons/snapshots/01_Cam_snapshot"

### Code zum Schließen des Popup- Fensters (noch anpassen, ist für Button geschrieben):
# <a href="javascript:window.close()">
# <img src="dateinme.gif" width="115" height="21" alt="">
# </a>
# oder (http://www.axel-hahn.de/axel/page_compi/js_picview2.htm):
# <a onclick="JavaScript:self.close();" href="#"><img border="0" alt="zum Schliessen Bild anklicken." src="href="http://192.168.1.20/mjpg/video.mjpg"></a>





Gruß

Frank

[moonsorrox]

Hallo,

ich heiße auch René (nicht wundern) und besitze ebenfalls schon eine IP Cam, die ich ganz genauso einsetzen möchte.
Da ich noch keinen Floorplan habe und auch noch kein Tablet-PC welches bei mir an der Wand hängen soll und mir dies anzeigen soll werde ich hier evtl. die ein oder andere Frage stellen. Schön sind auch Bilder, wenn du welche machen kannst oder auch Screenshots

Wie hast du das Bild in FHEM gebracht..?

Ein iPad mini habe ich schon dieses soll dann aber nur variabel einsetzbar sein, da habe ich FHEM Remote drauf. Das andere etwas günstigere Tablet (Android) soll dann an die Wand.
Ich habe hier im Forum schon in einem Beitrag ein Link gesetzt zu einem Anbieter der richtig gute Tablets hat und auch sehr günstig - so um die 130,- Euro

UND wenn ich hier was einbringen kann mache ich das natürlich..!

[fiedel]

Hi Rene der Zweite ;o)

eine gute Anleitung zum Floorplan gibt es hier.

Wenn du einen FP am laufen hast, fängst du an die Links und das IPcam- Modul einzubinden. Beispiele hast du ja weiter oben. Screenshot bringt nicht viel. Auf meinem FP sind nur zwei Kamerabilder nebeneinander. Eines live und eines wird per Bewegungsmelder aktualisert.

Gruß

Frank

[moonsorrox]

Wenn du einen FP am laufen hast, fängst du an die Links und das IPcam- Modul einzubinden. Beispiele hast du ja weiter oben. Screenshot bringt nicht viel. Auf meinem FP sind nur zwei Kamerabilder nebeneinander. Eines live und eines wird per Bewegungsmelder aktualisert.

DIe Beschreibung kenne ich und habe auch schon etwas gelesen.

OK aber ein FP habe ich ja noch nicht, da ich erst ein Aktor die Tage gekauft und jetzt auch erst eingebunden habe.
Ein FP lohnt sich ja erst bei mehreren Geräten...

Das mit dem Bewegungsmelder ist eine tolle Idee welchen Bewegungsmelder setzt du dafür ein..! Ich besitze ein Busch Jäger

[fiedel]

Ein FP lohnt sich ja erst bei mehreren Geräten...

Das mit dem Bewegungsmelder ist eine tolle Idee welchen Bewegungsmelder setzt du dafür ein..! Ich besitze ein Busch Jäger

Ein FP kannst du ja schon vorab aufbauen. Das kann ganz schön aufwändig werden, wenn man z.B. Haus- oder Wohnungsgrundrisse mit diversen Statusicons oder Buttons haben will. Dann kannst du dich später auf das Komplettieren und Programmieren konzentrieren. ;o)

Bewegungsmelder kannst du PIRI oder PIRU nehmen oder was von HM (alles von ELV). Ich habe einen HF- Melder mit FS20 KSE modifiziert (rumgebastelt - ich darf sowas ;o)). Ist aber auch noch nicht das Wahre. Ein guter Melder, der wirklich nur bei Menschen oder Autos meldet und nicht bei Regen und Tieren ist schwer zu finden und wenn, dann sehr teuer. Und dann kann man z.B. einen Honeywell auch noch austricksen, weil er und- verknüpft ist und nur passiv- PIR hat. Ist ne Wissenschaft für sich... ;o)

[Eisbaer79]

Hallo!

So nach vielen Versuchen melde ich mich nun nochmal. Erst mal danke für die ganzen Beiträge! Ich habe versucht mir daraus die für mich nötigen Informationen heraus zu ziehen, komme aber irgendwie nicht weiter :-(

Aus dem Beitrag von fiedel habe ich einfach mal folgenden Codeschnipsel kopiert und in meine cfg eingefügt:

### Popup mit Livebild der Kamera über Button (Vorlage für Button Funktion!!!):
# define Cam_01_Stream weblink htmlCode <a target="popup" onclick="window.open ('', 'popup', 'width=640,height=480,scrollbars=no, toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=10,left=10') "href="http://user.no-ip.org:80/mjpg/video.mjpg"><img src="/fhem/icons/button1" width="100" height="34" border="0" alt="Home"></a>
# attr Cam_01_Stream fp_0_Hauptbildschirm 40,700,0,
# attr Cam_01_Stream room 5_System

wobei ich die Adresse der IP Cam natürlich auf meine angepasst und mich für ein snapshot.cgi statt für einen Videostream entschieden habe. Das Gute vorweg, wenn ich auf den Button drücke, öffnet sich auch in einem extra Fenster das Schnappschuß Bild. Aber: Je statt einem Button bekomme ich im von mir angepaßten Room oder Floorplan nur einen angedeuteten Rahmen mit dem Word "Home" angezeigt. Wenn sich das Kamerabild dann in einem extra Fenster geöffnet hat, bekomme ich es im Fullscreen Modus natürlich nicht mehr geschlossen.

Daher nun meine zwei weiteren Frage:
1. Wie muss ich die Codeschnipsel anpassen um einen richtigen Button, nur bestehend aus einem von mir erstellten PNG oder GIF, angezeigt zu bekommen, statt dem Wort "Home"?
2. Wie kann ich in das für das Kamerabild geöffnete Fenster einen Button zum Schließen des selben einfügen? Das System soll ja später im Fullscreen auf einem Touchscreen ohne Tastatur laufen.

Viele Grüße,
René

[fiedel]

Hi René,

zu 1.: Du musst ein passendes Button Bild (Icon) in deinen FHEM- Bilderordner packen und es muss button1.jpg heissen. Kann aber auch ein .gif oder .svg sein. Der Bezug dazu ist: img src="/fhem/icons/button1"

zu 2.: Ich glaube deshalb habe ich damals das Popup wieder verworfen und habe eine Kamera- Floorplanseite gemacht, zu der ich per Klick auf das Bild/Button springe. Wenn ich dann dort auf eines der Kamerabilder klicke, springe ich wieder zurück zum Hauptfloorplan. Das funktioniert über den unsichtbaren Button, der über dem Bild liegt.

Wenn du es trotzdem durchziehen willst, stehen die Ansätze ganz unten in meinen Beispielen. Die Beispiele funktionieren mit Javascript und das ging noch auf dem PC, aber nicht mehr auf dem Tablet (Andr. 4.0).

Gruß

Frank

[Eisbaer79]

Aaahhh, okay, jetzt hab ich endlich das Prinzip verstanden und werde es heute abend mal umsetzen. Wobei eine Frage offen bleibt:

Wie kann ich nun FHEM dazu zwingen bei dem Empfang eines Signals, hier z.B. durch den FS20KSE, automatisch in den Floorplan der Kamera oder in das Verzeichnis der Kamera (wo das Bild ja auch angezeigt wird) zu wechseln? Standardmäßig befinde ich mich also in meinem Beispiel hauptsächlich in dem Floorplan Makros. Wenn der FS20KSE auslöst soll FHEM nun in den Floorplan Kameras wechseln.

Nochmal zum Verständnis (warum übrigens auch Java ausscheidet), der Raspberry ist im Flur mit einem daran angeschlossenem Touchscreen Monitor verbaut. Gesteuert wird über einen Webbrowser direkt am Raspberry auf dem auch FHEM läuft durch Aufruf über localhost.

Vielen Dank für die bisherige Hilfe und viele Grüße,
René

[fiedel]

Wie kann ich nun FHEM dazu zwingen bei dem Empfang eines Signals, hier z.B. durch den FS20KSE, automatisch in den Floorplan der Kamera oder in das Verzeichnis der Kamera (wo das Bild ja auch angezeigt wird) zu wechseln? Standardmäßig befinde ich mich also in meinem Beispiel hauptsächlich in dem Floorplan Makros. Wenn der FS20KSE auslöst soll FHEM nun in den Floorplan Kameras wechseln.

Das hätte ich auch gern so gehabt. Geht aber auch nicht ohne Weiteres, da der Befehl zum Seite aufrufen ja aus dem Browser kommen müsste. War mir dann zu kompliziert und ich habe es so gelöst:

Im Hauptfloorplan gibt es ein ausreichend großes Kamerasnapshot, welches durch FS20 Befehle aktualisiert wird. Das geht mit dem IPCam- Modul von Martin Fischer. Dort wird der letzte Snapshot immer zweifach erzeugt. Ein Exemplar hat immer den gleichen Dateinamen und wird vom Nächsten überschrieben. Jetzt siehst du schon mal wer vor der Tür steht, wenn es Klingelt, oder jemand in den Melder läuft.
Dieser Snapshot ist nun gleichzeitig mein "Button" um per touch zum Kamerafloorplan zu kommen, wo man ein großes Livebild hat und dazu nochmal den letzen Snapshot etwas größer. Zurück kommt man wieder durch touch auf eines der Bilder.

In diesen Kamerafloorplan kann man nun noch Steuerelemente (PTZ / Snapshot / Videoaufnahme) legen, denn das IPCam- Modul kann auch die Kamera per CGI steuern. Das ist bei mir allerdings noch Zukunftsmusik. Den Rest hast du oben schon komplett als Beispiel.

Die zusätzlichen Einträge in der "darktouchpadfloorplanstyle.css" für die Formatierung der Bilder sehen dann so aus:

Code Auswählen Erweitern


/* spezielle Design- und Größeneinstellung für Kamerabild, abweichend von Zeile 20 */

#Cam_01_Stream img { width:430px; height:230px; -moz-border-radius:8px; border-radius:8px;}
#Cam_01_Stream_FP img { width:500px; height:300px; -moz-border-radius:8px; border-radius:8px;}
#Cam_01_Snap_FP img { width:640px; height:480px; -moz-border-radius:8px; border-radius:8px;}


Ggf. muss du gucken (z.B. mit Firebug), welche css für deinen FP zuständig ist und die Zeilen dort reinkopieren. Du kannst aber auch eine eigene css- Datei erstellen (die ehemals zuständige Datei in FHEM per "Save as" unter eigenem Namen kopieren) und diese dem FP zuweisen. Dann kann bei Updates nix mehr überschrieben werden. Das sieht dann so aus:

Code Auswählen Erweitern



define 8_Surveillance FLOORPLAN
attr 8_Surveillance fp_arrange 1
attr 8_Surveillance fp_noMenu 1
attr 8_Surveillance group Floorplans
attr 8_Surveillance room 5_System
attr 8_Surveillance stylesheet my_camerastyle.css



Wenn du es ganz schick möchtest, beschäftigst du dich mit "Lightbox 2". Da wird das Bild dann sehr exclusiv dargestellt. Ist aber im Fall von Überwachungstechnik nicht sinnvoll und mehr ne überflüssige Spielerei um die Freunde zu beeindrucken. ;o)

Viel Spaß!

Frank

[Eisbaer79]

So, habe das Ganze etwas umgestrickt, weil ich auf die Zwischenspeicherung durch das IPCam Modul verzichten wollte. Es läuft bis jetzt:
Der letzte Snapshot wird auf meinem Hauptfloorplan in einem Bild dargestellt. Beim Klick auf das Bild werde ich in den Florrplan "Kameras" geworfen, dort sehe ich den Livestream. Klicke ich auf diesen, werde ich wieder in meinen Hauptfloorplan geworfen.

So weit, so gut. Nun muss es aber doch eine Möglichkeit geben, dass wenn FHEM bei der FS20KSE den ON Status erkennt, FHEM mich in den Floorplan "Kameras" wirft. Dabei ist zu bedenken, dass das System ja über den localhost direkt vom ausführenden Raspberry läuft. Ich meine, es ist ja auch ein "Web refresh" manuell möglich, der dafür sorgt das sich die Seite immer wieder selbst aufbaut. Da muss doch auch ein Befehl möglich sein, der FHEM dazu bringt die Seite mit dem entsprechenden Floorplan aufzurufen?!

HTML Seitenaufrufe über einen Schaltzustand sind ja generell möglich, jedoch funktioniert die Umsetzung des Beispiels aus der FHEM Wiki bei mir nicht, es passiert gar nichts.

Grüße,
René

[fiedel]

Hi René,

das geht auf jeden Fall, die Frage ist nur wie... ;o) Eine Möglichkeit wäre eine Browser- Fernsteuerung. Aber das ist wahrscheinlich mit Kanonen auf Spatzen geschossen. Warte mal ab, was die Webspezis noch dazu sagen.

Gruß

Frank

[Snorre]

Wenn du es trotzdem durchziehen willst, stehen die Ansätze ganz unten in meinen Beispielen. Die Beispiele funktionieren mit Javascript und das ging noch auf dem PC, aber nicht mehr auf dem Tablet (Andr. 4.0).

Hallo Frank,

wie hast du denn das Kamerabild auf ein Android Tablett bekommen?

Unter Java oder über den Flashplayer?

PC klappt soweit, allerdings hat mein Dolphinbrowser kein plugin wie beim Firefox PC mit VLC plugin, um KameraLive bilder darzustellen.

Grüße

[fiedel]

Hi Snorre,

das läuft im Moment bei mir noch nicht endgültig. Am PC geht es bei mir natürlich auch. Bisher hole ich bei jedem Event (Klingeln, Bewegungserkennung) ein Bild mit dem IPCAM- Modul und zeige es im Floorplan an. Ich würde dann auch nach einem Plugin suchen mit dem Livebild geht, oder ich würde versuchen herausuzfinden, wie die Android- App der Kamera das macht.
Nach dem "Winter"  sehe ich mir das an, da die Kamera noch ihren endgültigen Platz kriegen muss.

Ein Tipp noch: Die Kameras können meist mehrere Videoformate ausgeben. Wenn du den entspr. CGI- Befehl hast (meist auf Herstellerwebseite  zu finden), kann der Tablet- Browser vielleicht eines davon darstellen.

Gruß

Frank

[Snorre]

OK, Danke fü die Info!

Meine Videoausgänge sind nur das RTSP und das Quicktime Format. Für beides benötigt man meineserachtens ein Plugin.