[Partage] Solid Gauge en 4.1?

Bonjour @Spine ,

Serait-il possible de partager ce que tu as fait avec les Solid Gauge en 4.1 ?

Je vois bien en effet que la classe « .highcharts-color-0 » a été déplacé dans une sous classe mais impossible de changer les couleurs de mon côté.

Je chercher à faire quelque chose qui ressemble à çà :

image

Le but étant d’avoir la valeur numérique au mileu et la gauge qui se rempli au fur et à mesure entre 0 et 120. Au delà de 120, la gauge sera pleine mais la valeur numérique au mileu continuera à s’incrémenter.

Je suis parti de cet exemple et je l’ai modifié comme ceci :

Résumé
$(function() {

  var rawData = 94,
    data = getData(rawData);

  function getData(rawData) {
    var data = [],
      start = Math.round(Math.floor(rawData / 10) * 10);
    data.push(rawData);
    for (i = start; i > 0; i -= 10) {
      data.push({
        y: i
      });
    }
    return data;
  }

  Highcharts.chart('container', {
    chart: {
      type: 'solidgauge',
      marginTop: 10
    },
    
    title: {
      text: ''
    },
    
    subtitle: {
      text: rawData,
      style: {
        'font-size': '60px'
      },
      y: 160,
      zIndex: 7
    },

    tooltip: {
      enabled: false
    },

    pane: [{
      startAngle: -180,
      endAngle: 180,
      background: [{ // Track for Move
        outerRadius: '100%',
        innerRadius: '80%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }],
      size: '100%',
      center: ['50%', '50%']
    }, {
      startAngle: -180,
      endAngle: 180,
      size: '80%',
      center: ['50%', '50%'],
      background: []
    }],

    yAxis: [{
      min: 0,
      max: 120,
      lineWidth: 2,
      lineColor: 'white',
      tickInterval: 30,
      labels: {
        enabled: false
      },
      minorTickWidth: 0,
      tickLength: 50,
      tickWidth: 5,
      tickColor: 'white',
      zIndex: 6,
      stops: [
        [0, '#3385ff'],
        [0.25, '#3385ff'],
        [0.5, '#3385ff'],
        [0.75, '#3385ff'],
        [1, '#3385ff']
      ]
    }, {
      linkedTo: 0,
      pane: 1,
      lineWidth: 5,
      lineColor: 'white',
      tickPositions: [],
      zIndex: 6
    }],
    
    series: [{
      animation: false,
      dataLabels: {
        enabled: false
      },
      borderWidth: 0,
      color: Highcharts.getOptions().colors[0],
      radius: '100%',
      innerRadius: '80%',
      data: data
    }]
  });
});

mais je galère pour l’intégrer dans un widget …

2 « J'aime »

Bonjour @arnog23,

Voici un exemple :
Gif
Capture d’écran 2020-11-19 010809

Résumé
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="default" 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="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: 120px;
    height: 120px;
  }
  .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;
  }
</style>
<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_uid=#uid#] .gaugearnog23').highcharts().series[0].points[0].update(_options.display_value)
  }

  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: 100,
        startAngle: 180,
        endAngle: 540,
        background: {
          innerRadius: '70%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0,
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0, '#fff'],
          [0.101, '#0f0'],
          [0.201, '#2d0'],
          [0.301, '#4b0'],
          [0.401, '#690'],
          [0.501, '#870'],
          [0.601, '#a50'],
          [0.701, '#c30'],
          [0.801, '#e10'],
          [0.901, '#f03'],
          [1, '#f06']
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickInterval: 30,
        tickWidth: 4,
        tickLength: 15,
        tickPosition: 'inside',
        labels : {enabled: false},
        min: 0,
        max: 120,
        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: 6,
          format: '<span style="color: var(--link-color); position: relative; top: -28px; font-size: 24px;">{y}</span> <span style="color: var(--link-color); position: relative; top: -36px; font-size: 12px;">#unite#</span>'
        },
      }]
    })
  } else {
    $('.cmd[data-cmd_uid=#uid#] .gaugearnog23').append('<center><span class="label label-danger">#state#</span></center>')
  }
</script>

</div>
2 « J'aime »

Même pas eu le temps de prendre mon café que je vois déjà ta réponse … Merci beaucoup :smiley:

Ca fonctionne nickel :+1:

Je vais regarder çà de plus près.

1 « J'aime »

Bonjour,
Je n’ai pas compris comment changer la valeur maxi (100 par defaut) ?
Merci

Dans quel contexte ? Jauges hichart ou sur les jauges de @Spine

Merci de décrire précisément ce que tu veut faire ?

Bonjour,
Test chez moi de votre code mais tout est gris sans couleur, est ce que j’ai fait une bêtise quelque part?
Capture d’écran 2020-11-24 à 17.00.38

Cordialement

Bonjour @nak,

Malheureusement ce code ne fonctionne qu’à partir de la version 4.1 de Jeedom et à en croire ta capture d’écran je pense que tu es en Stable non?
Si oui il faut commenter une ligne dans le CSS du core pour avoir de la couleur en Stable, si ça t’intéresse je peux te la donner mais faut le faire à chaque MAJ du core…

1 « J'aime »

Bonjour
ecote m’interessant a u sujet et surtout admirateur de tes travaux je suis preneur.
Très Cordialement

Bonjour @nak,

Voici donc comment faire fonctionner le code précèdent en Stable :
Pour la couleur, il faut commenter cette ligne dans le CSS du core (la Solid Gauge du core perdra donc sa couleur) :


Pour la taille de la valeur il faut rajouter !important sur la propriété font-size ligne 122 :

format: '<span style="color: var(--link-color); position: relative; top: -28px; font-size: 24px !important;">{y}</span> <span style="color: var(--link-color); position: relative; top: -36px; font-size: 12px;">#unite#</span>'

Et pour enlever les « traits » au centre tu peux mettre ça en perso. avancée :

.highcharts-yaxis-grid .highcharts-grid-line { 
  stroke: none !important;
}

Ca reste de la bidouille, modifier le core peut-être risqué et je ne le recommande pas aux débutants.

Edit : Bonjour @iPapy, excuses moi te déranger mais peut-être serait t-il préférable de séparer ce fil à partir de la réponse d’@arnog23 histoire de ne pas trop polluer le fil d’@olive qui est déjà bien chargé, @nak pourra toujours reposter son message : [PARTAGE] Jauges Highcharts paramétrable, ouvert aux contributions - #741 par nak dans le bon fil, je te laisse en jugé, merci d’avance.

1 « J'aime »

Salut Spine,
Merci pour l’amitié que tu me manifeste, ci joint l’application de l’instruction que tu m’as envoyé.


Tu observe que les chiffres de vitesse de vent mérite peut être d’être un peut plus grand, je n’ai pas réussi a placer important comme tu m’as expliquer car il apparait sur le widget.
Si tu pourrais me joindre la ligne de code complète (122) afin que je la remplace, ca me ferait vraiment plaisir, ici tu peux y aller on ne saura pas traité de pollueur par certain ami qui manque d’empatie :thinking:
Très amicalement

Salut,

Essayes avec ce code :

<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: 100,
        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 !important;">{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>

Je t’ai rajouté quelques options en bonus :


Capture d’écran 2020-12-03 003343

4 « J'aime »

Merci @Spine
ci-après le resultat sur temperature sonde Aqara
Capture d’écran 2020-12-03 à 03.15.26
Je ferai demain un autre presentation pour une station météo netatmo.
ce que tu partage avec moi me fais vraiment avanché dans le compréhension de high chart :herb:
très amicalement

1 « J'aime »

Salut @Spine,

Je l’ai aussi testé en version mobile. Il fonctionne bien, sauf les couleurs. Saurais-tu d’ou cela peut-il venir ?

D’autre part, j’ai intégré ce widget dans un widget personnalisé pour un equipement Bluetooth que je suis en train d’ajouter dans le plugin Blea. J’ai utilisé pour cela la fonction convertHtml() du plugin BLEA, ca fonctionne bien. Mais je voudrais aller plus loin en changeant la couleur (customColor) en fonction de la valeur d’une autre commande info (toto).

J’ai ajouté ceci dnas la partie script:

var customColor = '#3385ff';
	if ( '#toto#' == '192' ) {
		customColor = 'red';
	}
	else { 
		customColor = '#3385ff';
	}

et modifié les paramètres du highchart par :

stops: [
          [1, customColor]
        ],

Cela fonctionne mais seulement si je rafraichis manuellement la page. Il doit me manquer un rafraichissement quelquepart mais je ne vois pas ou.

Je souhaiterais également modifié le dataLabels par un texte fixe en fonction de cette même autre commande (toto)

dataLabels: {
          y: 6,
          format: '<span style="color: var(--link-color); position: relative; top: -28px; font-size: 24px">{y}</span>'
        },

Je voudrais donc remplacer le format :

          format: '<span style="color: var(--link-color); position: relative; top: -28px; font-size: 24px">{y}</span>'

par quelquechose du genre :

          format: '<span style="color: var(--link-color); position: relative; top: -28px; font-size: 24px">TEXTE FIXE</span>'

Mais je ne vois pas comment faire. Si tu as une idée ?

Le widget complet :

Résumé
<span class="cmd refresh pull-right cursor" data-cmd_id="#refresh_id#">
	<i class="fas fa-sync"></i>
</span>

<center class="widget-name"><a href="#eqLink#">#name_display# <span class="object_name">#object_name#</span></a></center>

<center>
	<div class="cmd cmd-widget #toto_history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#toto_id#" data-cmd_uid="#toto_uid#" data-version="#version#" data-eqLogic_id="#id#">
		<div class="content-xs">
		<span class="cmdName #toto_hide_name#"><strong>#toto_name_display# </strong></span> <strong class="state"></strong> #toto_unite#
		</div>
  </div>
<center>
	<div class="cmd cmd-widget #titi_history#" data-type="info" data-subtype="numeric" data-template="default" data-cmd_id="#titi_id#" data-cmd_uid="#titi_uid#" data-version="#version#" data-eqLogic_id="#id#" title="Date de valeur : #titi_valueDate#<br/>Date de collecte : #titi_collectDate#" >
		<div class="content-sm">
			<div class="gaugeBrushingDuration cursor #titi_history#" data-cmd_id="#titi_id#"></div>
		</div>
	</div>
 </center>
.gaugeBrushingDuration { width: 120px; height: 120px; } .gaugeBrushingDuration .highcharts-pane { fill: var(--el-defaultColor); } body[data-theme="core2019_Dark"] .gaugeBrushingDuration .highcharts-tick { stroke: rgb(38, 38, 38); } body[data-theme="core2019_Light"] .gaugeBrushingDuration .highcharts-tick { stroke: rgb(249, 249, 250); } .gaugeBrushingDuration .highcharts-container .highcharts-axis-line { stroke: transparent; }

tu as un moyen pour ne pas jouer avec le core jeedom

tu attribues une variable css root, celle-ci sera par dessus .highcharts-color-0 du core
image
concretement

<style>

    :root{
 --link-colorX:white;   
}  

.cmd[data-cmd_uid=#uid#] .highcharts-color-0 {
     fill: var(--link-colorX);
}

et ensuite dans le script à la suite de l’update

  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_uid=#id#]');
    var cmd2 = $(".cmd[data-cmd_id=#id#] .gaugearnog23");
    var val = _options.display_value;
       if (val <= 5){
cmd2.css({'--link-colorX': color1});
   } else if (val <= 20){
cmd2.css({'--link-colorX': color2});     
     } else {
cmd2.css({'--link-colorX': color3});     
     }
si tu veux peaufiner

image

<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>

    :root{
 --link-colorX:white;   
}  

.cmd[data-cmd_uid=#uid#] .highcharts-color-0 {
     fill: var(--link-colorX);
}
  .gaugearnog23 {
    width: 105px;
    height: 105px;
  }
.gaugearnog23 .highcharts-pane {
 /*   fill: var(--el-defaultColor);
 */  fill: #333333;
  }


  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;
/*        stroke: none !important; */

  }
    
  .gaugearnog23 .highcharts-yaxis-grid .highcharts-grid-line { 
    stroke: none !important;
  }
  

</style>
<script>

  
  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=#id#]');
    var cmd2 = $(".cmd[data-cmd_id=#id#] .gaugearnog23");
    var val = _options.display_value;
       if (val <= 5){
cmd2.css({'--link-colorX': color1});
   } else if (val <= 20){
cmd2.css({'--link-colorX': color2});     
     } else {
cmd2.css({'--link-colorX': color3});     
     }

     
     
    cmd.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: 100,
        startAngle: 0,
        endAngle: 360,
        background: {
    innerRadius: '0%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0
           }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        lineWidth: 0,
        tickPositions: [],
        labels : {enabled: false},
		min: ('#minValue#' == '') ? 0 : parseInt('#minValue#'),
        max: ('#maxValue#' == '') ? 100 : parseInt('#maxValue#'),
        zIndex: 6,
        title: {
          text: ''
        }
      },
      labels : {enabled: false},
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 9,
            borderWidth: 0,
            useHTML: true
          },
          rounded: true
        }
      },
      credits: {
        enabled: false
      },
      exporting : {
        enabled: false
      },
      series: [{
        name: '',
        data: [Math.round(parseFloat('#state#') * 10) / 10],
        radius: '90%',
        innerRadius: '70%',
        dataLabels: {
          y: -30,
          format: '<span style="color: white!important; font-size: 34px !important;">{y}</span> <span style="color: white!important; 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>

l’inspiration « allociné »

2 « J'aime »

Salut @arnog23,

Alors je n’utilise pas la WebApp mais je viens de jeter un œil et le souci est le même qu’en Desktop sur la Stable, la couleur est en dur dans le core et même deux fois pour être sûr :thinking: alors qu’il n’y a pas de Solid Gauge en version Mobile dans les widgets core (peut-être un oubli si tu veux tenter un PR, il faudrait rajouter la classe .arcgauge) :


Sinon je ne peux que te recommander la solution qu’@ajja17orange vient de nous proposer et qui fonctionne parfaitement.
Pour le reste d’après ce que j’ai compris tu veux faire un template pour un équipement perso. que tu as intégré à BLEA?
Je n’ai pas d’équipement BLEA qui utilise de template alors je prends Weather comme exemple :
La position de la jauge reflète la vitesse du vent, sa couleur change en fonction de la température et au centre la condition météo (j’ai fait du ménage dans le template pour y voir plus clair) :
Au passage du cron :
Gif
Dans ton template il te suffit d’utiliser des tags et c’est dans la classe du plugin que tu les mets à jour (par cron/refresh/sauvegarde) et que tu fais tes tests :

if ($temperature > 10) {
	$replace['#customColor#'] = 'red';
} else {
	$replace['#customColor#'] = 'blue';
}

Le code du template pour tester :
currentIMG.html.txt (3,6 Ko)

1 « J'aime »

Bonjour @ajja17orange,

Merci pour le partage, ça fonctionne parfaitement!
Le seul petit inconvénient c’est qu’avec cette méthode les couleurs ne se mélangent pas, avec les options Highcharts entre le jaune et le rouge on a du orange alors qu’avec ta méthode on passe directement du jaune au rouge, mais ce n’est qu’un détail, il suffit de rajouter un test pour avoir du orange et ça reste mieux que de modifier le core.

PS : j’aime bien l’inspiration, c’est le dernier endroit où je serais allé chercher des exemples de Solid Gauge. :slightly_smiling_face:

2 « J'aime »

Merci pour ton retour.

@kiboost pourra peut être nous dire s’il s’agit d’un oubli ou si c’est volontaire.

En fait, c’est bien çà mon souci. Ca fonctionne si on force un refresh en dehors du widget (par le cron par exemple ou en rafraichissant manuellement la page).

Si j’uitlise des tags et que je fais un replace dans la class du plugin, ca fonctionne mais uniquement lors du chargement initial de la page car si j’ai bien compris la fonction toHtml() n’est appelée qu’une seule fois au chargement de la page.

Ce que je voudrais c’est que le « refresh » de « customColor » se fasse automatiquement dès que la valeur de titi change dans le widget.

Merci. Je vais regarder çà de plus près.

Bonjour Spine,
J’ai suivi ton conseil en allant sur ce fil, j’ai donc créé le widget
image

Sans surprise les couleurs sont grise et blanche, tu proposes d’aller faire les modifs dans le CSS du core, est ce toujours nécessaire? pas super à l’aise et quand je fouille dans ce fil [PARTAGE] Jauges Highcharts paramétrable, ouvert aux contributions - #741 par nak 748 posts je suis un peu perdu.

Bonjour,

Quelle est votre version de Jeedom ?

1 « J'aime »