Adaptation du widget Solid Gauge à Jeedom 4.4

Bonjour,

Un code pour widget info numérique de type Solid-Gauge avait été donné ici pour Jeedom 4.3.11 :

Merci @Spine :pray: :+1:

image

A partir Jeedom 4.4, une légère adaptation du code du widget est nécessaire (/!\ ne fonctionne que sur dashboard / vue /!\ ) :

<!-- https://community.jeedom.com/t/partage-solid-gauge-en-4-1/43922/22
Options : tickinterval / min / max / color1 / color2 / color3 / time
- color en rgb
- time égal à duration sinon rien
// Pour thème Jeedom non-Legacy -->
<script src="core/php/getJS.php?file=3rdparty/highstock/modules/solid-gauge.js"></script>
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" title="Date de valeur : #valueDate#<br/>Date de collecte : #collectDate#" >
<div class="title #hide_name#">
  <span class="cmdName">#name_display#</span>
</div>
<div class="content-sm">
  <div class="gaugearnog23 cursor #history#" data-cmd_id="#id#"></div>
</div>
<div class="value">
  <span class="timeCmd label label-default #history#" data-type="info"></span>
</div>
<div class="cmdStats #hide_history#">
  <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>
<style>
  .gaugearnog23 {
    width: 105px;
    height: 105px;
  }
  .gaugearnog23 .highcharts-pane {
    fill: var(--el-defaultColor);
  }
  body[data-theme="core2019_Dark"] .gaugearnog23 .highcharts-tick { 
    stroke: rgb(38, 38, 38);
  }
  body[data-theme="core2019_Light"] .gaugearnog23 .highcharts-tick { 
    stroke: rgb(249, 249, 250);
  }
  .gaugearnog23 .highcharts-container .highcharts-axis-line {
    stroke: transparent;
  }
  .gaugearnog23 .highcharts-yaxis-grid .highcharts-grid-line { 
    stroke: none !important;
  }
</style>
<script>
  var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25;
  var min = is_numeric('#min#') ? parseFloat('#min#') : 0;
  var max = is_numeric('#max#') ? parseFloat('#max#') : 100;                                                                                                      
  var color1 = ('#color1#' != '#'+'color1#') ? '#color1#' : 'rgb(0, 255, 0)';
  var color2 = ('#color2#' != '#'+'color2#') ? '#color2#' : 'rgb(255, 255, 0)';
  var color3 = ('#color3#' != '#'+'color3#') ? '#color3#' : 'rgb(255, 0, 0)';
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_uid=#uid#]');
    $('.cmd[data-cmd_id=#id#]').attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').highcharts().series[0].points[0].update(_options.display_value)
	if('#time#' == 'duration'){
	  jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
	}
    else {
      cmd.find('.timeCmd').parent().remove();
    }
  }
  if (is_numeric('#state#')) {
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').empty().highcharts({
      chart: {
        style: {
          fontFamily: 'Roboto'
        },
        type: 'solidgauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        backgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height: 106,
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0,
        spacingBottom: 0,
        borderWidth : 0
      },
      title: null,
      pane: {
        center: ['50%', '50%'],
        size: 85,
        startAngle: 180,
        endAngle: 540,
        background: {
          innerRadius: '70%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0,
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.3, color1],
          [0.6, color2],
          [0.9, color3]
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickInterval: tickInterval,
        tickWidth: 4,
        tickLength: 15,
        tickPosition: 'inside',
        labels : {enabled: false},
        min: min,
        max: max,
        zIndex: 6,
        title: {
          text: ''
        }
      },
      labels : {enabled: false},
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 9,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      credits: {
        enabled: false
      },
      exporting : {
        enabled: false
      },
      series: [{
        name: '',
        data: [Math.round(parseFloat('#state#') * 10) / 10],
        radius: '100%',
        innerRadius: '70%',
        dataLabels: {
          y: -22,
    	  format: '<span style="color: var(--link-color); font-size: 24px;">{y}</span> <span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
        },
      }]
    })
  } else {
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').append('<center><span class="label label-danger">#state#</span></center>')
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
1 « J'aime »

Bonjour à tous

il y a un doc qqpart qui référence les changements sur un code widget avec la nouvelle version ?

merci

Bonjour,

Rien trouvé et j’ai cherché pourtant.

Je n’y connais rien en .js. Je me suis basé sur un sujet de la commu + essais/erreurs sur le site de Highchart.

Là je me casse les dents pour utiliser dans un autre widget flatpickr au lieu de datepicker.

1 « J'aime »

Bonjour,

Merci pour l’adaptation du widget.
C’est mieux que ce que j’avais réussi à faire, mais il ne se réaffiche pas lors d’un f5 sur les designs. :cry:

Ça s’affiche de nouveau quand la valeur est updatée.
Mais il y a alors une erreur js qui s’affiche …

@Madcow
Merci beaucoup pour ce partage ! :+1: :+1: :+1:
Certains de mes widgets jauge étaient basés sur ce widget custom, et ils revivent désormais sur mes designs !

Encore merci !

[EDIT]

Zut… fausse joie, c’est pareil pour moi… :worried:

Bonjour,

je pense que c’est lié au chargement de la lib qui n’est pas encore chargée lors d’un F5.

en englobant la totalité du contenu du script (<script>....</script>) dans

<script>
  $(document).ready(function () { 
    var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25;
    ...
  })
</script> 

peut sans doute résoudre le soucis…

Salut @Madcow,

Merci pour le retour, la suite ici :

1 « J'aime »

Bonjour,

Merci pour l’idée, mais je n’arrive pas à tester votre proposition sans erreur JS, je ne trouve pas la bonne syntaxe pour intégrer une balise <script> dans une balise <script>.
Cependant la lib est bien chargée au F5 :
image
Et même avec un setTimeout() important sur le JS Highcharts, ça ne fonctionne pas.

Sur le design au f5, le js n’est pas chargé:
image

On a l’impression qu’il ne manque pas grand chose pour que ca tombe en marche.

D’après les outils dev il est bien chargé justement même si ça provoque l’erreur missing, si on supprime la ligne pour charger la lib, il disparait instantanément des sources…

Au moment de l’exécution, la lib n’est pas chargée d’où l’erreur.
Après elle est chargée mais l’affichage du highchart n’est plus appelé.

1 « J'aime »

Modification L42 et 147 :

<!-- https://community.jeedom.com/t/partage-solid-gauge-en-4-1/43922/22
Options : tickinterval / min / max / color1 / color2 / color3 / time
- color en rgb
- time égal à duration sinon rien
// Pour thème Jeedom non-Legacy -->
<script src="core/php/getJS.php?file=3rdparty/highstock/modules/solid-gauge.js"></script>
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" title="Date de valeur : #valueDate#<br/>Date de collecte : #collectDate#" >
<div class="title #hide_name#">
  <span class="cmdName">#name_display#</span>
</div>
<div class="content-sm">
  <div class="gaugearnog23 cursor #history#" data-cmd_id="#id#"></div>
</div>
<div class="value">
  <span class="timeCmd label label-default #history#" data-type="info"></span>
</div>
<div class="cmdStats #hide_history#">
  <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>
<style>
  .gaugearnog23 {
    width: 105px;
    height: 105px;
  }
  .gaugearnog23 .highcharts-pane {
    fill: var(--el-defaultColor);
  }
  body[data-theme="core2019_Dark"] .gaugearnog23 .highcharts-tick { 
    stroke: rgb(38, 38, 38);
  }
  body[data-theme="core2019_Light"] .gaugearnog23 .highcharts-tick { 
    stroke: rgb(249, 249, 250);
  }
  .gaugearnog23 .highcharts-container .highcharts-axis-line {
    stroke: transparent;
  }
  .gaugearnog23 .highcharts-yaxis-grid .highcharts-grid-line { 
    stroke: none !important;
  }
</style>
<script>
  $(document).ready(function () { // ADD
  var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25;
  var min = is_numeric('#min#') ? parseFloat('#min#') : 0;
  var max = is_numeric('#max#') ? parseFloat('#max#') : 100;                                                                                                      
  var color1 = ('#color1#' != '#'+'color1#') ? '#color1#' : 'rgb(0, 255, 0)';
  var color2 = ('#color2#' != '#'+'color2#') ? '#color2#' : 'rgb(255, 255, 0)';
  var color3 = ('#color3#' != '#'+'color3#') ? '#color3#' : 'rgb(255, 0, 0)';
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_uid=#uid#]');
    $('.cmd[data-cmd_id=#id#]').attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').highcharts().series[0].points[0].update(_options.display_value)
	if('#time#' == 'duration'){
	  jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
	}
    else {
      cmd.find('.timeCmd').parent().remove();
    }
  }
  if (is_numeric('#state#')) {
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').empty().highcharts({
      chart: {
        style: {
          fontFamily: 'Roboto'
        },
        type: 'solidgauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        backgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height: 106,
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0,
        spacingBottom: 0,
        borderWidth : 0
      },
      title: null,
      pane: {
        center: ['50%', '50%'],
        size: 85,
        startAngle: 180,
        endAngle: 540,
        background: {
          innerRadius: '70%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0,
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.3, color1],
          [0.6, color2],
          [0.9, color3]
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickInterval: tickInterval,
        tickWidth: 4,
        tickLength: 15,
        tickPosition: 'inside',
        labels : {enabled: false},
        min: min,
        max: max,
        zIndex: 6,
        title: {
          text: ''
        }
      },
      labels : {enabled: false},
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 9,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      credits: {
        enabled: false
      },
      exporting : {
        enabled: false
      },
      series: [{
        name: '',
        data: [Math.round(parseFloat('#state#') * 10) / 10],
        radius: '100%',
        innerRadius: '70%',
        dataLabels: {
          y: -22,
    	  format: '<span style="color: var(--link-color); font-size: 24px;">{y}</span> <span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
        },
      }]
    })
  } else {
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').append('<center><span class="label label-danger">#state#</span></center>')
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  }) // ADD
</script>
</div>
6 « J'aime »

