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.

# Barre de navigation latérale