Wetterdaten mittels NodeRed darstellen. Icons werden nicht dargestellt

Lars Gast #7237483
Lesenswert?
• ▲
▼ 
guten morgen,

mittels node red möchte ich mir gerne die Wetterdaten mit icons anzeigen 
lassen.

Doch leider werde mir nicht alle icons angezeigt.
Ich hole mir die Wetterdaten über openWeatherMap und extrahiere dann in 
einem function-node die einzelnen Daten.

Dahinter habe ich jeweils template nodes, welche mir die Icons anzegien 
lassen sollen.
1
<link rel="stylesheet" h_ref="/weather-icons/mycss/weather-icons-wind.css">

2
<div style="display: flex;height: 100%;justify-content: left;align-items: center;">

3
<i class="fa-2x wi {{msg.payload}}"></i>

4
</div>

(h_ref) im node ohne den Unterstrich

Diese Funktion habe ich in jedem node drinn, welches mir ein Icon 
anzeigen lassen soll.

Aus dem Funktionsblock kommt für das WindSpeedIcon:
1
{"topic":"WindSpeedIcon","payload":"wi-wind-beaufort-2","_msgid":"8413ae8e3382cdcb"}

und für die WindDirectionIcon
1
{"topic":"WindDirectionIcon","payload":"wi-from-s","_msgid":"e7630b765da23b51"}

https://erikflowers.github.io/weather-icons/
hier kann ich das Icon wi-from-s finden. auf der Gui seite von NodeRed 
wird mir dieses aber nicht angezeigt (das WindSpeedIcon aber schon)
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Spezi94 Gast #7237493
Lesenswert?
• ▲
▼ 
Guten Morgen,

Hast du schon mal einen anderen Ort ausprobiert? Da hatte ein anderer 
User auch mal ein Problem mit dem Node-RED Dashboard und Weather Icons.
https://discourse.nodered.org/t/weather-icons-please-help-why-some-arent-loaded/48562

Hier wäre auch ein Link für eine Anleitung wie man ein Dashboard mit der 
OpenWeatherMap macht:
https://flows.nodered.org/flow/d7af9f5d6f6923324466c58ea4f0655f
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Johannes Gast #7237497
Lesenswert?
• ▲
▼ 
Du musst dir auch die Info durchlesen.

1
To make a wind icon appear, you need to add 3 classes, the base icon class, the wind icon class, and then the direction you want it to face: class="wi wi-wind wi-from-e"


versuche mal für das WindDirectionIcon
1
<link rel="stylesheet" h_ref="/weather-icons/mycss/weather-icons-wind.css">

2
<div style="display: flex;height: 100%;justify-content: left;align-items: center;">

3
<i class="fa-2x wi wi-wind {{msg.payload}}"></i>

4
</div>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren