Merci pour ce retour
compris, il faut size=250 et step=1.
aprés ca dépend aussi du mini max
si tu fait de 0 à 10
c’est pas le même combat que de
30000 a 50000
La jauge fait comme elle peut dans l’espace que l’on lui donne.
Effectivement. Non j’étais parti sur -90 à +90
Pour l’inclinaison du soleil, car esthétiquement ta jauge est très sympa
Voilà, ça c’est jolie à voir
Aprés tu a ici les script pour calculer les sites et azimuth de tous les objets du ciel …
Merci
Actuellement j’utilise Heliotrope mais uniquement pour le soleil
c’est le même principe sauf que la tu peut jouer avec bien d’autres astres …
Je vais essayé de m’amuser un peu avec
Et pour ce qui est des horaires tu a ca aussi, ca évite les plugins …
Slt olive
J’ai modifié un peu ton code ( plus tôt rajout #id#) pour avoir la flèche qui débute de l’autre côté ( pour la direction du vent entre autre…), simplemnt en rajout #id# . Dis moi ce que tu en penses … 
@+DÖM (Ô¿Ô)
pas mal du tout tu va devenir Aquilon 
Bonjour,
Il faudrait changer les graduations tous les 22.5 ou 45 degrés pour que ça corresponde aux points cardinaux.
Je crois qu’il manque un paramètre pour tickInterval
Cette jauge avec les fonctionnalités est très sympa.
Photo au haut => nouveau Design
Photo du bas => ancien Design
Très bon boulot @olive
1 « J'aime »
Bonjour
Je continue a essayer de modifier le code de @olive pour permettre 6 zones de couleurs différentes mais je n’y parviens toujours pas.
Pouvez vous me dire ce qui ne va pas dans les modifications que j’ai apporté ?
L’appel du widget sur une commande n’affiche toujours rien.
Nouveau nom du Widget ( pour ne pas poluer le code existant ) :cmd.info.numeric.Jauge_hygrometrie.html
<!--
// LCN 2020-04-13 : Essai de modification du code d'origine
// Olive 2020-04-07 11:45:00 correction petit bug
JPTY PR 2020-02-27 22:00
// JPTY 2020-02-29
// OPTIONS : Voir le début de la section script
// de préférence renseignez les options de la commande min max et unite
----- Paramètres optionnels widget
size // taille du cadran (déaut 250px)
nom // remplace le nom de la commande par celui de votre choix
back // Couleur de fond du widget (défaut #262626 )
fond // Couleur de fond du cadran (défaut #@@@ )
aiguille // Couleur aiguille (défaut rouge)
Laiguille // Longueur de aiguille (défaut 70)
Eaiguille // Epaisseur de aiguille (défaut 4)
Raiguille // longueur arriere de aiguille (défaut 0)
CTXT1 // Couleur du nom de la commande (défaut green)
CTXT2 // Couleur de la valeur et de l’unité (défaut red)
CTXT3 // Couleur des valeurs et (défaut white)
RTXT //orientation des valeurs des textes (défaut 'auto' 0 horizontal a 360 ...)
fsize // taille des caractères (défaut 12px)
centre // Couleur de l’axe de l’aiguille (défaut blanc)
Tcentre // Taille de l’axe de l’aiguille (défaut 5)
step // Espacement entre deux valeurs (défaut 2)
start // début cadran (défaut -150 degrés par rapport au nord)
stop // fin cadran (défaut 150 degrés par rapport au nord)
C1 // Couleur 1ère échelle des valeurs
C2 // Couleur 2ème échelle des valeurs
C3 // Couleur 3ème échelle des valeurs
C4 // Couleur 4ème échelle des valeurs
C5 // Couleur 5ème echelle des valeurs
C6 // Couleur 6ème echelle des valeurs
C7 // Couleur 7ème echelle des valeurs
Cmin // couleur valeur mini historique (défaut Bleu) rgba(0,0,0,0) pour cacher
Cmoy // couleur valeur moyenne historique (défaut vert)
Cmax // couleur valeur maxi historique (défaut Rouge)
V0 // Valeur de separation entre la partie DEBUT
V1 // Valeur de separation entre la partie 1 et 2
V2 // Valeur de separation entre la partie 2 et 3
V3 // Valeur de separation entre la partie 3 et 4
V4 // Valeur de separation entre la partie 4 et 5
V5 // Valeur de separation entre la partie 5 et 6
V6 // Valeur de separation entre la partie 6 et 7
VX // Valeur de separation entre la partie 7 et la fin du cadran
dur // affichage de la durée depuis la dernière valeur
minorTickcolor // couleur des ticks mineur
tickColor // couleur des ticks
image // image de fond (défaut pas d'image)
-------------------------------------------------------------------------
Les expression de couleurs respectent le format HTML (red, lime, …, #F00, …, #000000, …, rgb(255,0,0), …, rgba(255,0,0,0.5) pour des effets de transparence avec le dernier paramètre entre 0 et 1).
-->
<div class="Jauge_hygrometrie-#id# cmd tooltips cmd-widget #history# widget-Jauge_hygrometrie" title="" data-type="info" data-subtype="numeric" data-template="Jauge_hygrometrie" data-cmd_id="#id#" >
<div id="Jauge_hygrometrie#id#"></div>
<div class="cmdStats #hide_history#" style="position: relative; top:-45px ;">
<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 class="value" style="position: relative; top:-45px ;">
<span class="timeCmd#uid# timeCmd label label-default value"></span>
</div>
<style>
#Jauge_hygrometrie#id# .highcharts-minor-tick { stroke: #minorTickcolor#}
#Jauge_hygrometrie#id# .highcharts-tick { stroke: #tickColor#}
</style>
<script>
var nom#id# = ('#nom#' !='#'+'nom#') ? "#nom#":"#name#"; // remplace le nom de la commande par celui de votre choix
var size#id# = ('#size#' !='#'+'size#') ? "#size#":"250px"; // taille du cadran
var back#id# = ('#back#' !='#'+'back#') ? "#back#":"transparent"; // couleur fond exterieur au cadran
var fond#id# = ('#fond#' !='#'+'fond#') ? "#fond#":"#000"; // couleur fond du cadran
var aiguille#id# = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"#F00"; // couleur aiguille défaut rouge
var Laiguille#id# = ('#Laiguille#' !='#'+'Laiguille#') ? "#Laiguille#":"70"; // Longueur de aiguille
var Eaiguille#id# = ('#Eaiguille#' !='#'+'Eaiguille#') ? "#Eaiguille#":"4"; // Epaisseur de aiguille
var Raiguille#id# = ('#Raiguille#' !='#'+'Raiguille#') ? "#Raiguille#":"0"; // Longueur arriere de aiguille
var CTXT1#id# = ('#CTXT1#' !='#'+'CTXT1#') ? "#CTXT1#" :"green"; // couleur texte 1
var CTXT2#id# = ('#CTXT2#' !='#'+'CTXT2#') ? "#CTXT2#" :"red"; // couleur texte 2
var CTXT3#id# = ('#CTXT3#' !='#'+'CTXT3#') ? "#CTXT3#" :"white"; // couleur texte 3
var RTXT#id# = ('#RTXT#' !='#'+'RTXT#') ? "#RTXT#" :'auto'; // rotation texte valeurs
var fsize#id# = ('#fsize#' !='#'+'fsize#') ? "#fsize#" :"12px"; // taille des caracteres
var centre#id# = ('#centre#' !='#'+'centre#') ? "#centre#" :"#FFF"; // blanc
var Tcentre#id# = ('#Tcentre#' !='#'+'Tcentre#') ? "#Tcentre#" :"5"; // taille du centre
var step#id# = ('#step#' !='#'+'step#') ? "#step#" :"2"; // espacement des valeurs
var start#id# = ('#start#' !='#'+'start#') ? "#start#" :"-150"; // début compteur
var stop#id# = ('#stop#' !='#'+'stop#') ? "#stop#" :"150"; //fin compteur
var C1#id# = ('#C1#' !='#'+'C1#') ? "#C1#":"#333333"; //gris foncé COULEUR 1ER PARTIE
var C2#id# = ('#C2#' !='#'+'C2#') ? "#C2#":"#cc9900"; //ocre 2IEME PARTIE
var C3#id# = ('#C3#' !='#'+'C3#') ? "#C3#":"#ffff99"; //jaune pâle COULEUR 3IEME PARTIE
var C4#id# = ('#C4#' !='#'+'C4#') ? "#C4#":"#00cc00"; //vert COULEUR 4IEME PARTIE
var C5#id# = ('#C5#' !='#'+'C5#') ? "#C5#":"#64b5f6"; //bleu clair COULEUR 5IEME PARTIE
var C6#id# = ('#C6#' !='#'+'C6#') ? "#C6#":"#0000cc"; //bleu COULEUR 6IEME PARTIE
var C7#id# = ('#C7#' !='#'+'C7#') ? "#C7#":"#000099"; //bleu foncé 7IEME PARTIE
var Cmin#id# = ('#Cmin#' !='#'+'Cmin#') ? "#Cmin#":"#00F"; //BLEU STAT MIN
var Cmoy#id# = ('#Cmoy#' !='#'+'Cmoy#') ? "#Cmoy#":"#0F0"; //VERT STAT MOYENNE
var Cmax#id# = ('#Cmax#' !='#'+'Cmax#') ? "#Cmax#":"#F00"; //ROUGE STAT MINI
var V0#id# = ('#V0#' !='#'+'V0#') ? "#V0#":"#minValue#"; // valeur de separation entre la partie 0 et 1
var V1#id# = ('#V1#' !='#'+'V1#') ? "#V1#":"#minValue#"; // valeur de separation entre la partie 1 et 2
var V2#id# = ('#V2#' !='#'+'V2#') ? "#V2#":"#minValue#"; // valeur de separation entre la partie 2 et 3
var V3#id# = ('#V3#' !='#'+'V3#') ? "#V3#":"#maxValue#"; // valeur de separation entre la partie 3 et 4
var V4#id# = ('#V4#' !='#'+'V4#') ? "#V4#":"#maxValue#"; // valeur de separation entre la partie 4 et 5
var V5#id# = ('#V5#' !='#'+'V5#') ? "#V5#":"#maxValue#"; // valeur de separation entre la partie 5 et 6
var V6#id# = ('#V6#' !='#'+'V6#') ? "#V6#":"#maxValue#"; // valeur de separation entre la partie 6 et 7
var VX#id# = ('#VX#' !='#'+'VX#') ? "#VX#":"#maxValue#"; // valeur de separation entre la partie 7 et 8
var dur#id# = ('#dur#' !='#'+'dur#') ? "#dur#":"oui";
var VminHist#id# = ('#minHistoryValue#' !='#'+'minHistoryValue#') ? "#minHistoryValue#":"0";
var VmoyHist#id# = ('#averageHistoryValue#' !='#'+'averageHistoryValue#') ? "#averageHistoryValue#":"0";
var VmaxHist#id# = ('#maxHistoryValue#' !='#'+'maxHistoryValue#') ? "#maxHistoryValue#":"0";
var image#id# = ('#image#' !='#'+'image#') ? "#image#":null;
VminHist#id#=parseFloat(VminHist#id#);
VmoyHist#id#=parseFloat(VmoyHist#id#);
VmaxHist#id#=parseFloat(VmaxHist#id#);
var VminRealHist#id#=VminHist#id#;
var VmoyRealHist#id#=VmoyHist#id#;
var VmaxRealHist#id#=VmaxHist#id#;
V0#id#=parseFloat(V0#id#);
V1#id#=parseFloat(V1#id#);
V2#id#=parseFloat(V2#id#);
V3#id#=parseFloat(V3#id#);
V4#id#=parseFloat(V4#id#);
V5#id#=parseFloat(V5#id#);
V6#id#=parseFloat(V6#id#);
VX#id#=parseFloat(VX#id#);
if(RTXT#id# != 'auto') { RTXT#id#=parseFloat(RTXT#id#); }
CTXT3#id# = CTXT3#id# + " !important";
$('#Jauge_hygrometrie#id#').css('width',size#id#);
$('#Jauge_hygrometrie#id#').css('height',size#id#);
$('#Jauge_hygrometrie#id#').css('position','relative');
$('#Jauge_hygrometrie#id#').css('top','-15px');
if ( VminHist#id# == 0 && VmoyHist#id# == 0 && VmaxHist#id# == 0 ) {
Cmin#id# = Cmoy#id# = Cmax#id# = '#00000000';
}
else { // limitation des taquets d'historique à 2% de la plage
var plage = (VX#id# - V0#id#) *.02;
if ( VminHist#id# < V0#id# ) {
VminRealHist#id# = VminHist#id#;
VminHist#id# = V0#id# - plage;
}
else if ( VminHist#id# > VX#id# ) {
VminRealHist#id# = VminHist#id#;
VminHist#id# = VX#id# + plage;
}
if ( VmoyHist#id# < V0#id# ) {
VmoyRealHist#id# = VmoyHist#id#;
VmoyHist#id# = V0#id# - plage;
}
else if ( VmoyHist#id# > VX#id# ) {
VmoyRealHist#id# = VmoyHist#id#;
VmoyHist#id# = VX#id# + plage;
}
if ( VmaxHist#id# < V0#id# ) {
VmaxRealHist#id# = VmaxHist#id#;
VmaxHist#id# = V0#id# - plage;
}
else if ( VmaxHist#id# > VX#id# ) {
VmaxRealHist#id# = VmaxHist#id#;
VmaxHist#id# = VX#id# + plage;
}
}
// Sélection du mode clair ou sombre
/*
if ($('body')[0].hasAttribute('data-theme')) {
if ($('body').attr('data-theme').endsWith('Light')) {
srcMode = "light";
fond#id# = 'red';
} else {
srcMode = "dark";
fond#id# = 'yellow';
}
}
*/
// plotBackgroundImage: 'data/img/rm.png',
var chart#id#;
chart#id# = new Highcharts.Chart({
chart: {
renderTo: 'Jauge_hygrometrie#id#',
type: 'gauge',
plotBackgroundColor: back#id#,
plotBackgroundImage: image#id#,
plotBorderWidth:0,
plotBorderColor: back#id#,
plotShadow: false
},
title: { text: '', verticalAlign: 'bottom'
},
credits: { enabled: false },
pane: {
startAngle: start#id#,
endAngle: stop#id#,
background: [{
backgroundColor: fond#id#,
borderWidth: 0,
outerRadius: '100%',
innerRadius: '0%'
}]
},
exporting : { enabled: false },
plotOptions: {
series: { dataLabels: { enabled: false }
},
gauge: {
dial: {
radius:Laiguille#id#,
rearLength:Raiguille#id#,
backgroundColor: aiguille#id#,
baseWidth:Eaiguille#id#,
topWidth:1,
borderWidth: 1,
borderColor: aiguille#id#
},
pivot: {
radius: Tcentre#id#,
borderWidth: 1,
borderColor:centre#id#,
backgroundColor: centre#id#
}
}
},
yAxis: {
min: V0#id#,
max: VX#id#,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '', // Ne fonctionne pas couleur du core
tickPixelInterval: 50,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '', // Ne fonctionne pas couleur du core
labels: {
step: step#id#,
rotation: RTXT#id#,
padding: 1 ,
style: {
color: CTXT3#id# ,
fontSize: fsize#id#
}
},
title: {
text: '#state#',
style: {
color: 'green',
fontWeight: 'bold',
fontSize: fsize#id#
},
},
plotBands: [
{ from: V0#id#, to: V1#id#, color: C1#id# }, // couleur 1
{ from: V1#id#, to: V2#id#, color: C2#id# }, // couleur 2
{ from: V2#id#, to: V3#id#, color: C3#id# }, // couleur 3
{ from: V3#id#, to: V4#id#, color: C4#id# }, // couleur 4
{ from: V4#id#, to: V5#id#, color: C5#id# } // couleur 5
{ from: V5#id#, to: V6#id#, color: C6#id# } // couleur 6
{ from: V6#id#, to: VX#id#, color: C7#id# } // couleur 7
]
},
series: [
{ name: 'Valeur',
data: [
{ id: 'valeur',
y: 0
}
],
enableMouseTracking: false
},
{ name: 'Minimum',
data: [
{ id: 'min',
y: VminHist#id#,
dial: {
radius: '99%',
baseWidth: 1,
topWidth: 8,
baseLength: '90%',
rearLength: '-90%',
backgroundColor: Cmin#id#,
borderColor: Cmin#id#
}
}
],
tooltip: { valueSuffix: VminRealHist#id#
}
},
{ name: 'Moyenne',
data: [
{ id: 'moy',
y: VmoyHist#id#,
dial: {
radius: '99%',
baseWidth: 1,
topWidth: 8,
baseLength: '90%',
rearLength: '-90%',
backgroundColor: Cmoy#id#,
borderColor: Cmoy#id#
}
}
],
tooltip: { valueSuffix: VmoyRealHist#id#
}
},
{ name: 'Maximum',
data: [
{ id: 'max',
y: VmaxHist#id#,
dial: {
radius: '99%',
baseWidth: 1,
topWidth: 8,
baseLength: '90%',
rearLength: '-90%',
backgroundColor: Cmax#id#,
borderColor: Cmax#id#
}
}
],
tooltip: { valueSuffix: VmaxRealHist#id#
}
}
],
tooltip: { followPointer: true,
padding: 4,
formatter: function (tooltip) {
if( this.series.name == 'Minimum')
return ('Minimum ' + VminRealHist#id#);
else if( this.series.name == 'Moyenne')
return ('Moyenne ' + VmoyRealHist#id#);
else if( this.series.name == 'Maximum')
return ('Maximum ' + VmaxRealHist#id#);
else
return tooltip.defaultFormatter.call(this, tooltip);
}
}
})
jeedom.cmd.update['#id#'] = function(_options){
var valeur = parseFloat(_options.display_value);
var valeur2 = _options.collectDate;
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate);
chart#id#.yAxis[0].setTitle(
{ text: nom#id# , style: { color: CTXT1#id#, fontWeight: 'bold', fontSize: fsize#id# } }
);
chart#id#.setTitle(
{ text: valeur + ' #unite#', style: { color: CTXT2#id#, fontSize: fsize#id# }, y:-60}
);
// limitation aiguille contribution JPTY
var plage = (VX#id# - V0#id#) *.02;
if ( valeur < V0#id# ) valeur = V0#id# - plage;
else if ( valeur > VX#id# ) valeur = VX#id# + plage;
chart#id#.series[0].data[0].update(valeur);
if( dur#id# == "oui"){
jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#uid#'));
}
// A FAIRE
// Sélection du mode clair ou sombre
if ($('body')[0].hasAttribute('data-theme')) {
if ($('body').attr('data-theme').endsWith('Light')) {
srcMode = "light";
} else {
srcMode = "dark";
}
}
//chart#id#.chart({plotBackgroundColor: 'red !important'});
// chart#id#.chart.setOptions({
// plotBackgroundColor: 'red'
// });
//chart#id#.plotOptions: {plotBackgroundColor: 'red'};
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
</script>
</div>
Comme ca je vois pas on va demander à
@jpty
qui généralement a du pif pour voir ce genre de choses ?
C’est pas du pif qu’il faut.
Il faut installer le widget et tester !
dis-moi @olive : est-ce qu’on peut rapprocher les traits de graduation les uns des autres. le paramètre step gère l’affichage des valeurs mais y’a-t-il un paramètre pour gérer les traits de graduation ?
Merci encore
peut’être
tickPixelInterval: 50,
@Doubledom il pourrait bien te servir aussi pour ta rose des vents un sous multiple de 360 comme 45 …
@lcn
Meme pas eu besoin de tester. Juste éditer le code:
Ca manque de virgules.
Vous devez avoir des erreurs de javascript signalées par le petit triangle noir en haut à droite dans Jeedom.
1 « J'aime »