[TUTO] Widgets personnalisés de type jauge Highcharts

Tags: #<Tag:0x00007f384e8c0310> #<Tag:0x00007f384e8ffe98>

J’ai passé à gros paquet d’heures à trifouiller dans l’aide d’Highcharts pour créer des widgets à ma sauce pour ma station météo personnelle et je suis enfin arrivé au bout de ce que je voulais. Ayant terminé, je partage donc avec vous.
N’hésitez pas à recopier et modifier à votre convenance si vous êtes intéressés …

Pour info, vous pourrez trouver toutes les options des jauges Highcharts (et leurs autres types de graphique d’ailleurs) avec leur descriptif précis sur le site officiel ici : https://api.highcharts.com/highcharts/

Nota : ceci est fonctionnel pour la v3 de Jeedom. Je n’ai aucune idée de comment fonctionne la v4, donc libre à vous de tester si vous avez fait la bascule, mais je ne saurais vous aider en aucune manière, désolé.


Pour ceux qui ne sont pas familiers avec les widgets, voici un résumé rapide :

1) Création du widget

  • Vous installez le plugin « widget » via le market officiel si ce n’est pas déjà fait.
  • Vous créez un nouveau widget avec le nom que vous voulez, le type = « Info » et sous-type = « Numérique », puis vous coller le code voulu dedans.

2) Paramétrage du virtuel

  • sur votre équipement ou virtuel, vous passez en modification,
  • allez sur l’onglet « Commandes »,
  • cliquez sur le bouton avec les trois petits engrenages de la valeur que vous souhaitez modifier,
  • dans la nouvelle fenêtre, cliquez sur l’onglet « Affichage »,
  • là, vous choisissez votre virtuel dans la liste déroulante,
  • et en bas, dans « Paramètres optionnels widget », vous ajoutez éventuellement les variables de paramétrage de l’affichage en fonction du widget que vous avez choisi (chaque widget contient la liste des paramètres possibles dans son propre code, avec leurs instructions).

Voici des exemples en situation des modèles de jauges que je vous partage, avec leur code en-dessous :
Widgets Highchart - Perso

Jauge classique / 6 zones :
Widgets - Jauge classique - 6 zones.txt (13,8 Ko)

Jauge classique / 5 zones :
Widgets - Jauge classique - 5 zones.txt (13,1 Ko)

Rose des vents (mode curseur) :
Widgets - Jauge rose des vents (curseur).txt (15,2 Ko)

Rose des vents (mode aiguille) :
Widgets - Jauge rose des vents (aiguille).txt (14,2 Ko)

Altimètre :
Widgets - Jauge altimètre.txt (14,0 Ko)

Jauge d’indice UV :
Widgets - Jauge indice UV.txt (14,4 Ko)

2 J'aimes

Sympatique tout ca.
Tu va faire des heureux en V3
Bon courage ce qui compte c’est de s’amuser.

:+1: :+1: :+1:

1 J'aime

Bonjour,

Beau travail pour les utilisateurs de V3, seul détail tu aurais pu aussi faire référence au topic d’@olive qui t’a apporté je pense pleins d’informations utiles :disappointed:

@LMQT
Moi je trouve que c’est pas mal de partir de de suivre ses idées quitte a recroiser les infos, après comme on est en partage chacun peut améliorer les choses en regardant les idées de l’autre.

Slt … :thinking: :shushing_face:
C’est fait pour ça le partage… :wink:
Tiens du coup je vais regarder pour l’affichage pt cardinaux : @LMQT

