La mesure du temps

Présentation

LE TEMPS
Nom			LE TEMPS
Famille			Widgets
Wiki créé le			07/11/2020
Wiki mis à jour le			07/11/2020
Auteur			fgtoul

L'ipx800 propose des fonctionnalités permettant la mesure du temps.

Dans cet article, nous verrons comment utiliser ces différentes fonctions afin de

• mettre l'horloge interne à l'heure,
• déclencher des scènes à heures fixes,
• exécuter une commande à intervalle régulier,
• utiliser des retardateurs, des temporisations,
• créer des compteurs horaires, des comptes à rebours.

En dernière partie de cet article, je vous propose quelques widgets personnalisés, que vous pourrez adapter à vos besoins.

Bref, vous l'avez compris, nous allons prendre notre temps :)

Horloge interne

Mode automatique

L'ipx800 possède une horloge interne compatible avec les serveurs de temps NTP (Network Time Protocol). Elle est donc capable de mettre régulièrement son horloge à l'heure exacte et commute automatiquement à l'heure d'été ou à l'heure d'hiver. Pour le réglage du serveur NTP, connectez vous à l'ipx800 v4 en administrateur et allez dans le menu "Système" Ouvrez la configuration de l'horloge

Sauvegardez.

L'ipx800 V4 se met à l'heure immédiatement si l'accès à internet est fonctionnel.

Mode manuel

Si l'ipx800 n'a pas d'accès à Internet, vous pouvez mettre son horloge à l'heure manuellement.

Renseignez le champ DATE et le champ HEURE puis sauvegardez.

L'ipx800 règle immédiatement son horloge.

L'Horloge interne de l'Ipx800 V4 maintiendra l'heure à jour au fil du temps, mais une légère dérive est possible. Il convient alors de faire une remise à l'heure régulièrement.

Le widget

L'IPX800 V4 propose des widgets permettant l'affichage de la date et de l'heure sur le dashboard.

Les plages horaires

Création d'une plage horaire

Pour déclencher des actions en fonction du calendrier ou de l'heure, l'IPX800 propose des périphériques de type Plages Horaires.

Ces plages horaires doivent être initialisées dans le menu Périphériques et peuvent être utilisées dans les scénarios.

Pour plus d'information sur la création d'une plage horaire, je vous invite à lire la documentation de l'IPX800 V4.

Utilisation dans les scénarios

Supposons que nous voulions démarrer un aérateur, tous les jours entre 7:00 et 9:00. Configurons une plage horaire comme ci-dessus, et créons un scénario pour créer le lien avec la sortie relais qui pilote cet aérateur.

Dans le bloc Plage horaire, sélectionnons la plage horaire, puis affectons le relais dans le champ Résultat.

A 7:00 chaque jour, le périphérique Plage Horaire passe à l'état ON. La condition de l'événement du scénario est Vraie, le Relais passe à l'état ON. L'aérateur peut rafraîchir l'atmosphère.

A 9:00 chaque jour, le périphérique Plage Horairerepasse à l'état OFF, ce qui rend la condition fausse dans le scénario. La commande OFF est alors appliquée au relais, l'aérateur est arrêté.

Délais et temporisations

Définitions

L'ipx800 permet le réglage de temporisations et de retardements sur ses sorties relais et ses sorties virtuelles. Ces paramètres, nommés Ta et Tb, doivent être réglés via le menu Périphériques

Exemple avec les sorties virtuelles :

• Le paramètre Ta représente le retard à l'enclenchement. Sa valeur représente le nombre d'unités de temps qui s'écouleront avant que la sortie passe à l'état ON, consécutivement à une commande ou un événement.

 Remarque :
 Pendant le décompte, les indicateurs d'état affichent le texte 'TA'.
 Vous pouvez également observer cette instance de passage à l'état ON dans le fichier Status.xml grâce aux entrées nommées outaon pour chaque sortie physique, et votaon pour chaque sortie virtuelle.
 
 La valeur 0 signifie qu'aucun décompte n'est en cours, la valeur 1 indique un décompte en cours.
 
 Status.xml est accessible à l'adresse http://IP_IPX800/user/status.xml

• Le paramètre Tb représente le temps qui s'écoulera avant que la sortie physique ou virtuelle ne repasse automatiquement à l'état OFF.

