Mit Tablet UI möchte ich das bei einem eingenden Telefonanruf sich ein Popup-Fenster öffnet, die Rufnummer anzeigt, und sich nach Beendigung des Anrufs wieder schliesst.
Code:
<li data-row="9" data-col="9" data-sizex="1" data-sizey="1">
<header>WARN-POPUP</header>
<div class="top-space">
<div data-type="popup" data-device="Telefon" data-get="event" data-get-on="ring" data-get-off="disconnect" data-height="240px" data-width="240px">
<div class="dialog">
<header>ANRUF</header>
<div data-type="label" data-device='Anrufliste' data-get="1-number" class="top-space-3x red big"></div>
</div>
</div>
</div>
</li>
Das Popup geht jedoch sofort auf, auch wenn kein Anruf kommt.
Was mache ich falsch ?
Gruß
Hab nochmal getestet:
Sobald ich bei data-get einen gültigen Wert angebe, macht das Popup auch ohne Event sofort auf und öffnet sich nach manuellem schliessen auch sofort wieder.
Schreibe ich hier was üngültiges rein, bleibt das Popup geschlossen. Hat dann aber natürlich keine Funktion.
Hat jemand eine Idee, woran das liegt ?
Danke und Gruß
Hallo Lichti,
da gibt es noch Optimierungsspielraum beim popup Widget.
Bis dahin musst du noch einen Starter angeben: (hier mal nur ein <div></div>)
<li data-row="9" data-col="9" data-sizex="1" data-sizey="1">
<header>WARN-POPUP</header>
<div class="top-space">
<div data-type="popup" data-device="dummy1" data-get="event" data-get-on="ring" data-height="240px" data-width="240px">
<div></div>
<div class="dialog">
<header>ANRUF</header>
<div data-type="label" data-device='Anrufliste' data-get="1-number" class="top-space-3x red big"></div>
</div>
</div>
</div>
</li>
Hintergrund: es wird ein $(this).children(":first") gesucht. Das ist aber im Fall ohne das explizite Starter-Element, das falsche.
Hallo setstate,
danke für die Info.
Muss ich noch ein dummy1-Device anlegen oder kann ich hier das Telefon-Device einsetzen ?
Und was muss ich bei dem Starter einsetzen ? Oder reicht das <div></div> ?
Jetzt öffnet das Popup zwar nicht mehr von allein, aber auch nicht beim Event.
Gruß
Lichti
Vielen Dank für den netten Denkanstoß:
<div class="top-space">
<div data-type="popup" data-device="Fritzboxanrufeliste" data-get="1-state" data-get-on="=> ((o))" data-height="300px" data-width="240px">
<div></div>
<div class="dialog">
<header>ANRUF</header>
<div class="red bold big top-space-2x">Neuer Anruf für <div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-internal" class="inline"></div></div>
<br />
<table width="100%" border="0">
<tr>
<td align="center">
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-number" class="inline"></div>
</td>
<td align="center">
<div data-type="label" data-device="Fritzboxanrufeliste" data-get="1-name" class="inline"></div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<div data-type="symbol" title="test" data-device="Fritzboxanrufeliste" data-get="1-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=> ((o))","<= ((o))","=> [=]","<= [=]","<= X"]' style="font-size: 160%; height: 50px;"></div>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="1-state" data-icons='["fa-sign-in","fa-sign-out","fa-sign-in","fa-sign-in","fa-sign-in","fa-sign-out","fa-sign-in","fa-sign-out","fa-sign-out"]' data-on-colors='["red","green","green","red","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=> ((o))","<= ((o))","=> [=]","<= [=]","<= X"]' style="font-size: 160%; height: 50px;"></div>
</td>
</tr>
</table>
<div data-type="link" class="round top-space-2x left-space-3x" data-width="130" data-height="50" data-color="white" data-background-color="red" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div>
</div>
</div>
</div>
Zitat von: Lichti am 27 Februar 2016, 11:04:06
Hallo setstate,
danke für die Info.
Muss ich noch ein dummy1-Device anlegen oder kann ich hier das Telefon-Device einsetzen ?
Und was muss ich bei dem Starter einsetzen ? Oder reicht das <div></div> ?
Jetzt öffnet das Popup zwar nicht mehr von allein, aber auch nicht beim Event.
Gruß
Lichti
Ich habe es geändert, jetzt sollte dein Code auch ohne extra div funktionieren. Nach Update ...
Habe einen fhem-Update gemacht und den (etwas angepassten) Code von accessburn genommen.
Funktioniert jetzt super !
Das <div></div> muss allerdings immer noch drin sein, sonst macht das Popup dauernd auf.
Hab ich nun auch eingebaut, hier meine stark abgespeckte Version auf Basis des Codes von Accessburn
<div class="top-space">
<div data-type="popup" data-device="Fritzboxanrufeliste" data-get="1-state" data-get-on="=> ((o))" data-height="300px" data-width="600px">
<div></div>
<div class="dialog">
<header></header>
<h1>Anruf von </h1>
<br>
<div data-type="label" class="big" data-device="Fritzboxanrufeliste" data-get="1-number" ></div>
<br>
<div data-type="label" class="big" data-device="Fritzboxanrufeliste" data-get="1-name"></div>
<div data-type="link" class="round top-space-2x left-space-3x" data-width="130" data-height="50" data-color="white" data-background-color="red" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div>
</div>
</div>
</div>
Gruss
Ralf
Aber, geht das bei euch nicht wirklich ohne <div></div> ???
Bei mir klappt das. Ich aktuellsten Code ergänze ich ein <div class="dialog-starter"></div> automatisch
dialog-starter steht für was?
Hab nochmal getestet:
Sobald ich im popup-Aufruf ein "data-get-off=" einbaue, muss dahinter ein <div></div> stehen.
Sonst geht's ohne.
Hallo zusammen,
ich habe es mit allen genannten Varianten probiert - bei mir funktioniert es leider nicht. Hat sich da etwas geändert ? :( Bei mir öffnet sich keinerlei Popup.
VG
Hallo,
ich habe es bei mir mit einen Notify und einen dummy gelöst.
kurze erklärung.
bei einen Anruf löst das notify aus, es setzt den dummy (telefon) auf on.
Das popup fenster öffnet sich weil ----> data-get-on="on"
Ist der anruf vorbei wird der dummy auf off gesetzt und das popup schliest sich
als erstes einen dummy erstellen:
define telefon dummy
attr telefon WebCmd on:off
und nun das notify:
define telefon_popup notify Callmon:.* {
my $event = ReadingsVal("Callmon","event","disconnect");;
if ($event eq "ring") {
fhem ("set telefon on");;
}
else {
fhem ("set telefon off");;
}
}
hier noch mein tabletUI code:
<div data-type="popup"
data-device="telefon"
data-get-on="on"
data-get-off="off"
data-height="100px"
data-width="600px">
<div class="dialog">
<header>Anrufer Info</header>
<div>
<div data-type="label" data-device="FritzBoxCallList" data-get="1-name"></div>
<div data-type="label" data-device="FritzBoxCallList" data-get="1-number"></div>
</div>
</div>
</div>
Ein herzerfrischendes "Moin Moin" vom "hintern Deich" vorweg!
Ich bin mir bewusst, dass ich mit meinem Anliegen nicht ganz richtig bin aber ich denke zumindest zu 80% ;)
Ich habe die Anleitung oben ausprobiert und sie funktioniert super!
Sobald ein bestimmtes Reading einen bestimmten Wert hat geht das popup auf und hinterher wieder zu.
Erstklassig - Danke! :)
Jetzt zu meinem Problem:
Das Popup soll einen Stream meiner Türsprechanlage darstellen.
Macht es im Grunde auch, allerdings lädt der Stream bereits beim Refresh der tablet Oberfläche los.
Das führt zu folgenden Problemen:
a) Die Daten für diesen Stream laufen die ganze Zeit im Hintergrund weiter, auch wenn das Popup sich im Hintergrund befindet.
b) Sollte der Stream kurzzeitig Kameraseitig unterbrochen werden, friert das Bild im Hintergrund bereits ein und man bekommt auf dem Popup nur das letzte Bild des Streams angezeigt.
Frage:
1) Habt Ihr eine Ahnung, wie ich den Stream einbinden kann, so dass er erst dann geladen wird, wenn das Popup in den Vordergrund gehoben wurde?
2) Wie kann man den Stream wieder unterbrechen, sollte das Popup wieder in den Hintergrund geschoben worden sein.
Danke für Eure Mühe!
Gruß
Sailor
ich habe das jetzt mal nach gebaut da ich etwas ähnliches in Betrieb habe nur ich muss jedes mal die Warnanzeige drücken.
Deshalb mal der Test mit dem Beispiel hier, aber ich stelle fest das erst nach dem aktualisieren F5 drücken das PopUp aufgeht :-\
<div class="top-space">
<div data-type="popup" data-device="Callmonitor" data-get="event" data-get-on="ring" data-height="260px" data-width="700px">
<!--div></div-->
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:crimson">=== Neuer Anruf ===</div>
</div>
</header>
<div class="cell">
<div class="hbox">
<div class="cell inline" style="font-size:20px; color:white" data-type="label" data-device="Anrufliste" data-get="1-number"></div>
<div class="cell inline" style="font-size:130%; color:white" data-type="label" data-device="Anrufliste" data-get="1-name"></div>
</div>
<div class="hbox">
<div class="cell compressed inline" style="font-size: 160%; height: 50px;" data-type="symbol" data-device="Anrufliste" data-get="1-state" data-icons='["fa-toggle-off","fa-phone","fa-phone","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone fa-blink","fa-phone"]' data-colors='["crimson","green","green","crimson","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=> ((o))","<= ((o))","=> [=]","<= [=]","<= X"]'></div>
<div class="cell compressed inline" style="font-size: 160%; height: 50px;" data-type="symbol" data-device="Anrufliste" data-get="1-state" data-icons='["fa-sign-in","fa-sign-out","fa-sign-in","fa-sign-in","fa-sign-in","fa-sign-out","fa-sign-in","fa-sign-out","fa-sign-out"]' data-colors='["crimson","green","green","crimson","yellow","yellow","green","green","white"]' data-get-on='["=> O_O","<=","=>","=> X","=> ((o))","<= ((o))","=> [=]","<= [=]","<= X"]'></div>
</div>
<div class="inline">
<div class="top-align round" data-type="link" data-width="130" data-height="50" data-color="white" data-background-color="crimson" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div>
</div>
</div>
</div>
</div>
</div>
@ Sailor
Nach welcher Anlkeitung "oben" hast du es gebaut?
Und wie sieht dein Code zum einbinden des Kamera-Streams denn aus?
Grüße aus Bayern
Hallo Mustermann
Zitat von: Mustermann am 26 Juni 2018, 18:30:21
Nach welcher Anlkeitung "oben" hast du es gebaut?
Und wie sieht dein Code zum einbinden des Kamera-Streams denn aus?
Nach der Anleitung von Accessburn.
Die Zeile zum einbinden des Streams lautet:
<img src = "http://192.168.178.15:9000/?action=stream" width="640" height="360" alt="Door Station Picture"></img>Wie gesagt, der Stream wird laufend angezeigt.
Leider unterbricht der DoorPi-RasPi den Strem bei Betätigung des Klingelknopfs, schießt ein Photo und startet den Stream wieder.
Dadurch muss ich jedesmal den Browsr refreshen (F5) um wieder einen Stream sehen zu können.
Das muss doch auch anders gehen... >:(
Gruss
Sailor
Moin zusammen
ich bin ein bisschen weiter...
Folgernder Code erlaubt mir das Popup mit dem Stream zu laden und zunächst zu pausieren.
Das Popup mit dem Stream wartet im Hintergrund pausiert und verursacht keinen Datentraffic.
So weit so gut
Man klingelt an der Tür und das Popup geht auf...
Jetzt die alles entscheidende Fragen:
a) Wie kann ich in dem Code das "paused" von true auf false setzen, sobald das Popup in den Vordergrund geschoben wurde...
b) Wie kann ich in dem Code das "paused" von false auf true setzen, sobald das Popup in den Hintergrund geschoben wurde...
Siehe im Code unten folgende Zeile :
var paused = true; // Do not start stream immediately to avoid having data streamed to the background popup
index.html<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Sailors Home</title>
</head>
<body style="overflow:hidden;" onload="createImageLayer();">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6">
<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>
</li>
<li data-row="1" data-col="2" data-sizex="9" data-sizey="6">
<div class="page" id="content_home"></div>
</li>
<div class="top-space">
<div data-type = "popup"
data-device = "OS_DoorStation"
data-get = "call"
data-get-on = "started"
data-get-off = "ended"
data-height = "800px"
data-width = "1400px">
<div >
</div>
<div class="dialog">
<header>ANRUF</header>
<div class = "red bold big top-space-2x">
Da ist Jemand an der Pforte!
</div>
<script type="text/javascript">
/* Copyright (C) 2007 Richard Atterer, richard©atterer.net
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License, version 2. See the file
COPYING for details. */
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 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 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>
</ul>
</div>
</body>
</html>
Danke für eure Hilfe!
Gruss
Sailor
Zitat von: Sailor am 26 Juni 2018, 08:00:47
Frage:
1) Habt Ihr eine Ahnung, wie ich den Stream einbinden kann, so dass er erst dann geladen wird, wenn das Popup in den Vordergrund gehoben wurde?
2) Wie kann man den Stream wieder unterbrechen, sollte das Popup wieder in den Hintergrund geschoben worden sein.
Ich finde zwar in meinem ganzen Versions-Wirrwarr den von mir damals verwendeten Code gerade nicht, aber aus der Erinnerung kurz:
Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State:
1. Das Popup geht auf
2. Erst jetzt wird der Image-Link zum Kamera-Stream gesetzt
<div data-type="popup" data-device="KameraURL" data-get="STATE" data-get-on="http://192.168.178.15:9000/?action=stream" data-get-off="0" data-height="600" data-width="730" data-mode="fade" class="interlock">
<div class="dialog">
<div data-type="image" data-device="KameraURL" data-width="729 data-height="609"></div></div></div>Nach x Sekunden wird der Dummy dann wieder auf "0" gesetzt (in FHEM). Damit wird der Stream unterbrochen (die URL "0" führt ja nirgendwo hin) und gleichzeitig das Pop-Up wieder geschlossen.
Tuerklingel:trigger:.* set KameraURL http://192.168.178.15:9000/?action=stream ; defmod reset_KameraURL at +00:01:00 set KameraURL 0
Soweit die damalige Praxis. Ich hab das Thema nur verwerfen müssen, weil meine Kamera eine Authentifizierung a la http://user:password@IP benötigt, und diese seit einiger Zeit von keinem Browser mehr unterstützt wird. Das "Mein-Stream-läuft-dauernd-Problem" hatte meine Version aber glaub ich erledigt. Is aber schon ein bissl her, drum keine Gewähr...
Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.
Hi Tomster
Zitat von: tomster am 27 Juni 2018, 14:00:45
Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State:
Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.
Das sieht richtig gut aus!!!
Ich werde berichten!
Gruß
Sailor
Zitat von: tomster am 27 Juni 2018, 14:00:45
Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State: [,,,]
Soweit die damalige Praxis. Ich hab das Thema nur verwerfen müssen, weil meine Kamera eine Authentifizierung a la http://user:password@IP benötigt, und diese seit einiger Zeit von keinem Browser mehr unterstützt wird. Das "Mein-Stream-läuft-dauernd-Problem" hatte meine Version aber glaub ich erledigt. Is aber schon ein bissl her, drum keine Gewähr...
Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.
Mit Instar-Kameras klappt die Einbindung in FTUI; zumindest dieses Problem habe ich nicht.
Die Idee zum Ein- und Ausschalten des Videostreams habe ich in folgender Testumgebung (ohne Popup) bei mir nachgebaut:
<div data-type="switch" data-device="Videoadresse" data-get-on="http://192.168.178.52:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=xxx&-pwd=yyy" data-get-off="Null" data-set-on="http://192.168.178.52:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=xxx&-pwd=yyy" data-set-off="Null"></div>
<div data-type="image" data-device="Videoadresse" data-get="STATE" data-size= "92%" class="nocache"></div>defmod Videoadresse dummy
attr Videoadresse event-on-change-reading 1Damit kann man den Videostream ein- und ausschalten. Die Wirkung auf den Netzwerktraffic ist beachtlich.
Leider gibt es noch ein kleines Problem: Die Änderung in
Videoadresse:STATE kommt erst (aber immerhin zuverlässig) beim nächsten
Full Refresh beim Image-Device an, d.h. die Umschaltung ist entsprechend verspätet. Das verstehe ich nicht, denn
event-on-change-reading ist aktiviert.
Auch
data-refresh="5" o.ä. ändert nichts. Im Wiki ist hierzu beim Image-Widget ohnehin vermerkt:
ZitatEs kann nur data-url + data-refresh oder data-device + data-get verwendet werden, nicht beides gleichzeitig
Nun hoffe ich auf eine einfache Lösung, denn bei
tomster hat es ja schon funktioniert. Wie also bringe ich das Image-Device dazu, sofort auf die Änderung des readings zu reagieren?
Hi Tomster
Zitat von: Sailor am 28 Juni 2018, 12:35:48
Hi Tomster
Das sieht richtig gut aus!!!
Ich werde berichten!
Gruß
Sailor
Sorry, dass ich mich bis jetzt nicht gemneldet habe.
Dein Ansatz hat leider nicht funktioniert, da die URL nicht von dem "<div><img..." übernommen wird.
Gruss
Sailor