Démarrer avec Dashboard 2 EN

Le tableau de bord FlowFuse est disponible dans le gestionnaire de palettes Node-RED. Pour l'installer :

• Ouvrez le menu en haut à droite de Node-RED
• Cliquez sur « Gérer la palette »
• Accédez à l'onglet « Installer »
• Recherchez « node-red-dashboard »
• Installez le paquet @flowfuse/node-red-dashboard (et non node-red/node-red-dashboard).

Meteo Dashboard2 Nodered

Avant de commencer, assurez-vous d'avoir:

• Nœud-RED Instance: Vous avez besoin de Node-RED en cours d'exécution quelque part. L'option la plus facile est FlowFuse, prenez un essai gratuit et vous obtenez une instance hébergée dans le cloud prête à partir. Pas de configuration de serveur, pas de tracas de transfert de port.
• Compte OpenWeatherMap: Inscrivez-vous à openweathermap.org. Le niveau gratuit vous donne suffisamment d'appels API pour ce projet.

Tout d'abord, installez le package de tableau de bord:

• Cliquez sur le menu hamburger dans le coin supérieur droit
• Sélectionner Gérer la palette
• Allez dans l'onglet Installer
• Type @flowfuse/node-red-dashboard dans la zone de recherche
• Cliquez sur le bouton d'installation à côté

Attends que ça finisse. Vous verrez un tas de nouveaux nœuds de tableau de bord apparaître dans votre barre latérale gauche, des choses comme ui-gauge, ui-text, ui-chart. C'est comme ça que tu sais que ça a marché.

Connectez-vous à votre compte OpenWeather. Une fois que vous êtes connecté:

• Allez dans votre section de compte
• Trouver des clés API
• Copiez la clé par défaut (ou générez une nouvelle)
• Enregistrez-le dans un fichier texte ou une application de note.

Tout d'abord, nous devons nous connecter à l'API météo et nous assurer qu'elle fonctionne.

