IHM V5 en détails : Les dashboards

Niveau de mise à jour : 5.4.5 (12/09/2022)

Présentation

IPX800 V5
Nom			IPX800 V5
Famille			IPX800 V5
Alimentation			10V à 18V continus
Dimensions			9 emplacements Din
Consommation (à vide)			1.2 Watt
Indice de protection			IP20
Nbr de sorties (relais)			8 extensible à 88
Nbr d'entrées digitales			8 extensible à 152
Nbr d'entrées analogiques			4 (16 bits)

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 un 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.

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".

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

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

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

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

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 vide 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.

vidéo (animated gif)

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

(avec vidéo de surbrillance emplacements au survol)

Les outils Widget

Certaines actions sont possibles sur un widget grâce au bouton Outils

Redimensionneer un widget

La première ligne de la boîte à outil 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 l'espace leur dimensionnement.

Dupliquer un widget

Le bouton permet de dupliquer le widget sau 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 sur un autre dashboard.

Sélectionnez le dashboard cible

puis validez en cliquant sur le bouton

Les thèmes

Téléchargement : blurple.json

Les widgets (sur dashboard)

dimensionnement, suppression, duplication, déplacement, 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)...