IHM V5 en détails : Les dashboards

Niveau de mise à jour : 5.5.6 (09/11/2023)

Présentation

IPX800 V5
Nom			IPX800 V5
Famille			IPX800 V5
Wiki créé le			21/11/2023
Wiki mis à jour le			21/11/2023
Auteur			@fgtoul

Page en cours de création

Les tableaux de bord : généralités

Les tableaux de bord permettent un affichage personnalisé de toutes les ressources digitales et analogiques de l'installation (IPX800 + Extensions) voire même des objets ou services communicants.

L'IPX800 V5 propose des tableaux de bord de deux types :

• Dashboards classiques (widgets positionnés sur une grille), Les tableaux de bord classiques sont réactifs (responsive design) et permettent un affichage sur des écrans de toute taille. Lorsque le Dashboard est consulté sur un écran de taille différente, il est possible de réagencer les widgets pour une meilleure visualisation, mais cela affecte alors la visualisation sur tous les écrans. Il vaut donc mieux construire des Dashboards spécifiques si l'on souhaite consulter l'IHM sur tablette ou smartphone.
• Liveviews (widgets en positionnement libre sur un fond imagé). Le liveview et tout son contenu est redimensionné (dans la mesure du possible) à la taille de l'écran de consultation. Pour une raison de confort, il vaut mieux que les dimensions de l'image de fond respecte les proportions de l'écran sur lequel elle sera affichée. A défaut, des barres de défilement seront ajoutées et il faudra scroller pour accéder aux extrémités du Liveview.

Création des tableaux de bord

A partir de la page Système , vous pouvez accéder au menu DASHBOARDS.

Les dashboards classiques et les liveviews sont classés en 2 catégories distinctes.

Vous pouvez les personnaliser

• Nom : Nom du Dashboard
• Icône : vous pouvez sélectionner une icône parmi une liste conséquente, triée par catégories. Pour ne pas afficher d'icône, sélectionnez

Édition, suppression et export

Vous pouvez supprimer un dashboard ou encore l'exporter sous forme de fichier JSON. Il sera alors possible de l'importer sur une autre IPX800 V5.

Remarque : une jauge affiche la taille mémoire en % du dashboard. Si cette taille atteint 100%, il est alors impossible d'ajouter un widget.
Les dashboards ont une taille limitée à 61440 bits (60 ko).

Tous les tableaux de bord (dashboards et liveviews) sont sauvegardés lors d'une sauvegarde du système (menu Système / Configuration)

Création

A partir de la page DASHBOARDS, vous pouvez également créer des nouveaux tableaux de bord en cliquant le bouton

Lors de la création, vous avez la possibilité d'importer un fichier Json, sauvegardé par vos soins ou bien partagé par un membre de la communauté GCE.

Vous pouvez également trouver des modèles à télécharger sur le site officiel de GCE puis les importer sur votre IPX800.

exemples :

Téléchargement : My_Little_House.json

Téléchargement : my_little_house_live.json

Pour créer un nouveau tableaux de bord, vous devez être connecté avec un identifiant de classe "Admin" ou "Root".

Duplication de Dashboard

Il peut s'avérer utile de dupliquer un dashboard entier afin d'adapter la disposition des widgets à différents écrans.

Dans ce cas, exportez la vue à dupliquer puis créez un nouveau dashboard en important la sauvegarde faite précédemment.

Pensez à configurer les droits d'accès sur la nouvelle vue (voir ci-dessous).

remarque : vous ne pourrez pas importer le Json d'un dashboard dans un liveview, (et vice-versa).

Gestion des droits d'accès

Les droits d'accès à un dashboard ou liveview sont administrés à partir de la page Système/Utilisateurs.

Connecté avec un identifiant "Root" ou "Admin", vous pouvez attribuer le droit de visualisation à chacun des utilisateurs sur les dashboards que vous créez.

N'oubliez pas de vous octroyer les droits si vous souhaitez avoir accès au dashboard.

Pour chaque utilisateur, les listes nommée "Dashboard" et "Liveview" permettent la sélection multiple des vues qu'il pourra consulter.

En fonction de son niveau d'accréditation (Observateur, Utilisateur, Opérateur, Admin, Root) il aura ou non la possibilité de modifier la vue ou de piloter l'installation à partir des widgets.

Rappel à partir de la doc :

Les niveaux de permissions de l’IPX800 V5:

- Niveau 0 : Le mode Observateur permet uniquement de consulter les tableaux de bord. Tous les contrôles sont désactivés. L'observateur ne peut pas créer ni modifier les vues.

- Niveau 1 : Le niveau Utilisateur autorise l’usage des tableaux de bord (contrôles activés). L'utilisateur ne peut pas créer, trier ou modifier les vues.

