Widget Décompte à la seconde (tps_restant)

Bad · Janvier 8, 2023, 2:25

Bonjour à tous,

Suite à la mise à jour de mon code du widget « Décompte à la seconde » / « tps_restant », voici la dernière version (conforme Jeedom v4.3) :

<!--    CUSTOM WIDGET "tps_restant_v4.3"
Community link:     https://community.jeedom.com/t/widget-decompte-a-la-seconde-tps-restant/99012
Updated on:         2023-01-08
Versions supported: Jeedom v4.3
Last Modification:  use v4.3 js (jeeFrontEnd, jeedom.cmd.addUpdateFunction, jeedom.cmd.refreshValue)
-->
<div class="tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<span class="cmdName">#name_display#</span>
	</div>
	<div class="content-sm">
		<div class="state"></div>
	</div>
	<script>
		jeedom.cmd.addUpdateFunction('#id#', function(_options) {
			$('.cmd[data-cmd_id=#id#]').attr('title', '{{Date de valeur :}} '+_options.valueDate+'<br/>{{Date de collecte :}} '+_options.collectDate);
			$('.cmd[data-cmd_id=#id#]').attr('interval', );
			if ($('.cmd[data-cmd_id=#id#]').attr('interval')) {
				clearInterval($('.cmd[data-cmd_id=#id#]').attr('interval'));
				$('.cmd[data-cmd_id=#id#]').removeAttr('interval');
			}
			var timestamp = parseFloat(_options.display_value);
			if (timestamp > 0) {
				$('.cmd[data-cmd_id=#id#]').attr('interval', setInterval(function () {
					var dateLoc = new Date;
					var time_left = timestamp * 1000 - (dateLoc.getTime() + (dateLoc.getTimezoneOffset() + jeeFrontEnd.serverTZoffsetMin) * 60000 + jeeFrontEnd.clientServerDiffDatetime);
					if (!$('.cmd[data-cmd_id=#id#] .state').length || timestamp < 0 || time_left < 0) {
						if ($('.cmd[data-cmd_id=#id#]').attr('interval')) {
							clearInterval($('.cmd[data-cmd_id=#id#]').attr('interval'));
							$('.cmd[data-cmd_id=#id#]').removeAttr('interval');
						}
						$('.cmd[data-cmd_id=#id#] .state').empty();
					} else {
						//============ CONVERSIONS
						var s_left = time_left / 1000;
						var i_left = s_left / 60;
						var H_left = i_left / 60;
						s_left = Math.floor(s_left % 60);
						i_left = Math.floor(i_left % 60);
						H_left = Math.floor(H_left);
						//============ FORMATTING
						s_left = s_left < 10 ? "0"+ s_left : s_left;
						i_left = i_left < 10 ? "0"+ i_left : i_left;
						H_left = H_left < 10 ? "0"+ H_left : H_left;
						//============ DISPLAY
						if (H_left > 0) {
							$('.cmd[data-cmd_id=#id#] .state').empty().append(H_left + ":" + i_left + ":" +s_left);
						} else {
							$('.cmd[data-cmd_id=#id#] .state').empty().append(i_left + ":" +s_left);
						}
					}
				}, 1000));
			} else {
				if ($('.cmd[data-cmd_id=#id#]').attr('interval')) {
					clearInterval($('.cmd[data-cmd_id=#id#]').attr('interval'));
					$('.cmd[data-cmd_id=#id#]').removeAttr('interval');
				}
				$('.cmd[data-cmd_id=#id#] .state').empty();
			}
		});
		jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}]);
	</script>
</div>

L’utilisation se fait toujours de la façon suivante :
Une fois le widget créé :

Il suffit de l’associer à une info (virtuel ou non), comme un widget standard…
A l’aide du bouton « roue crantée » :

Puis dans l’onglet affichage, selectionner le widget :

Et sauvegarder.

Le code de mon vitruel de test est le suivant :

