======== Installation et utilisation dashboard2 ========= [[https://flowfuse.com/blog/2024/03/dashboard-getting-started/|Dashboard2 ]] ====Comment installer Node-RED Dashboard 2.0==== ==Étape 1 : « Gérer la palette »== -Cliquez sur les paramètres Node-RED (en haut à droite) -Cliquez sur « Gérer la palette » ==Étape 2 : Rechercher et « Installer »== -Passer à l'onglet « Installer » -Rechercher « @flowfuse/node-red-dashboard » -Cliquez sur « Installer » ==Ajouter vos premiers widgets== Une fois les nœuds installés, la mise en route est aussi simple que de choisir un nœud dans la palette (la liste des nœuds de gauche) dans Node-RED et de le déposer sur votre toile. Dans ce cas, nous déposons un ui-button, cliquons sur « Déployer » et pouvons alors voir le bouton s'exécuter en direct dans notre interface utilisateur. Notez également que le tableau de bord configurera automatiquement certaines configurations sous-jacentes pour vous (visibles dans le menu de droite) : *__ui-base__: Chaque instance de Node-RED qui utilise Dashboard 2.0 doit avoir un seul ui-baseélément (nous espérons pouvoir ajouter la prise en charge de plusieurs éléments à l'avenir). Cet élément contient tous les paramètres globaux de votre instance Dashboard. *__ui-page__:Un seul tableau de bord ( ui-base) peut être constitué de plusieurs pages et peut être consulté à l'aide de la barre latérale gauche. Chaque page est alors chargée d'afficher une collection d' ui-groupéléments. *__ui-group__:Chaque groupe contient une collection de widgets et peut être utilisé pour organiser votre tableau de bord en sections logiques. *__ui-theme__:Chacun ui-pagepeut se voir attribuer un thème donné. Vos « Thèmes » permettent de contrôler l'esthétique de votre tableau de bord, comme la couleur, le remplissage et les marges. ==Configurer votre mise en page== Dashboard 2.0 ajoute une barre latérale dédiée à Node-RED pour fournir une vue centralisée de vos pages, groupes et widgets. À partir de là, vous pouvez ajouter de nouvelles pages et groupes, modifier les paramètres existants et réorganiser le contenu à votre guise. Lors de la définition de vos options de mise en page, nous divisons le choix en deux sections : Mise en page : contrôle la manière dont les ui-groups« » sont présentés sur une page donnée dans votre application. Barre latérale de navigation : définit le style de navigation du côté gauche, défini au ui-baseniveau. == Mise en page == Actuellement, nous avons trois options différentes pour la mise en page : *Grid: : [[https://dashboard.flowfuse.com/layouts/types/grid.html|( docs )]] Il s'agit de la mise en page par défaut d'une page, et elle utilise un système de grille à 12 colonnes pour organiser votre ui-groups. Les largeurs des groupes et des widgets définissent le nombre de colonnes dans lesquelles ils seront rendus. Ainsi, une « largeur » de 6 pouces rendrait 50 % de l'écran. Les mises en page en grille sont entièrement réactives et s'ajusteront à la taille de l'écran. * Fixed: : [[https://dashboard.flowfuse.com/layouts/types/fixed.html|( docs )]] Chaque composant sera rendu à une largeur fixe , quelle que soit la taille de l'écran. La propriété « width » est convertie en une valeur de pixel fixe (multiples de 48 px par défaut). *Notebook: : [[https://dashboard.flowfuse.com/layouts/types/notebook.html|( docs )]] Cette mise en page s'étendra sur 100 % de la largeur, jusqu'à une largeur maximale de 1 024 px, et s'alignera au centre. Elle est particulièrement utile pour les interfaces utilisateur de type narration (par exemple, articles/blogs) ou analyse (par exemple, Jupyter Notebooks), où vous souhaitez que l'utilisateur assimile le contenu dans un ordre particulier par défilement. ==Barre de navigation latérale== Dashboard 2.0 propose différentes options sur l'apparence de la barre latérale de navigation : *Réduction : lorsque la barre latérale est ouverte, le contenu de la page s'ajuste à la largeur de la barre latérale. *Corrigé : la barre latérale complète sera toujours visible et le contenu de la page s'ajustera à la largeur de la barre latérale. *Réduire en icônes : lorsqu'elles sont réduites, les utilisateurs peuvent toujours naviguer entre les pages en cliquant sur les icônes représentant chaque page dans la barre latérale. *Apparaître sur le contenu : lorsque la barre latérale est ouverte, la page est superposée et la barre latérale se trouve au-dessus. *Toujours masquer : la barre latérale ne s'affichera jamais et la navigation entre les pages peut être pilotée par ui-control. ==Définissez votre mise en page== Dans notre exemple, nous allons passer à une mise en page « Notebook », avec une barre latérale « Réduire en icônes » : {{ :start:raspberry:nodered:capture_d_ecran_du_2025-01-28_15-03-52.png?direct&600 |}} ==Ajout de widgets supplémentaires== Maintenant, nous allons créer un exemple rapide pour démontrer comment nous pouvons connecter des nœuds ensemble et visualiser la sortie d'un ui-slidersur un ui-chart. ==Ajouter un groupe== Dans la barre latérale du tableau de bord 2.0 de l'éditeur Node-RED, nous allons ensuite effectuer les opérations suivantes : *Modifiez « Mon groupe » et renommez-le en « Contrôles » *Créez un nouveau « Groupe » dans votre page existante appelé « Visualisation des données » Vous verrez maintenant les deux groupes répertoriés sous « Page 1 ». « Contrôles » avec un seul widget ui-buttonet « Visualisation des données » sans aucun widget. ==Connexion de nouveaux nœuds== Ensuite, nous allons ajouter deux nouveaux widgets : *Graphique de l'interface utilisateur *Curseur d'interface utilisateur Ce que nous pouvons faire en les déposant de la palette de gauche sur notre toile. Nous devrons double-cliquer sur chaque nouveau nœud et confirmer à quel « groupe » nous voulons ajouter ce nœud. Dans ce cas, nous ajouterons le ui-sliderau groupe « Contrôles » et le ui-chartau groupe « Visualisation des données ». Nous allons également connecter la sortie du ui-slideret ui-buttonà l'entrée du ui-chart: Maintenant, lorsque nous visualisons notre tableau de bord, nous pouvons voir que la ui-slidersortie est directement dans notre ui-chart: La dernière étape que nous allons faire est de modifier notre ui-button. Nous allons le renommer en « Clear » et configurer son option « Payload » pour envoyer une charge utile JSON de [], qui, une fois envoyée au ui-charteffacera le graphique de toutes les données.