{"id":948,"date":"2017-06-29T20:27:36","date_gmt":"2017-06-29T19:27:36","guid":{"rendered":"http:\/\/ipsview.brownson.at\/?p=948"},"modified":"2017-06-29T21:19:50","modified_gmt":"2017-06-29T20:19:50","slug":"touchscreen-kamera-popup","status":"publish","type":"post","link":"https:\/\/ipsview.brownson.at\/?p=948","title":{"rendered":"Touchscreen &#8211; Kamera Popup"},"content":{"rendered":"<p>N\u00e4chstes wichtiges Feature bei der Migration meines Touchscreens ist das automatische Einblenden des Kamera Streams sobald die T\u00fcrklingel bet\u00e4tigt wurde.<\/p>\n<p>Im WebFront, das bis dato auf meinem Touchscreen gelaufen ist, wurde automatisch auf die Kamera Seite umgeschaltet, sobald die T\u00fcrklingel bet\u00e4tigt wurde. F\u00fcr mein neues Android Touch habe ich mich hier f\u00fcr eine L\u00f6sung mit einem Popup entschieden, da dadurch die aktuell gew\u00e4hlte Seite aktiv bleibt.<\/p>\n<h2>Schritt 1 &#8211; Popup erstellen<\/h2>\n<p>Im ersten Schritt wird das eigentliche Popup zur Anzeige des Kamera Streams erstellt:<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreatePopup.png\"><img decoding=\"async\" class=\"alignnone wp-image-952 size-medium\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreatePopup-222x300.png\" alt=\"Touchscreen_Kamera_CreatePopup\" width=\"222\" height=\"300\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreatePopup-148x200.png 148w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreatePopup-222x300.png 222w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreatePopup.png 455w\" sizes=\"(max-width: 222px) 100vw, 222px\" \/><\/a><\/p>\n<p>Neues Popup erstellen und danach auf &#8222;Popup_KameraEingang&#8220; umbenennen.<\/p>\n<p>Danach die ben\u00f6tigten Steuerelemente im Popup platzieren &#8211; Label f\u00fcr \u00dcberschrift, Linie zur optischen Trennung und noch das Stream Steuerelement.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Page.png\"><img decoding=\"async\" class=\"alignnone wp-image-956\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Page.png\" alt=\"Touchscreen_Kamera_Page\" width=\"500\" height=\"404\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Page-200x161.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Page-300x242.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Page.png 679w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>Schritt 2 &#8211; Detailbutton f\u00fcr Popup<\/h2>\n<p>Im n\u00e4chsten Schritt wird auf der Header Seite ein DetailButton zum Aufruf des Popup platziert.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1.png\"><img decoding=\"async\" class=\"alignnone size-large wp-image-954\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1-1024x81.png\" alt=\"Touchscreen_Kamera_Designer1\" width=\"500\" height=\"40\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1-200x16.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1-300x24.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1-768x61.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1-1024x81.png 1024w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Designer1.png 1040w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>und als Popupseite\u00a0&#8222;Popup_KameraEingang&#8220; spezifiziert:<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_DetailImage.png\"><img decoding=\"async\" class=\"alignnone wp-image-955 size-full\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_DetailImage.png\" alt=\"Touchscreen_Kamera_DetailImage\" width=\"519\" height=\"374\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_DetailImage-200x144.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_DetailImage-300x216.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_DetailImage.png 519w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><\/a><\/p>\n<p>Nach dem Speichern der View, kann die Seite bereits manuell am Client aufgerufen werden:<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1.png\"><img decoding=\"async\" class=\"alignnone size-large wp-image-949\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1-1024x640.png\" alt=\"Touchscreen_Kamera_Client1\" width=\"500\" height=\"313\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1-200x125.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1-300x188.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1-768x480.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1-1024x640.png 1024w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_Client1.png 1200w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>Schritt 3 &#8211; Remote Steuerung Popup<\/h2>\n<p>Nun erfolgt die Einrichtung der Remotesteuerung f\u00fcr die Popups in der View, diese ist Voraussetzung, um vom IP-Symcon Server ein Popup am Client einzublenden.<\/p>\n<p>Dazu wird als erstes eine String Variable in IP-Symcon angelegt:<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable.png\"><img decoding=\"async\" class=\"alignnone wp-image-958\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable.png\" alt=\"Touchscreen_Kamera_RemoteVariable\" width=\"500\" height=\"32\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable-200x13.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable-300x19.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable-768x49.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemoteVariable.png 873w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>und diese dann in der View als Remote Variable f\u00fcr Popups registriert.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemotePopup.png\"><img decoding=\"async\" class=\"alignnone wp-image-957\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemotePopup.png\" alt=\"Touchscreen_Kamera_RemotePopup\" width=\"500\" height=\"464\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemotePopup-200x186.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemotePopup-300x279.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_RemotePopup.png 643w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>Schritt 4 &#8211; Workflow<\/h2>\n<p>Letzter Schritt ist nun das Erstellen eines Workflows, um bei einer Bet\u00e4tigung der T\u00fcrklingel das Popup zu aktivieren.<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow.png\"><img decoding=\"async\" class=\"alignnone wp-image-953\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow.png\" alt=\"Touchscreen_Kamera_CreateWorkflow\" width=\"500\" height=\"248\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow-200x99.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow-300x149.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow-768x381.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_CreateWorkflow.png 949w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Im Workflow werden die Instanz Variablen, die bei Bet\u00e4tigung der T\u00fcrklingel aktualisiert werden, mit einem Modul &#8222;Bei Aktualisierung&#8220; verbunden. Mit einem &#8222;Bedingter Wert&#8220; Modul wird der Name des Popups in die Remote Variable geschrieben.<\/p>\n<p>Der Timer im unteren Bereich des Workflows sorgt daf\u00fcr, dass das Popup nach 60 Sekunden automatisch auch wieder ausgeblendet wird (im Screenshot ist der Timer f\u00fcr das einfachere Testen noch auf 10 Sekunden eingestellt).<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit.png\"><img decoding=\"async\" class=\"alignnone wp-image-961\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit-1024x407.png\" alt=\"Touchscreen_Kamera_WorkflowEdit\" width=\"670\" height=\"266\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit-200x79.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit-300x119.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit-768x305.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit-1024x407.png 1024w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowEdit.png 1085w\" sizes=\"(max-width: 670px) 100vw, 670px\" \/><\/a><\/p>\n<p>Bei Bet\u00e4tigung der T\u00fcrklingel sieht das im Livebetrieb dann zum Beispiel so aus:<\/p>\n<p><a href=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1.png\"><img decoding=\"async\" class=\"alignnone wp-image-962\" src=\"http:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1-1024x444.png\" alt=\"Touchscreen_Kamera_WorkflowRun1\" width=\"670\" height=\"290\" srcset=\"https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1-200x87.png 200w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1-300x130.png 300w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1-768x333.png 768w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1-1024x444.png 1024w, https:\/\/ipsview.brownson.at\/wp-content\/uploads\/Touchscreen_Kamera_WorkflowRun1.png 1112w\" sizes=\"(max-width: 670px) 100vw, 670px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4chstes wichtiges Feature bei der Migration meines Touchscreens ist das  [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[61,41,45,4,66],"class_list":["post-948","post","type-post","status-publish","format-standard","hentry","category-howto","tag-ipsview","tag-kamera","tag-popup","tag-view","tag-workflow"],"_links":{"self":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=948"}],"version-history":[{"count":3,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/948\/revisions"}],"predecessor-version":[{"id":1807,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/948\/revisions\/1807"}],"wp:attachment":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}