Adaptation widget v4 / mise en forme script #state#

Bonjour,

Malgré les quelques explications présentes dans le forum et community, je n’arrive pas a adapter un vieux widget qui mettait en forme une date au format HHMM en HHhMM.

Je post le widget d’origine, et si quelqu’un est en capacité d’expliquer cette subtilité
J’ai suivi le post de @Nemeraud ici Informations codage widget mais ne répond pas au besoin (ou alors j’ai rien compris).

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="light" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name_display#</span>
        <span style="font-size: 14px;font-weight: bold;" id="chaineComplete#id#"></span>
    </center>
</div>

  <script>
    var heure;
    var minute;
        var formatNum;
    var chaineHeure;
    var chaineMinute;
    var chaineComplete;

    // Calcul valeur heure
    heure = #state# / 100;
    formatNum = Math.floor(heure);
    // Formatage de la chaine de caractères heure
        chaineHeure =  formatNum;

    // Calcul valeur minute
    minute = #state# - formatNum*100;
    formatNum = minute.toFixed(0);
    // Formatage de la chaine de caractères minute
    if (formatNum >= 10) {
        chaineMinute =  formatNum;
        }
    else {
                chaineMinute =  "0" + formatNum;
        }

    // Calcul de la chaine complète
        chaineComplete = chaineHeure + "h" +chaineMinute;
        $('#chaineComplete#id#').text(chaineComplete);

                jeedom.cmd.update['#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#] .state').empty().append(_options.display_value);
                }
                jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

Le widget étant de base en 1.x il a subit quelques adaptations. Mais je pense que le chaineComplete#id# n’est pas très conforme et donc pose problème pour son actualisation.

Merci par avance

Merci pour le Tag @kiboost

Salut,

sujet « signetté »: je regarde ça ce soir :wink: …si personne ne l’a remis d’aplomb avant d’ici là !

1 « J'aime »

OK ça me parait pas mal comme ça:

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="light" 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>
    <span class="state value" id="chaineComplete#id#"></span>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
    var valeur = parseFloat(_options.display_value);
    var heure;
    var minute;
    var formatNum;
    var chaineHeure;
    var chaineMinute;
    var chaineComplete;

    // Calcul valeur heure
    heure = valeur / 100;
    formatNum = Math.floor(heure);
    // Formatage de la chaine de caractères heure
        chaineHeure =  formatNum;

    // Calcul valeur minute
    minute = valeur - formatNum*100;
    formatNum = minute.toFixed(0);
    // Formatage de la chaine de caractères minute
    if (formatNum >= 10) {
        chaineMinute =  formatNum;
        }
    else {
                chaineMinute =  "0" + formatNum;
        }

    // Calcul de la chaine complète
        chaineComplete = chaineHeure + "h" +chaineMinute;
        $('#chaineComplete#id#').text(chaineComplete);

        $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
       	}
        jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Tu confirmes ?

Tu ne peux pas arriver au même résultat avec un formatTime ?

Fonctionne au top, merci @Salvialf

Juste pour comprendre, la ligne

<span class="state value" id="chaineComplete#id#"></span>

permet de dire que le ‹ id › n’est plus #state# mais est remplacé par chaineComplete#id#. C’est bien cela ?

Autre point, faut’il garder data-template=« light » dans la div class. Si oui, comment différencier l’intérêt des plusieurs type de templates. Je comprend la nécessité pour les class muliline et multistate, mais pour default, line, shutter…?

Je viens d’essayer dans mon scénario.
Je manipule la sortie time dans une variable avec des calculs (ajout de temps).Lors de l’opération de calcul le formattime ne peux être appliqué sinon j’ai un résultat qui ressemble a ça 9h53+1+3 au lieu de 957.
Et après je n’arrive pas a formater la variable : formatTime(variable(FinMinuterieSS),0)) ne fonctionne pas dans un bloc commande (le 957 dans l’exemple plus haut).
Mais comme dans jeedom il y a multitude de capacité de faire les choses, je n’ai probablement pas pris la bonne démarche dans le scénario.

Encore merci pour le temps que tu as consacré à l’adaptation de ce widget.

En fait j’utilises les classes intégrées à jeedom pour limiter les inline-style et obtenir le même résultat:

style="font-size: 14px;font-weight: bold;"

Non aucun besoin, il faudrait qu’il y ait un template intégré au core pour ce widget. J’ai hésité à l’enlever mais il ne gène pas et j’essaye de toucher au minimum au code quand ce n’est pas un widget que j’utilise personnellement.

Pour le formatTime j’ai fait un test rapide à partir d’une variable scénario et d’une commande d’un virtuel:

A voir ce que j’ai omis par rapport à ta situation ?!

Merci du retour.

Pour le formatTime sur la commande je cherchait a le faire dans le scénario.

Merci

