IP Camera Integration - Wie schaltet man den Stream wieder aus?

[Sailor]

Ein herzerfrischendes "moin Moin" vom "hintern Deich" vorweg

Ich habe auf meinem ftui bereits erfolgreich meine IP Camera eingebettet:

Code Auswählen Erweitern


<header>Front Door</header>
<div class="inline cell">
<div data-type = "image"
data-refresh = "900"
data-width = "1280"
data-height = "720"
data-url = "http://192.168.178.15:9000/?action=stream"
class = "centered top-space">
</div>
</div>


Das Problem ist nur, dass der Stream im Hintergrund aufrecht erhalten wird und jede Menge Traffic verursacht.
Selbst wenn man sich die IP - Kamera gerade nicht anschaut, weil man sich gerade in einem anderen Menü befindet.

Erst wenn ich den Browser-Tab wechsele, dann wird der Stream unterbrochen.
Gehe ich auf den Browser-Tab mit dem ftui zurück, ist wird der Stream sofort wieder aufgebaut.

Gibt es ein Trick den Stream zu unterbrechen, sobald man das <div data-type= "image"> nicht mehr im Vordergrund hat?

Danke für jeden Hinweis!

Gruss
   Sailor

[fiedel]

Moin zurück! 

Du könntest das gleiche Fenster noch einmal programmieren nur mit "action=image", also quasi einen Snapshot.
Dann machst du beides toggelbar - am besten per touch auf das jeweilig aktive Fenster.

Gruß vom Festland... 

[Sailor]

Hi setstate

Darf ich ein Widget auf die Wunschliste setzen?

"FTUI Widget Stream"

Eine Erweiterung des "FTUI Widget Image", nur mit den zusätzlichen Attributen
data-Stream-get: Name des Readings, welches den Stream steuert. Default: Stream aktiviert
data-Stream-on: Wert, welches den Stream aktiviert Default: "1"
data-Stream-off: Wert, welches den Stream deaktiviert indem es mittels action=image das letzte Bild einfriert. Default: "0"

Folgender Code wäre vielleicht hilfreich um den Stream zu de-/aktivieren.

Code Auswählen Erweitern


<script type="text/javascript">

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = true; // Do not start stream immediately to avoid having data streamed to the background popup


function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
if ((zindex > highest) && (zindex != 'auto'))
{
  highest = zindex;
}
  }
  return highest;
}


setInterval( checkPageFocus, 200 );

function checkPageFocus() {
var info = document.getElementById("webcam");

if ( document.hasFocus() ) {
  paused = false;
  createImageLayer();
}
else {
  paused = true;
}
}

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "http://192.168.178.15:9000/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
var del = finished.shift(); // Delete old image(s) from document
del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause/restart the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>

<div id="webcam"><noscript><img src="http://192.168.178.15:9000/?action=snapshot" /></noscript></div>



Ich weiß, Ich weiß man sollte hier im Forum keine Ansprüche stellen, aber es ist doch bald Weihnachten... 

Gruß
   Sailor

[tomster]

Servus Sailor,

hat mein Vorschlag bei Dir nicht funktioniert?
https://forum.fhem.de/index.php/topic,49873.msg814769.html#msg814769

Ist vom Ansatz ja eigentlich genau das Gleiche wie Dein Request, oder?

[Sailor]

Hi tomster

Servus Sailor,

hat mein Vorschlag bei Dir nicht funktioniert?
https://forum.fhem.de/index.php/topic,49873.msg814769.html#msg814769

Ist vom Ansatz ja eigentlich genau das Gleiche wie Dein Request, oder?

Sorry, dass ich mich nicht gemeldet habe.
Habe jetzt erst geantwortet: Leider nein. Die URL wird nicht übernommen...

Und selbst deine Variante löst nicht das Problem, dass der Stream aufrecht erhalten wird, sobald man das Menü verlässt.
Sonst müsste man aus jedem Menü heraus einen Dummy für jeden Stream ansteuern... Ein Overkill.

Gibt es in JAVASCRIPT keine Eigenschaft "is on top layer"?

Damit könnte man den Stream unterbrechen oder wieder aufnehmen.

Gruss
    Sailor

[setstate]

Hi setstate

Darf ich ein Widget auf die Wunschliste setzen?

"FTUI Widget Stream"

Eine Erweiterung des "FTUI Widget Image", nur mit den zusätzlichen Attributen
data-Stream-get: Name des Readings, welches den Stream steuert. Default: Stream aktiviert
data-Stream-on: Wert, welches den Stream aktiviert Default: "1"
data-Stream-off: Wert, welches den Stream deaktiviert indem es mittels action=image das letzte Bild einfriert. Default: "0"