- Niveau 2 : Le niveau opérateur autorise l'usage, la création, la modification et la configuration des Dashboards. Par défaut, lui seul aura accès aux vues qu'il aura créées.

,- Niveaux 3 et 4 : administrateur et Root ont un accès total sur les vues et les droits d'accès qu'ils pourront attribuer à tout utilisateur.

Ordonnancement des vues

L'interface web de l'IPX800 affiche un menu supérieur avec tous les onglets correspondants aux vues attribuées à l'utilisateur connecté.

Pour accéder à une vue il suffit de sélectionner l'onglet correspondant.

Afin d'organiser les onglets selon un ordre préférentiel, vous devez cliquer sur le bouton de déverrouillage (Cadenas).

Si la vidéo ne démarre pas, cliquez avec le bouton droit et choisissez "ouvrir dans un nouvel onglet"

Vous pouvez alors faire glisser chaque onglet jusqu'à son positionnement voulu dans la barre de menu.

La sauvegarde du nouvel ordonnancement est automatique dès le relâchement de la souris.

Près du titre de la vue en cours, les roues dentées permettent un accès rapide à sa modification.

Comme pour la configuration évoquée plus haut, vous pouvez renommer, exporter la vue en cours ou lui choisir une nouvelle icône.

Vous pouvez également lancer un repositionnement automatique des widgets sur la vue, si cette dernière est de type "Dashboard".

Ce repositionnement permet d'optimiser la disposition des widgets sur la grille en supprimant les espaces inoccupés.

Les dashboards

Organisation du Dashboard

Avant que toute modification soit possible, il faut déverrouiller la vue en cliquant sur le cadenas situé en haut à gauche si celui-ci est fermé .

Ajouter un widget

Nouveau conteneur

L'ajout d'un nouveau widget se fait en deux étapes et démarre par un clic sur le bouton d'ajout situé en haut à gauche de la vue en cours d'édition.

Un nouveau conteneur vide est alors ajouté et placé sur le premier emplacement disponible et de taille suffisante, en partant de gauche à droite et de haut en bas de la vue.

Ce nouveau conteneur est positionné de manière optimale par rapport à la taille de l'écran en cours d'utilisation.

Si la vidéo ne démarre pas, cliquez avec le bouton droit et choisissez "ouvrir dans un nouvel onglet"

Les coordonnées du nouveau conteneur sont sauvegardées et resteront les mêmes tant que le dashboard sera affiché sur un écran de taille identique.

Si un écran de taille différente est utilisé, le système dynamique peut déplacer le widget de manière à réoptimiser son emplacement.

Sélection d'un type de Widget

Le conteneur vide est en attente de configuration.

Cliquez sur le menu Édition

Le menu Édition vous donne la possibilité de saisir un titre et de sélectionner un type de widget.

Les widgets sont triés par catégories (colonne de gauche).

Sélectionnez un type de widget dans la colonne de droite pour l'afficher dans le conteneur.

Nous verrons plus tard les différents types de widgets qu'il est possible de mettre en place.

Repositionner un widget

Le repositionnement d'un widget se fait par simple glisser/déposer. Le système tente alors de créer de la place en réorganisant dynamiquement le dashboard.

Lâchez le widget à son nouvel emplacement mis en surbrillance.

Si la vidéo ne démarre pas, cliquez avec le bouton droit et choisissez "ouvrir dans un nouvel onglet"

Les outils Widget

Certaines actions supplémentaires sont possibles sur un widget grâce au bouton Outils situé dans le coin supérieur gauche du conteneur.

Redimensionner un widget

La première ligne de la boîte à outils permet de redimensionner le conteneur. Les tailles disponibles sont 1x1, 1x2 et 2x2.

La taille peut avoir un effet sur certains widgets qui afficheront plus ou moins de données selon leur dimensionnement.

Dupliquer un widget

Le bouton permet de dupliquer le widget au sein de la même vue.

Il est possible de cloner n'importe quel type de widget afin de gagner du temps sur la configuration.

Il n'y a pas de paramètre supplémentaire, l'action est immédiate. Un clone du widget est positionné automatiquement sur le dashboard.

Déplacer un widget vers un autre dashboard

Le bouton permet de déplacer le widget vers un autre dashboard.

Sélectionnez le dashboard cible

puis validez en cliquant sur le bouton

Les Widgets

Comme déjà dit, le nombre d'informations affichées par un widget peut varier en fonction de sa taille (1x1, 1x2, 2x2).

Les widgets seront présentés un à un dans les 3 tailles.

La catégorie Contrôle : Comme le nom l'indique, vous pouvez utiliser les widgets de cette catégorie pour piloter des ressources.