Mon but n'est pas ici de vous expliquer leur fonctionnement, cependant, si vous souhaitez un complément d'information, je vous invite à lire cet article.

L'unité de temps

Vous pouvez choisir l'unité de temps dans la configuration de l'Ipx800 V4.

Dans le menu Réseau, ouvrez l'onglet Paramètres

En bas d'écran, cochez la case Division Ta/Tb si vous souhaitez que le temps soit mesuré en dixièmes de secondes.

Par défaut, cette case est décochée, l'ipx800 mesure le temps en secondes.

Les sorties virtuelles clignotantes

Pour mesurer un intervalle de temps grâce à l'ipx800, il faut avoir recours à une sortie virtuelle que nous ferons passer alternativement de l'état ON à l'état OFF, selon un rythme bien défini, grâce aux paramètres Ta et Tb de cette sortie.

Création d'une sortie virtuelle clignotante

Dans le menu Périphériques, sélectionnez une sortie virtuelle disponible et configurez sa temporisation Tb à 1 seconde.

(Attention, si vous avez coché le paramètre division Ta/Tb (voir plus haut), il faut valoriser Tb à 10).

Il ne reste plus qu'à créer un scénario pour réactiver cette sortie virtuelle à chaque fois qu'elle repasse à l'état OFF. Nous obtenons alors une sorte de cadenceur que nous pourrons utiliser dans tous nos autres scénarios.

Création d'un chronomètre simple

Pour créer notre chronomètre, nous avons bien sûr besoin de notre sortie virtuelle clignotante, mais aussi d'un compteur pour enregistrer le nombre de secondes écoulées. Ce compteur est incrémenté à chaque fois que la sortie virtuelle change d'état.

Pour cela, créons un scénario simple :

Affectons notre sortie virtuelle clignotante aux blocs Sortie virtuelle et assignons notre compteur de temps au bloc correspondant. Configurez un incrément correspondant à 1 seconde, selon votre unité de temps.

Utilisation du chronomètre

Supposons que nous voulions mesurer le temps de fonctionnement d'une pompe, celle-ci étant connectée à un relais de l'ipx800 v4.

il suffit d'ajouter le relais de la pompe dans la clause événement de notre scénario afin que notre chronomètre démarre en même temps que la pompe.

Lorsque le relais repasse à l'état OFF, notre chronomètre s'arrête. La valeur du compteur représente alors le temps de fonctionnement, en secondes.

Création d'un compte à rebours simple

Sur le même principe que notre chronomètre, nous avons besoin d'une sortie virtuelle clignotante et d'un compteur. En initialisant ce compteur à une valeur donnée, il suffira de le décrémenter de 1 unité de temps à chaque fois que notre sortie virtuelle clignotante passera à l'état OFF, jusqu'à ce que le compteur revienne à zéro. La valeur 0 du compteur inhibera le décompte.

Créons le scénario nécessaire au décompte :

Affectons notre sortie virtuelle clignotante aux deux blocs Sortie virtuelle et assignons notre compteur de temps au bloc correspondant.

Configurons une décrémentation correspondant à 1 seconde, selon votre unité de temps.

Utilisation du compte à rebours

Pour notre exemple, nous souhaitons éteindre un sèche-serviette soufflant de salle de bain 30 secondes après avoir quitté la pièce. Nous avons besoin d'une sortie virtuelle clignotante (ta=0 tb=1) et d'une seconde sortie virtuelle, sur laquelle nous paramètrerons Ta=0 et Tb=0. Nommons la VO2.

Voici les scénarios à créer

• Scène 1 : déclenchons notre compte à rebours lorsque le relais pilotant l'éclairage passe à l'état OFF
  
  Attribuons le relais qui pilote notre éclairage au bloc correspondant.
  
  
  
  Définissez la commande d'initialisation du compteur dans le bloc correspondant. Le compteur devra être initialisé à 30 pour notre exemple.
  
  

• Scène 2 : tant que le compteur est supérieur ou égal à 1, maintenons la sortie virtuelle VO2 à l'état ON.
  
  
  
  Dans le bloc Compteur, renseignons 1 dans le champ valeur
  
  Attribuons la sortie virtuelle VO2 au bloc correspondant