7068 : info   : "Compteur"
7075 : action : "-60s"  : (#timestamp# >= #[Compteur]# - 60) ? 0 : (#[Compteur]# - 60)
7074 : action : "-10s"  : (#timestamp# >= #[Compteur]# - 10) ? 0 : (#[Compteur]# - 10)
7070 : action : "Reset" : 0
7071 : action : "+10s"  : (#timestamp# <= #[Compteur]#) ? (#[Compteur]# + 10) : (#timestamp# + 10)
7072 : action : "+60s"  : (#timestamp# <= #[Compteur]#) ? (#[Compteur]# + 60) : (#timestamp# + 60)

Etat initial ou Reset :

+60s, le décompte commence :

Les boutons -60s, -10s et +10s décalent l’heure de fin du compteur.
Une fois le compteur arrivé à 0, son contenu disparait.

La valeur manipulée par le « compteur » dans Jeedom est #timestamp#, également appelé EPOCH. La valeur stockée dans le compteur peut-être utilisée dans un scenario (ou autre) et comparée à #timestamp# pour savoir « où on en est ».

Pour ce qui est de l’utilité, perso je l’utilise dans mes temporisations Salon, Cuisine, Entrée, etc pour avoir un retour visuel du temps restant sur la tempo.

Vous trouverez ici les différentes version (que j’ai pu retrouver) du code de ce widget :

Mise à jour en 2021 par Bad (conforme jeedom v4.1 & v4.2)

Code

<!--    WIDGET SPECIFIQUE widget "tps_restant"
Refs :           https://community.jeedom.com/t/decompte-a-la-seconde-widgets-v4/10658
                 https://community.jeedom.com/t/plugin-compte-a-rebours/6659/
Update :         2021/01/10
Modification :   Clean error on clearInterval()
-->
<div class="tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<span class="cmdName">#name_display#</span>
	</div>
    <div class="content-sm">
      <div id="countdown_#id#_decompte" data-cmd_id="#id#"></div>
    </div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			if (interval#uid#) {
				clearInterval(interval#uid#);
				interval#uid# = false;
			}
			var timestamp = parseFloat(_options.display_value);
			if (timestamp > 0) {
				interval#uid# = setInterval(function () {
					var dateLoc = new Date;
					var tps_restant=timestamp*1000 - (dateLoc.getTime()+(dateLoc.getTimezoneOffset()+serverTZoffsetMin)*60000 + clientServerDiffDatetime);
					// console.log("interval("+intervalId+")");
					if (!$('#countdown_#id#_decompte').length || timestamp < 0 || tps_restant < 0) {
						// console.log("clearInterval("+intervalId+")");
						if (interval#uid#) {
							clearInterval(interval#uid#);
							interval#uid# = false;
						}
						$('#countdown_#id#_decompte').text('  ');
					} else {
						//============ CONVERSIONS
						var s_restantes = tps_restant / 1000; // Secondes restantes
						var i_restantes = s_restantes / 60; // Minutes restantes
						var H_restantes = i_restantes / 60; // Heures restantes
						s_restantes = Math.floor(s_restantes % 60); // Secondes restantes
						i_restantes = Math.floor(i_restantes % 60); // Minutes restantes
						H_restantes = Math.floor(H_restantes); // Heures restantes
						//============ FORMATTAGE
						s_restantes = s_restantes < 10 ? "0"+ s_restantes : s_restantes;
						i_restantes = i_restantes < 10 ? "0"+ i_restantes : i_restantes;
						H_restantes = H_restantes < 10 ? "0"+ H_restantes : H_restantes;
						//==================
						if (H_restantes > 0) {
							$('#countdown_#id#_decompte').text(H_restantes + ":" + i_restantes + ":" +s_restantes);
						} else {
							$('#countdown_#id#_decompte').text(i_restantes + ":" +s_restantes);
						}
					}
				}, 1000);
			} else {
				if (interval#uid#) {
					clearInterval(interval#uid#);
					interval#uid# = false;
				}
				$('#countdown_#id#_decompte').text('  ');
			}

		}
		interval#uid# = false;
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Mise à jour en 2020 par ajja17orange (conforme jeedom v4.0.40)

Code

<!-- WIDGET SPECIFIQUE  widget "tps_restant"

Modifications : 
_options.display_value > javascript_timestamp (ligne 33
Mise à jour :
- Le 2020/2/20 : conforme jeedom v4.0.40

-->
<div class="cmd cmd-widget" style="min-width:90px;min-height:50px;margin-right: 5px;margin-left: 5px;padding:0px !important;" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
	<center> 
	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>

	<div>
	<span style="line-height: 32px;font-size: 2.5em;font-weight: bold;" id="countdown_#id#_decompte">--</span>
	</div>
    </center>
	<script>
//var now = null;
    //  	console.log($('#countdown_#id#_decompte').text); 

        jeedom.cmd.update['#id#'] = function(_options){

var thisdate = new Date();      
var actualdate = (thisdate.getTime());
var timestamps = actualdate / 1000;
var javascript_timestamp = Math.round(timestamps);

//	console.log("temp_reel "+javascript_timestamp); 
//	console.log("temp_valeur "+_options.display_value); 
          
var timestamp = parseFloat(_options.display_value);
		$(function (e) {
			if (timestamp > javascript_timestamp) {
      //       var tps_restant == null;

              interval#id# = setInterval(function () {
					var now = (new Date()).getTime(); // On déclare la date d'aujourd'hui.		
              var tps_restant =timestamp*1000 - now; // Temps restant en millisecondes

					// console.log("interval("+intervalId+")");

					if (!$('#countdown_#id#_decompte').length || timestamp < javascript_timestamp || tps_restant < 0) {
						// console.log("clearInterval("+intervalId+")");
						clearInterval(interval#id#);
						$('#countdown_#id#_decompte').text('--');
					} else {
                      
                      
                      
					  //============ CONVERSIONS
					  var s_restantes = tps_restant / 1000; // Secondes restantes
					  var i_restantes = s_restantes / 60; // Minutes restantes
					  var H_restantes = i_restantes / 60; // Heures restantes
					  
					  s_restantes = Math.floor(s_restantes % 60); // Secondes restantes
					  i_restantes = Math.floor(i_restantes % 60); // Minutes restantes
					  H_restantes = Math.floor(H_restantes); // Heures restantes
					  //==================

					  //============ FORMATTAGE
					  s_restantes = s_restantes < 10 ? "0"+ s_restantes : s_restantes;
					  i_restantes = i_restantes < 10 ? "0"+ i_restantes : i_restantes;
					  H_restantes = H_restantes < 10 ? "0"+ H_restantes : H_restantes;
					  //==================

					  if (H_restantes > 0) {
                        $('#countdown_#id#_decompte').text(H_restantes + ":" + i_restantes + ":" +s_restantes);
                      } else {
                        $('#countdown_#id#_decompte').text(i_restantes + ":" +s_restantes);
                      }  
					}
				}, 1000);
			}else {
			
						clearInterval(interval#id#);
                     
						$('#countdown_#id#_decompte').text('--');
;
              e.stopPropagation();
            }
		});
        }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>
</div>

Mise à jour en 2019 par windex encore sur l’ancien forum (conforme jeedom v3.3.20)

Code

<!-- WIDGET SPECIFIQUE  widget "tps_restant"

Modifications : 
- update, _options.display_value, et stop fonction
Mise à jour :
- Le 2019/4/16 : conforme jeedom v3.3.20

-->
<div style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
	<center> 
      <span style="font-weight: bold;font-size : 12px;" class="cmdName">#name_display#</span><br/>
      <span style="font-size: 1.5em;font-weight: bold;" id="countdown_#id#_decompte">--</span>
    </center>
	<script>
        jeedom.cmd.update['#id#'] = function(_options){
var timestamp = parseFloat(_options.display_value);
		$(function (e) {
			if (timestamp > 0) {
				 interval#id# = setInterval(function () {
					var now = (new Date()).getTime(); // On déclare la date d'aujourd'hui.
					var tps_restant =timestamp*1000 - now; // Temps restant en millisecondes

					// console.log("interval("+intervalId+")");

					if (!$('#countdown_#id#_decompte').length || timestamp < 0 || tps_restant < 0) {
						// console.log("clearInterval("+intervalId+")");
						clearInterval(interval#id#);
						$('#countdown_#id#_decompte').text('--');
					} else {
					  //============ CONVERSIONS
					  var s_restantes = tps_restant / 1000; // Secondes restantes
					  var i_restantes = s_restantes / 60; // Minutes restantes
					  var H_restantes = i_restantes / 60; // Heures restantes
					  
					  s_restantes = Math.floor(s_restantes % 60); // Secondes restantes
					  i_restantes = Math.floor(i_restantes % 60); // Minutes restantes
					  H_restantes = Math.floor(H_restantes); // Heures restantes
					  //==================

					  //============ FORMATTAGE
					  s_restantes = s_restantes < 10 ? "0"+ s_restantes : s_restantes;
					  i_restantes = i_restantes < 10 ? "0"+ i_restantes : i_restantes;
					  H_restantes = H_restantes < 10 ? "0"+ H_restantes : H_restantes;
					  //==================

					  if (H_restantes > 0) {
                        $('#countdown_#id#_decompte').text(H_restantes + ":" + i_restantes + ":" +s_restantes);
                      } else {
                        $('#countdown_#id#_decompte').text(i_restantes + ":" +s_restantes);
                      }  
					}
				}, 1000);
			}else {
              						
						clearInterval(interval#id#);
                     
						$('#countdown_#id#_decompte').text('--');
              e.stopPropagation();
            }
		});
        }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>
</div>

Version initiale en 2016 par windex encore sur l’ancien forum

Code

<!-- WIDGET SPECIFIQUE adapté du widget standard "countdown"
Modifications : 
- Remplacement de style="display: block;" par style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;"
- Remplacement de title="#collectDate#" par title="Valeur du #valueDate#, collectée le #collectDate#"
- Mutualisation de #countdown_#id#_#state#_h, #countdown_#id#_#state#_m, et #countdown_#id#_#state#_s en #countdown_#id#_#state#_decompte
- Suppression de class='label label-default'
- Ajout calcul de #countdown_#id#_#state#_decompte affichant si nécessaire les heures
- Remplacement de la valeur par défaut par --
Mise à jour :
- Le 2016/11/19 : Correction d'une erreur d'écriture
- Le 2016/04/11 : Création
-->
<div style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
	<center> 
      <span style="font-weight: bold;font-size : 12px;" class="cmdName">#name_display#</span><br/>
      <span style="font-size: 2em;font-weight: bold;" id="countdown_#id#_#state#_decompte">--</span>
    </center>
	<script>
		if ('#background-color#' !== '#'+'background-color'+'#') {
			$('#cmd#id# .label').css({'background-color':'#background-color#'});
		}

		$(function () {
			if ('#state#' > 0) {
				var intervalId = setInterval(function () {
					var now = (new Date()).getTime(); // On déclare la date d'aujourd'hui.
					var tps_restant = '#state#'*1000 - now; // Temps restant en millisecondes

					// console.log("interval("+intervalId+")");

					if (!$('#countdown_#id#_#state#_decompte').length || '#state#' < 0 || tps_restant < 0) {
						// console.log("clearInterval("+intervalId+")");
						clearInterval(intervalId);
						$('#countdown_#id#_#state#_decompte').text('--');
					} else {
					  //============ CONVERSIONS
					  var s_restantes = tps_restant / 1000; // Secondes restantes
					  var i_restantes = s_restantes / 60; // Minutes restantes
					  var H_restantes = i_restantes / 60; // Heures restantes
					  
					  s_restantes = Math.floor(s_restantes % 60); // Secondes restantes
					  i_restantes = Math.floor(i_restantes % 60); // Minutes restantes
					  H_restantes = Math.floor(H_restantes); // Heures restantes
					  //==================

					  //============ FORMATTAGE
					  s_restantes = s_restantes < 10 ? "0"+ s_restantes : s_restantes;
					  i_restantes = i_restantes < 10 ? "0"+ i_restantes : i_restantes;
					  H_restantes = H_restantes < 10 ? "0"+ H_restantes : H_restantes;
					  //==================

					  if (H_restantes > 0) {
                        $('#countdown_#id#_#state#_decompte').text(H_restantes + ":" + i_restantes + ":" +s_restantes);
                      } else {
                        $('#countdown_#id#_#state#_decompte').text(i_restantes + ":" +s_restantes);
                      }  
					}
				}, 1000);
			}
		});
	</script>
</div>

Enjoy

rennais35000 · Avril 7, 2023, 1:05

Bonjour et merci encore une fois Bad,
Je viens de remettre en route la piscine et comme j’ai un minuteur pour le remplissage je me demandais bien pourquoi il ne marchait plus

J’avais simplement loupé ce post de Janvier

Décidément il y a eu quand même pas mal de modif entre la 4.2 et la 4.3 et j’en découvre encore.

Bien cordialement

Rol38 · Mai 22, 2023, 12:38

Bonjour,

J’avais l’ancienne version qui ne marchait pas après le passage en 4.3.
Je suis en 4.3.17 et je viens d’installer cette version et je n’ai pas de décompte.
Comment faire pour debuger .
Merci

Bad · Mai 22, 2023, 1:15

Hello,

Si tu as remplacé le code dans le même fichier pour ton widget, il faut que tu enlève le widget de ta commande (sélection un autre widget et sauvegarde) puis que te le remettes.

Le Core de Jeedom garde le widget en cache.

Sinon n’hésite pas à fournir des captures d’écran de ce que tu constates

Bad

Rol38 · Mai 22, 2023, 4:51

Bonjour,
Non j’ai renommé l’ancien et créer le nouveau.
je viens de supprimer le widget de la commande et de le re selectionné.
Mais pas de décompte j’ai dans la commande la valeur d’arrêt a savoir par exemple #timestamp# + 10

rennais35000 · Mai 22, 2023, 6:26

Bonsoir,
Marche très bien chez moi pourtant. Au cas où je te mets le fichier que j’ai.

cmd.info.numeric.Decompte.html.txt (2,9 Ko)

Bien cordialement

Bad · Mai 22, 2023, 8:50

Tu étais en quelle version de Jeedom avant ?

Peux-tu implémenter le virtuel de test qui est dans mon message initial et voir s’il fonctionne ?

Rol38 · Mai 22, 2023, 10:15

Bonsoir,

j’ai le même virtuel de test et cela ne marche pas.
Je suis en 4.3.17. Et comme c’est une commande que je n’utilise que l’été , l’été dernier c’etait Ok mais je ne sais pas qu’elle était ma version de Jeedom.
Je sais que j’upgrade assez rapidement lors d’une nouvelle version.
Est-ce possible de retrouver les dates des upgrades ?

Bad · Mai 22, 2023, 10:22

Normalement dans le nom de la backup, mais ce n’est pas forcément pertinent, tu devait être sur le début de la 4.3 ou tout juste encore en 4.2 à ce moment là.

Tu as bien changé le widget, sauvegardé, remis le widget et re sauvegardé sur toutes tes commandes avec compteur ? (Notamment celle de test)

Rol38 · Mai 23, 2023, 10:55

Bonjour Bad,

Ce matin cela marche, suite a un reboot de jeedom que je fait chaque jour à 2h du matin.
Hier j’avais bien supprimer le widget et recréé le nouveau. C’était peut être pas suffisant.

Merci pour ta patience

Rol38 · Mai 23, 2023, 5:42

Bonsoir Bad,

Il y a encore un pb .
si dans le dasboard le décompte se passe bien , et il est bien affichée, par contre dans le code pour l’info compteur j’ai toujours la valeur 168486493 qui correspond à #timestamp# +60
le champ compteur n’est pas mis a jour.
dash

Bad · Mai 23, 2023, 9:56

Oui, comme précisé dans un autre topic :

La valeur d’une commande n’est jamais modifié par un widget, ça a toujours été le cas.
C’est à toi de manipuler la valeur comme tu l’entends avec un scénario.

Bad

Rol38 · Mai 24, 2023, 10:18

Bonjour,
oui effectivement, mais je ne comprends pas , car avec la version précédente et en 4.2 j’affichais cette commande dans un widget jeedom_connect et j’avais bien le décompte qui s’affichait .

zaza81210 · Mai 31, 2023, 8:17

boujour petite interrogation que j’ai, il y aurai t’il une astuce pour faire pause?

Bad · Mai 31, 2023, 9:03

Peux tu préciser ta question stp ?

zaza81210 · Mai 31, 2023, 9:32

Je voudrais savoir si il est possible de faire une pause pendant un décompte,et le reprendre la il c’est arrêté ? Merci

Bad · Juin 2, 2023, 11:10

Alors, au risque de me répéter : il ne s’agit que d’un widget, donc il ne peut faire aucune action par rapport ou sur le compte à rebours.

Donc si tu veux « mettre en pause », il faut que tu crées un scénario qui sauvegarde le temps restant du compte à rebours dans une autre commande et mets 0 dans cette commande pour désactiver l’affichage. Pour reprendre, il faudra remettre #timestamp# + le temps restant sauvegardé précédemment, dans cette commande.

Bad

zaza81210 · Juin 2, 2023, 7:01

Ok merci beaucoup super plunig, très pratique

zaza81210 · Juin 2, 2023, 7:02

Dsl super widget

MnX · Juin 23, 2023, 7:20

Bonjour,

Merci beaucoup pour ce widget.

Petite question, comment faire, si l’on veut à la fin du décompte rester sur 00:00. C’est possible?
Il faut placer quelque part : text(‹ 00:00 ›) , c’est ça? Mais je suis incapable de trouvé où…

Merci et bonne journée