Tous ces widgets ont un bouton permettant d'activer ou désactiver le contrôle de la ressource rattachée. Vous pouvez donc également utiliser ces widgets pour afficher un retour d'état.

Si l'utilisateur connecté est de classe "Observateur", tous les contrôles sont désactivés par défaut.

La catégorie affichage : ces widgets ne permettent pas la modification de l'état des IO ni de la valeur des ressources analogiques.

Bouton poussoir

Le Widget permet la sélection de 1 à 4 sources de données et crée autant de boutons, chacun d'eux étant personnalisable (textes, couleurs).

Attention : Le bouton affiche uniquement l'état de la ressource qui lui est attachée. Il n'accepte que des sources de données type IO

Le bouton poussoir se comporte exactement comme la ressource attachée.

• Sur IO bistable : Soit un widget "Bouton poussoir " lié à une entrée digitale de l'IPX800. Le bouton se comporte comme un bistable et aura le même comportement que l'entrée digitale.

• Sur IO monostable :
  • Certaines IO sont en mode impulsion pour lesquelles l'utilisateur n'a pas le contrôle de la durée, souvent de l'ordre de quelques millisecondes (entrée Start des tempo, délais, ..., télérupteur, ...). Il est possible de lier un bouton à ce type de ressource mais le retour d'état sera imperceptible car trop rapide pour l'affichage.
  • D'autres IO sont en mode impulsion dont la durée dépend de la durée du click. C'est le cas par exemple de l'entrée d'un objet Long Click. Le retour d'état sera alors perceptible sur le bouton qui sera ON tant que le click sera maintenu

Image On Off

Ce widget permet d'afficher une image qui change selon l'état d'une ressource type IO.

Exemple avec un bouton à bascule :

Les 2 images doivent être accessibles via internet chez un hébergeur gratuit d'images (Zupimages.net, ImgBB.com, ...) ou bien en local sur le serveur web de votre NAS.

L'accès à l'image doit se faire par url http (exemple http://monserveur/monimage.png)

Les images animées au format Gif ou Apng sont également prises en compte.

Voici un exemple animé en Apng partagé par @Dome sur le forum

Remarque : un autre mode de stockage de l'image consiste à l'encoder en Base64 grâce à des encodeurs gratuits et en ligne (exemple), puis d'insérer le code en lieu et place des liens vers image On et image Off

Attention : l'encodage d'une image peut occuper beaucoup de mémoire et saturer l'espace réservé au Dashboard.

A utiliser avec grandes précautions.

Toggles

Le widget Toggle ressemble en tout point au widget Widget Poussoir, le paramétrage est identique, ainsi que le comportement.

La différence est que le Toggle peut accepter jusqu'à 8 ressources.

astuce : pour afficher des noms plus longs, je règle personnellement le zoom de mon navigateur à 80% et j'insère un saut de ligne avec la balise HTML <br> dans le texte.

 

Matrice de voyants

La matrice de voyants permet de sélectionner de 1 à 40 ressources type IO. Vous pouvez définir les couleurs on et off des voyants.

Le nom de la ressource liée à un voyant s'affiche au survol de la souris.

Slider

Le widget Slider permet la sélection de 1 à 2 ressources analogiques.

Il est possible, pour chaque ressource de définir le minimum, le maximum, le pas, l'icône, l'unité et les couleurs.

Le pas est la valeur d'incrément ou décrément du curseur. Les décimales sont acceptées (exemple pas 0.1)

Si vous réglez un pas avec décimales, pensez à configurer la ressource analogique rattachée avec le même nombre de décimales.

Le curseur peut être déplacé à la souris ou bien avec les touches ⇦ et ⇨ ou ⇧ et ⇩ du clavier.

Table de mixage

Le widget Table de mixage" permet la sélection de 1 à 8 ressources analogiques.

De manière globale, vous pouvez déterminer le minimum, maximum et le sens des curseurs.

Vous pourrez également déterminer la couleur des boutons.

Le pas de chaque curseur est de 1.

Ce widget sera utilisé pour les éclairages DMX par exemple.

Dimmer

Le Widget Dimmer est un bouton rotatif pour lequel vous pouvez déterminer la valeur minimale, maximale et le nombre de repères.

Ce widget sera très utile pour l'éclairage.

Thermostat

Le widget Thermostat est spécifique aux objets de type Thermostat.

Pour plus d'informations, voire l'article présentant tous les objets : IHM V5 en détails : Les liens

A sa taille minimale, le widget permet le réglage de la consigne courante. Le pas par défaut est à 0.5.

Aux tailles les plus grandes, le widget permet de régler la consigne courante bien sûr, mais aussi d'actionner les commandes ON/OFF, CONFORT, ECO et HORS GEL.

Rappel : la consigne courante est une valeur volatile. Elle est perdue à chaque envoi d'un ordre Confort, Eco ou Hors gel. Elle ne modifie pas la consigne par défaut du mode en cours.

Compteur

Le widget compteur est spécifique aux objets du même nom.

Pour plus d'informations, voire l'article présentant tous les objets : IHM V5 en détails : Les liens

Il n'est possible de sélectionner qu'une seule ressource.

Vous pouvez modifier la valeur du compteur en cliquant sur les boutons + et -.

Il est également possible d'initialiser en saisissant une valeur. Pensez à valider.

Remarque : le nombre de décimales et le pas d'incrément sont définis dans la configuration de l'objet Compteur (voir l'article en lien ci-dessus).

Les objets compteurs peuvent être utilisés pour du comptage (impulsions, événements, ...) et également pour la définition de certains paramètres de l'installation. Personnellement j'utilise aussi bien le Slider que le compteur pour mes variables analogiques, c'est juste un choix esthétique pour le dashboard concerné.

Pour le comptage, pensez à désactiver le contrôle sur le widget afin d'éviter toute modification non voulue de la valeur.

Pour différencier les widgets avec et sans contrôle, j'utilise un thème de couleur différent (Voir le paragraphe "Les Thèmes").

Jauge

Le widget Jauge permet l'affichage d'une ressource analogique.

Le style "Défaut" permet la définition de plages colorées.

Vous pouvez déplacer les boutons le long du curseur afin de définir chaque intervalle.

Pour chaque bouton, vous pouvez également saisir la limite du segment dans la zone de texte correspondante. Les décimales sont acceptées si la ressource est définie en REAL avec décimales.

Les boutons sélecteurs de couleur placés sous le curseur permettent de définir la couleur de chaque plage.

Remarque : Si le style du widget est défini sur "Fin", il n'est pas possible de définir les plages colorées.

Astuce : Le champ unité accepte les balises HTML. J'en profite pour ajouter du texte mis en forme (gras, italique, ...)sous la jauge. Le résultat est excellent avec un zoom navigateur réglé à 80 % avec possibilité de 3 lignes supplémentaires.
balises testéess: <BR> saut de ligne , <B>...</B> texte gras, <i>...</i> texte italique

Jauge linéaire

Le widget Jauge Linéaire permet la sélection de 1 à 3 ressources analogiques. Seule la plus grande taille affiche plusieurs jauges.

Les valeurs Min, Max et courantes peuvent être masquées en activant le toggle correspondant.

Pour l'esthétique, il est possible de colorer la jauge avec un dégradé de deux couleurs.

Une valeur de départ peut être paramétrée. Ceci permet de souligner un écart par rapport à un seuil.

Sur la jauge ci-dessus, un dégradé Bleu ->rouge a été défini. Une valeur de départ a été définie à 0. La valeur en cours est supérieure.

Sur la jauge ci-dessus, un dégradé vert -> orange est en place, la valeur Départ est définie à 700, la valeur en cours est inférieure.

Afficheur texte

Le widget texte est capable d'afficher des ressources de type STR (adresses mails, formules de fonctions, variables STR, ...).

Par défaut le widget permet la sélection d'une ressource, basculez le Toggle sur la valeur "Contenu texte" pour saisir un texte.

Le champ Étiquette permet la saisie d'un titre.

J'utilise le widget Texte notamment pour enregistrer de l'aide sur les Dashboards. Encore une fois, un zoom navigateur à 80% donne de très bon résultat sur les textes longs.

Astuce : Vous remarquerez dans les exemples ci-dessus que j'ai inséré des Emojis dans le champ étiquette. Le champ texte peut également contenir des Emoji.
Sur internet, vous trouverez de nombreux sites proposant des Emojis à copier et coller (par exemple ici)

Remarque : la saisie d'un texte dans le widget monopolise de la place mémoire réservée au Dashboard. Il vaut mieux créer une variable String contenant le texte et la rattacher au widget afin de libérer la mémoire.

Les thèmes

Téléchargement : blurple.json

multiples commandes (toggle, poussoirs, matrices, ...), présenter l'API widget avec widget HTML, astuce balises Html <br>..... <b>dans les étiquettes, zoom 80%, ...

Les Liveviews

Principes

Les widgets (sur liveview)

gestion des superpositions (plans)

, clignotements, image on/off : alerte image codée base64 (taille excessive), stockage images (hébergeur gratuit, NAS, ...

texte taille fixe: attention en cas de changement d'écran, alignements (crossbars)...