• Scène 3 : Décrémentons notre compteur toutes les secondes lorsque notre sortie clignotante repasse à l'état OFF
  
  
  
  En événement, attribuez la sortie virtuelle clignotante au 1er bloc, puis la sortie virtuelle VO2 au second bloc.
  
  En résultat, attribuez la sortie virtuelle clignotante au bloc correspondant.
  
  Définissez une commande de Décrémentation dans le bloc 'Compteur'
  
  

• Scène 4 : il ne reste plus qu'à éteindre le sèche_serviette à la fin du décompte, lorsque la sortie virtuelle VO2 passe à l'état OFF
  
  
  
  Attribuons la sortie virtuelle VO2 au bloc idoine,
  
  Attribuons le relais du sèche-serviette en résultat.

Compte à rebours variable

Dans cet article, vous trouverez l'exemple d'un compte à rebours variable.

Merci @Teebex pour cette puissante fonctionnalité aux usages multiples.

Personnellement, je l'utilise afin de piloter manuellement la filtration de la piscine, en marche forcée pour une durée variable en fonction des besoins. La plage de temps est incrémentée heure par heure, jusqu'à 8 maximum. Dès que la valeur du compteur est supérieure ou égale à 1, la filtration se met en marche pour la durée fixée et s'arrête automatiquement lorsque le décompte est terminé.

Ce widget, comportant un code complexe, sera présenté plus bas dans une version simplifiée.

Quelques Widgets personnalisés

Attention : Dans ce qui va suivre, nous allons voir comment mesurer le temps et afficher le résultat des mesures à l'écran. Nous utiliserons pour cela les fonctions Ta et Tb sur les relais ou sorties virtuelles, et une source de données qui va solliciter assez fréquemment le fichier Status.xml de l'ipx800.
Utilisez ces widgets avec parcimonie, n'utilisez pas plusieurs fois le même compteur interne.

Nous allons créer quelques widgets en code HTML afin d'afficher nos mesures de temps (chronomètres, Ta, Tb, ...).

Pour cela, vous devez d'abord créer une source de données sur le dashboard.Nommez cette source STATUS.

La mesure du temps par ces méthodes dépend des performances de votre Ipx800. Des écarts de quelques secondes peuvent parfois être constatés.

Widget 1 : Affichage du temps de fonctionnement de l'ipx800

Dans le fichier Status.xml, l'ipx800 v4 met à notre disposition le paramètre wuc0 qui représente le temps écoulé depuis son dernier redémarrage.

Il est exprimé en secondes.

Nous allons créer un petit widget de type HTML, qui récupèrera cette valeur et la convertira en Jours, heures, minutes et secondes.

Vous devez avoir créé la Source de données STATUS au préalable.

Ajoutez un widget type HTML, 1 bloc de hauteur puis collez le code ci-dessous.

 Afficher le code du widget
 

let reste=datasources["STATUS"]["response"]["wuc0"];
    let result='';
    let nbJ=Math.floor(reste/(3600*24));
    reste -= nbJ*24*3600;
    let nbH=Math.floor(reste/3600);
    reste -= nbH*3600;
    let nbM=Math.floor(reste/60);
    reste -= nbM*60;
    let nbS=reste;

    if (nbJ>0)
        result=result+nbJ+'j ';
    if (nbH>0)
        result=result+nbH+'h ';
    if (nbM>0)
        result=result+nbM+'m ';
    if (nbS>0)
        result=result+nbS+'s';

return `
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
<center>   
<div style="font-family: 'Orbitron', sans-serif;font-size:18px;margin-top:15px;">${result}</div>
</center>
`;

Widget 2 : Affichage du retard Ta d'une sortie

Le décompte du temps Ta d'une sortie se fait dans la mémoire de l'IPX800 et ne permet pas à l'utilisateur de connaître le temps restant.

Nous devons par conséquent utiliser une sortie virtuelle clignotante et un compteur.

Pour afficher le temps restant, il serait logique d'utiliser un compte à rebours initialisé au même nombre de secondes que le paramètre Ta, puis laisser les secondes s'écouler jusqu'à 0.

Cependant, Ta peut prendre une valeur maximale de 13743 unités de temps alors que les commandes s'appliquant aux compteurs ne peuvent utiliser que des valeurs inférieures à 256. Il faudrait donc intervenir plusieurs fois sur un même compteur pour l'initialiser à une valeur supérieure à 256.

