Conversion widget Historique pour 4.4

Utilisation du core de Jeedom Widgets
1

Bonjour,

J’utilise le widget historique suivant dont je ne retrouve pas la source originale.

image

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" 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>-->
        <span class='cmdName' style="font-weight: bold;font-size : 11px;display: inline-block;text-align: left;">#name_display#</span><br/>
	</div>
	<div class="content-sm">
		<!-- <span class="pull-right">#unite#</span> -->
     	<span style="font-weight: bold;font-size : 32px;display: inline-block;text-align: justify;" class="state">#state#</span> #unite# </span><span class="tendance"><i class="#tendance#"></i></span><br/>
		<!-- <span class="pull-right state"></span> -->
	</div>
	<div class="value #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>-->
	 <!-- Remplacement de la ligne du dessus par les 4 lignes du sdessous -->
     <span style="line-height:12px;font-size: 0.9em;font-weight: normal;color: rgb(187,187,187);display: inline-block;text-align: justify;#displayHistory#"</span>
     <span title='Min' class='tooltips'>Min : </span><span style="float:center;color: rgb(136,245,250);">#minHistoryValue# #unite#</span><br/>
     <span title='Moyenne' class='tooltips'>Moy : </span><span style="float:center;color: rgb(0,255,0);">#averageHistoryValue# #unite#</span><br/>
     <span title='Max' class='tooltips'>Max : </span><span style="float:center;color: rgb(255,0,0);">#maxHistoryValue# #unite#</span><br/>
		</div>
	</div>
	<script>
		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>
</div>

En 4.4, le widget semble fonctionner (aucune erreur dans la console) mais j’ai un design ou j’ai 15 équipements utilisant ce widget (pour la température et l’humidité, soit 30 commandes au total) et le chargement du design est très long (presque 1 minute). Au même moment, je remarque que la CPU explose à 150/200% avec du MariaDB et ceci tant que le design reste ouvert. J’ai tenté de créer un nouveau design et dès que je mets deux équipements avec ce widget, j’ai le même comportement.

J’ai aussi ceci en Personnalisation Avancée pour ces équipements, mais même en la désactivant, ca ne change rien.

/* 4.4.2 - Modification de l'alignement sur les thermomètres pour avoir la tendance alignée et pas en dessous */
div.cmd-widget[data-eqlogic_id="134746"] .content-sm, /* Monitoring Garage */
div.cmd-widget[data-eqlogic_id="134748"] .content-sm, /* Cuisine */
div.cmd-widget[data-eqlogic_id="134745"] .content-sm, /* Cuisine Test */
div.cmd-widget[data-eqlogic_id="134750"] .content-sm, /* Salle à Manger */
div.cmd-widget[data-eqlogic_id="134754"] .content-sm, /* Bureau */
div.cmd-widget[data-eqlogic_id="134743"] .content-sm, /* WC */
div.cmd-widget[data-eqlogic_id="134749"] .content-sm, /* Arrière Cuisine */
div.cmd-widget[data-eqlogic_id="134757"] .content-sm, /* Chambre d'amis */
div.cmd-widget[data-eqlogic_id="134744"] .content-sm, /* Chambre Parents */
div.cmd-widget[data-eqlogic_id="134755"] .content-sm, /* Chambre 1*/
div.cmd-widget[data-eqlogic_id="134753"] .content-sm, /* Chambre 2 */
div.cmd-widget[data-eqlogic_id="134751"] .content-sm, /* Dressing */
div.cmd-widget[data-eqlogic_id="134740"] .content-sm, /* Salle de bain Parents */
div.cmd-widget[data-eqlogic_id="134756"] .content-sm, /* Salle de bain Enfants */
div.cmd-widget[data-eqlogic_id="134758"] .content-sm, /* Jardin Abri */
div.cmd-widget[data-eqlogic_id="245267"] .content-sm  /* Jardin Arbre*/
{
    flex-direction: row;
}

/* Couleurs des icones pour les statistiques => Tendance avec le widget cmd.info.numeric.historique.html */
span.tendance > i.fa-arrow-up {
  color: red;
}
span.tendance > i.fa-minus {
  color: green;
}
span.tendance > i.fa-arrow-down {
  color: rgb(136,245,250);
}

/* Couleurs des icones pour les statistiques => Tendance avec le widget par défaut */
div.cmdStats > i.fa-arrow-up {
  color: red;
}
div.cmdStats > i.fa-minus {
  color: green;
}
div.cmdStats > i.fa-arrow-down {
  color: rgb(136,245,250);
}

