Afficher une valeur info numerique en html dans un design

[Steph13]

Bonjour à tou(te)s,

J’essaie en vain de comprendre comment afficher en direct une info temperature directement en html dans mon design.

J’ai lu pas mal de post mais je tourne en rond.
Je teste avec le plugin HtmlDisplay mais je n’y arrive pas.
Il me manque des infos.

Je suis parti du widget le plus simple comme préconisé par @aija17orange :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm ">
    <span class="iconCmd"></span>
  </div>
  <template></template>
  <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#] .iconCmd').empty().append(_options.display_value+' #unite#')
    });
    jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
  </script>
</div>

L’id de mon info est #41#
Je butte sur le code js
Je ne sais pas quel(le)s #id# il faut changer et surtout s’il faut les changer par #41# ou 41
Auriez-vous un post à suivre, que je n’ai pas trouvé, afin de comprendre la logique ?
Je vous remercie par avance.

[Bison]

Salut,

Pas sur de bien comprendre ton besoin.

Ajouter une commande dans un design, tout simplement, ne permet pas de faire ce que tu veux ?

[Steph13]

Oui, c’est exact mais j’aimerais me faire mon propre design html/css et apprendre par la même occasion certaines choses

J’ai modifié mon 1er message car les balises étaient erronées.

[Phpvarious]

Bonjour,

Je vais répondre a ta question, mais tu es sur la mauvaise voie :

@Steph13

Je ne sais pas quel(le)s #id# il faut changer et surtout s’il faut les changer par #41# ou 41

Tous les #id# sont a remplacer par 41

Voici ce qu’il va se passer avec ton code :

• A l’initialisation : Tout les tag (#Name_display#, #state#, #unite# …) ne seront pas remplacés, car c’est le core qui est censé faire ce job. Tu auras donc un affichage très bizarre.
• c’est ensuite, lorsque la commande sera rafraichi (on ou off par ex), que les tag (#state#…) seront remplacé par le core.

---

Pour pouvoir insérer une commande et tout ce qui va bien avec (tag, script…) dans une page html, il faut simplement utiliser les fonctions du core.
Et pour ton cas c’est la fonction jeedom.cmd.toHtml, celle-ci renvoie le code html (script inclus) de la commande en question.

Son utilisation :

Avant tout dans ton code, il faut insérer un noeud (DOM) pour pouvoir avoir un sélecteur et ainsi insérer le contenu html dedans :

<div id="mon-contenu"></div>

Ensuite utilisation de la fonction du core :

  <script>
    // on verifie avant tout que le selecteur (mon-contenu) est bien existant dans le DOM.
    // et si existant, il sera consigné dans la variable 'cmd'.
    if (is_object(cmd = document.getElementById("mon-contenu"))) { 
      jeedom.cmd.toHtml({
        id: 41, // Id de la commande
        version: 'dashboard', // version du template (dashboard ou mobile)
        global: false,
        noDisplayError: true,
        success:  function(data) { // si la fonction réussi, 'data' contiendra le code html
          var html = domUtils.parseHTML(data.html).childNodes[0]
          cmd.empty().appendChild(html) // on insère le résultat dans le selecteur 'cmd' (mon-contenu)
        }
      })
    }
  </script>

[Steph13]

@Phpvarious

Merci pour la réponse c’est exactement ce que je cherchais.
Et encore merci pour les commentaires dans le script, c’est très précieux.
Effectivement je n’étais pas sur la bonne voie.

J’ai vu qu’il existait une doc pour toutes les commandes du core ( API Documentation) mais pas facile pour moi de m’y retrouver.

Je vais essayer de trouver un site ou un tuto pour en apprendre un peu plus.