Tableau de bord

L’écran tableau de bord permet de gérér les cartes affichées sur l’écran d’accueil. Chaque carte est associée à un écran de graphique. Les champs suivant sont affichés :

Titre :

Titre de la carte et du graphique associé.

Lien :

Lien vers une page externe relative aux données affichées. Sur le tableau de bord, c’est le symbole open_in_browser qui permet d’activer ce lien dans un nouvel onglet. Ce même symbole est disponible dans le menu contextuel des graphiques.

Couleur de la carte :

C’est tout simplement la couleur de fond de la carte dans l’écran principal.
Rose par défaut, il est possible de personnaliser la couleur de la carte.

Légende :

Légende verticale affichée à gauche du graphique associé.

Mise à jour :

Si la mise à jour est “Dynamique”, le graphique affiché est mis à jour automatiquement au fur et à mesure de l’arrivée de nouvelles données. Ces nouvelles données sont aussi affichées à droite du graphique.
Si la mise à jour est “Manuelle”, l’utilisateur doit rafraichir la page pour obtenir les éventuelles nouvelles données enregistrées depuis que la page a été affichée.

Ordre :

Permet de gérer l’ordre d’affichage des cartes sur le tableau de bord. L’ordre est croissant. Les cartes dont l’ordre n’est pas spécifié sont placé en fin. L’ordre saisi doit être un chiffre entier, sinon il est ignoré.

Visibilité :

Cette carte peut exister, sans être visible dans le tableau de bord. Elle sera visible dans la liste des cartes, et sera accessible via son URL.

Jours :

C’est le nombre de jour à afficher dans le graphique.
S’il n’y a pas de choix possible, toujours le dernier jour par exemple, saisir simplement “1”.
Mais si l’on souhaite pouvoir accéder en option à des périodes plus longues, il est possible de spécifier ces périodes. Les différentes périodes doivent être séparée par une vigule.
Ces différentes périodes seront accessibles via le menu de l’écran. Par défaut, c’est la première période qui sera affichée.

Liens supplémentaires :

Il s’agit d’une fonctionalité expérimentale. Y placer un ou plusieurs URLs, formatés en JSON comme cet exemple avec 3 liens : [{"url": "http://172.17.2.130:5555/", "name": "Synthèse EasySunSystem"}, {"url": "http://172.17.8.30:5000/graph/54", "name": "Production solaire journalière"}, {"url": "http://172.17.8.30:5000/graph/67", "name": "Températures de la centrale"}]

Définiton de chaque courbe :

Comme il est possible d’afficher plusieurs courbes, il est nécessaire de personnaliser chaque courbe.

Flux d’origine :

Pour savoir d’où vient la données à tracer, il faut indiquer le flux d’origine de cette donnée. La liste des flux disponibles est proposée.

Légende :

Lorsque la souris se déplace au desssus du graphique, une légende est affichée pour chaque point.

Type de graphique :

Choix du type de graphique, déterminant la façon dont est tracée la courbe.
4 types sont disponibles pour le moment :

Lissé → C’est le type par défaut, avec des angles adoucis. Courbe de température par exemple. Attention, si plusieurs courbes sont affichées, ce type de graphique peut produire des réusltats illisibles. Il est alors nécessaire de choisir le type ‘Normal’.
Escalier → Un trait horizontal est tracé jusqu’à la valeur suivante. Typique d’un compteur électrique par exemple avec de brusques changements.
Normal → Un trait droit, donc souvent oblique, relie les différents points.
Histogramme → Chaque point de la courbe est affiché sous forme de barre verticale. Attention si plusieurs courbes sont affichées, une seule peut utiliser ce type.

Elément à tracer :

C’est l’élément du flux à utiliser pour tracer la courbe.
Un flux peut-être composé de plusieurs données. Les données d’un flux sont nommés. Il faut donc utiliser le nom de la données au sein du flux.
Dans le cas de documents json imbriqués, comme ceux générés par les capteurs Tasmota, l’élément de détail doit être indiqué en concaténant l’élément secondaire à l’élément principal et en les séparant avec les 2 lettres -).
Par exemple, pour le cas d’un compteur d’énergie électrique, l’ensemble des informations est indiqué dans la balise ENERGY. Si c’est l’élément “Power” qui nous intéresse, ce sera noté ENERGY-)Power.
Si des données existent déjà, l’icône live_help permet d’afficher les éléments disponibles et de les choisir. Il se peut que cette icône ne soit pas immédiatement active. En effet, la liste des éléments disponibles peut parfois demander un certain temps à être complètement constituée.

Unité à afficher :

Sur la carte, la valeur est affichée avec son unité.
De même, la légende du graphique précise l’unité.
Enfin, lorsque que la souris parcours une courbe, la valeur du point correspondant est affiché, avec son unité.
A noter également que l’unité est renvoyée en en-tête des documents au format csv ou json des historiques de donnée.

Visibilité :

Permet de ne pas afficher cette courbe, sans avoir à la supprimer.

Nombre de décimales :

Lorsque que la souris parcours une courbe, la valeur du point correspondant est affiché. Afin d’avoir un affichage homogène, il est intéressant de fixer le nombre de décimal à utiliser.

Facteur d’échelle :

Lorsque plusieurs courbes sont affichées, il peut arriver que l’ordre de grandeur de chaque série de donnés soit très différent. Cela donne alors un graphique avec la série des grandes valeurs affichée correctement, et la série des petites valeurs semblant être une ligne plate en pied de graphique. Dans ce cas, en multipliant chaque valeur de la seconde courbe par un coefficient, elle devient plus visible.

Décalage :

De la même façon, il peut y avoir un grand espace entre 2 séries de valeurs, une évoluant entre 50 et 60 par exemple, et l’autre entre 1 et 10. Cela donne alors un graphique avec beaucoup de vide et des courbes sans relief. Dans ce cas, en introduisant un décalage sur chaque valeur de la seconde courbe, elle vient se superposer à la première et l’ensemble devient plus visible, avec plus d’amplitudes.

Couleur de la courbe :

Couleur utilisée pour tracer la courbe.