Könnte man mal angehen. Leider habe ich kein entsprechendes Gerät zum Testen. Gibt es im Netz ein Test-Stream mit ?action=snapshot bzw. ?action=stream ??

[Sailor]

Hi setstate

Könnte man mal angehen. Leider habe ich kein entsprechendes Gerät zum Testen. Gibt es im Netz ein Test-Stream mit ?action=snapshot bzw. ?action=stream ??

"?action=Snapshot":
Jede Menge: https://www.insecam.org/en/bycountry/US/?page=1

Mein Favorit: Die Zubereitungs-Cam in irgendsoeinem Imbiss in Plano, Texas United States:
http://97.105.170.43:60001/cgi-bin/snapshot.cgi?chn=0&u=admin&p=&q=0&1537898588

Bei snapshot muss mann aber ständig neue Bilder laden indem man ständig die URL ändert.
In dem obigen Beispiel wird die Zahl "1537898588" ständig geändert.

Ansonsten: Hats Du einen RasPi mit Kamera zu Hause rumfliegen?

Gruss
    Sailor

[Sailor]

Ein herzerfrischendes "Moin-Moin" vorweg

Ich habe da ein seltsames Problem für das ich irgendwie keine Erklärung habe:

Ich habe eine index.html mit folgendem Inhalt:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
*/
-->

<!-- Basic Stylesheet with Darkblue AddOn -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />

<!-- Different Stylesheet depending on daylight conditions calculated by the twilight module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="6" data-get-off="!6" />

<script src="js/fhem-tablet-ui.js" defer></script>

<title>The Deeke Home</title>
</head>

<meta http-equiv="Cache-Control" content = "no-cache, no-store, must-revalidate" />
<meta name = "longpoll_type" content = "websocket" />
<meta name = "GoogleMapsApiKey" content = "AIzaSyAqjYRFJUa7Kc_VUsyDOXj_Ny5gnQQEotQ" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta name = "gridster_disable" content = "1"  />
    <meta name = "gridster_cols" content = "10" />
<meta name = "gridster_rows" content = "6"  />
<meta name = "widget_margin" content = "5"  />


<!-- <div data-type="reload"
data-device="UI_ReloadFtui"
data-get-on="1"
data-set-off="0">
</div> -->


<body style="overflow:hidden;" onload="createImageLayer();" >
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" class="semitransparent">
<div class="">
<div data-type = "pagebutton"
data-url = "#page_content_home.html"
data-load = "#content_home"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = "(.*/||.*index.html||.*#page_content_home.html)"
data-icon = "fa-home"
class = "default top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_gf.html"
data-load = "#content_gf"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_gf.html"
data-icon = "oa-control_building_modern_s_okg_eg"
class = "prefetch top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_uf.html"
data-load = "#content_uf"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_uf.html"
data-icon = "oa-control_building_modern_s_okg_og"
class = "prefetch top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_os.html"
data-load = "#content_os"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_os.html"
data-icon = "oa-control_building_outside"
class = "prefetch top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_weather.html"
data-load = "#content_weather"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_weather.html"
data-icon = "wi wi-day-thunderstorm"
class = "top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_cctv.html"
data-load = "#content_cctv"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_cctv.html"
data-icon = "oa-it_camera"
class = "top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_system.html"
data-load = "#content_system"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_system.html"
data-icon = "fs-system_fhem"
class = "top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_battery.html"
data-load = "#content_battery"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_battery.html"
data-icon = "fa-battery-half"
class = "top-space">
</div>

<!-- === START ========== Activation / Deactivation Alarm system =============== START === -->
<div data-type="popup_delay"
data-draggable="false"
data-device="BA_Alarm"
data-get-on="on"
data-get-off="off"
data-height="500px"
data-width="320px"
class="center interlock">

<div data-type="symbol"
data-device="BA_Alarm"
data-states='["on","off"]'
data-icon="oa-secur_alarm"
data-colors='["#ad3333","#4C5D71"]'
data-background-icon=""
class="big">
</div>
<div class="dialog">
<header>Enter Pin</header>
<div data-type="pinpad"
data-device="BA_Alarm"
data-get="STATE"
data-get-pin="pin"
data-text-locked="Alarm system: Keen"
data-text-unlocked="Alarm system: Out of focus"
data-locked-time="10"
data-tries="3"
class="center">
</div>
</div>
</div>
<!-- === END ============ Activation / Deactivation Alarm system ================ END  === -->
</div>
</li>