Faudrait un motivé pour faire un plugin de synchro des widgets custom (spécifier le git de chaque widget et le plugin fait le taf :slight_smile:)

En cherchant à un peu à mieux appréhender les optimisations et changements des widgets en v4, je sèche sur la class data-template.

A ce jour il y a tous ces types de data-template :

  • « tile »
  • « tmpliconline »
  • « button »
  • « default »
  • « shutter »
  • « multiline »
  • « tmplmultistateline »
  • « compass »
  • « light »
  • « tile »
  • « binaryDefault »
  • « error »
  • « horizontal »
  • « alert »
  • « badge »
  • « tmplicon »
  • « rain »
  • « btnAlert »
  • « vertical »
  • « line »
  • « HygroThermographe »
  • « timeShutter »
  • « value »

Je me disais que comme la définition des content-sm/xs/lg, cette class serait définit dans les fichiers du core comme le coreWidgets.css pour le content cité plus haut.

Mais ne trouvant aucune occurrence, pouvez vous indiquer comment les options seront proposées et la référence de ces options en fonction du data-template ?

Seule information trouvée sur cette class, référence au blog :

J’ai pas cherché en base, mais je ne vois plus que là.

Merci par avance de l’éclaircissement sur le fonctionnement de cette class @Loic @kiboost afin que tous l’utilise a bon escient. On peut se poser la question de l’usage lors d’un customTemplate.

Cordialement

Pas compris, tu veux savoir quoi ?

À ma connaissance il n’y a pas de class data-template, ni php ni js ni css

Edit: ok j’ai relu les msg plus haut, le data-template n’est pas une class mais un attribut. Il permet de cibler les css sur un type/sub/template de widget, afin de ne mettre aucun inline style css sur les widgets.

Ils sont dans corewidget.css. Tous ne sont pas forcément utilisés mais pour normes ils sont tous déclarer donc si besoin on tape le css et tout bouge sans rien toucher d’autre.

Pour des widgets custom si vous reprenez les meme type/sub/template vous risquez d’y voir appliquer un css du core. Ce qui peut être souhaité … ou pas.

Je parle de ca :
/var/www/html/core/template/mobile/cmd.action.slider.value.html:<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-template="value" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#">

Dans le div il est définit le data-template. Je cherchais donc a comprendre comment il est interprété par Jeedom afin d’en faire bon usage. Je cherchais donc dans le core si je trouvais quelque chose pour mieux comprendre mais rien trouvé

d’ou ma question

PS : et oui désolé pour l’usage du terme class abusif dans ce cas :slight_smile:

Les templates correspondent aux widgets core, ils servent de base pour créer ses widgets perso avec l’outil en V4. Inutile de les utiliser avec des widgets perso (« custom » en V4).

Par contre il est possible de créer un template qui fonctionnera avec l’outil widget mais c’est encore trop limité à mon avis comparé aux widgets perso

Edit: OK j’avais pas capté ça je croyais que tu parlais des template pour générer des widgets :zipper_mouth_face:

@Salvialf
Je me demandais justement si en customTemplate il était possible de bénéficier des options proposées.

Comme toi je n’utilise pas l’outil widget trop light pour le moment. Mais j’ai souvenir qu’il était possible d’avoir des options widh size par exemple sur certains data-template.
image

En voulant mieux comprendre ces templates, j’avais espoir de pouvoir utiliser les options ci-dessus.

Mais si je comprend bien, cela ne sert que lors de la création d’un widget via l’outil du core. Donc d’aucune utilité pour nos cutomTemplate.

Merci c’est ok, tout compris.

Merci je n’avais pas vu l’édition de ta réponse.

div.cmd-widget[data-type="action"][data-subtype="other"][data-template="default"] {
  display: inline;
  margin-right: 2px;
}
div.cmd-widget[data-type="action"][data-subtype="other"][data-template="tmpliconline"] .iconCmdLine {
  font-size: 1.2em;
}
div.cmd-widget[data-type="action"][data-subtype="slider"][data-template="button"] .buttons {
  width: 120px;
}
div.cmd-widget[data-type="action"][data-subtype="slider"][data-template="button"] .content-sm {
  vertical-align: top !important;
  padding-top: 2px;
}
div.cmd-widget[data-type="action"][data-subtype="message"][data-template="default"] {
  overflow: hidden;
}
div.cmd-widget[data-type="action"][data-subtype="message"][data-template="default"] .message {
  margin: 5px 0 !important;
  resize: none !important;
}

div.cmd-widget[data-type="info"][data-subtype="string"][data-template="error"],
div.cmd-widget[data-type="info"][data-subtype="binary"][data-template="tmpliconline"],
div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="line"],
div.cmd-widget[data-type="info"][data-subtype="string"][data-template="default"] {
  display: block;
}
div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="tile"],
div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="tmplmultistate"] {
  min-width: 90px;