formatter: function () { // Ajoute une échelle personnalisé pour les points cardinaux

@+DÖM (Ô¿Ô):vulcan_salute:

Le point de départ de mes farfouilles, c’est uniquement les jauges Highcharts de l’interface web de SuiviConso, la solution tout-en-un de Yannick F. qui me sert à surveiller ma production photovoltaïque depuis 2016. Merci à lui pour son inspiration…
A force de les modifier petit à petit pour tenter de les incorporer dans des iframes sur le mode Design de Jeedom, je suis arrivé à quelque chose d’à peu près utilisable.
Au début j’avais fait comme lui : recopier en local les fichiers CSS et modifié manuellement dedans ce qu’il me fallait.
Puis je suis tombé sur l’aide d’Highcharts et du coup je me suis mis à refaire complètement mes jauges en m’inspirant d’un widget existant (je crois que c’était un pseudo comme « winhex » l’auteur, mais impossible de le retrouver, le market est vide depuis un bail, désolé à l’auteur d’origine, s’il passe, il reconnaîtra sûrement des morceaux de son code et n’a qu’à me faire signe, le le créditerai avec plaisir).
J’en suis finalement arrivé à terminer toutes mes jauges perso pour également les éléments de ma station météo, donc je partage pour ceux que ça intéresse…

Pour ce qui est des échelles personnalisées pour les points cardinaux, c’est cette partie du code :

yAxis: {
	labels: {
	  style: {color: v_EchelleCouleur,fontSize:'12px'},
	  distance: v_EchellePosition,	//7 = extérieur, -20 = intérieur
	  rotation: 'no',	// 'yes', 'no', ou 'auto'
	  formatter: function () {	// Ajoute une échelle personnalisé pour les points cardinaux
		if (this.value == 360) {
		  return '<span style="font-weight:bold;color:red;">N</span>';
		} else if (this.value == 90) {
		  return '<span>E</span>';
		} else if (this.value == 180) {
		  return '<span>S</span>';
		} else if (this.value == 270) {
		  return '<span>W</span>';
		}
	  }
	}
}

Il faut juste bien avoir en tête que si ça ne tombe pas sur une des graduations de l’échelle principale (les ‹ ticks ›), les points personnalisés n’apparaîtront pas (du moins je n’ai pas trouvé comment les forcer). Il faut donc jouer avec la variable ‹ tickInterval › pour bien tomber.
S’il y a une autre méthode, n’hésitez pas à me corriger :wink:

Slt…Merci pour l’info…
Moi j’ai fait çà …( je me sert des % pour la distance)

        distance: '112%',	//7 = extérieur, -20 = intérieur
//		align:'auto',
		rotation: 'no',
		style: {
          color: '#080',
          fontSize: '18px'
        },     //          fontSize: SPtCx#id#          
		formatter: function () {	// Ajoute une échelle personnalisé pour les points cardinaux
            if (this.value == 0) {
//              return '<span style="font-weight:bold;color:red;fontSize: 22;">N</span>';
              return '<span >N</span>';
            } else if (this.value == 22.5) {
              return '<span>NNE</span>';
            } else if (this.value == 45) {
              return '<span>NE</span>';
            } else if (this.value == 67.5) {
              return '<span>ENE</span>';
            } else if (this.value == 90) {
              return '<span>E</span>';
            } else if (this.value == 112.5) {
              return '<span>ESE</span>';
            } else if (this.value == 135) {
              return '<span>SE</span>';
            } else if (this.value == 157.5) {
              return '<span>SSE</span>';
            } else if (this.value == 180) {
              return '<span>S</span>';
            } else if (this.value == 202.5) {
              return '<span>SSO</span>';
            } else if (this.value == 225) {
              return '<span>SO</span>';
            } else if (this.value == 247.5) {
              return '<span>OSO</span>';
            } else if (this.value == 270) {
              return '<span>O</span>';
            } else if (this.value == 292.5) {
              return '<span>ONO</span>';
            } else if (this.value == 315) {
              return '<span>NO</span>';
            } else if (this.value == 337.5) {
              return '<span>NNO</span>';
            }
          }
        },

J’aurai pu faire des « data » pour les pts cardinaux… :upside_down_face:
Çà donne cela, juste encore un bug (radius), excentration de la jauge… :thinking:
direction vent design

@+DÖM (Ô¿Ô):vulcan_salute:

Cela doit être @ajja17orange ici.

Capture d’écran du 2020-04-21 18-01-03

2 J'aimes

bonjour et merci

même si ça fait plaisir d’avoir inspirer

et n’a qu’à me faire signe, le le créditerai avec plaisir.

inutile de me citer. j’ai fait comme toi : pris ici ou là.

tu as fait tous le reste.

1 J'aime

Ah, c’était donc bien ça le pseudo, ma mémoire a encore quelques restes :laughing:
Donc merci à @ajja17orange (aka winhex) pour l’ancien widget style galvanomètre que j’avais utilisé avec plaisir un moment et dans lequel j’ai repiqué l’astuce pour passer les paramètres depuis le virtuel vers le code du widget :+1:


@Doubledom pas bête du tout la solution de mettre une seconde courbe data avec une seconde échelle de graduation, je n’y ai pas pensé une seule seconde :see_no_evil:

Pour l’excentration de ta jauge, je ne vois pas ce qui cloche. Elle me semble bien cadrée pourtant non ?

Bonsoir,
est ce que ce tuto est compatible en V4 ? il me semble que non ?

Mais quelle est la bonne procédure pour la V4 ?

Merci

En V4 c’est ici : [PARTAGE] Jauges Highcharts paramétrable, ouvert aux contributions

1 J'aime

Bonjour,
Comme je disais en premier post, désolé je ne sais pas du tout. Je n’ai pas de machine en v4 donc je n’ai aucune idée de comment ça fonctionne sous la v4 :frowning:
Mais visiblement le topic d’@olive est dédié à la v4 et son widget est bien plus avancé que le mien car je suis parti sur l’idée de base de plusieurs widgets dédiés à un type d’info (un pour les roses des vents, un pour les températures/hydro, un pour les élévations, etc.) avec quelques paramètres chacun, alors qu’Olive a fait un widget unique beaucoup plus complet car universel vu qu’il se paramètre pour chaque type d’information.