<!-- === START ========== Popup for DoorPi system ================================== START === -->
<div class="top-space" >
<div data-type = "popup"
   data-device = "OS_DoorStation"
   data-get = "call"
   data-get-on = "started"
   data-get-off = "!started"
   data-height = "800px"
   data-width = "1400px">
  <div >
  </div>
 
  <div class="dialog" id="DoorPiCom">
<header>ANRUF</header>
<div class = "red bold big top-space-2x">
Da ist Jemand an der Pforte!
</div>

<script type="text/javascript">

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = true; // Do not start stream immediately to avoid having data streamed to the background popup


function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
if ((zindex > highest) && (zindex != 'auto'))
{
  highest = zindex;
}
  }
  return highest;
}


setInterval( checkPageFocus, 200 );

function checkPageFocus() {
var info = document.getElementById("webcam");

if ( document.hasFocus() ) {
  paused = false;
  createImageLayer();
}
else {
  paused = true;
}
}

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "http://192.168.178.15:9000/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
var del = finished.shift(); // Delete old image(s) from document
del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause/restart the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>

<div id="webcam"><noscript><img src="http://192.168.178.15:9000/?action=snapshot" /></noscript></div>

<br>
<div data-type = "link"
data-width = "130"
data-height = "50"
data-color = "white"
data-background-color = "red"
data-icon = "fa-check"
class = "round top-space-2x left-space-3x"
onclick = "$('.dialog-close').trigger('click');">
OK
</div>
  </div>
</div>
</div>
<!-- === END =========== Popup for DoorPi system =================================== END === -->


<li data-row="1" data-col="2" data-sizex="9" data-sizey="6">
<div class="page" id="content_home"></div>
<div class="page" id="content_gf"></div>
<div class="page" id="content_uf"></div>
<div class="page" id="content_os"></div>
<div class="page" id="content_weather"></div>
<div class="page" id="content_cctv"></div>
<div class="page" id="content_system"></div>
<div class="page" id="content_battery"></div>
</li>
</ul>
</div>
</body>
</html>


Ab der Kommentarzeile "<!-- === START ==== Popup for DoorPi system ==== START === -->" habe ich ein Popup implementiert, welches mir die DoorPi Kamera am RasPi darstellt.

Das funktioniert!

Wenn ich aber diesen Inhalt in die "page_content_cctv.html" in die Box "Texas" verschiebe (nicht kopiere) inklusive dem "<body onload="createImageLayer();" > " - Eintrag

Code Auswählen Erweitern