Nous utiliserons donc un chronomètre classique. Nous obtiendrons le temps restant avant le changement d'état de la sortie, en faisant une soustraction de la valeur du compteur à la valeur de Ta.

Pour notre exemple, nous souhaitons démarrer un réchauffeur 180 secondes après la pompe de circulation. Pour ne pas trop solliciter l'IPX800, nous ferons clignoter notre Sortie virtuelle toutes les 5 secondes seulement, le compteur sera donc incrémementé de 5 en 5.

Le démarrage de la pompe de circulation est le déclencheur. A ce moment, une commande ON est envoyée au relais du réchauffeur, le comptage commence simultanément puisque c'est à et instant précis que l'IPX800 commence le décompte du Ta.

Nous utiliserons

• une sortie virtuelle clignotante (Ta=0 Tb=5s) que nous nommerons SV1,
• une sortie virtuelle avec Ta=0, Tb=0, que nous nommerons SV2,
• un compteur CPT1,
• une sortie Relais, connectée à la pompe de circulation, nommé RELAIS1,
• une sortie relais connectée au réchauffeur, nommée RELAIS2, configurée avec Ta=30s

Ecrivons les 4 scénarios nécessaires.

Ces scénarios étant similaires aux exemples fournis plus haut, nous allons utiliser une transcription simplifiée.

Scène 1 : Déclencheur
événement : RELAIS1
Action : ON/OFF
Résultat : RELAIS2 , SV2

Scène 2 : Incrémentation
événement : NON SV1
Action : ON
Résultat : CPT1 (Incrémentation = 5)

Scène 3 : Entretien SV clignotante
événement : SV2 ET NON SV1
Action : ON
Résultat : SV1

Scène 4 : Arrêt du comptage
événement : RELAIS2
Action : OFF
Résultat : SV2

Créons un widget de type HTML 1 bloc et collons le code

Les 3 premières lignes doivent être adaptées en fonction des ressources utilisées sur l'Ipx800

 Afficher le code du widget
 

let rly=1;//Relais du rechauffeur / renseignez 0 pour Relais 1
let rst=180 - datasources["STATUS"]["response"]["cpt0"];//ici nous utilisons le compteur n°1 de l'ipx800
let r=datasources["STATUS"]["response"]["led"+rly];

return `
<span style="margin-left:8px;">Temps restant avant activation :</span>  
<div style="font-size:18px;margin-top:10px;margin-left:20px;width:150px;text-align:right;background-color:#333">${rst}</div>
<div class="indicator-light2  led${rly]  ledta${rly} ${r==1 ? 'on' : ''}" style="position:absolute;left:190px;top:10px;"></div>
`;

Widget 3 : Affichage du délai Tb d'une sortie

Comme pour Ta, la valeur résiduelle de Tb en cours de décompte n'est pas accessible par l'utilisateur. Il faut donc avoir recours à un chronomètre externe.

Exemple : Le radiateur soufflant de la salle de bains est relié à un relais de l'IPX800, sur lequel nous avons programmé une temporisation Tb=600 afin que tout se coupe automatiquement après 10 minutes de fonctionnement.

Si nous voulons afficher le temps de fonctionnement restant à chaque mise en marche, nous devons déclencher un comptage lors de la mise en route du chauffage, c'est à dire lorsque le relais passe ON. C'est en effet à cet instant précis que l'IPX800 commence le décompte de la temporisation.

Nous utiliserons

• une sortie virtuelle clignotante (Ta=0, Tb=5s) que nous nommerons SV1,
• une sortie virtuelle avec Ta=0, Tb=0, que nous nommerons SV2,
• un compteur CPT1,
• une sortie relais connectée au radiateur soufflant, nommée RELAIS2, configurée avec Tb=600s

Ecrivons les 4 scénarios nécessaires.

Scène 1 : Déclencheur
événement : RELAIS2
Action : ON
Résultat :  SV2 , CPT1 (Set = 0)

Scène 2 : Incrémentation
événement : NON SV1
Action : ON
Résultat : CPT1 (Incrémentation = 5)

Scène 3 : Entretien SV clignotante
événement : SV2 ET NON SV1
Action : ON
Résultat : SV1

