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
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 nœud « 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 et le plus simple nœud 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. Si vous cliquez dessus, il envoie une valeur réglable et un sujet réglable 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 » en haut. À sa droite se trouve une flèche pointant vers le haut. 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. Pour cela, il vous suffit d'ajouter « /ui/ » à l'adresse de votre page de configuration NodeRed. Par exemple, l'adresse de votre page de configuration NodeRed est https://192.168.172.5:1880 alors l'adresse est à votre tableau de bord https:// 192.168.172.5:1880/ui/
Tout d'abord, il s'agit de diviser la mise en page. Avec son aide, 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 paramétré sur le tableau de bord. De plus, ces nœuds regroupés peuvent ou doivent être affectés à un « onglet » spécifique.
En plus de l'onglet « Accueil », vous pouvez créer d'autres onglets. C'est pratique, par exemple, pour séparer virtuellement les éléments dans différentes pièces dans un système de maison intelligente. Cela signifie que vous pouvez regrouper tous les capteurs et actionneurs du salon dans un onglet appelé « Salon ». Cela facilite la vue d'ensemble et apporte une structure au nombre de nœuds, souvent en augmentation rapide.
C'est également ce que vous pouvez voir et définir dans l'onglet « Mise en page » de la configuration du tableau de bord. Tous les onglets et leurs groupes associés y seront affichés. Dans la capture d'écran ci-dessous
Section « Mise en page » de la configuration du tableau de bord. Ici, vous pouvez voir certains des onglets individuels (dans cet exemple « Accueil », « Données Raspi », « Paramètres » et « Statut Tasmota »). Les groupes peuvent également ê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 les rendre visibles 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.
Sur l'onglet « Site » de la configuration du tableau de bord, vous pouvez également définir le titre de la page du tableau de bord et d'autres options.
Un autre exemple:
Sur cet aperçu de la mise en page, vous pouvez voir qu'il y a deux onglets appelés « Paramètres » et « Accueil ». Sur l'onglet « Paramètres » vous retrouverez par exemple les différents groupes tels que « Serveur », RasPi » ou encore « Statut ». Cependant, sur l'onglet « Accueil », vous ne trouverez que le groupe « Par défaut ». Dans le groupe « Serveur » ouvert, vous pouvez également voir comment sont disposés les différents éléments tels que « Redémarrer le serveur » ou « Éteindre l'écran ».
Vous pouvez désormais trouver ces onglets et groupes dans la vue du tableau de bord. Dans la vue présentée, vous êtes sur l'onglet « Paramètres ». Le premier cadre rouge marque le groupe « Serveurs ». Le groupe « LED Stripe » est marqué du 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.
« Groupe » détermine 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 l'article. En utilisant le paramètre « Icône », des icônes peuvent également être affichées sur le bouton. Pour obtenir une sélection des icônes disponibles, il vous suffit de cliquer sur le lien « Icône Material Design » dans la barre d'information à droite. « Label » indique le texte du bouton. « Avec « Couleur » et « Arrière-plan », vous pouvez définir la couleur du bouton et le texte du bouton. Le paramètre « Payload » et « Topic » définit quelle valeur (payload) est envoyée via quel sujet dès que le bouton est enfoncé. Last but not least, une fonction très importante : en cochant ou en décochant « Si le message arrive en entrée, passez-le en sortie ». Vous pouvez activer ou désactiver le transfert d'un message reçu à l'entrée du nœud bouton vers la sortie. Avec « Nom », 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 crayon (modifier) à côté de la section groupe dans la fenêtre précédente. Ensuite, vous arriverez à la fenêtre dans laquelle le groupe et l'onglet peuvent être attribués au nœud du bouton (ou à tout autre nœud du tableau de bord). En principe, vous éditez 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 « replier » le groupe, c'est-à-dire d'en 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îtra alors. Ici, comme auparavant avec les autres nœuds, vous pouvez définir le groupe et l'onglet attribués ainsi que la taille. Aussi, comme auparavant, le « label ». « Étiquette » dans ce cas signifie l'étiquette 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. Les choses ne deviennent vraiment passionnantes que dans la section « Options ». Ici, vous pouvez configurer les options disponibles dans votre liste déroulante. Pour ce faire, 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. Pour ce faire, cliquez simplement sur les lignes de l'entrée que vous souhaitez déplacer et maintenez le bouton de la souris enfoncé. En déplaçant le pointeur de la souris vers le haut ou vers le bas, vous pouvez maintenant repositionner l'entrée marquée. Les autres fonctions affichées se comportent 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îtra alors. Ici, comme pour les autres nœuds, vous pouvez définir le groupe et l'onglet attribués ainsi que la taille. Aussi, comme auparavant, le « label ». Sous « Icône », vous pouvez sélectionner une icône que vous pouvez afficher sous forme de symbole d'interrupteur devant l'étiquette ou sans étiquette du tout. Les propriétés restantes telles que « Sujet » et « Nom » sont les mêmes qu'avec les nœuds précédents. La seule différence est que vous pouvez saisir différentes charges utiles pour les états de commutation « On » et « Off ». Ce qui est 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 avec les autres nœuds, la fenêtre des paramètres réapparaît après un double-clic. Comme auparavant, vous pouvez définir ici le groupe et l'onglet attribués ainsi que la taille. Aussi, comme auparavant, 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 taille du pas peut être ajustée à l’aide de « step ». Les propriétés restantes telles que « Sujet » et « Nom » sont 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éterminée 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 paramétrage intéressantes pour ce nœud - parce qu'elles sont différentes des autres nœuds - 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 curseur. « Format de la valeur » permet de formater l'affichage de la valeur. Ici, par exemple, vous pouvez mettre un signe d'unité après « {{value}} » afin que non seulement la valeur numérique mais une valeur numérique plus l'unité soient affichées ultérieurement sur le tableau de bord. Par exemple, vous pouvez marquer une information 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.
En plus des options de paramétrage habituelles telles que « Groupe », « Taille », « Étiquette », « Sujet » et « Nom », ce nœud vous permet de définir le « Mode » et un « Délai ». « Délai » est utilisé pour définir la durée d'attente 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 correspondant. Vous pouvez choisir entre les différentes options affichées et adapter parfaitement le champ de saisie à l'application respective.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 paramétrage habituelles », le nœud du sélecteur de couleurs possède l'option de paramétrage « 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 à l'aide de 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 permettant de définir la valeur de HUE ou de luminosité. Vous pouvez également configurer l'affichage permanent de différentes « variantes de sélecteur » à l'aide des cases à cocher « Toujours afficher l'échantillon », « Toujours afficher le sélecteur » et « Toujours afficher le champ de valeur ». 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 paramétrage habituelles, vous pouvez configurer ici les éléments de formulaire affichés dans la zone « Éléments de formulaire ». Vous pouvez ajouter des champs de texte pour différents contenus tels que du texte ou des chiffres. Vous pouvez également stocker du contenu standard ou préciser 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, il y a relativement peu de choses qui peuvent être définies 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 de 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 de 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 pouvez définir le « Type », le « Format de valeur », les « Unités », la « Plage », les « Dégradés de couleurs » et les « Secteurs » avec le nœud Jauge. Vous connaissez déjà « Étiquette » et « Format de valeur » des nœuds précédents. La propriété « Unités » permet de préciser à nouveau l'unité affichée. Vous pouvez utiliser la propriété « Range » 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, il convient de sélectionner une plage de température qui n'est normalement ni inférieure ni dépassée. Par exemple -20°C à 45°C. Avec la propriété « Dégradé de couleurs », vous pouvez désormais spécifier les couleurs qui sont affichées pour correspondre à la valeur mesurée affichée. Dans cet exemple, la couleur verte est affichée pour toutes les petites mesures, la couleur jaune pour toutes les mesures moyennes et la couleur rouge pour toutes les mesures élevées. Normalement, les endroits où les couleurs fusionnent les unes avec les autres sont répartis uniformément. Cependant, si vous souhaitez une mise à l'échelle différente ou même si vous souhaitez omettre la couleur du milieu, vous pouvez utiliser le paramètre « Secteurs » pour spécifier quelles 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.Vue de la jauge de type « Jauge » dans le tableau de bord.Vue de la jauge de type « Donut » dans le tableau de bord.Vue du type de jauge « Boussole » dans le tableau de bord.Vue du type de jauge « 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 "Étiquette 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 "Étiquette 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 utiliser « Couleurs de la série » pour définir les couleurs utilisées pour les courbes et « Étiquette vierge » pour définir le texte qui doit être affiché si aucune valeur mesurée n'est encore 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 d'adapter un peu plus la sortie vocale à votre style. En fin de compte, ce nœud génère chaque texte que vous lui envoyez par la voix. Il est important cependant que cette voix ne soit pas restituée 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 de l'envoi du message vocal, le message vocal ne sera pas émis. Cependant, vous pouvez obtenir une sortie locale sur le serveur NodeRed via des haut-parleurs connectés à l'aide du programme « Espeak ». Vous pouvez trouver 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 ». Il existe, entre autres, l'option « OK/Cancel Dialog », qui permet d'équiper la notification de deux boutons. Ceux-ci doivent ensuite être confirmés par l'utilisateur. De cette façon, vous pouvez être sûr que l'utilisateur a bien remarqué le message. Pour ce faire, vous pouvez spécifier ce qui doit figurer sur les boutons « Confirmer » et « Annuler » sous « Libellé d'action par défaut » et « Libellé d'action secondaire ».En plus de la variante de notification que l'utilisateur doit confirmer, il existe également la possibilité d'afficher la notification uniquement à titre indicatif. Pour ce faire, sélectionnez par exemple « En haut à droite » sous « Mise en page ». Si vous envoyez ensuite une notification au nœud, elle s'affichera 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 modifier l'onglet affiché et pour « replier et déplier » des groupes. 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 sur la bande LED), par exemple, à 3 pour qu'ils s'emboîtent les uns à côté des autres dans le groupe (ici « bande LED ») avec une largeur de 6. . 🙂
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 des connexions Internet autres 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 peut-être. un « coup de pouce » dans la bonne direction. La description du nœud de jauge contient la remarque 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
Français 
Deutsch 
English 
Español 
Nederlands
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 sur la bande LED), par exemple, à 3 pour qu'ils s'emboîtent les uns à côté des autres dans le groupe (ici « bande LED ») avec une largeur de 6. . 🙂
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 des connexions Internet autres 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 peut-être. un « coup de pouce » dans la bonne direction. La description du nœud de jauge contient la remarque 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