Aide à la mise au point d'un widget

[naif]

Bonjour,
En utilisant différents codes de widgets, j’ai mis au point un widget pour ma chaudière. Ce widget est satisfaisant mais j’aimerais ajouter un petit texte en plus mais n’ayant aucune connaissance à partir de maintenant, je patauge. Aussi j’en appelle à votre aide et à vos connaissances.
Dans le widget je souhaite introduire les commandes en commentaires (derrière les //) je n’y parviens pas

<div id="cmd#id#" style="text-align:center; padding:8px;">
    
    <!-- Nom -->
    <div class="ct-name" style="font-size:14px; font-weight:bold;">
        #name#
    </div>

    <!-- Valeur -->
    <div class="ct-value" style="font-size:22px; font-weight:bold;">
        #value# °C
    </div>

</div>

<script>
  
 // (function(){
//  var textDiv = document.getElementByld('hydroText');
 // }
    jeedom.cmd.update['#id#'] = function(_options){

        // Valeur brute
        let val = parseFloat(_options.display_value);
        
        // Sélection du widget dans le DOM
        let bloc = document.getElementById("cmd#id#");
        let valueDiv = bloc.querySelector(".ct-value");

        // Mise à jour de la valeur
        valueDiv.innerHTML = val + " °C";

        // Couleur dynamique (modifie directement le style)
        // 4-7 °C
        if (val >= 4 && val <= 7){
            valueDiv.style.color = "#3ECC71";    // vert
        //  textDiv.style.color = "#3CCC71";
       //   textDiv.innerHTML = "Echange thermique correct";
        }
          // 3-4 ou 7- 9 °C
        else
          if ((val >= 3 && val < 4) || (val > 7 && val <= 9)){
            valueDiv.style.color = "#39C12";    // orange
        }    
        else
        {
          // <3 ou >9 °C
            valueDiv.style.color = "#ED003F";    //rouge
        }
    };

    // Initialisation immédiate
    jeedom.cmd.update['#id#']({
        display_value: '#value#',
    });
</script>

Merci pour votre aide et vos explications

[537719]

Bonjour,

@naif

var textDiv = document.getElementByld('hydroText');

Je pense qu’il y a une erreur (facilement visible en italique dans ton post, moins en écriture normale) : la fonction à appeler est document.getElementById, avec un i majuscule et non un L minusucle.

[Aurelien]

Salut,

A priori tout ce que tu souhaites faire est possible depuis un widget personnalisé du core sans avoir à passer par un widget code.

Un exemple parmi tant d’autres :

Changer la couleur de la police en fonction de la valeur

Salut, Via l’outil Widgets du core, en créant un widget multistate pour commandes info numérique avec 2 tests : Test : #value# < 18 → Résultat : <span class="cmdName">#name_display# </span> <strong style="color:red;">#value# #unite#</strong> Test : true → Résultat : <span class="cmdName">#name_display# </span> <strong>#value# #unite#</strong> Pas testé mais dans l’idée ça doit faire la blague. Le 1er test affichera la valeur en rouge si elle est inférieure à 18 dans l’esprit du widget line …

[naif]

@537719

Je pense qu’il y a une erreur

rectifié mais cela ne fonctionne pas, les couleurs ne posent aucun problème ce que je souhaite c’est affiché le message « Echange thermique correct » que j’ai mis en commentaire ne sachant absolument pas comment faire tout en conservant l’ensemble du code

[Aurelien]

<div id="cmd#id#" style="text-align:center; padding:8px;">
    
    <!-- Nom -->
    <div class="ct-name" style="font-size:14px; font-weight:bold;">
        #name#
    </div>

    <!-- Valeur -->
    <div class="ct-value" style="font-size:22px; font-weight:bold;">
        #value# °C
    </div>

    <!-- Texte -->
    <div class="ct-text" style="font-size:14px; font-weight:bold;">
    </div>

</div>

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

        // Valeur brute
        let val = parseFloat(_options.display_value);
        
        // Sélection du widget dans le DOM
        let bloc = document.getElementById("cmd#id#");
        let valueDiv = bloc.querySelector(".ct-value");
        let textDiv = bloc.querySelector(".ct-text");

        // Mise à jour de la valeur
        valueDiv.innerHTML = val + " °C";

        // Couleur dynamique (modifie directement le style)
        // 4-7 °C
        if (val >= 4 && val <= 7){
            valueDiv.style.color = "#3ECC71";    // vert
            textDiv.style.color = "#3CCC71";
            textDiv.innerText = "Echange thermique correct";
        }
          // 3-4 ou 7- 9 °C
        else
          if ((val >= 3 && val < 4) || (val > 7 && val <= 9)){
            valueDiv.style.color = "#39C12";    // orange
        }    
        else
        {
          // <3 ou >9 °C
            valueDiv.style.color = "#ED003F";    //rouge
        }
    };

    // Initialisation immédiate
    jeedom.cmd.update['#id#']({
        display_value: '#value#',
    });
</script>

[naif]

@Aurelien
Un grand merci car outre le fait que cela fonctionne parfaitement cela m’indique pourquoi j’avais un problème: j’apprends doucement
Encore merci et bonne soirée