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?
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';
@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> <i :class="fa fa-arrow-up"></i> 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?
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.
Ah ok… I revised my string to the following but no luck getting the icon to display:
<i class="wi wi-owm-03d"></i> <i class="fa fa-arrow-up"></i> 8:00 am
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>
Thanks for the sample code… so I may have a false assumption… I assumed the weather fonts available in DBv1 were installed locally within NR so they would be available to any widget in NR. Is that correct or were the icons “bundled” with DBv1 which means they would not be available in DBv2?
I just copy & pasted your code into a DBv2 Template node but am unable to see the icon. Do I need do anything else to verify it is working?
Probably because the background colour hides it. Try this, with a black background;
<template>
<div>
<h2>Icon</h2>
<v-img class = "iconImage" :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>
<style>
.iconImage {
background-color: black;
}
</style>
Ok that worked… I see you changed the background color to black in order to get it to work. I’ll use this to test using the theme colors to see if I have any issues.
Hopefully in the near future they will include some of the DBv1 icons in DBv2 to avoid having to go through all of these custom solutions.
Much thanks for this sample code.
Ok, now that I’m able to display a static icon, I wanted to take it to the next level and provide the icon as msg.payload. I’ve modified the ui-template to what is shown below but it does not work. I’m a notice at template/CSS so anyone who can identify the problem and fix, I’d be greatful
<template>
<div>
<h2>Icon</h2>
<v-img class="payload" :src="iconSource" height=100 width=100>
</div>
</template>
<script>
export default {
data() {
// define variables available component-wide (in <template> and component functions)
return {
payload: {},
}
},
watch: {
msg: function() {
if (this.msg.payload) != undefined) {
this.payload = this.msg.payload
}
}
}
computed: {
// automatically compute this variable whenever VueJS deems appropriate
iconSource: function() {
return `https://openweathermap.org/img/wn/${this.iconImage}@4x.png`
}
},
}
</script>
Pretty sure you meant to use payload not iconImage in the computed variable:
return `https://openweathermap.org/img/wn/${this.payload}@4x.png`
This should be defaulted to a string of an actual existing icon
Not sure why you've set class of payload?
Here is a short flow showing how to load either 1 image code or an Array of image codes. The issue with the OpenWeatherMap icons is that they are actually loaded as images NOT icons. You can use Material Design Icons (mdi) directly as icons so I have include 1 in the flow as an example.
[{"id":"e652f92a6aeb810f","type":"ui-template","z":"506727cd93754bdb","group":"090b012ba216c8fe","page":"","ui":"","name":"Icon","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div>\n <h2>Icon</h2>\n <div>\n <v-img class = \"iconImage\" :src = \"iconSource\" :height = \"iconSize\" :width = \"iconSize\">\n </div>\n <div> \n <v-img class = \"iconImage\" :src = \"iconImageSource(0)\" :height = \"iconSize\" :width = \"iconSize\" style=\"display:true\">\n </div>\n <v-icon :size=\"iconSize\">{{mdiIcon}}</v-icon>\n </div>\n</template>\n\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n iconSize: 48,\n iconCode: '04d',\n\n iconSourceList: [],\n imageSourceURL: 'https://openweathermap.org/img/wn/',\n\n mdiIcon: 'mdi-cloud-outline'\n \n }\n },\n\n watch: {\n msg: function () {\n if (Array.isArray(this.msg.payload)) {\n this.createImageSourceList(this.msg.payload)\n\n } else {\n this.iconCode = this.msg.payload\n \n }\n\n },\n\n },\n\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n iconSource: function() {\n return `${this.imageSourceURL}${this.iconCode}.png`\n\n },\n \n },\n\n methods: {\n // Create all images for icon Array\n createImageSourceList(iconCodes) {\n this.iconSourceList = []\n iconCodes.forEach(iconCode => this.addImageSource(iconCode))\n\n },\n\n addImageSource(iconCode) {\n const source = `${this.imageSourceURL}${iconCode}.png`\n\n this.iconSourceList.push(source)\n\n },\n\n iconImageSource(iconNumber) {\n const source = this.iconSourceList[iconNumber]\n\n return source\n\n },\n }\n\n }\n</script>\n\n<style>\n .iconImage {\n background-color: grey;\n color: green;\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":1410,"y":5100,"wires":[[]]},{"id":"9fc55f8d3a55a9ad","type":"inject","z":"506727cd93754bdb","name":"Image Array","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"02d\", \"10n\"]","payloadType":"json","x":1110,"y":5100,"wires":[["e652f92a6aeb810f"]]},{"id":"ea3d4f5786d9770d","type":"inject","z":"506727cd93754bdb","name":"Image Code","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"50d","payloadType":"str","x":1110,"y":5160,"wires":[["e652f92a6aeb810f"]]},{"id":"090b012ba216c8fe","type":"ui-group","name":"Icon","page":"c8690e5bce80ab2a","width":"3","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c8690e5bce80ab2a","type":"ui-page","name":"Analysis","ui":"b810194ea14e3502","path":"/analysis","icon":"database-eye","layout":"flex","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"24"}],"order":7,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"bf518c32f67d6fcd","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.26.0"}}]
Not sure why you've set class of payload?
Wish I did too 
I’m still learning about templates/CSS
@Buckskin … Much thanks for this flow… my goal was to use payload to pass the name of the OWM icon for display. Appreciate that you also included an array example.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy