Countdown-Anzeige?

matt_matt · 20 Mai 2017, 00:08:02

Hallo.

Ich habe mir eine Fensterüberwachung eingerichtet, die abhängig von der Temperatur nach einer gewissen Zeit einen Warnton ausgibt, wenn ein Fenster zu lange offen ist. Ein Tablet auf dem Flur zeigt den Zustand der Fenster an. Meine Überlegung ist nun, schön wäre es, wenn man erkennen könnte, wie lange der Zeitraum ist, bis der Alarm losgeht. Es gibt ein Modul "Countdown", aber das bekomme ich nicht zum laufen, jedenfalls nicht so, wie ich das gerne hätte. Das zeigt die verbleibende Zeit an. Schöner wäre es als optische Anzeige, z.B Fortschrittbalken oder ein Kreis mit Fortschrittsanzeige (Progress Widget).
Wenn ein Fenster geöffnet wird, wird ein Timer erzeugt(define timer at +zeit set warnton), der wieder gelöscht wird, wenn das Fenster geschlossen wird.
Ich habe hier im Forum fleissig gesucht, aber leider keinen Lösungsansatzt gefunden. Wie würdet ihr das lösen?

Danke schonmal
Gruß matt_matt

amenomade · 20 Mai 2017, 02:39:46

Etwas in der Art? https://forum.fhem.de/index.php/topic,39090.0.html

matt_matt · 20 Mai 2017, 22:20:08

Hallo.

Nein, eigentlich dachte ich, es gibt eine einfache Lösung, die ich bei meiner Suche nicht gefunden habe. Bei der Fensterüberwachung gab es immer wieder Situationen, wo ich dachte, jetzt wird es kompliziert. Dabei waren die Lösungen immer relativ einfach. Gibt es sonst keinen Bedarf an einem optischen Countdown. Na macht nichts.
Das Beispiel wird mir bestimmt trotzdem weiterhelfen, es zeigt zumindest, wie man es machen könnte. Wenn der Timer definiert wird, gibt es ein Internal (NTM) oder State, was die Zeit anzeigt, wenn der Timer auslöst. Vieleicht könnte ich daraus was machen(falls meine Programmierkenntnisse dazu ausreichen).

Viele Grüße matt_matt

Shadow3561 · 21 Mai 2017, 08:32:09

Hallo,
Ich habe mal eben schnell etwas aus Vorlagen zusammengebastelt.

Du könntest es als Popup anzeigen lassen.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>Timer 1</title>
</head>
<body>
<div class="gridster">
<ul>
  <li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
    <header>Timer 1</header>

<script language="JavaScript"> 
<!--     

    function countdown(zahl){ 
        if(zahl>1){  
        // über 1 Sekunde hinaus -> x Sekunden 
        document.getElementById('downloading').innerHTML=zahl+" Sekunden"; 
        count(zahl);             
        } 
        else if(zahl==1){  
        // 1 Sekunde 
        document.getElementById('downloading').innerHTML=zahl+" Sekunde"; 
        count(zahl);             
        } 
        else {  
        // Countdown abgelaufen, beliebige Handlung kann eingebaut werden 
        document.getElementById('downloading').innerHTML="0 Sekunden"; 
        alert('Zeit ist abgelaufen!'); 
        } 
    } 
     
    function count(countzahl){ 
    // gewünschte Handlung kann hier eingebaut werden 
    countzahl=countzahl-1; 
        setTimeout("countdown("+countzahl+");",1000);             
    } 
	// Zeit in Sekunden hier ändern         
count(600); 

// --> 
</script> 

<b>Countdown: <span id="downloading">600 Sekunden</span>!</b>
</div>

</li>

</ul>
</div>
</body>
</html>

Alternativ dazu könntest du mal beim Ersteller des Knob-Widgets nachfragen ob er etwas wie einen Timer einbauen kann.

matt_matt · 21 Mai 2017, 23:31:57

Hallo Shadow3561

Danke für deine Mühe, aber an ein Popup habe ich nicht gedacht. Ich habe mir eine grafische Oberfläche zusammengebastelt, worauf man sofort erkennen kann, ob Fenster auf sind und wenn ja, welche. Zusätzlich ist jedem Fenster ein Switch zugeordnet, der das jeweilige Fenster aus der Überwachung rausnimmt(im Sommer mit offenen Fenster schlafen oder mal länger die Terassentür offen lassen). Da sollte die Countdown auch auf der der selben Ebene sichtbar sein.

Viele Grüße matt_matt

Shadow3561 · 22 Mai 2017, 19:57:59

Hast du es schon damit probiert?

https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/countdown

MfG

matt_matt · 22 Mai 2017, 22:00:48

Hallo.

Ja, habe ich. Es klappt bloß nicht so, wie ich es gerne hätte. Ein Problem ist z.B.: wird ein zweites Fenster geöffnet, wird der Timer neu gestartet. Das Widget bekommt es nicht mit. Werden alle Fenster geschlossen, wird der Timer gelöscht, das Widget bekommt es nicht mit.
Meine Vorstellung war ein animiertes Icon, dort wird die Zeit aber in Zahlen angezeigt. Könnte man aber mit Leben, falls es richtig laufen würde. Das größte Problem aber ist, das es auf meinem Tablet im Flur nicht angezeigt wird. Dort läuft WebVievControl. Starte ich dort einen anderen Browser wird es angezeigt. Hier am PC wird es auch angezeigt. Ich habe es darum nicht weiter verfolgt.

Viele Grüße matt_matt

ChrisK · 30 Mai 2017, 12:31:00

Hier hatte ich mal ein ähnliches Ziel: https://forum.fhem.de/index.php/topic,49916.msg416520.html#msg416520
Vielleicht hilft Dir die Lösung von setstate irgendwie weiter.