Scène 4 : Arrêt du comptage
événement : NON RELAIS2
Action : OFF
Résultat : SV2

Créons un widget de type HTML 1 bloc et collons le code les 3 premières lignes doivent être adaptées aux rssources utilisées.

 Afficher le code du widget
 

let rly=2; //numéro du relais connecté au radiateur / renseignez 0 pour le relais n°1
let rst=600 - datasources["STATUS"]["response"]["cpt0"]; //renseignez cpt0 pour compteur n°1
let r=datasources["STATUS"]["response"]["led"+rly];

return `
<span style="margin-left:8px;">Secondes restant avant désactivation :</span>  
<div style="font-size:18px;margin-top:10px;margin-left:20px;width:150px;text-align:right;background-color:#333">${rst}</div>
<div class="indicator-light2  led${rly} ledta${rly} ${r==1 ? 'on' : ''}" style="position:absolute;left:190px;top:10px;"></div>
`;

Widget 4 : Affichage d'un compteur horaire de fonctionnement

Le comptage du temps de fonctionnement d'un appareil est en soi assez simple : il suffit de chronométrer le temps pendant lequel le relais correspondant reste à l'état ON.

Pour notre exemple, nous souhaitons comptabiliser le temps de fonctionnement de la pompe à chaleur, connectée au relais 1 de notre IPX800.

Le passage à l'état ON du relais est le déclencheur. Nous ferons alors 'clignoter' notre sortie virtuelle jusqu'à l'ouverture du relais.

Nous utiliserons

• une sortie virtuelle clignotante (Ta=0 Tb=1s) que nous nommerons SV1,
• une sortie virtuelle pour modifier le format d'affichage (décimal ou sexagésimal)
• un compteur CPT1,
• une sortie Relais, connectée à la pompe à chaleur, nommée RELAIS1,

Ecrivons les 3 scénarios nécessaires.

Scène 1 : Déclencheur
événement : RELAIS1 
Action : ON
Résultat : SV1

Scène 2 : Incrémentation
événement : NON SV1
Action : ON
Résultat : CPT1 (Incrémentation = 1)

Scène 3 : Entretien SV clignotante
événement : RELAIS1 ET NON SV1
Action : ON
Résultat : SV1

Créons un widget de type HTML 1 bloc et collons le code

Les 3 premières lignes de code sont à adapter en fonction des ressources utilisées sur l'Ipx800.

 Afficher le code du widget
 

let d=datasources["STATUS"]["response"];//nommez la source de données
let reste=d["cpt0"];//renseignez cpt0 pour le compteur n°1
let vOut=46;//renseignez 46 pour SV n47 / choix du format d'affichage


//ne rien modifier ci-dessous
let result='';
let affichage=d["vout"+vOut]==1; //false pour un affichage numérique ; true pour un affichage sexagésimal
let l='',l1='';

if (affichage){
    l="00:00";
    l1='on';
    let nbH=Math.floor(reste/3600);
    reste -= nbH*3600;
    let nbM=Math.floor(reste/60);
    reste -= nbM*60;
    let nbS=reste;
    if (nbH>=10){result= nbH + ':';
        }else{
                 result= ("0"+nbH).substring(("0"+nbH).length, ("0"+nbH).length - 2)+':';
        }
	result=result+("0"+nbM).substring(("0"+nbM).length, ("0"+nbM).length - 2)+':';
    result=result+("0"+nbS).substring(("0"+nbS).length, ("0"+nbS).length - 2);
}else{
	result=parseFloat(reste/3600).toFixed(2);
    l="000.0";
}
return `
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400&display=swap" rel="stylesheet">
<input type="button" id="bouton2" class="bouton2 vout${vOut} btnV4vout${vOut} ${l1}" style="padding: 2px 0.5em 2px 0.5em;font-size:10px;position:absolute;margin-left:5px;margin-top: -25px;width: 55px;font-size:14px;text-align:center;" name="000.0|00:00" onclick="newAJAXCommand('io.cgi?vout=${vOut}');" value="${l}">
<center>   
<div style="font-family: 'Space Mono', monospace;font-size:28px;margin-top:35px;">${result}</div>
</center>
`;

Widget 5 : Compte à rebours variable

Nous allons créer un widget pour utiliser le compte à rebours variable.

Pour plus d'explications sur son fonctionnement, je vous invite à lire l'article de @Teebex.

