Différences

Ci-dessous, les différences entre deux révisions de la page.

--- start:nodered:dashboard2 [2026/06/16 13:25] – [Traitement des données météorologiques] admin
+++ start:nodered:dashboard2 [2026/06/16 14:12] (Version actuelle) – [Ce Dont Vous Aurez Besoin] admin
@@ Ligne 23: / Ligne 23: @@
 [[https://flowfuse.com/blog/2025/12/getting-weather-data-in-node-red/|Meteo Dashboard2 Nodered ]]
-====Ce Dont Vous Aurez Besoin====
+====Ce dont vous aurez besoin====
 Avant de commencer, assurez-vous d'avoir:
@@ Ligne 123: / Ligne 123: @@
 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.
+====Construire le tableau de bord====
+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.
+===Configuration de l'affichage du nom de la ville===
+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é
+{{ :start:nodered:city-display.png?direct&400 |}}
+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.
+===Configuration de la météo Description===
+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é
+{{ :start:nodered:condition-display.png?direct&400 |}}
+L'API renvoie des descriptions comme "nuages dispersés" ou "pluie légère" - conditions lisibles par l'homme.( broken clouds = nuages fragmentés )
+===Configuration de la jauge de température===
+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é
+{{ :start:nodered:temperature-gauge.png?direct&400 |}}
+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.
+===Configurer la jauge d'humidité===
+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é
+{{ :start:nodered:humidity-gauge.png?direct&400 |}}
+Les deux jauges afficheront côte à côte dans le même groupe, ce qui facilitera la comparaison des deux métriques à la fois.
+===Configuration de l'affichage de la vitesse du vent===
+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.
+{{ :start:nodered:wind-speed-chart.png?direct&400 |}}
+===Visualiser Votre Tableau De Bord===
+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.
+{{ :start:nodered:capture_d_ecran_du_2026-06-16_14-02-33.png?direct&800 |}}
+{{ :start:nodered:meteotest001flows.json.tar |}}** Enlever .tar**
+Cela donne ( en mode brut sans parametrage )
+{{ :start:nodered:capture_d_ecran_du_2026-06-16_14-07-43.png?direct&800 |}}