Ca marche pour moi:
image

Merci David

1 « J'aime »

Il est trop fort ce @Phpvarious, ça marche parfaitement, merci infiniment !!!

1 « J'aime »

Pour préparer l’avenir :wink:, version Full JS :

<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#">
  <!-- 
    https://community.jeedom.com/t/partage-solid-gauge-en-4-1/43922/22
      https://community.jeedom.com/t/widget-solid-gauge/124148/1
        https://community.jeedom.com/t/adaptation-du-widget-solid-gauge-a-jeedom-4-4/124125/16
    // For theme not "Legacy"
	// Full JS for Core >= 4.4
  -->  
  <div class="title #hide_name#">
    <span class="cmdName">#name_display#</span>
  </div>
  <div class="content-sm">
    <div class="gaugearnog23-#uid# #history#" data-cmd_id="#id#" id="gaugearnog23-#uid#"></div>
  </div>
  <div class="timeCmd label label-default #history#" data-type="info"></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>
  </div>
  <template>
    <div>time : duration|date (Affiche durée ou date de la valeur).</div>
    <div>tickInterval : intervalle des graduations.</div>
    <div>color1 : couleur si valeur &lt; 30%.</div>
    <div>color2 : couleur si valeur &lt;= 60%.</div>
    <div>color3 : couleur si valeur &gt; 60%.</div>
  </template>
  
  <style>
    :root {
      --color1-#uid#: rgb(0, 255, 0);
      --color2-#uid#: rgb(255, 255, 0);
      --color3-#uid#: rgb(255, 0, 0);
    }
    .gaugearnog23-#uid# { width: 105px; height: 105px; }
    .gaugearnog23-#uid# .highcharts-pane { fill: var(--el-defaultColor); }
    .gaugearnog23-#uid# .highcharts-container .highcharts-axis-line { stroke: transparent; }
    .gaugearnog23-#uid# .highcharts-yaxis-grid .highcharts-grid-line { stroke: none !important; }
    [data-theme="core2019_Dark"] .gaugearnog23-#uid# .highcharts-tick {  stroke: rgb(38, 38, 38); }
    [data-theme="core2019_Light"] .gaugearnog23-#uid# .highcharts-tick {  stroke: rgb(249, 249, 250); }
  </style>
  <script src="/3rdparty/highstock/modules/solid-gauge.js"></script>
  <script>
    if ('#color1#' != '#'+'color1#') document.documentElement.style.setProperty('--color1-#uid#', '#color1#')
    if ('#color2#' != '#'+'color2#') document.documentElement.style.setProperty('--color2-#uid#', '#color2#')
    if ('#color3#' != '#'+'color3#') document.documentElement.style.setProperty('--color3-#uid#', '#color3#')
    setTimeout(function() { //temps mort pour charger la lib
      jeedom.cmd.update['#id#'] = function(_options) {
        if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
          if (chart#uid#) chart#uid#.series[0].points[0].update(_options.value)
          else document.getElementById('gaugearnog23-#uid#').innerHTML = '<span class="label label-danger">' + _options.value + '#unite#</span>'
          cmd.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_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        if (is_numeric('#state#')) {
          document.getElementById('gaugearnog23-#uid#').empty()
          var chart#uid# = Highcharts.chart('gaugearnog23-#uid#', {
            chart: {
              style: { fontFamily: 'Roboto' },
              type: 'solidgauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              backgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false,
              height: 106,
              spacingTop: 0,
              spacingLeft: 0,
              spacingRight: 0,
              spacingBottom: 0,
              borderWidth : 0
            },
            title: null,
            pane: {
              center: ['50%', '50%'],
              size: 85,
              startAngle: 180,
              endAngle: 540,
              background: {
                innerRadius: '70%',
                outerRadius: '100%',
                shape: 'arc',
                borderWidth: 0,
              }
            },
            tooltip: { enabled: false },
            // the value axis
            yAxis: {
              stops: [
                [0.3, 'var(--color1-#uid#)'],
                [0.6, 'var(--color2-#uid#)'],
                [0.9, 'var(--color3-#uid#)']
              ],
              lineWidth: 0,
              minorTickInterval: null,
              tickInterval: (is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25),
              tickWidth: 4,
              tickLength: 15,
              tickPosition: 'inside',
              labels : {enabled: false},
              min: parseFloat('#minValue#'),
              max: parseFloat('#maxValue#'),
              zIndex: 6,
              title: { text: '' }
            },
            labels : {enabled: false},
            plotOptions: {
              solidgauge: {
                dataLabels: {
                  y: 9,
                  borderWidth: 0,
                  useHTML: true
                }
              }
            },
            credits: { enabled: false },
            exporting : { enabled: false },
            series: [{
              name: '',
              data: [Math.round(parseFloat('#state#') * 10) / 10],
              radius: '100%',
              innerRadius: '70%',
              dataLabels: {
                y: -22,
    	        format: '<span style="color: var(--link-color); font-size: 24px;">{y}</span> <span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
              },
            }]
          })
        } else document.getElementById('gaugearnog23-#uid#').innerHTML = '<span class="label label-danger">#state#</span>'
      } 
      jeedom.cmd.update['#id#']({value:'#value#', display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
    }, 250)
  </script>
</div>
5 « J'aime »

@Phpvarious
Merci pour la maj. Je viens de tester → fonctionnel et look vraiment sympa :hugs:

J’ai envie de l’utiliser à la place d’un widget basique de coloration de % de batterie.
Pour ça, il me faut :

  1. Ajouter davantage de couleurs (plus de cas).
  2. Inverser la logique (vert = 100 % batterie pleine).
  3. Ajuster les couleurs vs valeurs.

Si je comprends bien, cela se fait en ajoutant des lignes en début de code comme ceci :

  <template>
    <div>time : duration|date (Affiche durée ou date de la valeur).</div>
    <div>tickInterval : intervalle des graduations.</div>
    <div>color1 : couleur si valeur &lt; 30%.</div>
    <div>color2 : couleur si valeur &lt;= 60%.</div>
    <div>color3 : couleur si valeur &gt; 60%.</div>
Ajout -> <div>color4 : couleur si valeur &gt; Y%.</div>
  </template>
  
  <style>
    :root {
      --color1-#uid#: rgb(0, 255, 0);
      --color2-#uid#: rgb(255, 255, 0);
      --color3-#uid#: rgb(255, 0, 0);
Ajout ->       --color4-#uid#: rgb(a, b, c);
    }

Question 1
Est-il possible de modifier simplement sur la taille du widget (50%, 75%,…).

Question 2
Serait-il possible de permettre une customisation via le menu affichage du plugin ?
Comme avec le plugin PimpJeedom de @Salvialf. Exemple :

  • Sans rien mettre, le widget se comporte comme ici.
  • En cas d’ajout de lignes (couleur, seuil), le plugin les prendraient à la place.
  • Avec également un champ lié au % de la taille.
  • → Cela éviterait d’aller bidouiller directement dans le code.

C’est peut-être trop compliqué ou impossible à faire, c’est juste une idée lancée !

[EDIT]
J’ai été un peu vite dans les conditions :crazy_face:
Il faut une syntaxe de type « compris entre x et y », je vais chercher…

Bonjour,
Merci beaucoup, ca marche nickel avec la v4.4 !!! :+1: :+1: :+1:

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