Wetterdaten mittels NodeRed darstellen. Icons werden nicht dargestellt

Lars Gast #7237483 
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 Langsamer Modus Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke
Spezi94 Gast #7237493 
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 Melden Danke
Johannes Gast #7237497 
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 Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 4 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.