Widget Piscine pH , Sel et Redox

Tags: #<Tag:0x00007f282e535680>

Bonjour @Salvialf, @Almy
Je reprends l’ancienne discussion sur l’ancien forum
https://forum.jeedom.com/viewtopic.php?t=45217

Du coup je recherche ou faire un widget pour afficher mon ph, redox et sel de la piscine.
J’avais trouvé ce code là, mais qui ne semble pas fonctionner en jeedom V4 (rien ne s’affiche)
Du coup sinon quelles autres alternatives d’après vous.

<div style="width:300px;min-height : 100px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div class="gauge-element" id="pressureGauge" style="height: 100px; max-width: 300px; margin: 0 auto"></div>

<script src='/plugins/widget/core/template/dashboard/cmd.info.numeric.PhPiscine/dx.all.js'></script>
  
<script>
  jeedom.cmd.update['#id#'] = function(_options){
   
    $("#pressureGauge").dxLinearGauge({
        title: {
           text: "Pression filtration",
           font: {
              size: 26,
             color: '#61B872'
           }
        },

        geometry: { orientation: "horizontal" },
        scale: {
            label: {
                format: {
                    type: "fixedPoint",
					precision: 1
                },
				indentFromTick: 15
            },
            startValue: 0, endValue: 250,
            tick: {
                color: 'white',
                length: 15
            },	
            customTicks: [50, 100,150,200]
        },
        rangeContainer: {
            offset: 0,
			width: 15,
			ranges: [
                { startValue: 0, endValue: 50, color: "red" },
                { startValue: 50, endValue: 100, color: "orange" },
				{ startValue: 100, endValue: 150, color: "green" },
				{ startValue: 150, endValue: 200, color: "orange" },
                { startValue: 200, endValue: 250, color: "red" }
            ]
        },
 valueIndicator: {
            type: "textcloud",
					color: "#61B872",
            text: {
                format: {
                                        precision: 1
                }
            }
        },

		value : _options.display_value
    }).dxLinearGauge("instance");
    
    $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

J’ai modifié la ligne du script par

<script src='/data/customTemplates/dashboard/cmd.info.numeric.PhPiscine/dx.all.js'></script>

Salut @loic69,

Je vais essayer d’y regarder dès que j’ai un moment.

Pour commencer as-tu une erreur en rouge dans la console du navigateur ? (F12 sous Chrome)

Merci @Salvialf
J’ai corrigé un des problèmes et ça s’affiche maintenant.
Pas simple car un CTRL ou SHIFT F5 ne vide pas forcément le cache du navigateur.

En revanche, j’ai un petit souci d’échelle.
Voici ce que ça donne et mon code avec les valeurs corrigées
Capture

<div style="width:300px;min-height : 100px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div class="gauge-element" id="pressureGauge" style="height: 100px; max-width: 300px; margin: 0 auto"></div>

<script src='/data/customTemplates/dashboard/cmd.info.numeric.PhPiscine/dx.all.js'></script>
  
<script>
  jeedom.cmd.update['#id#'] = function(_options){
   
    $("#pressureGauge").dxLinearGauge({
        title: {
           text: "pH",
           font: {
              size: 26,
             color: '#61B872'
           }
        },

        geometry: { orientation: "horizontal" },
        scale: {
            label: {
                format: {
                    type: "fixedPoint",
					precision: 1
                },
				indentFromTick: 15
            },
            startValue: 5, endValue: 10,
            tick: {
                color: 'white',
                length: 15
            },	
            customTicks: [6,7,8,9]
        },
        rangeContainer: {
            offset: 0,
			width: 15,
			ranges: [
                { startValue: 5, endValue: 6, color: "red" },
                { startValue: 6, endValue: 7, color: "orange" },
				{ startValue: 7, endValue: 8, color: "green" },
				{ startValue: 8, endValue: 9, color: "orange" },
                { startValue: 9, endValue: 10, color: "red" }
            ]
        },
 valueIndicator: {
            type: "textcloud",
					color: "#61B872",
            text: {
                format: {
                                        precision: 1
                }
            }
        },

		value : _options.display_value
    }).dxLinearGauge("instance");
    
    $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Si je change les ranges c’est proportionnel à la « taille du range »
Pour lePh par exemple il faudrait que ça soit vert entre 7.2 et 7.4
mais si je change ici, dans customticks, la largeur de ma case verte est toute petite et du coup on ne voit pas précisément la position de la fleche.
sais tu si il y a une manière de fixer la largeur en pixel des blocs sans dépendre de l’échelle ?
EDIT :
J’aimerai aussi pouvoir ajouter juste entre « chaque blocs » la valeur d’ échelle pour rapidement comprendre que le bloc vert du milieu est par exemple entre 7.2 et 7.4

Je me suis a peu près débrouillé mais ça serait pas mal d’améliorer l’échelle.
Sinon j’ai un autre problème, pour le redox j’ai fait la meme chose en doublant le fichier appelé RedoxPiscine.
Mon problème sur le design ou dans le dashboard, je ne peux qu’afficher qu’un des 2 widget…
Sais tu comment corriger le probleme ?
EDIT : En fait quand je tente d’afficher le 2ème, en fait le 1er reprend les paramètre du 2eme. C’est bizarre… comme si il n’y avait qu’une seule instance du widget
EDIT c’est corrigé, c’était la classe qui était unique
En revanche j’au un message d’erreur car j’inclus dans chaque widget le fichier JS. Est ce que l’on peut faire un include once ou qq chose du genre ?

Voici le résultat d’une sonde ICO
Capture