Inserting OWM icons in DBv2 text node

Dashboard
1

In DBv1, I included the Open Weather Map icons in some of my flows which I developed for weather data. I’ve attempted to do the same in DBv2 without success.

In DBv1, I use this string (along with other hmtl) within the text: i class="wi wi-owm-03d"

When I attempt to use the same string as payload sent to the DBv2 text node, it does not display the icon. Any ideas how to fix this?

2

Probably the icons are not installed in your setup.
open your browser log console, refresh the page and look for an error on loading the icons.
If you see such an error, it means that indeed the icons are not loaded. Then, either load them from a template node, e.g.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">

or install with NPM and import:

import 'weather-icons/css/weather-icons.css';
3

@joepavitt … I read your comment about using weather icons in this post: Weather icons used in Dashboard 2.0

Like the original poster, I am attempting to move my DBv1 flows over to DBv2; specifically, the ones which use Open Weather Map & its icons. I followed your instructions and attempted to use this in a DBv2 Text node:

<i :class="wi wi-owm-03d"></i>&nbsp;<i :class="fa fa-arrow-up"></i>&nbsp;&nbsp;8:00 am

Only the time was displayed, not the OWM icon. I am using OWM icons on the NR server in DBv1, so I know they are available. Am I formatting the string correctly, so the icon is inserted into the text?

4

In VueJS, you only need the leading : if you want the attribute value to be computed. As you are not doing that, you don't need it.

5

Ah ok… I revised my string to the following but no luck getting the icon to display:

<i class="wi wi-owm-03d"></i>&nbsp;<i class="fa fa-arrow-up"></i>&nbsp;&nbsp;8:00 am
6

This may give you some ideas, but the main problem I think is that Dashboard 1 had many different icons pre-loaded.

<template>
    <div>
        <h2>Icon</h2>
        <v-img :src="iconSource" height=32 width=32>
    </div>
</template>


<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                iconImage: '04d',
                
            }
        },

        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
            iconSource: function() {
                return `https://openweathermap.org/img/wn/${this.iconImage}.png`

            }
 

        },

    }
</script>