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 : Highcharts JS API Reference
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é.
Edit : voir mes posts à partir du 11/12/2020 en-dessous pour les adaptations en v4.
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 :
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
@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.
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
Ah, c’était donc bien ça le pseudo, ma mémoire a encore quelques restes
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
@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
Pour l’excentration de ta jauge, je ne vois pas ce qui cloche. Elle me semble bien cadrée pourtant non ?
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
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.
Bon, comme j’ai eu des demandes de personnes qui voulaient ces mêmes widgets en v4, voici ce que j’ai fait depuis l’été dernier où j’ai commencé à travailler sur la v4.
C’est loin d’être parfait, mais ça a le mérite de fonctionner
Vous êtes supposé obtenir quelque chose de ce type :
Et pour être sûr qu’on se comprenne bien à propos des paramètres à ajouter dans les équipements Jeedom, voici une capture d’écran de mon virtuel « Température » que vous voyez sur la capture précédente :
Et voici temporairement la rose des vents (j’ai encore à modifier les couleurs pour le curseur ou la flèche et ajouter la gestion d’une option pour choisir l’un ou l’autre justement) : Widgets v4 - Jauge rose des vents.txt (19,9 Ko)
Vous devez obtenir qqch comme ça :
PS : pour ceux qui veulent aller plus loin dans les personnalisation et l’intégration des jauges Highcharts, je vous conseille de faire un tour sur leur forum. Il regorge d’exemples de tous types bien pratiques et les dév répondent plutôt bien aux demandes d’aide
