Sur nerdiy.fr, tout tourne autour de l'électronique, du bricolage, de l'impression 3D, de la maison intelligente et de nombreux autres sujets techniques.
HowTo : Node Red - Créer une interface utilisateur avec des nœuds de tableau de bord
Je ne sais pas si les tableaux de bord sont LE (seul) outil pour faire battre le cœur d'un nerd plus vite, mais ils sont définitivement un outil pour faire battre le cœur d'un nerd plus vite. Pour ceux qui ont grandi avec StarTrek and Co., les aperçus de type tableau de bord sous forme de diagrammes et de graphiques sont la quintessence de la technologie. Vous pouvez maintenant préparer vous-même ce sentiment avec NodeRed grâce à certains nœuds.
Parce qu'une fois que votre SmartHome a atteint le point où il collecte toutes sortes de données sur vos quatre murs, vous avez naturellement envie de les présenter. Mais comment? Après tout, vous ne pouvez pas simplement coller ces données dans un album photo comme les dernières photos de vacances.
Une manière simple et à la fois informative et décorative est de présenter les données existantes via le nœud du tableau de bord pour NodeRed. En plus de divers éléments d'affichage, cela offre également la possibilité d'interagir avec votre système SmartHome. Vous pouvez définir des valeurs, basculer des commutateurs virtuels, déclencher des actions et surveiller leur état en même temps.
Un aperçu des différentes fonctions du nœud du tableau de bord peut être trouvé dans l'article suivant
Conditions préalables
Articles utiles : Pour que vous puissiez installer de nouveaux nœuds, NodeRed doit bien sûr déjà être installé. Comment préparer un RaspberryPi puis installer NodeRed dessus est décrit dans les articles suivants.
Dans la liste suivante, vous trouverez toutes les pièces dont vous avez besoin pour mettre en œuvre cet article.
Connectez-vous à l'interface de configuration de NodeRed
Avant de pouvoir modifier votre configuration NodeRed, vous devez - si activé - vous connecter d'abord à l'interface de configuration NodeRed.
Vue de la boîte de dialogue de connexion. Ici, vous devez entrer les données de connexion que vous avez spécifiées lors de la configuration de la connexion. Vous trouverez des informations à ce sujet dans l'article NodeRed - configurer la connexion de l'utilisateur.
Installer le nœud du tableau de bord
Pour pouvoir utiliser les nœuds du tableau de bord, vous devez avoir le nœud
Vue lors de l'installation du noeud "node-red-dashboard".
Vue d'ensemble des nœuds d'entrée et de sortie disponibles
En installant les nœuds du tableau de bord, vous obtenez un ensemble complet de nœuds supplémentaires adaptés à l'affichage et à la saisie de différentes valeurs. Comme d'habitude, ceux-ci sont affichés dans la palette de nœuds à gauche du menu de configuration. Les détails sur les nœuds individuels sont répertoriés ci-dessous.
Vue des nœuds du tableau de bord dans la palette Nœuds.
Nœud bouton et positionnement des éléments dans le tableau de bord
Le premier nœud et le plus simple est le "nœud bouton". Vous pouvez l'utiliser pour positionner un bouton sur votre tableau de bord. Cela fonctionne alors comme un bouton dans le monde réel. S'il est cliqué, il envoie une valeur ajustable et un sujet ajustable au nœud lié.
Les nœuds de bouton, par exemple, peuvent très bien être utilisés pour déclencher des actions. Par exemple, vous pouvez allumer et éteindre les lampes.
Avant de pouvoir utiliser le nœud du bouton, il doit d'abord être positionné sur la grille de mise en page du tableau de bord.
Parce qu'en plus des fonctions des nœuds réels, le positionnement sur la mise en page du tableau de bord ultérieur peut également être configuré pour chacun. Le tableau de bord est donc un site Web distinct qui peut être géré de manière centralisée via la configuration du tableau de bord.
En installant les nœuds du tableau de bord, un nouvel onglet a été ajouté à la zone de configuration de gauche. Vous pouvez le reconnaître par l'icône basée sur un graphique à barres. Cliquez dessus pour ouvrir la configuration de base du tableau de bord.
Ici, vous pouvez voir les différents onglets "Mise en page", "Thème" et "Site" dans la zone supérieure. À droite de celle-ci se trouve une flèche pointant vers le haut et vers la droite. Si vous cliquez dessus, vous serez redirigé vers le site Web du tableau de bord.
Vous accédez à la page du tableau de bord en cliquant sur le symbole marqué avec le pointeur de la souris dans l'onglet du tableau de bord.
Alternativement, vous pouvez également sélectionner directement la page du tableau de bord. Il vous suffit d'ajouter "/ui/" à l'adresse de votre page de configuration NodeRed. Par exemple, est l'adresse de votre page de configuration NodeRed https://192.168.172.5:1880 alors l'adresse est à votre tableau de bord https:// 192.168.172.5:1880/ui/
La première chose à faire est de diviser la mise en page. Avec l'aide de laquelle vous pouvez positionner les éléments d'entrée et de sortie respectifs (nœuds du tableau de bord) presque librement sur le tableau de bord. Le tableau de bord offre la possibilité de combiner des nœuds de tableau de bord individuels en groupes. L'ordre d'affichage de ces nœuds peut ensuite être défini sur le tableau de bord. De plus, ces nœuds groupés peuvent ou doivent être affectés à un "onglet" spécifique.
En plus de l'onglet "Accueil", d'autres onglets peuvent être créés. Ceci est utile, par exemple, pour séparer virtuellement les éléments de différentes pièces les uns des autres dans un système de maison intelligente. Vous pouvez également résumer tous les capteurs et actionneurs du salon dans un onglet appelé "Salon". Cela simplifie la vue d'ensemble et structure le nombre de nœuds qui augmente souvent rapidement.
C'est également ce que vous pouvez voir et paramétrer dans l'onglet "Mise en page" de la configuration du tableau de bord. Tous les onglets et les groupes associés y sont affichés. Dans la capture d'écran ci-dessous
Section "Mise en page" de la configuration du tableau de bord. Ici, vous pouvez voir une partie des onglets individuels (dans cet exemple "Home", "Raspi Data", "Settings" et "Tasmota Status"). De plus, les groupes peuvent être identifiés. Par exemple, l'onglet Données Raspi comprend les groupes 1 et 2. Chaque groupe contient alors les éléments de tableau de bord réels qui lui sont affectés. Vous pouvez le rendre visible en cliquant sur la petite flèche pointant vers la droite.
Vue de l'onglet "Thème" de la configuration du tableau de bord. Ici, vous pouvez définir le style, la couleur de base et la police utilisée sur le tableau de bord.
Vous pouvez également définir le titre de la page du tableau de bord et d'autres options dans l'onglet "Site" de la configuration du tableau de bord.
Un autre exemple:
Sur cet aperçu de la mise en page, vous pouvez voir qu'il existe deux onglets nommés "Paramètres" et "Accueil". Sur l'onglet "Paramètres" vous trouverez alors, par exemple, les différents groupes tels que "Serveur", Rasp Pi" ou "Status". Sur l'onglet "Accueil", en revanche, vous ne trouverez que le groupe "Par défaut". Dans le groupe développé "Serveur", vous pouvez également voir comment les éléments individuels tels que "Redémarrer le serveur" ou "Éteindre l'écran" sont disposés.
Vous pouvez maintenant trouver ces onglets et groupes dans la vue du tableau de bord. Dans la vue affichée, vous vous trouvez dans l'onglet "Paramètres". Le premier cadre rouge marque le groupe "Serveur". Le groupe "LED Stripe" est marqué par le deuxième cadre rouge. La grande flèche rouge à gauche marque également le symbole sur lequel vous devez cliquer pour passer à un autre onglet.Si vous cliquez sur ce symbole, tous les onglets disponibles - dans ce cas "Paramètres" et "Accueil" - seront affichés.
Le noeud bouton
Le nœud de bouton est l'un des nœuds très simples. Vous pouvez l'utiliser pour créer des clés virtuelles. Pour ce faire, faites glisser le nœud de bouton de la palette de nœuds vers la zone de configuration NodeRed. Si vous double-cliquez maintenant sur le nœud, les options suivantes peuvent être configurées.
Dans "Groupe", il est déterminé dans quel groupe et dans quel onglet le bouton est positionné. Dans cet exemple, le bouton est positionné dans l'onglet "TestTab" du groupe "TestGroup". Avec "Taille", vous pouvez définir la taille du bouton. Vous pouvez voir un exemple de différentes tailles plus bas dans le post. Les icônes peuvent également être affichées sur le bouton à l'aide du paramètre "Icône". Pour obtenir une sélection des icônes disponibles, cliquez simplement sur le lien "Icône Material Design" dans la barre d'informations à droite. "Label" spécifie le texte du bouton. "Avec "Couleur" et "Arrière-plan", vous pouvez définir la couleur du bouton et le texte du bouton. Le réglage pour « Payload » et « Topic » définit quelle valeur (payload) est envoyée via quel sujet dès que le bouton est enfoncé. Enfin, une fonction très importante : En cochant ou décochant « Si msg arrive en entrée, passer en sortie. » vous pouvez activer ou désactiver le renvoi d'un message reçu à l'entrée du nœud de bouton vers la sortie. Avec "Name", vous pouvez définir le nom du nœud pour la configuration NodeRed comme d'habitude.Voici la vue que vous obtenez lorsque vous cliquez sur le petit stylo (modifier) à côté de la section de groupe dans la fenêtre précédente. Ensuite, vous arrivez à la fenêtre dans laquelle le groupe et l'onglet peuvent être affectés au nœud du bouton (ou à tout autre nœud du tableau de bord). En principe, vous modifiez les propriétés de l'ensemble du groupe dans cette fenêtre. L'onglet attribué (sous "Tab") et la largeur du groupe (sous "Largeur") peuvent être définis. Vous pouvez également activer ou désactiver l'affichage du nom du groupe et définir s'il doit être possible de "réduire" le groupe, c'est-à-dire de masquer le contenu.Dans l'aperçu du tableau de bord, tous les onglets contenus sont ensuite affichés dans une vue latérale dépliante. Ici, vous pouvez basculer entre eux en cliquant sur l'onglet correspondant.La vue des boutons de différentes tailles sur le tableau de bord.
nœud déroulant
Le nœud déroulant est un nœud que vous pouvez utiliser pour créer une liste de sélection sur le tableau de bord. Par exemple, vous pouvez créer une liste des températures disponibles pour un radiateur. Cependant, toutes sortes d'autres entrées avec les noms les plus divers et les valeurs associées peuvent également être définies.
Pour ce faire, faites glisser un nœud déroulant de la palette de nœuds vers l'interface de configuration du nœud rouge et double-cliquez dessus.
La fenêtre affichée apparaît. Comme précédemment avec les autres nœuds, le groupe et l'onglet attribués ainsi que la taille peuvent être définis ici. En plus, comme avant, le "Label". "Libellé" dans ce cas signifie le libellé de la liste déroulante sur le tableau de bord réel. Sous "Espace réservé", vous pouvez configurer un espace réservé qui sera affiché tant qu'aucune valeur n'a été sélectionnée dans la liste déroulante. Cela ne devient vraiment excitant que dans la section "Options". Ici, vous pouvez configurer les options disponibles de votre liste déroulante. A cet effet, le nom de l'entrée correspondante est défini dans la colonne de droite et la valeur de l'entrée correspondante est définie dans la colonne de gauche. Vous pouvez ajouter d'autres entrées en cliquant sur "+option". L'ordre des entrées peut également être modifié à l'aide des trois petites lignes horizontales situées à gauche de chaque entrée. Cliquez simplement sur les lignes de l'entrée que vous souhaitez déplacer et maintenez le bouton de la souris enfoncé. Vous pouvez maintenant repositionner l'entrée marquée en déplaçant le pointeur de la souris vers le haut ou vers le bas. Les autres fonctions affichées se comportent exactement de la même manière que celle déjà décrite pour le "bouton".Vue de la liste déroulante configurée sur le tableau de bord.Si vous cliquez maintenant sur le champ de sélection, vous pouvez choisir entre les différentes entrées précédemment configurées.
nœud de commutation
En principe, le nœud de commutation correspond à un commutateur virtuel. Celui-ci peut être utilisé pour envoyer des signaux de commutation ou pour afficher des états de commutation.
Pour ce faire, faites glisser le nœud de commutation de la palette de nœuds vers l'interface de configuration du nœud rouge et double-cliquez dessus.
La fenêtre affichée apparaît. Comme précédemment avec les autres nœuds, le groupe et l'onglet attribués ainsi que la taille peuvent être définis ici. En plus, comme avant, le "Label". Sous "Icône", vous pouvez sélectionner une icône que vous pouvez afficher devant l'étiquette ou sans étiquette comme symbole d'interrupteur. Les propriétés restantes telles que "Sujet" et "Nom" sont à nouveau les mêmes qu'avec les nœuds précédents. La seule différence ici est que vous pouvez entrer des charges utiles différentes pour les états de commutation "On" et "Off". Ce qui est également logique, car sinon vous ne pourriez pas faire la distinction entre les états éteint et allumé.Vue de l'interrupteur allumé.Vue de l'interrupteur éteint.
nœud de curseur
Le nœud du curseur est idéal pour définir des nombres dans une certaine plage. Un bon cas d'utilisation, par exemple, consiste à l'utiliser comme gradateur pour une lampe.
Pour pouvoir utiliser le nœud du curseur, vous devez d'abord le faire glisser de la palette de nœuds vers l'interface de configuration du nœud rouge et double-cliquer pour ouvrir son menu de paramètres.
Comme d'habitude à partir des autres nœuds, la fenêtre des paramètres réapparaît après un double-clic. Comme précédemment, le groupe et l'onglet attribués ainsi que la taille peuvent être définis ici. En plus, comme avant, le "Label". Dans la section "Plage", vous pouvez définir la plage de valeurs que le curseur doit couvrir. Cela va de "min" = la valeur minimale à max = la valeur maximale. La largeur de pas peut être réglée avec "step". Les propriétés restantes telles que "Sujet" et "Nom" sont à nouveau les mêmes qu'avec les nœuds précédents. La seule différence ici est que la charge utile est bien sûr définie par la "valeur du curseur" actuelle.Vue du curseur dans le tableau de bord.
nœud numérique
Le nœud numérique est un autre moyen de transmettre des valeurs numériques à Node-Red pour le traitement.
Pour configurer cela, vous faites glisser un nœud numérique de la palette de nœuds vers l'interface de configuration Node Red.
Les options de réglage intéressantes - parce que différentes des autres nœuds - pour ce nœud sont les deux propriétés "Format de valeur" et "Plage". Avec "Plage", vous pouvez définir la plage de nombres possible et définir la taille du pas, comme auparavant avec le nœud du curseur. "Format de la valeur" permet de formater l'affichage de la valeur. Ici, vous pouvez, par exemple, ajouter un signe d'unité après "{{value}}", de sorte que non seulement la valeur numérique, mais une valeur numérique plus l'unité s'affiche ultérieurement sur le tableau de bord. Par exemple, vous pouvez marquer une spécification de température avec "°C" comme température.
Nœud de saisie de texte
Le nœud de saisie de texte est - comme son nom l'indique - un nœud permettant la saisie de texte.
Avec ce nœud, en plus des options de réglage habituelles telles que « Groupe », « Taille », « Étiquette », « Sujet » et « Nom », le « Mode » et un « Délai » peuvent être définis. Sous "Délai", la durée est définie après la dernière saisie de caractères, jusqu'à ce que les caractères saisis dans le champ de texte soient envoyés au nœud suivant.Sous "Mode", vous pouvez sélectionner les données à saisir dans le champ respectif. Vous pouvez choisir entre les différentes options affichées et adapter parfaitement le champ de saisie à l'objectif respectif.Vue (relativement simple) du nœud de texte dans la vue du tableau de bord.
Nœud de sélection de date
En principe, le nœud de sélection de date fait exactement ce que son nom suggère : vous pouvez l'utiliser pour sélectionner une certaine date et ainsi la transférer à NodeRed pour un traitement ultérieur.
Aucune autre option (à part l'habituelle) ne peut être configurée pour ce nœud. Après avoir saisi une date sur le tableau de bord, celle-ci est transmise au flux connecté via la charge utile.Vue du sélecteur de date dans le tableau de bord.
Nœud de sélecteur de couleurs
Le nœud de sélecteur de couleurs est idéal pour définir la couleur d'une lampe RVB connectée. Bien sûr, vous pouvez également l'utiliser pour transférer des couleurs vers Node-Red pour un traitement ultérieur dans tous les autres cas.
En plus des "options de réglage habituelles", le nœud du sélecteur de couleurs a l'option de réglage "Format" ainsi que diverses cases à cocher (coches) que vous pouvez définir ou supprimer. Le format de la couleur de sortie peut être défini via la propriété "Format". Vous pouvez choisir entre XXXXXXX et XX. En activant la propriété "Afficher le curseur de teinte" ou "Afficher le curseur de luminosité", vous pouvez également afficher un curseur pour régler la HUE ou la valeur de luminosité. Vous pouvez également utiliser les cases à cocher "Toujours afficher l'échantillon", "Toujours afficher le sélecteur" et "Toujours afficher le champ de valeur" pour configurer l'affichage permanent des différentes "variantes de sélecteur". Essayez simplement quelle vue vous préférez. 🙂Votre sélecteur de couleurs pourrait ressembler à ceci dans le tableau de bord.
nœud de formulaire
Avec le nœud de formulaire, vous avez la possibilité de configurer un formulaire type. Cela vous permet de combiner différentes options d'entrée. C'est parfait pour configurer un formulaire pour entrer une adresse ou similaire, par exemple.
En plus des options de réglage habituelles, vous pouvez configurer ici les éléments de formulaire affichés dans la zone "Éléments de formulaire". Vous pouvez ajouter des zones de texte pour différents contenus comme du texte ou des chiffres. De plus, un contenu standard peut y être stocké ou il peut être spécifié s'il s'agit d'un champ obligatoire ou non. Enfin, vous pouvez également ajouter votre propre texte aux boutons de confirmation et d'annulation.Vue du formulaire de test dans le tableau de bord.
Nœud de sortie de texte
Le nœud de sortie de texte est idéal pour afficher uniquement du texte. Par exemple, vous pouvez afficher les lectures des capteurs. L'utilisateur n'a pas la possibilité de modifier le texte affiché.
Par conséquent, seuls relativement peu de paramètres peuvent être définis dans les propriétés du nœud de sortie de texte. En plus du "Format de valeur" dans lequel vous pouvez étendre l'apparence de la sortie texte avec des informations supplémentaires telles que des symboles d'unité, vous avez également la possibilité de modifier la mise en page de la sortie texte. Vous pouvez choisir parmi cinq dispositions différentes d'étiquette et de texte. Essayez simplement celui qui convient le mieux à votre présentation.Vue du nœud de sortie de texte dans la vue du tableau de bord.
nœud de jauge
Le nœud de jauge est parfait pour afficher les valeurs mesurées sous une forme visualisée. De cette façon, les valeurs mesurées peuvent être classées visuellement directement. De plus, des intervalles de nombres peuvent également être définis dans lesquels la couleur de l'échelle affichée change. Par exemple, vous pouvez utiliser une couleur rouge pour représenter les températures élevées/dangereuses. Les températures dans la plage normale, en revanche, sont représentées par une échelle verte. Cela permet de se faire une idée en un coup d'œil si les valeurs mesurées affichées sont correctes ou non. En dehors de cela, il a aussi l'air plutôt cool (/ Star Trek-ish). 🙂
En plus des options de paramétrage habituelles, vous avez la possibilité de paramétrer le "Type", le "Format de valeur", les "Unités", la "Plage", les "Dégradés de couleur" et les "Secteurs" avec le nœud jauge. Vous connaissez déjà "Label" et "Format de valeur" des nœuds précédents. La propriété "Unités" vous permet de définir à nouveau l'unité affichée. Vous pouvez utiliser la propriété "Plage" pour spécifier la plage de valeurs à afficher. Par exemple, si vous souhaitez afficher une valeur d'humidité, cette plage doit être comprise entre 0 et 100%. Pour une plage de température extérieure, une plage de température doit être sélectionnée qui n'est normalement ni inférieure ni dépassée. Par exemple -20°C à 45°C. Avec la propriété "Dégradé de couleur", vous pouvez maintenant spécifier les couleurs qui s'affichent pour correspondre à la valeur de mesure affichée. Dans cet exemple, la couleur verte est affichée pour toutes les petites valeurs, la couleur jaune pour toutes les valeurs moyennes et la couleur rouge pour toutes les valeurs élevées. Normalement, les endroits où les couleurs se fondent dans la suivante sont uniformément répartis. Cependant, si vous voulez une mise à l'échelle différente ou même si vous voulez omettre la couleur du milieu, vous pouvez utiliser le paramètre "Secteurs" pour spécifier où les couleurs doivent changer.Sous "Type", vous pouvez également sélectionner le type de jauge que vous souhaitez afficher. Vous pouvez voir des exemples des types disponibles ici.Affichage de la jauge de type "Jauge" dans le tableau de bord.Affichage du type de jauge Donut dans le tableau de bord.Vue de type boussole dans le tableau de bord.Vue de type jauge de niveau dans le tableau de bord.
noeud de graphique
Le nœud de graphique est adapté pour afficher des progressions de valeur. Cela vous permet, par exemple, d'enregistrer et d'afficher l'évolution d'une température sur une période de temps spécifiée. Malheureusement, les valeurs ne sont actuellement enregistrées que temporairement. Cela signifie que si votre serveur NodeRed tombe en panne ou est redémarré d'une autre manière, toutes les valeurs précédemment affichées seront perdues.
Par rapport aux nœuds précédents, ce nœud offre quelques options de réglage supplémentaires. Ici, vous pouvez d'abord sous "Taper" définir le type de graphique. Vous pouvez mettre en surbrillance les valeurs mesurées individuelles dans chaque affichage en cochant la case "agrandir le point" met. Vous pouvez définir la résolution ou la durée de la progression des données sur l'axe X (l'axe horizontal allant de gauche à droite) avec le paramètre "Libellé de l'axe X" ensemble. Ici, vous pouvez spécifier la durée ou le nombre de valeurs mesurées à afficher. Par exemple, vous pouvez choisir d'afficher toutes les lectures des deux dernières heures ou des 500 dernières lectures. Cela peut être fait avec "Libellé de l'axe X" puis définissez également l'étiquetage de l'axe X. Avec "Axe Y" par contre, seule la plage de valeurs affichées de l'axe Y peut être ajustée. Par exemple, si vous souhaitez uniquement voir la plage de valeurs de 0° à 30°C pour un profil de température, vous devez la saisir ici. Utilisation de l'option "légende" vous pouvez également configurer une légende, ce qui est particulièrement utile lorsque plusieurs courbes sont affichées. Vous pouvez afficher un nom pour chaque couleur de courbe. L'option "Interpoler" décide comment les différentes valeurs mesurées sont reliées les unes aux autres. Enfin, vous pouvez définir les couleurs utilisées pour les courbes avec "Series Colours" et le texte à afficher avec "Blank label" si aucune valeur de mesure n'est disponible pour la courbe.Vue du nœud de graphique dans le tableau de bord.
nœud de sortie audio
Le nœud de sortie audio est à nouveau l'un de ces nœuds qui fait exactement ce que son nom l'indique. Il produit du texte en tant que langue parlée.
Pour ce faire, vous pouvez sélectionner la "Voix TTS" (= voix "Text-To-Speech") dans les propriétés du nœud. Cela vous permet de personnaliser un peu plus la voix en fonction de votre style. En fin de compte, ce nœud prononce tout texte que vous lui envoyez. Cependant, il est important que cette voix ne soit pas sortie localement sur le serveur Node Red mais dans le navigateur de l'utilisateur qui vient d'ouvrir le tableau de bord. Si aucune fenêtre de navigateur n'est ouverte au moment où le message vocal est envoyé, le message vocal ne sera pas émis. Cependant, vous pouvez utiliser le programme "Espeak" pour implémenter une sortie locale sur le serveur NodeRed via des haut-parleurs connectés. Vous trouverez des informations à ce sujet dans l'article RaspberryPi - Installer la sortie vocale avec eSpeak.
nœud de notification
Le nœud de notification vous permet d'afficher des notifications sur le tableau de bord ouvert. Cela peut être affiché sous forme d'informations sur le bord ou centré au milieu de l'écran, y compris un bouton de confirmation.
Dans la fenêtre des paramètres du nœud de notification, vous pouvez définir la position du champ de notification sous "Mise en page". Entre autres choses, il y a l'option "Dialogue OK/Annuler", qui vous permet d'équiper la notification de deux boutons. Celles-ci doivent ensuite être confirmées par l'utilisateur. De cette façon, vous pouvez être sûr que l'utilisateur a bien remarqué le message. Pour cela, vous pouvez spécifier sous "Libellé de l'action par défaut" et "Libellé de l'action secondaire" ce qui doit apparaître sur les boutons "Confirmer" et "Annuler".En plus de la variante de notification, que l'utilisateur doit confirmer, il existe également la possibilité de n'afficher la notification qu'à titre indicatif. Pour cela, sélectionnez « En haut à droite » sous « Mise en page », par exemple. Si vous envoyez ensuite une notification au nœud, celle-ci apparaîtra dans le coin supérieur droit et disparaîtra automatiquement après quelques secondes.Visualisation d'une notification qu'il faut confirmer pour la faire disparaître à nouveau.Affichage d'une notification dans le coin supérieur droit.
Nœud de contrôle de l'interface utilisateur
Avec le nœud de contrôle de l'interface utilisateur, vous pouvez contrôler l'apparence et le comportement de la vue du tableau de bord. Cela peut être utilisé, par exemple, pour changer l'onglet affiché, les groupes "rentrer et sortir". Vous pouvez également utiliser ce nœud pour réagir si un utilisateur a ouvert ou fermé le tableau de bord.
Avec ce nœud, seul le nom peut être configuré dans la fenêtre des paramètres. Tous les paramètres réglables ou informations disponibles sont également résumés dans la barre d'informations sur le côté.
nœud de modèle
Le nœud de modèle est un nœud très polyvalent. Vous pouvez intégrer votre propre code HTML sur le tableau de bord. Celui-ci peut alors réagir individuellement aux messages reçus des nœuds connectés et également renvoyer lui-même des messages.
En utilisant le nœud de modèle, vous pouvez ajouter du contenu à l'en-tête de la page......ou ajoutez des nœuds aux groupes que vous avez formatés comme vous le souhaitez avec votre propre code HTML.
thztjz
Vous pouvez également utiliser ce nœud pour insérer des liens vers n'importe quelle page du tableau de bord, par exemple. Dans cet exemple, le lien vers la vue MagicMirror est généré et affiché sur le tableau de bord.Un lien apparaîtra alors sur le tableau de bord, qui vous amènera à la vue MagicMirror.
Autres exemples
Vous trouverez ci-dessous une petite liste des articles dans lesquels j'utilise également les nœuds du tableau de bord. Peut-être qu'il y a quelque chose pour vous aussi. 🙂
J'espère que tout a fonctionné comme décrit. Si ce n'est pas le cas ou si vous avez des questions ou des suggestions, faites-le moi savoir dans les commentaires. Je les ajouterai à l'article si nécessaire. Les idées de nouveaux projets sont toujours les bienvenues. 🙂
PS Beaucoup de ces projets - en particulier les projets matériels - coûtent beaucoup de temps et d'argent. Bien sûr, je le fais parce que j'aime ça, mais si vous pensez que c'est cool que je partage l'information avec vous, je serais heureux d'un petit don au fonds du café. 🙂
Bonjour, super article. Une question : Comment parvenez-vous à disposer les éléments les uns à côté des autres au sein d'un groupe, comme le bouton marche/arrêt de votre groupe de bandes LED ?
Salut Andreas,
merci 🙂
Cela devrait en fait se produire automatiquement dès que les deux éléments s'emboîtent l'un à côté de l'autre dans le groupe. Pour cela, il faut régler la largeur des éléments (les boutons dans le cas du LED Stripe) à 3 par exemple, pour qu'ils rentrent dans le groupe (ici "LED Stripe") avec une largeur de 6 ensuite l'un à l'autre. 🙂
S'il vous plaît laissez-moi savoir si cela a fonctionné. 🙂
Cordialement
Fab
super article, m'a beaucoup aidé. J'ai encore une question générale sur un tableau de bord Node-Red.
J'en ai construit un et j'ai lu les données d'un capteur de température via Node-Red. Je l'ai connecté au RPi. (Node-red fonctionne sur mon RPi).
Ce tableau de bord est également facilement accessible via le navigateur que j'utilise. Mais seulement si je suis dans le même réseau que le raspberry Pi lui-même.
Je n'ai pas accès au tableau de bord depuis le réseau internet de mon smartphone.
Connaissez-vous un moyen d'accéder au tableau de bord depuis le réseau "public" ou depuis d'autres connexions Internet que mon WiFi à la maison ?
Bonjour Lenard,
Merci. 🙂
L'option sécurisée (seulement raisonnable) consiste à se connecter à votre réseau domestique via un VPN et ainsi accéder au RaspberryPi dans votre réseau.
En attendant, de nombreux routeurs (par exemple la Fritzbox) peuvent être configurés en tant que serveurs VPN.
Malheureusement, je n'ai pas de tutoriel prêt pour cela, mais probablement. trouvez-vous quelque chose à ce sujet? 🙂
Cordialement
Fabien
Bonjour,
Je travaille avec le Node-Red sur le Raspy-400 depuis quelques jours. Un convertisseur AD (ADS1115) me donne également des résultats nets. Je souhaite modifier la taille de la police des nœuds du tableau de bord. Est-ce possible? Certains codes sont publiés sur d'autres sites, mais ils ne fonctionnent pas. Avez-vous un exemple pour moi (par exemple pour la jauge) comment faire cela?
Je voudrais vous remercier d'avance, juste à cause de l'article du tableau de bord.
Bien à vous
H.Harle
Salut Horst,
Malheureusement, je n'ai pas d'exemple pour cela, mais probablement. un "coup de pouce" dans la bonne direction. La description du nœud du nœud de jauge contient la note suivante :
Si une classe est spécifiée, elle sera ajoutée à la carte mère. De cette façon, vous pouvez styliser la carte et les éléments qu'elle contient avec un CSS personnalisé. La classe peut être définie au moment de l'exécution en définissant une propriété de chaîne msg.className.
Cela signifie que vous devriez pouvoir modifier l'apparence des composants individuels du nœud de jauge avec du code CSS.
J'espère que cela vous aidera davantage. 🙂
Cordialement
Fab
Bonjour, super article. Une question : Comment parvenez-vous à disposer les éléments les uns à côté des autres au sein d'un groupe, comme le bouton marche/arrêt de votre groupe de bandes LED ?
Cordialement
André
Salut Andreas,
merci 🙂
Cela devrait en fait se produire automatiquement dès que les deux éléments s'emboîtent l'un à côté de l'autre dans le groupe. Pour cela, il faut régler la largeur des éléments (les boutons dans le cas du LED Stripe) à 3 par exemple, pour qu'ils rentrent dans le groupe (ici "LED Stripe") avec une largeur de 6 ensuite l'un à l'autre. 🙂
S'il vous plaît laissez-moi savoir si cela a fonctionné. 🙂
Cordialement
Fab
Merci 🙂
Bonjour,
super article, m'a beaucoup aidé. J'ai encore une question générale sur un tableau de bord Node-Red.
J'en ai construit un et j'ai lu les données d'un capteur de température via Node-Red. Je l'ai connecté au RPi. (Node-red fonctionne sur mon RPi).
Ce tableau de bord est également facilement accessible via le navigateur que j'utilise. Mais seulement si je suis dans le même réseau que le raspberry Pi lui-même.
Je n'ai pas accès au tableau de bord depuis le réseau internet de mon smartphone.
Connaissez-vous un moyen d'accéder au tableau de bord depuis le réseau "public" ou depuis d'autres connexions Internet que mon WiFi à la maison ?
Merci et meilleures salutations, Lennard
Bonjour Lenard,
Merci. 🙂
L'option sécurisée (seulement raisonnable) consiste à se connecter à votre réseau domestique via un VPN et ainsi accéder au RaspberryPi dans votre réseau.
En attendant, de nombreux routeurs (par exemple la Fritzbox) peuvent être configurés en tant que serveurs VPN.
Malheureusement, je n'ai pas de tutoriel prêt pour cela, mais probablement. trouvez-vous quelque chose à ce sujet? 🙂
Cordialement
Fabien
Bonjour,
Je travaille avec le Node-Red sur le Raspy-400 depuis quelques jours. Un convertisseur AD (ADS1115) me donne également des résultats nets. Je souhaite modifier la taille de la police des nœuds du tableau de bord. Est-ce possible? Certains codes sont publiés sur d'autres sites, mais ils ne fonctionnent pas. Avez-vous un exemple pour moi (par exemple pour la jauge) comment faire cela?
Je voudrais vous remercier d'avance, juste à cause de l'article du tableau de bord.
Bien à vous
H.Harle
Salut Horst,
Malheureusement, je n'ai pas d'exemple pour cela, mais probablement. un "coup de pouce" dans la bonne direction. La description du nœud du nœud de jauge contient la note suivante :
Cela signifie que vous devriez pouvoir modifier l'apparence des composants individuels du nœud de jauge avec du code CSS.
J'espère que cela vous aidera davantage. 🙂
Cordialement
Fab