Il doit probablement nécessiter des ajustements pour la 4.4 mais je ne sais pas lesquels. Si un pro du widget passe par là, je suis preneur :innocent:

Merci.

2

En repartant de la doc et du widget cmd.info.numeric.tile.html du core, j’arrive à ceci qui me semble plus conforme à la 4.4 même si je n’ai pas encore trouvé comment centrer l’icone de la tendance en hauteur et mettre un saut de ligne avant nom de la commande Humidité.

image

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" 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" style="font-weight: bold;font-size : 11px;display: inline-block;text-align: left;">#name_display#</div>
  </div>
  <div class="content">
    <div>
      <span class="value state" style="font-size : 32px;"></span> <span class="unit"></span> <span class="tendance"><i class="#tendance#"></i></span>
    </div>
  </div>
  <div class="cmdStats #hide_history#">
    <!-- <span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}" class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i> -->
    <!-- <span style="line-height:12px;font-size: 0.9em;font-weight: normal;color: rgb(187,187,187);display: inline-block;text-align: justify;#displayHistory#"</span>-->
    <span title="{{Minimum}}" class="tooltips">Min : </span><span style="float:center;color: rgb(136,245,250);">#minHistoryValue# #unite#</span><br/>
    <span title="{{Moyenne}}" class="tooltips">Moy : </span><span style="float:center;color: rgb(0,255,0);">#averageHistoryValue# #unite#</span><br/>
    <span title="{{Maximum}}" class="tooltips">Max : </span><span style="float:center;color: rgb(255,0,0);">#maxHistoryValue# #unite#</span><br/>
  </div>
  <script>
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
        if ('#time#' == 'duration' || '#time#' == 'date') {
          jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
        }

        if (is_numeric(_options.value)) {
          cmd.querySelector('.value').innerHTML = _options.display_value
          cmd.querySelector('.unit').innerHTML = _options.unit
        } else {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
        }

        if (_options.alertLevel == 'warning') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
        } else if (_options.alertLevel == 'danger') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
  </script>
</div>

Et en conservant ceci en Personnalisation avancée :

/* Couleurs des icones pour les statistiques => Tendance avec le widget cmd.info.numeric.historique.html */
span.tendance > i.fa-arrow-up {
  color: red;
}
span.tendance > i.fa-minus {
  color: green;
}
span.tendance > i.fa-arrow-down {
  color: rgb(136,245,250);
}

Néanmoins, ca ne règle pas mon problème de temps de chargement de mon Design.

J’ai testé en n’affichant plus les tendances pour les équipements de ce Design, et là, plus de souci, le chargement est instantané.

Le temps de chargement semble donc provenir de l’affichage des tendances.

3

J’ai finalement réussi à centrer l’icone en hauteur.

image

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" 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" style="font-weight: bold;font-size : 11px;display: inline-block;text-align: left;">#name_display#</div>
  </div>
  <div class="content">
    <div style="display: flex;">
      <span class="value state" style="font-size : 32px;"></span> <span class="unit"></span>  <span class="tendance" style="align-self: center;margin-left: 5px;"><i class="#tendance#"></i></span>
    </div>
  </div>
  <div class="cmdStats #hide_history#">
    <!-- <span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}" class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i> -->
    <!-- <span style="line-height:12px;font-size: 0.9em;font-weight: normal;color: rgb(187,187,187);display: inline-block;text-align: justify;#displayHistory#"</span>-->
    <span title="{{Minimum}}" class="tooltips">Min : </span><span style="float:center;color: rgb(136,245,250);">#minHistoryValue# #unite#</span><br/>
    <span title="{{Moyenne}}" class="tooltips">Moy : </span><span style="float:center;color: rgb(0,255,0);">#averageHistoryValue# #unite#</span><br/>
    <span title="{{Maximum}}" class="tooltips">Max : </span><span style="float:center;color: rgb(255,0,0);">#maxHistoryValue# #unite#</span><br/><br/>
  </div>
  <script>
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)

        if (is_numeric(_options.value)) {
          cmd.querySelector('.value').innerHTML = _options.display_value
          cmd.querySelector('.unit').innerHTML = _options.unit
        } else {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
        }

        if (_options.alertLevel == 'warning') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
        } else if (_options.alertLevel == 'danger') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
  </script>
</div>

Reste le problème des tendances, mais je ouvrir un autre post pour ca.

4

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.