Installation et utilisation dashboard2

Dashboard2

1. Cliquez sur les paramètres Node-RED (en haut à droite)
2. Cliquez sur « Gérer la palette »

1. Passer à l'onglet « Installer »
2. Rechercher « @flowfuse/node-red-dashboard »
3. Cliquez sur « Installer »

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.

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.

Actuellement, nous avons trois options différentes pour la mise en page :

• Grid: : ( 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: : ( 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.

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.

Dans notre exemple, nous allons passer à une mise en page « Notebook », avec une barre latérale « Réduire en icônes » :

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.

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.

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.