<html>
<title>FHEM</title>
<head>
<!--
/* FHEM tablet ui */
/*
* cctv
* -->

</head>

<body>
<div class="page" id="content_cctv">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2" class="semitransparent">
<header>Front Door</header>
<div data-type="popup" data-width="1350px" data-height="790px" class="inline">
<div class="center">

<div data-type = "image"
data-refresh = "900"
data-width = "512"
data-height = "288"

data-url = "http://192.168.178.15:9000/?action=stream"
class = "centered top-space">
</div>
</div>

<div class="dialog">
<header>Front Door</header>
<div class="inline cell">
<div data-type = "image"
data-refresh = "900"
data-width = "1280"
data-height = "720"
data-url = "http://192.168.178.15:9000/?action=stream"
class = "centered top-space">
</div>
</div>
</div>
</div>
</li>

<li data-row="3" data-col="1" data-sizex="3" data-sizey="2" class="semitransparent">
<header>Texas</header>
</li>
</ul>
</div>
</div>
</body>
</html>


dann funktioniert es nicht.

Ich kenne mich in der html/css/jss - Programmierung nicht aus, daher kann es sein, dass ich einen Kardinalsfehler mache.
Gibt es bestimmte Positionen für JavaScript Codlets?

Oder was läuft da schief?

Danke

Gruss
    Sailor

[Jojo11]

Gibt es ein Trick den Stream zu unterbrechen, sobald man das <div data-type= "image"> nicht mehr im Vordergrund hat?

Danke für jeden Hinweis!

Gruss
   Sailor

Hallo,

ich habe das so gelöst:

Code Auswählen Erweitern


<div data-type="image" data-device="CAM01_stream_link" data-get="state" data-size="100%" data-opacity="1"></div>


CAM01_stream_link ist ein Dummy, der den Link enthält. Wenn der Stream unterbrochen werden soll, setze ich den Wert des Dummys auf "". Funktioniert bestens.

schöne Grüße
Jo

[Sailor]

Hallo jojo

ich habe das so gelöst:

Code Auswählen Erweitern


<div data-type="image" data-device="CAM01_stream_link" data-get="state" data-size="100%" data-opacity="1"></div>


CAM01_stream_link ist ein Dummy, der den Link enthält. Wenn der Stream unterbrochen werden soll, setze ich den Wert des Dummys auf "". Funktioniert bestens.

Danke für den Hinweis

Das klappt bei mir auch!

Dennoch eine Frage:
a) [Gelöscht. War ein Tippfehler meinerseits. Klappt ganz normal]
b) Wie bekomme ich den dummy umgeschaltet, wenn ich die Unterseite wechsele?

Gruss
    Sailor

[Jojo11]

Hallo,

ich setze das per notify.
Bei der zweiten Frage muss ich passen. Ich schaue die streams nur im popup an und schalte sie manuell.

Schöne Grüße
Jo

[Sailor]

Hi Jo

Bei der zweiten Frage muss ich passen. Ich schaue die streams nur im popup an und schalte sie manuell.

Ja, der Pagebutton erlaubt leider kein "data-fhem-cmd-enable" bzw. "data-fhem-cmd-disable"

Gruss
   Sailor

[Sailor]

Ein herzerfrischendes MoinMoin zusammen!

Problem geloest!!!

Ich bin wie folgt vorgegangen

1. Dummy für die Anzeige der aktiven Unter-Seite des ftui anlegen:

Code Auswählen Erweitern


Internals:
   NAME       UI_ActivePage
   NR         3361
   STATE      home
   TYPE       dummy
   Helper:
     DBLOG:
       state:
         myDbLog:
           TIME       1538302537.57736
           VALUE      home
   READINGS:
     2018-09-30 12:15:37   state           home
Attributes:
   event-on-change-reading .*
   event-on-update-reading .*
   room       FTUI


2. Dummy für jede Kamera - URL anlegen, die im ftui verwendet wird.
   Achtung! Alle Dummies müssen mit "UI_Url_" anfangen und im Attribut "setList" dürfen nur und müssen die gültige URL und die Zeichenfolge "off" auftauchen.

Code Auswählen Erweitern


Internals:
   NAME       UI_Url_FrontDoor
   NR         3360
   STATE      off
   TYPE       dummy
   Helper:
     DBLOG:
       state:
         myDbLog:
           TIME       1538302537.56602
           VALUE      off
   READINGS:
     2018-09-30 12:15:37   state           off
Attributes:
   event-on-change-reading .*
   event-on-update-reading .*
   readingList state
   room       FTUI
   setList    state:http://192.168.178.15:9000/?action=stream,off
   webCmd     state


3. In der ftui "index.html" muss bei jedem Pagebutton der Befehl " onclick = "ftui.setFhemStatus('setreading UI_ActivePage state <page>');" " stehen
   Dieser übermittelt dann den Status der Seite an den ersten Dummy

Code Auswählen Erweitern


<div data-type = "pagebutton"
data-url = "#page_content_home.html"
data-load = "#content_home"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = "(.*/||.*index.html||.*#page_content_home.html)"
data-icon = "fa-home"
onclick = "ftui.setFhemStatus('setreading UI_ActivePage state home');"
class = "default top-space">
</div>


4. Auf diesen Dummy setzen wir ein notify wie folgt:

Code Auswählen Erweitern


