Différences

Ci-dessous, les différences entre deux révisions de la page.

--- start:raspberry:nodered:dashboard2 [2025/01/28 14:55] – [Comment installer Node-RED Dashboard 2.0] admin
+++ start:raspberry:nodered:dashboard2 [2025/01/28 15:04] (Version actuelle) – [# Barre de navigation latérale] admin
@@ Ligne 24: / Ligne 24: @@
 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.