Utiliser le widget RAIN à ma sauce

[sebforum29]

bonjour à tous.
je trouve le Widget « Rain » du core de Jeedom V4 excellent (avec les vagues qui bougent)

j’aimerai qu’ils soit adapté à mon usage à savoir que la cuve soit vide à 0 et entièrement pleine (niveau d’eau entièrement en haut) à 2050

pouvez vous m’aider : voici le code html du Widget Rain :

merci

<div class="cmd cmd-widget widget-rain #history#" data-type="info" data-subtype="numeric" data-template="rain" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="widget-rain-main">
    <div class="widget-rain-container">
      <div class="widget-rain-title">
        <span class="#hide_name#">#name_display#</span><br/>
        <span class="value"></span>
        <span class="unite">#unite#</span>
      </div>
    </div>
    <div class="widget-rain-water" style=""></div>
  </div>
  <div class="cmdStats #hide_history#">
    <div class="col-xs-12 center-block">
      <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      let cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'%')
      cmd.find('.value').empty().append(_options.display_value);
      cmd.find('.widget-rain-water').delay(0).animate({height:(_options.display_value/50)+"pt"},100)
    }
    if('#scale#' != '') {
      let el = $('.cmd[data-cmd_id=#id#] .widget-rain-main');
      el.width(el.width() * '#scale#');
      el.height(el.height() * '#scale#')
    }
    if('#animate#' == '0') {
      $('.cmd[data-cmd_id=#id#] .widget-rain-water').css('animation','none')
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>```

[Salvialf]

Salut,

Ça ne fonctionne pas en définissant le min/max sur la commande?

Y’a aussi une histoire de paramètre showRange

jeedom/core/blob/alpha/docs/fr_FR/widgets.md#rain

À voir je n’utilise pas et pas accès au PC tout de suite

[sebforum29]

oui tout a fait , je peux mettre dans la commande min:0 et max : 2050 mais les vaguelettes s’arrêtent à peu pret au milieu, je voulais que ça aille tout en haut (haut dessus de l’écriture)

[naboleo]

@jpty avais une version que j’aimais bien jusqu’à il y a quelques jours sur github… Mais il a fait du nettoyage

[jpty]

Pour le widget rain, je n’ai fait que ce PR pour modifier le widget en 4.0

Update cmd.info.numeric.rain.html

suivi de celui là suite à demande d’optimisation:

Optimisation

Ces PR n’ont pas été intégrés dans la version 4.0

@kiboost a fait différemment en 4.1

[naboleo]

Oui,
Personnellement j’utilisais la version « patchée » dispo ici https://github.com/jpty/core/raw/patch-2/core/template/dashboard/cmd.info.numeric.rain.html
Malheureusement c’est en 404 depuis quelques jours, d’où ma supposition de « ménage »

[jpty]

Ça a été un gros ménage. J’ai viré mon fork de Jeedom, il y a quelques jours.

Voici le code que j’avais publié. Il utilise des classes du core 4.0. Il ne fonctionnera pas en 4.1 sans modif.

<div class="cmd cmd-widget widget-rain #history#" data-type="info" data-subtype="numeric" data-template="rainJpty" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="widget-rain-main">
    <div class="widget-rain-container">
      <div class="widget-rain-title">
        <span class="#hide_name#" style="z-index: 2">#name_display#</span><br/>
        <span class="value"></span>
        <span class="unite">#unite#</span>
        <span class="plage"></span>
      </div>
    </div>
    <div class="widget-rain-water" style=""></div>
  </div>
  <div class="cmdStats #hide_history#">
    <div class="col-xs-12 center-block">
      <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
  </div>
  <script>
    var scale#id# = ('#scale#' !='#'+'scale#') ? parseFloat('#scale#') : 1;
    var cmd#id# = $('.cmd[data-cmd_id=#id#]');
    cmd#id#.find('.widget-rain-water').css('max-height',(45*scale#id#)+'px')
    if(scale#id# != 1) {
      let el = cmd#id#.find('.widget-rain-main');
      el.width(el.width() * scale#id#);
      el.height(el.height() * scale#id#)
    }
    if ('#animate#' == '0') {
      cmd#id#.find('.widget-rain-water').css('animation','none')
    }

    jeedom.cmd.update['#id#'] = function(_options){
      var value = parseFloat(_options.display_value);
      var valMini,bMini;
      if('#valMini#' !='#'+'valMini#') valMini = bMini = parseFloat('#valMini#');
      else { valMini = 0; bMini = '-' }
      var valMaxi,bMaxi;
      if('#valMaxi#' !='#'+'valMaxi#') valMaxi =bMaxi = parseFloat('#valMaxi#');
      else { valMaxi = 20; bMaxi = '-' }
      var scaledValue = (value-valMini)*35*scale#id#/(valMaxi-valMini);
      cmd#id#.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+value+'#unite#')
      cmd#id#.find('.value').empty().append(value);
      cmd#id#.find('.plage').empty().append('('+bMini+'/'+bMaxi+')');
      if(bMini != '-' || bMaxi != '-') cmd#id#.find('.plage').empty().append('('+bMini+'/'+bMaxi+')');
      else cmd#id#.find('.plage').empty();
      cmd#id#.find('.widget-rain-water').delay(0).animate({height:(scaledValue)+"pt"},1000)
      if(value > valMaxi) {
        cmd#id#.find('.value').css('color','var(--al-danger-color)');
      }
      else if(value < valMini) {
        cmd#id#.find('.value').css('color','var(--al-info-color)');
      }
      else {
        cmd#id#.find('.value').css('color','var(--link-color)');
      }
    }

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

Les paramètres optionnels de ce widget sont :
scale et animate qui existaient
J’ai ajouté les paramètres optionnels du widget valMini et valMaxi pour avoir des limites à l’animation.
Voir la description de la modif dans le PR.

[jpty]

@Salvialf

Ça ne fonctionne pas en définissant le min/max sur la commande?

Non en standard l’anim ne varie que de 0 à 17 mm d’où le PR.

[Salvialf]

Merci @jpty

Et le paramètre showRange qu’est marqué dans la doc ça fonctionne ?

showRange : Affiche les valeurs min/max de la commande.

car je ne vois pas le tag dans le code du widget du core ?!

[mich0111]

Par curiosité, pourquoi ne fonctionnera-t-il pas en 4.1?

[jpty]

showRange c’est en 4.1

[jpty]

Parce que j’ai pas essayé et que le widget rain du core a été modifié différemment et que je ne sais pas si ma modif sera encore nécessaire.

[mich0111]

Ok, je pensais qu’il y avait des classes incompatibles entre les 2 versions.
Ça m’inquiètais un peu.
Bonne soirée

[jpty]

J’ai testé le widget 4.1 dans la 4.0 quand kiboost faisait les modifs et là, ça ne fonctionnait pas.

Avec votre accès dev, la discussion est là: https://community.jeedom.com/t/pr-pour-widget-rain/16854?u=jpty

[mich0111]

Merci, je vais voir

[naboleo]

@jpty

Voici le code que j’avais publié. Il utilise des classes du core 4.0. Il ne fonctionnera pas en 4.1 sans modif.

J’utilisais cette version en 4.1 et j’ai pas noté d’anomalie… D’un autre côté j’ai des quotes qui sont bases, voire négatives en ce moment donc ça n’exploite pas toute la plage du widget

[jpty]

C’est la cata et on n’est même pas au milieu du printemps.
Ou les capteurs de niveau sont HS. Je préfère cette explication.

[naboleo]

HS : Certainement pas mais peut-être un mauvais calibrage

C’est quand même pas la joie

[jpty]

J’ai parcouru quelques stations sur la Loire sur vigicrues. Je n’ai pas trouvé de telles variations.
Il faudrait voir ce que donnent les stations de part et d’autres de celle que vous relevez.

[naboleo]

J’ai pas pensé à vérifié les stations alentours…
Donc les valeurs ne sont pas si aberrantes :
Amont

Ma station

Aval

C’est donc la combinaison des affluents et de la régulation