If statement ui template

[Unpuertomex]

Hello - I've been dinking around with an if statement in the ui template for several days now and haven't been able to figure it out.

I'm trying to load an svg file base on the msg.payload from the darksky node.
For example, if the msg.payload is partly-cloudy-day I want to load a svg titled partly-cloudy-day.svg, if the msg.payload is fog load fog-1.svg and so on. I made the changes required to setting.js httpStatic: 'C:\Users\unpue\public', I serve a background picture with this setup so I know it works.

I can open the link to the svg file on Chrome by looking it up like this
http://192.168.2.xxx:1880//weather-icons/weather/partly-cloudy-day.svg

This is the flow

and here what I have in the template node, I removed the first <div just left div in its place because it kept trying to load the svg and wouldn't just show the script.

<div> ng-if= "msg.payload === partly-cloudy-day"
img src="/weather-icons/weather/partly-cloudy-day.svg"
</div>

<div. ng-if="msg.payload === fog" 
img src="/weather-icons/weather/fog-1.svg"
</div>

<div> ng-if="msg.payload === sunny"
img src="/weather-icons/weather/day.svg"
</div>

this is what the msg.payload looks like

Appreciate the help!

[shrickus]

Whenever you want to post a block of code, paste it between two lines that contain only three backtics, such as ``` -- otherwise any html or svg elements may be rendered into the page. (If you edit your post and add those lines, you'll see what I mean and make it easier for us to read...)

As for the angular syntax, you need to compare the msg.payload string to another javascript string, when you use the 3 equal signs. Since you left the right side of the equation as a bare keyword, i think it's trying to interpret things like fog as a variable. Try this:

<div>
    <img ng-if="msg.payload === 'partly-cloudy-day'" src="/weather-icons/weather/partly-cloudy-day.svg">
    <img ng-if="msg.payload === 'fog'" src="/weather-icons/weather/fog-1.svg">
    <img ng-if="msg.payload === 'sunny'" src="/weather-icons/weather/day.svg">
</div>

Another less verbose technique would be to use a change or function node ahead of this ui_template node, adding another field (e.g "msg.icon"), and then substituting that directly into your img src attribute, like so:

<img src="/weather-icons/weather/{{msg.icon}}.svg">

(at least I believe that syntax is correct -- ymmv)

[dceejay]

Note we do include @rossoreed s weather-icons-lite built into dashboard, so wi prefix should make them available like fa icons

[Unpuertomex]

@shrickus

paste it between two lines that contain only three backtics

@shrickus, thank you for the tip on the backtics, I was clearly using them incorrectly. I will give your changes a try and report back.

[Andrei]

@dceejay

weather-icons

Awesome ! There are a tons of weather icons ! Thanks for sharing Dave.

Adding links for more information:

https://erikflowers.github.io/weather-icons/

GitHub - Paul-Reed/weather-icons: Node-red weather icons

[Unpuertomex]

@dceejay

Note we do include @rossoreed s weather-icons-lite built into dashboard, so wi prefix should make them available like fa icons

Thank you @dceejay I looked at them before and was inspired to place animated ones to bring life into the alarm panel I'm working on. I downloaded these from amcharts.com I'm using them with the script @shrickus corrected for me. Right now I have just one setup, as the weather conditions change the animated icon changes as well, next sets are to figure out how to show a 3 days forecast in a table, might be back asking for help on that one too, but I am learning. You can see the animation on this screenshot.