• Faites glisser un noeud injectable sur la toile
• Double-cliquez pour le configurer
• Changer Répéter de “aucun” à “intervalle”
• Réglez-le pour répéter toutes les 5 secondes (ou n'importe quel intervalle que vous préférez)
• Cochez la case Inject une fois après et réglez-la sur 0,1 seconde, cela déclenchera le flux immédiatement lorsque vous le déployez
• Cliquez sur Terminé

• Faites glisser un nœud de requête http vers la droite
• Faites glisser un nœud de débogage à droite du nœud de requête http
• Double-cliquez sur le nœud de requête http pour ouvrir ses paramètres:
• Assurez-vous que la méthode est définie sur GET
• Dans le champ URL, collez: https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric
• Remplacer YOUR_API_KEYavec la clé API réelle que vous avez copiée à partir d'OpenWeatherMap ( CLE API Fablab = a5f6703b627bb2f166637747a9d26906)
• Remplacer London avec votre ville si vous voulez
• Sélectionnez le retour comme JSON analysé.

• Cliquez sur Terminé

Le units=metric vous donne Celsius. Changez-le pour units=imperialpour Fahrenheit. Pour plus de détails sur les paramètres que vous pouvez utiliser, consultez la documentation de l'API OpenWeatherMap. Maintenant, câblez les nœuds ensemble en cliquant et en faisant glisser du côté droit du nœud d'injection vers le côté gauche du nœud de requête http, puis du nœud de requête http au nœud de débogage.

Cliquez sur le bouton Déployer en haut à droite et ouvrez le panneau de débogage sur la barre latérale droite s'il n'est pas déjà ouvert.

Vous devriez voir un objet JSON avec des données météorologiques, la température, l'humidité, la vitesse du vent, la description, et plus encore. Il s'agit des données brutes qui reviennent de l'API.

Si vous voyez une erreur 401, votre clé API peut toujours être activée. Attendez 10-15 minutes et essayez à nouveau, ou vérifiez à nouveau la clé au cas où elle serait invalide ou mal tapée

Maintenant que vous obtenez des données de l'API, vous devez extraire les valeurs spécifiques que vous souhaitez afficher. Nous utiliserons un nœud de fonction pour retirer la température, l'humidité, la description de la météo et la vitesse du vent.

• Faites glisser un nœud de fonction et ajoutez le code suivant et connectez-le au nœud de requête http:

requetemeteo.json

// Extract the data we need
const temp = msg.payload.main.temp;
const humidity = msg.payload.main.humidity;
const description = msg.payload.weather[0].description;
const windSpeed = msg.payload.wind.speed;
const city = msg.payload.name;
 
// Create separate messages for each value
return [
    { payload: city, topic: "city" },
    { payload: description, topic: "description" },
    { payload: temp, topic: "temperature" },
    { payload: humidity, topic: "humidity" },
    { payload: windSpeed, topic: "wind" },
];

• Réglez les sorties du nœud de fonction (dans l'onglet Configuration) à 5, car la fonction retournera cinq messages distincts.

• Cliquez sur Terminé

Ce nœud de fonction divise la réponse de l'API en sorties séparées - une pour la température, une pour l'humidité, etc. Chaque sortie obtient sa propre étiquette de sujet afin que vous puissiez suivre ce qui est quoi.

Maintenant, vous verrez vos données météo affichées à l'écran. Cela démontre comment Node-RED connecte les sources de données aux composants visuels. Nous organiserons le tableau de bord en groupes distincts pour une meilleure organisation visuelle.

Commencez par afficher quelle ville vous suivez:

• Faites glisser un nœud ui-text sur la toile
• Connectez-le à la sortie 1 de votre nœud de fonction (la sortie de la ville)
• Double-cliquez sur le nœud ui-texte pour ouvrir ses paramètres
• Définir l'étiquette sur “City”
• Pour Group, cliquez sur l'icône crayon pour créer un nouveau groupe appelé “Informations météorologiques”
• Cliquez sur Ajouter, puis sur Terminé

Vous venez de créer votre premier élément de tableau de bord et votre premier groupe de tableaux de bord. Les groupes organisent des widgets sur la page et fonctionnent comme des conteneurs.

Ajouter un champ de texte pour afficher les conditions actuelles:

• Faites glisser un autre nœud ui-texte sur la toile
• Connectez-le à la sortie 2 de votre nœud de fonction (sortie de description)
• Double-cliquez pour configurer
• Définir l'étiquette sur “Conditions”
• Utilisez le même groupe “Informations météorologiques”
• Cliquez sur Terminé

L'API renvoie des descriptions comme “nuages dispersés” ou “pluie légère” - conditions lisibles par l'homme.( broken clouds = nuages fragmentés )

Ensuite, ajoutez une jauge circulaire pour la température:

• Faites glisser un nœud ui-gauge sur la toile
• Connectez-le à la sortie 3 de votre nœud de fonction (la sortie de température)
• Double-cliquez pour ouvrir les paramètres
• Régler l'étiquette sur “Température (°C)”
• Réglez Min à 0 et Max à 50 (ajustez-les en fonction de votre climat)
• Ajoutez les segments de couleurs que vous souhaitez, comme indiqué dans l'image de référence.
• Pour Group, cliquez sur l'icône crayon pour créer un nouveau groupe appelé “Température et humidité”
• Cliquez sur Ajouter pour créer le groupe
• Sous l'onglet Apparence, vous pouvez sélectionner un schéma de couleurs si vous le souhaitez
• Cliquez sur Terminé

La jauge va automatiquement colorer-code en fonction de la valeur - des températures plus fraîches s'affichent dans les tons bleus, plus chauds en orange/rouge.

Ajouter la jauge d'humidité au même groupe:

• Faites glisser un autre nœud ui-gauge sur la toile
• Connectez-le à la sortie 4 de votre nœud de fonction (sortie d'humidité)
• Double-cliquez pour configurer
• Définir l'étiquette sur “Humidité (%)”
• Régler Min à 0 et Max à 100 (l'humidité est toujours un pourcentage)
• Ajoutez les segments de couleurs que vous souhaitez, comme indiqué dans l'image de référence.
• Utilisez le même groupe “Température & Humidité” dans le menu déroulant
• Cliquez sur Terminé

Les deux jauges afficheront côte à côte dans le même groupe, ce qui facilitera la comparaison des deux métriques à la fois.

Ensuite, créez un graphique dédié pour afficher les tendances de la vitesse du vent au fil du temps:

• Faites glisser un nœud ui-chart sur votre flux.
• Connectez-le à la sortie 5 de votre nœud de fonction (la sortie de vitesse du vent).
• Double-cliquez sur le nœud ui-chart pour le configurer.
• Réglez l'étiquette sur “Vitesse du vent (m/s)”.
• Définir le graphique Type to Line.
• Pour l'axe X, sélectionnez Timestamp.
• Réglez l'axe Y pour utiliser msg.payload.
• Réglez la série sur msg.topic.
• Sous Groupe, cliquez sur l'icône du crayon et créez un nouveau groupe nommé “Wind Speed”.
• Cliquez sur Ajouter, puis sur Terminé pour enregistrer la configuration.

Appuyez sur le bouton Déployer dans le coin supérieur droit.

Ensuite, ouvrez la barre latérale Dashboard 2.0 et cliquez sur le bouton Ouvrir le tableau de bord. Vous devriez maintenant voir un tableau de bord similaire à celui indiqué ci-dessous.

meteotest001flows.json.tar Enlever .tar

Cela donne ( en mode brut sans parametrage )