mani · 21 Juni 2017, 22:33:22

Hallo,

möchte wie #3 beschrieben den Countdown in einem popup anzeigen,
Nur wie müsste ich das einfügen? Wenn ich es direkt in die index.html lege läuft's aber wenn ich es ins popup lege wird nichts angezeigt....kann mir jemand auf die Sprünge helfen?

DANKE MfG Mani

DocCyber · 01 Juli 2017, 10:17:11

Zitat von: matt_matt am 20 Mai 2017, 00:08:02
Meine Überlegung ist nun, schön wäre es, wenn man erkennen könnte, wie lange der Zeitraum ist, bis der Alarm losgeht.
....
Schöner wäre es als optische Anzeige, z.B Fortschrittbalken ....
...
Wie würdet ihr das lösen?

Ich habe mir für mein Bewässerungssytem eine Lösung gebastelt, die vermutlich ziemlich genau das ist, was du brauchst.
1. Dummy "elapsed" definieren; für die verstrichene Zeit
2. Dummy "timeMax" definieren; gibt an, wie lange es bis zum Alarm dauern soll.
3. Timer (at) definieren, der periodisch im Sekundentakt den Zähler elapsed hoch- bzw runterzählt.
Der Timer ist zunächst auf inactive gesetzt.
4. notify definieren, das auf "Fenster" reagiert und den Timer (de-)aktiviert.
5. FTUI Level Widget im Frontend nutzen. Als Parameter wird timeMax und elapsed verwendet.

Bei Interesse kann ich dir gern mal einen Screenshot schicken, wie das bei mir aussieht. Weitere Details auf Anfrage.

matt_matt · 02 Juli 2017, 16:27:29

Zitat1. Dummy "elapsed" definieren; für die verstrichene Zeit
2. Dummy "timeMax" definieren; gibt an, wie lange es bis zum Alarm dauern soll.
3. Timer (at) definieren, der periodisch im Sekundentakt den Zähler elapsed hoch- bzw runterzählt.
Der Timer ist zunächst auf inactive gesetzt.
4. notify definieren, das auf "Fenster" reagiert und den Timer (de-)aktiviert.
5. FTUI Level Widget im Frontend nutzen. Als Parameter wird timeMax und elapsed verwendet.

Hallo,
das habe ich jetzt so umgesetzt. Es funktioniert auch soweit, aber ich bekomme es nicht hin, timeMax als Maximalwert einzusetzen.
Als Widget benutzte ich das Progress Widget, es sollte aber genauso funktionieren wie das Level Widget. In der Beschreibung für Data-max steht: "Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält".
Das dumme ist ja nur, ein Wert ist ein Dummy, der andere Wert ist ein anderer Dummy .

Code Auswählen

<div data-type="progress" 
			     data-device="elapsed"
			     data-max="timeMax"
			     data-progress-width="50"
			     data-set-on="ring"
			     data-get="STATE"
			     class="bigger">
			</div>

.

Ausschnitt aus der Index.html. Was mache ich falsch?

Viele Grüsse matt_matt.

DocCyber · 05 Juli 2017, 19:29:00

Vielleicht liegt es daran, dass mein voriger Post nicht völlig korrekt formuliert war. Sorry dafür.

Ich nutze einen Dummy (waterTime1) mit zwei zusätzlichen Readings.
Definition in FHEM:

Code Auswählen


define waterTime1 dummy
setreading waterTime1 spans 300   #Vorgegebene Laufzeit: 300 s
setreading waterTime1 elapsed 0    #aktuell abgelaufene Zeit

Code in HTML:

Code Auswählen


  <div data-type="level" 
    data-device="waterTime1>"
    data-get="elapsed"
    data-max="spans"
    class="horizontal left mini" >
  </div>

Ich arbeite lediglich mit 'level' statt 'progress'. Aber bei Progress sollte das auch funktionieren, vermute ich

Der Screenshot zeigt das Level-Widget in Aktion nach etwa 2 Drittel der Vorgabezeit.

Rudy · 11 Juli 2017, 21:13:45

Ich würde den Countdown auch gerne nachbauen. Könnt ihr mir bitte mal ein Beispiel für das at geben? Den Rest habe ich hoffentlich verstanden.

DocCyber · 12 Juli 2017, 15:47:29

Hallo Rudy,

man kann es z.B. so machen:

Code Auswählen


define wtime dummy
attr wtime room __Test
setreading wtime elapsed 0
setreading wtime total 30

define switch dummy
attr switch setList on off
attr switch room __Test

define n_set_timer_action notify switch { if ($EVENT eq "on") {fhem("set on_timer_action active")} else {fhem("set on_timer_action inactive");; fhem("setreading wtime elapsed 0")} }
attr n_set_timer_action room __Test

define on_timer_action at +*00:00:01 {my $e = ReadingsVal("wtime", "elapsed", 0);; $e += 1;; if ($e > ReadingsVal("wtime", "total", 0)) {fhem("set on_timer_action inactive");; $e = 0;;} fhem("setreading wtime elapsed $e");;}
attr on_timer_action room __Test
set on_timer_action inactive

Der Testschalter switch löst die Aktion aus.
Das notify reagiert auf den Testschalter und (de-)aktiviert den Timer.
Wenn der Timer aktiv ist, wird elapsed im Sekundentakt hochgezählt.
Wenn der Vorgabewert total erreicht ist, wird der Timer deaktiviert und elapsed auf 0 zurückgesetzt.

Rudy · 16 Juli 2017, 17:03:27

Hallo DocCyber,

ich bin jetzt endlich dazu gekommen, dass so auch bei mir einzubauen. Hat super funktioniert. Vielen Dank für den Code.