Widget Compass

Utilisation du core de Jeedom Widgets
1

Bonjour a toutes et tous,

Préambule, désolé pour certains accents, je n’ai qu’un QWERTY.

Pour le nouveau widget compass, intégré dans Jeedom V4, savez vous si on peut passer un paramètre qui indiquerai que la girouette est orientée plein sud ? En effet les girouettes Oregon (je ne sais pas si c’est pareil pour les autres) donnent toujours l’azimut en considérant que l’anémomètre est oriente au nord. Ca ne va pas non plus être possible de le tourner de 180 degrés.

J’avais créé un widget sous v3 qui fonctionnait pas mal mais c’était une usine a gaz et je ne me sens pas de refaire ca en v4.

Merci d’avance
Stephane

2

Bonjour,

Le code du widget core Compass est consultable sur le git:

Pas de paramètres optionnels permettant de déterminer l’orientation cependant tu peux éventuellement reprendre ce code dans un widget code et l’adapter à ton usage ?!

3

Cool, quelle vitesse de réponse… Je m’y colle dès que possible et j’essayerai d’ajouter un paramètre pour indiquer la bonne direction du vent qu’elle que soit l’orientation de la girouette.

Sans certitude quand a ma capacité à bidouiller ce code🤪

Merci
Stephane

4

j’ai un widget assez paramétrable pour faire tout ce que tu veut …

5

Merci Olive. Je vais regarder ça de près. très beaux cadrans en tout cas et le passage des paramètres semble bien confortable pour faire ce que je souhaite.

6

En faite je suis inspiré des 2 jauges de héliotrope dont une est un compas …

7

Bonjour
J’ai réussi à légèrement customiser le widget compass du core Jeedom en modifiant les indication de directions par leurs abréviations et d’en augmenter la précision par l’ajout des diections intermédiaires telles que NNE, ESE…, cad une indication changeant tous les 22,5° au lieu de 45°.
Mais comment aller plus loin dans sa customisation en changeant la couleur de la flèche ou du cercle ? par exemple.
Merci
Stéphane

8

La base est dans la doc de highchart …
Tu a dans ce tutoriel beaucoup d’exemples :

9

Je ne pensais pas que les widget core Compass pouvait avoir les mêmes configurations que les jauges Highcharts.

10

si si, si tu veut celui-ci est assez simple comme point de départ :

CODE 
<div class="Doc-#id# cmd tooltips cmd-widget #history#  widget-JaugeAz " title="" data-type="info" data-subtype="numeric"  data-template="JaugeHAz"    data-cmd_id="#id#" >

  <div id="JaugeAz#id#" style="width: 150px; height: 150px;"></div>

<script>
// file : /data/customTemplates/dashboard/cmd.info.numeric.JaugeAz.html
// Olive 2020-02-06 
// OPTIONS : 
// aiguille couleur
// centre   couleur
		var chart#id#;

				chart#id# = new Highcharts.Chart({
					chart: {
					renderTo: 'JaugeAz#id#',
					type: 'gauge',
					backgroundColor: 'transparent',
					plotBackgroundColor: null,
					plotBackgroundImage: null,
					plotBorderWidth: 0,
					plotShadow: false,
					spacingTop: 0,
					spacingLeft: 0,
					spacingRight: 0,
					spacingBottom: 0
				},
				title: {
					text: null
				},
				credits: {
					enabled: false
				},
				pane: {
					startAngle: 0,
					endAngle: 360,
					background: null
				},
				exporting : {
					enabled: false
				},
				plotOptions: {
					series: {
						dataLabels: {
							enabled: false
						}
					},
          gauge: {
            dial: {
              backgroundColor: '#aiguille#'
            },
            pivot: {
              backgroundColor: '#centre#'
            }
          }
				},
				yAxis: {
					min: 0,
					max: 360,
					tickWidth: 2,
					tickLength: 10,
					tickInterval: 45,
					lineWidth: 1,
					labels: {
            distance: -16,
						formatter: function () {
							if (this.value == 360) {
								return '<span style="font-weight:bold;">Nord</span>';
							} else if (this.value == 90) {
								return '<span style="font-weight:bold;">E</span>';
							} else if (this.value == 180) {
								return '<span style="font-weight:bold;">S</span>';
							} else if (this.value == 270) {
								return '<span style="font-weight:bold;">O</span>';
							}
						}
					},
					title: {
						text: '#unite#'
					}

                },
                 
					series: [{
						name: '',
						data: [0]
						}]
	});


jeedom.cmd.update['#id#'] = function(_options){
    
  var valeur = parseFloat(_options.display_value);

  var valeur2 = _options.collectDate;    

  chart#id#.series[0].data[0].update(valeur);
  
       chart#id#.setTitle({ text: valeur, style: {
            			color: 'green',
                        fontSize: '12px' 
        			  }, y:80});


}
    
  
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});

</script>

</div>

Capture d’écran du 2020-05-17 19-37-40

11

Alors je pense qu’on ne s’est pas compris.
Je souhaite utiliser le widget du core

12

Bien mais le widget du core n’est pas modifiable sauf si tu en modifie le code …
et prochaine mise a jour tu perd tout …

13

Justement, j’ai recréé un nouveau widget en copiant le code du Github (voir post n°2 de Salvialf) que j’ai modifié pour être plus précis sur la direction : tous les 22,5° au lieu de 45° comme le code d’origine.
Celui que j’ai modifié (et renommé) ne devrait pas être écrasé lors d’un mise à jour.

14

Bon ben tu n’a plus qu’a t’inspirer du code des autre widgets.

il n’est pas certain que toutes les classes highchart aient été implémenté par jeedom …

15

Je serais très intéressé par la modification du code que tu as fait si tu peux le partager

16

Désolé pour ma réponse tardive, je ne suis pas venu depuis un bon bout de temps.
Désolé, mais j’ai supprimé mon ancien Jeedom et n’ai pas sauvegardé le code
Stéphane

17

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