Comme je l'ai dit plus haut, j'utilise ce code pour piloter la marche forcée de la filtration de piscine avec temporisation.

C'est donc l'exemple que nous prendrons ici, avec un code simplifié.

nous aurons besoin de

• Pour le compte à rebours :
  • 1 compteur que nous nommerons CPT1
  • 1 sortie virtuelle clignotante toutes les minutes (Ta=0 Tb=60), nous la nommerons SV1
  • 1 sortie relais connectée à la pompe de filtration, nous la nommerons RELAIS1
• Pour définir la durée du compte à rebours :
  • 1 sortie virtuelle pour ajouter 1 heure, nous la nommerons SV5
  • 1 sortie virtuelle pour ôter 1 heure, nous la nommerons SV6
  • 1 sortie virtuelle pour la remise à 0, nous la nommerons SV7

Créons les scénarios nécessaires au compte à rebours :

scène 1 : démarrage / arrêt du compte à rebours
Evénement : CPT1 (Valeur = 1)
Action : ON/OFF
Résultat : RELAIS1

Scène 2 : Décompte des minutes
Evénement :NON SV1 ET RELAIS1
Action :ON
Résultat : CPT1 (Décrémentation 1) ; SV1

Créons les scénarios pour la gestion de la durée :

Scène 3 : Ajout 1 heure / Max=23h
Evénement : SV5 ET NON CPT1(valeur 1321)
Action : ON
Résultat : CPT1 (Incrémentation 60)

Scène 4 : retrait 1 heure
Evénement : SV6 ET CPT1(valeur 60)
Action : ON
Résultat : CPT1 (Décrémentation 60)

Scène 5 : RAZ
Evénement : SV6
Action : ON
Résultat : CPT1 (Set 0)

Créons un widget de type HTML 2 blocs et collons le code

Les 4 premières lignes de code sont à adapter en fonction des ressources utilisées sur l'Ipx800.

 Afficher le code du widget
 

let vOutPlus=8; //sortie virtuelle pour +1h renseignez 8 pour la sortie virtuelle n9
let vOutMoins=9; // sortie virtuelle pour -1h renseignez 9 pour la sortie virtuelle n10
let vOutRAZ=13; // sortie virtuelle pour RàZ renseignez 13 pour la sortie virtuelle n14
let reste=datasources["STATUS"]["response"]["cpt5"]; //renseignez cpt5 pour le compteur n6
    
    
let result='';
let nbH=Math.floor(reste/60);
reste -= nbH*60;
let nbM=reste;
result= ("0"+nbH).substring(("0"+nbH).length, ("0"+nbH).length - 2)+' : ';
result=result+("0"+nbM).substring(("0"+nbM).length, ("0"+nbM).length - 2);

return `
<span style="font-size:12px;">       
<p style="margin-left:15px;" >Marche forcée temporisée
<input type="button" id="bouton2" class="bouton2 vout${vOutPlus} btnV4vout${vOutPlus}" style="padding: 2px 0.5em 2px 0.5em;font-size:10px;position:absolute;margin-left:5px;margin-top: -5px;width: 35px;font-size:14px;text-align:center;" name="+1h|+1h" onclick="newAJAXCommand('io.cgi?vout=${vOutPlus}');" value="+1h">
<input type="button" id="bouton2" class="bouton2 vout${vOutMoins} btnV4vout${vOutMoins}" style="padding: 2px 0.5em 2px 0.5em;font-size:10px;position:absolute;margin-left:43px;margin-top: -5px;width: 35px;font-size:14px;" name="-1h|-1h" onclick="newAJAXCommand('io.cgi?vout=${vOutMoins}');" value="-1h">
<input type="button" id="bouton2" class="bouton2 vout${vOutRAZ} btnV4vout${vOutRAZ}" style="padding: 2px 0.5em 2px 0.5em;font-size:10px;position:absolute;margin-left:81px;margin-top: -5px;width: 35px;font-size:14px;" name="RàZ|RàZ" onclick="newAJAXCommand('io.cgi?vout=${vOutRAZ}');" value="RàZ">
</p>
</span>
<center>  
<div style="font-family: 'Orbitron', sans-serif;font-size:32px;margin-top:20px">${result}</div>
</center>
`;