Internals:
   DEF        UI_ActivePage.* {

Log 5, $NAME . ": Deactivate all temporary settings for previous page";
fhem "setreading UI_Url_.* state off";

if($EVENT eq "home") {
Log 5, $NAME . ": Active ftui page: home";
}
elsif($EVENT eq "gf") {
Log 5, $NAME . ": Active ftui page: gf";
}
elsif($EVENT eq "uf") {
Log 5, $NAME . ": Active ftui page: uf";
}
elsif($EVENT eq "os") {
Log 5, $NAME . "Active ftui page: os";
}
elsif($EVENT eq "weather") {
Log 5, $NAME . ": Active ftui page: weather";
}
elsif($EVENT eq "cctv") {
Log 5, $NAME . ": Active ftui page: cctv";

my @UI_AllUrls = defInfo("NAME=UI_Url_.*","NAME");
Log 5, $NAME . ": Count of Urls:" . @UI_AllUrls;

foreach my $ActiveUrl (@UI_AllUrls) {
Log 5, $NAME . ": Working on Url: " . $ActiveUrl;
my $DeviceSetList = AttrVal($ActiveUrl,"setList","");
$DeviceSetList =~ s/state://;
my @ToggleList = split /,/, $DeviceSetList;
if ($ToggleList[0] eq "off"){
fhem "setreading " . $ActiveUrl . " state " . $ToggleList[1];
}
elsif ($ToggleList[1] eq "off"){
fhem "setreading " . $ActiveUrl . " state " . $ToggleList[0];
}
else {
fhem "setreading " . $ActiveUrl . " state off";
}
}
}
elsif($EVENT eq "system") {
Log 5, $NAME . ": Active ftui page: system";
}
elsif($EVENT eq "battery") {
Log 5, $NAME . ": Active ftui page: battery";
}
else
{
Log 3, $NAME . ": Active ftui page - Unknown menue detected!";
}
}
   NAME       UI_ActivePageChange
   NOTIFYDEV  UI_ActivePage.*
   NR         3362
   NTFY_ORDER 50-UI_ActivePageChange
   REGEXP     UI_ActivePage.*
   STATE      2018-09-30 19:59:39
   TRIGGERTIME 1538330379.19121
   TYPE       notify
   READINGS:
     2018-09-30 19:58:39   state           active
Attributes:
   room       FTUI


Dieser übernimmt generell die Aktivierung aller möglichen Dinge, die nur aktiv sein sollen, wenn die entsprechende Seite aktiviert ist und übernimmt dessen Deaktivierung sobald eine andere Seite angewählt wurde.

Dieser notify ist universell geschrieben. Das bedeutet, wenn man die URL in dem Dummy bzw. in der setList des "UI_URL_"-Dummy's ändert, braucht man das notify nicht zu ändern. Weiterhin erkennt es automatisch ob ein neuer "UI_URL_"-Dummy hinzugefügt oder gelöscht wurde und handelt entsprechend.

Bekanntes Problem:
Sollte die URL auch auf einer anderen Unterseite verwendet werden (In diesem Beispiel eine andere Seite als "cctv") wird sie trotzdem wieder daktiviert, da ich zur Zeit noch ein pauschales verwende.

Daran muss ich noch arbeiten...

Problem gelöst: Erst wird alles gelöscht und je nach Raum neu gesetzt.
Den Code oben habe ich geändert.

Gruss
    Sailor

[Ulm32b]

Problem geloest!!!

o.k. Jetzt habe ich es auch verstanden. Bei mir funktioniert es allerdings noch nicht richtig. Der in pagebutton eingebaute Befehl an FHEM (Setze das Device Eingang_Video_ein_aus auf den Status "on")

Code Auswählen Erweitern

onclick="ftui.setFhemStatus('setreading Eingang_Video_ein_aus state on')"
oder auch

Code Auswählen Erweitern

onclick="ftui.setFhemStatus('set Eingang_Video_ein_aus on')"
wird bei mir nicht ausgeführt. Ich sehe den Wald nicht. 

In diesem Zusammenhang möchte ich fragen, ob es nicht sogar einfacher ginge, wenn pagebutton selbst das device schaltet:

Code Auswählen Erweitern

...
data-device="Eingang_Video_ein_aus" data-set-off="off" data-set-on="on"

Wenn ich es richtig sehe, ist data-set in pagebutton derzeit nicht implementiert.
@setstate: Wäre so etwas möglich?

[Ulm32b]

Die Lösung

Code Auswählen Erweitern

onclick="ftui.setFhemStatus('setreading ...')" funktioniert leider nicht auf Touch-Devices, vgl. https://forum.fhem.de/index.php/topic,81996.msg740518.html#msg740518. 

Und damit bin ich wieder zurück auf Los. Um den Kamerastream beim Aufruf einer Pagebuttonseite ein- und beim Verlassen wieder auszuschalten, bräuchte ich entsprechende Events, die derzeit nicht im Werkzeugkasten liegen.

Ein Ansatz wäre die Erweiterung von Pagebutton um data-set.

Noch besser gefallen würde mir ein generelles, automatisches Abschalten des Videostreams bei nicht sichtbaren Elementen. Dies würde die Welt echt ein klein wenig besser machen, weil auch diejenigen profitieren, die das nicht im Fokus haben und sich über träge Netzwerke wundern.

Oder der ursprüngliche Vorschlag von Sailor (https://forum.fhem.de/index.php/topic,91345.msg839144.html#msg839144) wird aufgegriffen und ein "FTUI Widget Videostream" etabliert mit

• data-Stream-get
• data-Stream-on
• data-Stream-off