Différences

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

--- start:raspberry:nodered:dashboard2 [2025/01/28 14:59] – [Mise en page] admin
+++ start:raspberry:nodered:dashboard2 [2025/01/28 15:04] (Version actuelle) – [# Barre de navigation latérale] admin
@@ Ligne 47: / Ligne 47: @@
     *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: : ( 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.
+    *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==
-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.