Weather icons used in Dashboard 2.0

Dashboard
,
1

Hello i'm a node-red newbe. This is my first post in thes forum ...

I found a discription to use weather-icons in the 'old' dashboard ... Flow showing Node-red ui OpenweatherMap ...

I try to transform this to 'dashboard 2.0'.

It seems to me thats not possebile to put 'msg.payload' to a 'class' entry of a dashboard 2.0 'template' ...

My code in the Template node looks like this:

<template>
    <div class="condition_icon">
        <i class="fa-4x wi {{msg.payload}}"></i>
    </div>
</template>

<style>
    @import "/weather-icons/mycss/weather-icons.min.css";

    .condition_icon {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
</style>

If i look in the HTML inside the Browser the result looks like:

<div class="condition_icon" state="[object Object]" style="grid-row-end: span 2;">
    <i class="fa-4x wi {{msg.payload}}"></i>
</div>

But i need ther the 'payload'.

2

Hi @David83 - welcome to the forums, and thanks for the question

Under the covers, new Dashboard uses VueJS for it's ui-template node, so we follow that syntax.

In this case, you can use the : notation to define any attribute as dynamic.

With a dynamic class, if your msg.payload will explicitely be your class name, you can use:

<i :class="'fa-4x wi ' + msg.payload">...</>
3

Hi @David83,
I found some example cards that show weather information and I modified it to display data from OWM source. You may find it useful: https://youtu.be/EESuQfSBYzo
Sample flow is in the video description.

4

@joepavitt thanks that works fine :smiley:

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.