IHM V5 en détails : Les dashboards
Niveau de mise à jour : 5.5.6 (09/11/2023)
Présentation
| |||
|---|---|---|---|
| |||
| Nom | IHM 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 bytes (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ées "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.
La catégorie Périphérique permet d'afficher ou contrôler des extensions.
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 : une image encodée 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 Bouton 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 rattaché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, il est non modifiable.
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, consultez 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, consultez 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 de faire une initialisation 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 couleurs différentes (Voir le paragraphe "Les Thèmes").
IPX V5
Ce widget permet de contrôler les entrées digitales, analogiques et enfin les sorties relais de l'ipx800 v5 elle-même.
Les paramètres Min et Max sont communs à toutes les jauges, de même les couleurs On et Off sont communes à toutes les IO (matrice de voyants).
En petite taille, le widgets affiche les relais seuls, en taille intermédiaire il affiche les entrées digitales et les sorties relais.
IPX800 V4
Ce widget est spécifique au plugin IPX800 V4 que vous devrez configurer préalablement.
Il permet de contrôler les entrées digitales, analogiques et enfin les sorties relais de l'ipx800 v5 elle-même.
Les paramètres Min et Max sont communs à toutes les jauges, de même les couleurs On et Off sont communes à toutes les IO (matrice de voyants).
En petite taille, le widgets affiche les relais seuls, en taille intermédiaire il affiche les entrées digitales et les sorties relais.
remarque : les entrées digitales de l'IPX800 V4 ne sont pas pilotables.
X-8R
Le widget X-8R permet de contrôler et/ou afficher l'état des relais et appuis longs de l'extension sélectionnée.
En petite taille, le widget affiche l'état des 8 relais, dans les tailles supérieures le widget affiche également l'état des appuis longs.
X-8D
Le widget X8D permet d'afficher l'état des entrées opto-isolées de l'extension.
X-24D
Widget spécifique aux extensions X24D et X24U.
Seule la taille maximale permet d'afficher les 24 entrées
X4VR
Widget spécifique aux extensions X-4VR.
Il permet de contrôler les 4 canaux de l'extension, soit en mode classique, soit en mode BSO.
Volet roulant
Le widget Volet roulant permet de contrôler un canal sur une extension X-4VR. Il est également possible de le piloter en mode BSO.
X-THL
Le widget permet d'afficher les 3 valeurs analogiques de l'extension X-THL. Les jauges température et luminosité sont personnalisables.
X-400
Le widget permet l'affichage des 4 canaux analogiques de l'extension rattachée.
Le canal du X-Bridge doit être précisé. Pour plus d'information, voir la documentation du X-400.
Seule la plus grande taille permet l'affichage des 4 valeurs.
Les paramètres Min et Max sont communs aux 4 jauges.
X-200PH
Le widget permet d'afficher le pH et le Redox mesurés par l'extension X-200 PH.
Le canal du X-Bridge doit être renseigné. Pour plus d'information, veuillez consulter la documentation de l'extension.
X4FP
Le widget X-4FP permet de piloter soit 1 zone avec les 6 ordres, soit toutes les zones.
Seules les 2 grandes tailles du widget permettent de gérer les 6 ordres.
X-POOL
Le widget permet de piloter les 4 relais de l'extension et afficher les mesures de température, Redox et pH.
En petite taille, le widget permet le pilotage des 4 sorties relais.
En taille intermédiaire, le widget affiche les valeurs analogiques en plus de permettre le pilotage des relais.
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ées: <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 Courante peuvent être masquées en activant le toggle correspondant.
Pour la cosmé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 directement dans le widget.
Le champ Étiquette permet la saisie d'un titre qui sera affiché en gras.
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 Emojis. 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, ce qui limitera le nombre de widgets. Il vaut mieux créer une variable String contenant le texte et la rattacher au widget afin de libérer la mémoire.
Afficheur analogique
L'afficheur analogique permet la sélection d'une ressource.
Seule la plus grande taille du widget permet l'affichage du champ Étiquette.
Par défaut, la valeur est écrite avec une large police. Il est possible de réduite la taille du texte en basculant le toggle Grande Valeur.
Texte ON/OFF
Le widget Texte ON/OFF permet la sélection d'une ressource type IO.
Selon l'état de cette IO, il est possible de renseigner le texte, la couleur et l'icône à afficher.
Un texte trop long sera tronqué :
Astuce : Vous pouvez insérer un saut de ligne dans le texte avec la balise <BR>
Vous pouvez également utiliser la balise <small>...</small> pour réduire la taille du texte, et même cumuler <small> avec un saut de ligne <br>.
l'usage de <small> ... </small> inhibe la colorisation du texte.
Météo
Le widget Météo est spécifique au plugin éponyme qu'il faudra préalablement configurer (voir doc ipx800 v5)
En petite taille, seul le temps et la température actuelle sont affichés.
L'icône est l'interprétation de la valeur "Niveau" du plugin. Voir l'article IHM V5 en détails : Les liens pour plus d'information.
En taille intermédiaire, les heures du lever et coucher du soleil sont ajoutées au temps et à la température.
En grande taille, les prévisions J+1 à J+4 sont affichées sous les informations du jours.
Les données sont affichées avec arrondi à l'entier le plus proche.
Afficheur temps
Le widget "Afficheur de temps" permet la conversion et l'affichage de données analogiques exprimées en heures, en minutes, en millisecondes ou encore au format Timestamp vers un autre format.
Définition : le Timestamp est un compteur de secondes écoulées depuis le 01/01/1970 à 00:00:00. Les données comme l'horloge interne de l'IPX800 V5, l'heure de lever et de coucher du soleil retournées par le plugin Météo sont au format Timestamp.
Délai
Le widget est spécifique aux objets Délais et ne permet la sélection que d'une ressource.
Le décompte TA de l'objet est affiché sous forme d'une animation. Si le contrôle du widget est activé, il est possible de réinitialiser le décompte en cliquant sur le disque.
Le comportement dépendra des paramètres de l'objet Délai, notamment le mode Hold ou ON/OFF.
Pour plus d'informations, veuillez consulter l'article IHM V5 en détails : Les liens
Tempo
Le widget est spécifique aux objets Tempo et ne permet la sélection que d'une ressource.
Le décompte TB de l'objet est affiché sous forme d'une animation. Si le contrôle du widget est activé, il est possible de réinitialiser le décompte en cliquant sur les boutons.
Le comportement dépendra des paramètres de l'objet Tempo, notamment le mode Hold ou ON/OFF.
Pour plus d'information, veuillez consulter l'article IHM V5 en détails : Les liens
Attention : les contrôles ne sont pas désactivables. Si vous souhaitez afficher le décompte d'une tempo sans pouvoir le modifier, il faut mieux utiliser le widget "Afficheur de temps".
Chrono
Le widget est spécifique aux objets Chronomètres et ne permet la sélection que d'une ressource.
Attention : Les contrôles ne sont pas désactivables.
Si vous souhaitez afficher des compteurs de fonctionnement d'un appareil, il vaut mieux utiliser un afficheur de temps , sans contrôle, ce qui évitera les modifications ou réinitialisations accidentelles.
Horloge
Ce widget est spécifique. Il permet l'affichage de l'heure et facultativement la date de l'IPX800 V5 (variable [IPX]CLOCK ) sous la forme d'une horloge analogique.
L'aspect de l'horloge est personnalisable.
HTML
Le widget de type HTML permet l'insertion de code HTML, CSS et javascript. Vous pouvez importer le code à partir d'un fichier, ou bien le saisir directement dans l'éditeur embarqué.
L'ipx800 V5 embarque un éditeur de code avec coloration syntaxique ainsi que diverses fonctionnalités comme la reconnaissance de blocs.
Une API spécifique aux widgets permet d'interroger ou modifier les ressources de l'IPX800, un exemple de code faisant appel à cette API est automatiquement intégré dans le script des nouveaux widgets HTML. Ce code doit être adapté pour être fonctionnel.
Pour plus d'informations sur l'API Widget HTML, veuillez consulter la documentation téléchargeable ici : GCE Download Center (gce-electronics.com)
Exemple de script HTML
Le script interroge une IO (id 65776) et une analogique (id 262198) pour afficher une image changeant en fonction de leur valeur.
Vous voulez voir le code ?
<script>
window.GCE_Refresh.push(function(data) {
switch (data['_id'])
{
case 65776:
changeIcon(data.on);
break;
case 262198:
countdown(data.value);
break;
}
})
function init() {
GCE_API.getIO(65776).then((ret) => {
changeIcon(ret.on);
})
GCE_API.getANA(262198).then((ret) => {
countdown(ret.value);
})
}
function changeIcon(state){
var imgOn="https://zupimages.net/up/23/14/gf2n.png";
var imgOff="https://zupimages.net/up/23/14/3sqs.png";
monImage=document.getElementById("baignade");
monImage.src = state ? imgOn : imgOff;
}
function countdown(value){
var txt= document.getElementById("cnt");
var reste=value;
var result='';
var nbHours=Math.floor(reste/3600);
reste -= nbHours*3600;
var nbMinutes=Math.floor(reste/60);
reste -= nbMinutes*60;
var nbSeconds=reste;
if (nbHours>0)
result=result+nbHours+'h ';
if (nbMinutes>0)
result=result+nbMinutes+'min ';
if (nbSeconds>0)
result=result+nbSeconds+'s ';
txt.innerHTML=result;
}
init()
</script>
<center>
<img id="baignade" width=96px/>
<p id="cnt" style="font-size:1em;color:#f00;">
</center>Les thèmes
Les thèmes sont paramétrables à partir de la page Système.
Vous devez d'abord ajouter un nouveau thème pour modifier les couleurs par défaut de l'interface Web.
Créez un nouveau thème à partir du thème Défaut.
Vous pouvez également importer un nouveau thème. à partir d'un fichier Json.
Vous avez donc la possibilité d'échanger des thèmes avec la communauté ou de télécharger des modèles sur le site GCE.
Dès la création ou l'import d'un nouveau thème, il est automatiquement appliqué.
Vous pouvez changer le thème à tout moment en activant le Toggle "Utiliser" qui se trouve sur chaque tuile.
Cliquez sur Édition pour modifier les paramètres du thème. un panneau latéral s'ouvre à droite.
Parmi les nombreux paramètres modifiables, Ceux de la rubrique "Couleur Widget" définiront les 2 modèles de widgets "Template 1" et "Template 2".
Sur le dashboard, tous les widgets sont affichés selon le Template 1 ou le Template 2. Ce choix est disponible lors de l'édition de tout widget.
Exemple avec un widget Texte On/Off.
Pensez à sauvegarder le thème après modification des paramètres. Le bouton est situé en bas du panneau latéral du Thème.
Les Liveviews
Principes
Les liveviews permettent de placer une image (plan, diagramme, photographie, ...) ou une vidéo en arrière-plan.
Les formats pris en compte seront ceux qui sont reconnus par le navigateur internet utilisé.
Les widgets à fond transparent sont positionnés et dimensionnables librement, au pixel près.
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é .
Arrière-plan
Cliquez sur le bouton avec Roues dentées dans le menu supérieur.
Renseignez l'URL complète de l'image (ou vidéo) de fond.
Rappel : l'élément d'arrière-plan doit être hébergé sur un serveur Web et être accessible par une URL .
Vous pourrez trouver des hébergeurs gratuits d'images comme Zupimages , GooPics ou encore imgBB.
Vous pouvez également stocker ces éléments sur votre serveur web local (NAS, ...).
Organisation de la vue
Ajouter et redimensionner un widget
D'un click sur le bouton Ajouter, un nouveau conteneur vide est créé dans le coin supérieur gauche de la vue. Vous pouvez le faire glisser avec la souris pour le repositionner.
Une poignée de redimensionnement est prévue dans le coin inférieur -droit du conteneur. Cliquez cette poignée et glissez la.
Le menu Edition vous permettra de sélectionner le type de widget à afficher dans ce conteneur.
Repositionner et aligner un widget
Des réticules rouges vous aident à aligner les widgets.
Le menu Outils est accessible via l'icône placée dans le coin supérieur gauche de chaque widget.
Superposer les widgets
Quatre options du menu Outils permettent de positionner les widgets sur des plans différents. Cela permet la superposition.
Vous pouvez amener le widget au premier plan, en arrière-plan et même l'avancer ou le reculer de plan en plan.
Remarque : lorsque des widgets sont superposés, c'est toujours le widget d'avant-plan qui sera sélectionné par un clic de souris. Pour modifier un widget situé derrière, il faudra alors les déplacer.
La gestion des différents plans permet de créer des vues très riches.
Exemple de boutons et textes on/off superposés. Les flèches sont réalisées avec des émoji collés dans des textes on/off.
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 créé automatiquement dans le coin supérieur gauche du Liveview.
Déplacer un widget vers un autre Liveview
Le bouton permet de déplacer le widget vers un autre Liveview.
Sélectionnez le Liveview cible
puis validez en cliquant sur le bouton
Les widgets (sur liveview)
Le menu Édition d'un conteneur permet de sélectionner le type de widget à afficher.
Ces widgets sont classés par catégories.
Certains Widget proposent de régler la taille du texte affiché. Je vous recommande de laisser la taille automatique.
Cela permet de visualiser le dashboard sur des écrans de différentes tailles. Le dashboard sera redimensionné dans la mesure du possible à la taille de l'écran (arrière-plan, widgets, images et textes). Si vous utilisez une taille de police fixe, le redimensionnement du texte ne pourra pas être fait, ce qui peut provoquer des rendus disgracieux.
Icône
Vous pouvez sélectionner une ressource de type IO et lui assigner une icône colorée pour chaque état (on ou off).
Pour ne pas afficher d'icône, sélectionnez 
Ce widget ne permet pas le contrôle de la ressource.
Texte
Ce widget permet d'afficher un texte constant. Aucune action n'est possible.
Laissez la taille de police en automatique dans la mesure du possible.
Afficheur texte
Ce widget permet l'affichage d'une ressource analogique sous forme de texte.
Image On Off
Ce widget permet de sélectionner une ressource type IO et afficher une image pour chaque état.
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).
Par défaut, le contrôle de la ressource est activé, le widget est cliquable. Vous pouvez désactiver cette fonctionnalité.
Remarque : un autre mode de stockage de l'image consiste à l'encoder en Base64 grâce à des encodeurs gratuits et en ligne, puis d'insérer le code en lieu et place des liens vers image On et image Off
Attention : une image encodée peut occuper beaucoup de mémoire et saturer l'espace réservé au Dashboard.
A utiliser avec grandes précautions.
Text On Off
Ce widget permet la sélection d'une ressource type IO et d'afficher un texte dépendant de son état.
Il est impossible de laisser une chaîne de caractères vide, par conséquent, si vous souhaitez ne pas afficher l'un des textes, saisissez un espace.
Afficheur temps
Le widget "Afficheur de temps" permet la conversion et l'affichage de données analogiques exprimées en heures, en minutes, en millisecondes ou encore au format Timestamp vers un autre format.
Bouton
Le widget Bouton permet la sélection d'une ressource type IO et de changer son état.
Le Bouton prend le même état que la ressource pilotée.
Slider
Le widget Curseur permet la sélection d'une ressource analogique et la modification de sa valeur.
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ées: <BR> saut de ligne , <B>...</B> texte gras, <i>...</i> texte italique
Jauge linéaire
Le widget Jauge Linéaire permet la sélection d'une ressource analogique.
Les valeurs Min, Max et Courante peuvent être masquées en activant le toggle correspondant.
Pour la cosmé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.
HTML
Le widget de type HTML permet l'insertion de code HTML, CSS et javascript. Vous pouvez importer le code à partir d'un fichier, ou bien le saisir directement dans l'éditeur embarqué.
L'ipx800 V5 embarque un éditeur de code avec coloration syntaxique ainsi que diverses fonctionnalités comme la reconnaissance de blocs.
Sur le liveview, je m'en sers surtout pour créer des éléments comme des cadres ou fonds colorés avec gestion de l'opacité. Pour cela j'insère du CSS.
Exemple avec un cadre à fond bleu semi-transparent :
<span style="color:White;
font-size: 18px;
padding: 5px;
background-color:rgba(125,125,255,0.5);
border-radius: 5% 5% 5% 5%;
border: 0px solid #fff;
padding-left: 25px;
position:relative;
height:95%;
width:80%;
display:block;"></span>