Return html / fa icon code in a function

[thomasvjohansen]

I want to show the wind direction from openweathermap by a fa-icon but the function outputs degrees.

I have a function which outputs "90" degrees.

I want to convert this to a fa-icon + rotation and save it in a datacell which is later picked up by a template.
but since this datacell have multiple data I cant do the format in template.

so can the fa icon be inserted in the function?

tried this but not working

  	data05: {
       cell01: msg.payload.hourly[1].wind_cardinal = '<div class="fa fa-location-arrow fa-rotate' + {degreesToCardinal(msg.payload.hourly[1].wind_deg)} + '>',
       cell02: msg.payload.hourly[3].wind_cardinal = degreesToCardinal(msg.payload.hourly[3].wind_deg),
       cell03: msg.payload.hourly[5].wind_cardinal = degreesToCardinal(msg.payload.hourly[5].wind_deg),
       cell04: msg.payload.hourly[7].wind_cardinal = degreesToCardinal(msg.payload.hourly[7].wind_deg),
       cell05: msg.payload.hourly[9].wind_cardinal = degreesToCardinal(msg.payload.hourly[9].wind_deg),
       cell06: msg.payload.hourly[11].wind_cardinal = degreesToCardinal(msg.payload.hourly[11].wind_deg),
  	}

[hotNipi]

Maybe you can find some useful tips from this thread Help with icon in `text` node

[thomasvjohansen]

My problem is not about the weather icons, its about passing on html code within a function to be used in a template.

[hotNipi]

@thomasvjohansen

I want to show the wind direction from openweathermap

I just wanted to say that there is more and easy ways to do this.
But to understand what is not working in your case, it takes more than that object you have shared.
Make a simple flow with some data injected and the template where the result should be used.

[thomasvjohansen]

Im modifying a weather flow, which pulls data from openweathermap.

the flow collects data and formats data into table cells, in this case "cell01".
Then a template node picks up everything in data.cell01, but it contains multiple values so it cant be formated in the template.
Though I can see that the cloud icons are generated in the template but cant figure out how to extend that to convert directions to icons.

The icon that could be used is "fa-location-arrow fa-rotate-90".

this is the complete flow but had to remove my openweathermap api key.

It is the function "format forecast data" and template "forecast 6 hours"

[{"id":"5f633a28.607134","type":"tab","label":"OWM Landscape","disabled":false,"info":""},{"id":"180a101a.9cd43","type":"ui_button","z":"5f633a28.607134","name":"IconRefresh","group":"70fb931.dfc146c","order":1,"width":3,"height":2,"passthru":false,"label":"","tooltip":"Refresh","color":"","bgcolor":"#17334d","icon":"fa-refresh fa-8x","payload":"true","payloadType":"bool","topic":"","x":990,"y":300,"wires":[["c5efdf55.db32f"]]},{"id":"9c052db7.3c434","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":3,"width":3,"height":1,"name":"Description","label":"","format":"<font size=4>{{msg.payload.current.weather[0].description}}","layout":"row-center","x":990,"y":60,"wires":[]},{"id":"ec4eb2d0.974c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":5,"width":4,"height":1,"name":"Wind","label":"","format":"{{msg.payload.current.wind_speed}}&nbsp;&nbsp;<i class=\"wi wi-darksky-wind\"></i>&nbsp;&nbsp;{{msg.payload.current.wind_cardinal}}","layout":"row-right","x":970,"y":140,"wires":[]},{"id":"40f44662.3ecde8","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":7,"width":3,"height":1,"name":"SunriseTime","label":"","format":"<i class=\"wi wi-owm-01d\"></i>&nbsp;<i class=\"fa fa-arrow-up\"></i>&nbsp;&nbsp;{{msg.payload.current.sunrise}}","layout":"row-center","x":990,"y":180,"wires":[]},{"id":"5b97953.01fdd6c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":6,"width":3,"height":1,"name":"SunsetTime","label":"","format":"<i class=\"wi wi-wu-sunny\"></i>&nbsp;<i class=\"fa fa-arrow-down\"></i>&nbsp;&nbsp;{{msg.payload.current.sunset}}","layout":"row-center","x":990,"y":220,"wires":[]},{"id":"d284ed2f.c15c8","type":"comment","z":"5f633a28.607134","name":"OpenWeatherMap One Call API for Weather and Forecast","info":"","x":270,"y":40,"wires":[]},{"id":"9dbf3c95.67c74","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 6 hours","order":8,"width":6,"height":4,"format":"<div style=\"height: 100%; justify-content: center; align-items: center;\">\n <div layout=\"rowicons\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowicons\" style=\"font-size:150%;padding-top: 5px;padding-bottom: 5px\">\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell01}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell02}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell03}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell04}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell05}}\"></i></span>\n </div>\n  <div layout=\"rowtext\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowtext\" style=\"line-height: 150%\">\n  <span flex style=\"color: white;text-align: center;\">{{data.cell01}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell02}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell03}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell04}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell05}}</span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":360,"wires":[[]]},{"id":"7adde26c.514aec","type":"function","z":"5f633a28.607134","name":"Format forecast data","func":"var fcdata = {};\nvar units=flow.get('units');\nvar degreesToCardinal = function(deg){\nif (deg>11.25 && deg<=33.75){\nreturn \"NNE\";\n  }else if (deg>33.75 && deg<56.25){\nreturn \"NE\";\n  }else if (deg>56.25 && deg<78.75){\nreturn \"ENE\";\n  }else if (deg>78.75 && deg<101.25){\nreturn 'E';\n  }else if (deg>101.25 && deg<123.75){\nreturn \"ESE\";\n  }else if (deg>123.75 && deg<146.25){\nreturn \"SE\";\n  }else if (deg>146.25 && deg<168.75){\nreturn \"SSE\";\n  }else if (deg>168.75 && deg<191.25){\nreturn \"S\";\n  }else if (deg>191.25 && deg<213.75){\nreturn \"SSW\";\n  }else if (deg>213.75 && deg<236.25){\nreturn \"SW\";\n  }else if (deg>236.25 && deg<258.75){\nreturn \"WSW\";\n  }else if (deg>258.75 && deg<281.25){\nreturn \"W\";\n  }else if (deg>281.25 && deg<303.75){\nreturn \"WNW\";\n  }else if (deg>303.75 && deg<326.25){\nreturn \"NW\";\n  }else if (deg>326.25 && deg<348.75){\nreturn \"NNW\";\n  }else{\nreturn \"N\"; \n  }\n}\nif (units===undefined)\n{\n  units=\"imperial\";\n}\nfunction formatTemp(high, low){\n    if (units == \"imperial\") {\n        if (low){\n          temp = parseFloat(high).toFixed() + '|' + parseFloat(low).toFixed()\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°F'\n        }\n    }\n    else { // metric\n//        temp = parseFloat(temp).toFixed(1) + '°'\n        if (low){\n          temp = parseFloat(high).toFixed() + '°|' + parseFloat(low).toFixed()+'°'\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°'\n        }\n    }\n    return temp;\n}\nfunction dayName(unixTime){\n    var d = new Date(unixTime * 1000);\n    var weekday = new Array(7);\n        weekday[0] = \"Søn\";\n        weekday[1] = \"Man\";\n        weekday[2] = \"Tirs\";\n        weekday[3] = \"Ons\";\n        weekday[4] = \"Tors\";\n        weekday[5] = \"Fre\";\n        weekday[6] = \"Lør\";\n\n    return weekday[d.getDay()]\n}\nfunction timeConvert(UNIX_timestamp){\n  var a = new Date(UNIX_timestamp * 1000);\n  var hour = a.getHours();\n  //var suffix = \" am\";\n  //if (hour >= 12) {\n //   hour = hour - 12;\n  //  suffix = \" pm\";\n // }\n  //if (hour === 0) {\n  //  hour = 12;\n // }\n  var min = a.getMinutes();\n  if (min < 10) {min = \"0\" + min;}\n  return hour + ':' + min; //+ suffix;\n  return hour;\n}\n// prepare forecast data for CSS based ui widget\n\nfcdata.payload = {\n  rowtext: {\n  \tdata01: {\n      cell01: timeConvert(msg.payload.hourly[1].dt),\n      cell02: timeConvert(msg.payload.hourly[3].dt),\n      cell03: timeConvert(msg.payload.hourly[5].dt),\n      cell04: timeConvert(msg.payload.hourly[7].dt),\n      cell05: timeConvert(msg.payload.hourly[9].dt),\n      cell06: timeConvert(msg.payload.hourly[11].dt),\n      cell07: dayName(msg.payload.daily[1].dt),\n      cell08: dayName(msg.payload.daily[2].dt),\n      cell09: dayName(msg.payload.daily[3].dt),\n      cell10: dayName(msg.payload.daily[4].dt),\n      cell11: dayName(msg.payload.daily[5].dt),\n  \t},\n  \tdata02: {\n       cell01: formatTemp(msg.payload.hourly[1].temp),\n       cell02: formatTemp(msg.payload.hourly[3].temp),\n       cell03: formatTemp(msg.payload.hourly[5].temp),\n       cell04: formatTemp(msg.payload.hourly[7].temp),\n       cell05: formatTemp(msg.payload.hourly[9].temp),\n       cell06: formatTemp(msg.payload.hourly[11].temp),\n       cell07: formatTemp(msg.payload.daily[1].temp.max, msg.payload.daily[0].temp.min),\n       cell08: formatTemp(msg.payload.daily[2].temp.max, msg.payload.daily[1].temp.min),\n       cell09: formatTemp(msg.payload.daily[3].temp.max, msg.payload.daily[2].temp.min),\n       cell10: formatTemp(msg.payload.daily[4].temp.max, msg.payload.daily[3].temp.min),\n       cell11: formatTemp(msg.payload.daily[5].temp.max, msg.payload.daily[4].temp.min),\n  \t},\n  \tdata03: {\n       cell01: msg.payload.hourly[1].humidity + '%',\n       cell02: msg.payload.hourly[3].humidity + '%',\n       cell03: msg.payload.hourly[5].humidity + '%',\n       cell04: msg.payload.hourly[7].humidity + '%',\n       cell05: msg.payload.hourly[9].humidity + '%',\n       cell06: msg.payload.hourly[11].humidity + '%',\n  \t},\n  \tdata04: {\n       cell01: msg.payload.hourly[1].wind_speed.toFixed(0) + ' m/s',\n       cell02: msg.payload.hourly[3].wind_speed.toFixed(0) + ' m/s',\n       cell03: msg.payload.hourly[5].wind_speed.toFixed(0) + ' m/s',\n       cell04: msg.payload.hourly[7].wind_speed.toFixed(0) + ' m/s',\n       cell05: msg.payload.hourly[9].wind_speed.toFixed(0) + ' m/s',\n       cell06: msg.payload.hourly[11].wind_speed.toFixed(0) + ' m/s',\n  \t},\n  \tdata05: {\n       //cell01: msg.payload.hourly[1].wind_cardinal = '\\<div class\\=\"fa fa-location-arrow fa-rotate' + {degreesToCardinal(msg.payload.hourly[1].wind_deg)} + '\\>',\n       cell01: msg.payload.hourly[1].wind_cardinal = degreesToCardinal(msg.payload.hourly[1].wind_deg),\n       cell02: msg.payload.hourly[3].wind_cardinal = degreesToCardinal(msg.payload.hourly[3].wind_deg),\n       cell03: msg.payload.hourly[5].wind_cardinal = degreesToCardinal(msg.payload.hourly[5].wind_deg),\n       cell04: msg.payload.hourly[7].wind_cardinal = degreesToCardinal(msg.payload.hourly[7].wind_deg),\n       cell05: msg.payload.hourly[9].wind_cardinal = degreesToCardinal(msg.payload.hourly[9].wind_deg),\n       cell06: msg.payload.hourly[11].wind_cardinal = degreesToCardinal(msg.payload.hourly[11].wind_deg),\n  \t}\n  },\n  rowicons: {\n  \tdata01: {\n  \t\tcell01: msg.payload.hourly[1].weather[0].icon,\n  \t\tcell02: msg.payload.hourly[3].weather[0].icon,\n  \t\tcell03: msg.payload.hourly[5].weather[0].icon,\n  \t\tcell04: msg.payload.hourly[7].weather[0].icon,\n  \t\tcell05: msg.payload.hourly[9].weather[0].icon,\n  \t\tcell06: msg.payload.hourly[11].weather[0].icon,\n  \t\tcell07: msg.payload.daily[1].weather[0].icon,\n  \t\tcell08: msg.payload.daily[2].weather[0].icon,\n  \t\tcell09: msg.payload.daily[3].weather[0].icon,\n  \t\tcell10: msg.payload.daily[4].weather[0].icon,\n  \t\tcell11: msg.payload.daily[5].weather[0].icon,\n  \t}\n  \t\n  }\n}\n\nreturn fcdata;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":360,"wires":[["9dbf3c95.67c74","fd418185.620748"]]},{"id":"d8c5527f.7739","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":2,"width":3,"height":1,"name":"Temperature","label":"","format":"<font size=6>{{msg.payload.current.temp}}","layout":"col-center","x":990,"y":100,"wires":[]},{"id":"681b2b94.9f7a44","type":"http request","z":"5f633a28.607134","name":"Get OWM data","method":"GET","ret":"obj","paytoqs":true,"url":"https://api.openweathermap.org/data/2.5/onecall","tls":"","persist":false,"proxy":"","authType":"","x":480,"y":160,"wires":[["67075190.fc6f3","7adde26c.514aec","30342c8c.30450c"]]},{"id":"c72d96f0.204148","type":"inject","z":"5f633a28.607134","name":"Trigger","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"600","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":120,"y":100,"wires":[["79276db2.a2ce14"]]},{"id":"67075190.fc6f3","type":"function","z":"5f633a28.607134","name":"Format current data","func":"var icon = {};\n\nvar units=flow.get('units');\nif (units===undefined)\n{\n  units=\"imperial\";\n}\n\nfunction timeConvert(UNIX_timestamp){\n  var a = new Date(UNIX_timestamp * 1000);\n  var hour = a.getHours();\n  //var suffix = \" am\";\n  //if (hour >= 12) {\n //   hour = hour - 12;\n  //  suffix = \" pm\";\n // }\n  //if (hour === 0) {\n  //  hour = 12;\n // }\n  var min = a.getMinutes();\n  if (min < 10) {min = \"0\" + min;}\n  return hour + ':' + min; //+ suffix;\n  \n}\n\nvar degreesToCardinal = function(deg){\nif (deg>11.25 && deg<=33.75){\nreturn \"NNE\";\n  }else if (deg>33.75 && deg<56.25){\nreturn \"NE\";\n  }else if (deg>56.25 && deg<78.75){\nreturn \"ENE\";\n  }else if (deg>78.75 && deg<101.25){\nreturn \"E\";\n  }else if (deg>101.25 && deg<123.75){\nreturn \"ESE\";\n  }else if (deg>123.75 && deg<146.25){\nreturn \"SE\";\n  }else if (deg>146.25 && deg<168.75){\nreturn \"SSE\";\n  }else if (deg>168.75 && deg<191.25){\nreturn \"S\";\n  }else if (deg>191.25 && deg<213.75){\nreturn \"SSW\";\n  }else if (deg>213.75 && deg<236.25){\nreturn \"SW\";\n  }else if (deg>236.25 && deg<258.75){\nreturn \"WSW\";\n  }else if (deg>258.75 && deg<281.25){\nreturn \"W\";\n  }else if (deg>281.25 && deg<303.75){\nreturn \"WNW\";\n  }else if (deg>303.75 && deg<326.25){\nreturn \"NW\";\n  }else if (deg>326.25 && deg<348.75){\nreturn \"NNW\";\n  }else{\nreturn \"N\"; \n  }\n}\n\nif (units == \"imperial\")\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed() + ' °F';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed() + ' mph';\n}\nelse // metric units\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed(1) + ' °C';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed(1) + ' m/s';\n}\n\nmsg.payload.current.wind_cardinal = degreesToCardinal(msg.payload.current.wind_deg);\nmsg.payload.current.sunrise = timeConvert(msg.payload.current.sunrise);\nmsg.payload.current.sunset = timeConvert(msg.payload.current.sunset);\nmsg.payload.current.humidity = msg.payload.current.humidity + ' %';\n\n\nvar iconString = 'wi-owm-' + msg.payload.current.weather[0].icon + ' wi-4x';\nicon = {\n    ui_control: {\n        icon: iconString\n    }\n}; \n\nreturn [msg, icon];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":720,"y":160,"wires":[["d8c5527f.7739","ec4eb2d0.974c","9c052db7.3c434","40f44662.3ecde8","5b97953.01fdd6c","8d7cf800.2eb93"],["180a101a.9cd43"]]},{"id":"79276db2.a2ce14","type":"change","z":"5f633a28.607134","name":"Set location, appid, units","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload.lat","pt":"msg","to":"55.5","tot":"str"},{"t":"set","p":"payload.lon","pt":"msg","to":"12.1619","tot":"str"},{"t":"set","p":"payload.appid","pt":"msg","to":"","tot":"str"},{"t":"set","p":"payload.units","pt":"msg","to":"metric","tot":"str"},{"t":"set","p":"units","pt":"flow","to":"payload.units","tot":"msg"},{"t":"set","p":"payload.lang","pt":"msg","to":"da","tot":"str"},{"t":"set","p":"lang","pt":"flow","to":"payload.lang","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":100,"wires":[["681b2b94.9f7a44"]]},{"id":"16181411.5a365c","type":"ui_ui_control","z":"5f633a28.607134","name":"Update tab","events":"all","x":110,"y":200,"wires":[["3f3d5ab9.82b3a6"]]},{"id":"c5efdf55.db32f","type":"link out","z":"5f633a28.607134","name":"Refresh","links":["a6b24cea.e52a7"],"x":1105,"y":300,"wires":[]},{"id":"a6b24cea.e52a7","type":"link in","z":"5f633a28.607134","name":"","links":["c5efdf55.db32f"],"x":155,"y":140,"wires":[["79276db2.a2ce14"]]},{"id":"3f3d5ab9.82b3a6","type":"switch","z":"5f633a28.607134","name":"tab focus","property":"tab","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":280,"y":200,"wires":[["79276db2.a2ce14"]]},{"id":"fd418185.620748","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 5 days","order":9,"width":6,"height":3,"format":"<div style=\"height: 100%; justify-content: center; align-items: center;\">\n <div layout=\"rowicons\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowicons\" style=\"font-size:150%;padding-top: 5px;padding-bottom: 5px\">\n  \n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell07}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell08}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell09}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell10}}\"></i></span>\n   <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell11}}\"></i></span>\n </div>\n  <div layout=\"rowtext\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowtext\" style=\"line-height: 150%\">\n  \n  <span flex style=\"color: #097479;text-align: center\">{{data.cell07}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell08}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell09}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell10}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell11}}</span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":980,"y":430,"wires":[[]]},{"id":"30342c8c.30450c","type":"debug","z":"5f633a28.607134","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":560,"wires":[]},{"id":"8d7cf800.2eb93","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":4,"width":2,"height":1,"name":"Humidity","label":"","format":"{{msg.payload.current.humidity}}","layout":"col-center","x":980,"y":260,"wires":[]},{"id":"70fb931.dfc146c","type":"ui_group","name":"MainGroup","tab":"4bb34f67.69a87","order":1,"disp":false,"width":6,"collapse":false},{"id":"4bb34f67.69a87","type":"ui_tab","name":"Weather","icon":"wi-wu-partlycloudy","order":2,"disabled":false,"hidden":false}]

[hotNipi]

Couldn't do much without the data but just by reading the code I think you should do following:
In that template you'll need to make that text row to include the icon tag

And from function feed the degree

[thomasvjohansen]

thx your example pushed me the right way to do it, though realized afterwards that the icons only can be rotated in 4 directions, 0/90/180/270....

I need atleast 8 directions, so now im looking for a solution to that.

[dceejay]

Sounds like a job for @Paul-Reed

[hotNipi]

The thread I suggested leads to weather-icons-wind from where you can actually get directional icons for full 360 degrees. Or for cardinals if you want. And you can choose the pointer direction even for wind blowing towards or from.

Weather Icons - 222 font icons inspired by Font Awesome and designed for...

cdnjs - The #1 free and open source CDN built to make life easier for developers

[thomasvjohansen]

thx

now it works.

rewrote the degree section to eight names with correct degrees.
the eight names fits material design icon names.

if (deg>22.50 && deg<=67.50){
return "north_east";
  }else if (deg>67.51 && deg<112.50){
return "east";
  }else if (deg>112.51 && deg<157.50){
return "south_east";
  }else if (deg>157.51 && deg<202.50){
return "south";
  }else if (deg>202.51 && deg<247.50){
return "south_west";
  }else if (deg>247.51 && deg<292.50){
return "west";
  }else if (deg>292.51 && deg<337.50){
return "north_west";
  }else{
return "north"; 
  }

and then added the material icons in the template

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</div>
  <div layout="rowtext" layout-align="space-around start" ng-repeat="data in msg.payload.rowwind" style="line-height: 150%">
  <span flex style="color: white;text-align: center"><span class="material-icons">{{data.cell21}}</span></span>
  <span flex style="color: white;text-align: center"><span class="material-icons">{{data.cell22}}</span></span>
  <span flex style="color: white;text-align: center"><span class="material-icons">{{data.cell23}}</span></span>
  <span flex style="color: white;text-align: center"><span class="material-icons">{{data.cell24}}</span></span>
  <span flex style="color: white;text-align: center"><span class="material-icons">{{data.cell25}}</span></span>
 </div>

here is the flow

[{"id":"5f633a28.607134","type":"tab","label":"OWM Landscape","disabled":false,"info":""},{"id":"180a101a.9cd43","type":"ui_button","z":"5f633a28.607134","name":"IconRefresh","group":"70fb931.dfc146c","order":1,"width":3,"height":2,"passthru":false,"label":"","tooltip":"Refresh","color":"","bgcolor":"#17334d","icon":"fa-refresh fa-8x","payload":"true","payloadType":"bool","topic":"","x":990,"y":300,"wires":[["c5efdf55.db32f"]]},{"id":"9c052db7.3c434","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":3,"width":3,"height":1,"name":"Description","label":"","format":"<font size=4>{{msg.payload.current.weather[0].description}}","layout":"row-center","x":990,"y":60,"wires":[]},{"id":"ec4eb2d0.974c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":5,"width":4,"height":1,"name":"Wind","label":"","format":"{{msg.payload.current.wind_speed}}&nbsp;&nbsp;<i class=\"wi wi-darksky-wind\"></i>&nbsp;&nbsp;{{msg.payload.current.wind_cardinal}}","layout":"row-right","x":970,"y":140,"wires":[]},{"id":"40f44662.3ecde8","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":7,"width":3,"height":1,"name":"SunriseTime","label":"","format":"<i class=\"wi wi-owm-01d\"></i>&nbsp;<i class=\"fa fa-arrow-up\"></i>&nbsp;&nbsp;{{msg.payload.current.sunrise}}","layout":"row-center","x":990,"y":180,"wires":[]},{"id":"5b97953.01fdd6c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":6,"width":3,"height":1,"name":"SunsetTime","label":"","format":"<i class=\"wi wi-wu-sunny\"></i>&nbsp;<i class=\"fa fa-arrow-down\"></i>&nbsp;&nbsp;{{msg.payload.current.sunset}}","layout":"row-center","x":990,"y":220,"wires":[]},{"id":"d284ed2f.c15c8","type":"comment","z":"5f633a28.607134","name":"OpenWeatherMap One Call API for Weather and Forecast","info":"","x":270,"y":40,"wires":[]},{"id":"9dbf3c95.67c74","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 6 hours","order":8,"width":6,"height":4,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<div style=\"height: 100%; justify-content: center; align-items: center;\">\n <div layout=\"rowicons\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowicons\" style=\"font-size:150%;padding-top: 5px;padding-bottom: 5px\">\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell01}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell02}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell03}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell04}}\"></i></span>\n  <span flex style=\"color: white;text-align: center\"><i class=\"wi wi-owm-{{data.cell05}}\"></i></span>\n </div>\n  <div layout=\"rowtext\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowtext\" style=\"line-height: 150%\">\n  <span flex style=\"color: white;text-align: center\">{{data.cell01}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell02}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell03}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell04}}</span>\n  <span flex style=\"color: white;text-align: center\">{{data.cell05}}</span>\n </div>\n  </div>\n  <div layout=\"rowtext\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowwind\" style=\"line-height: 150%\">\n  <span flex style=\"color: white;text-align: center\"><span class=\"material-icons\">{{data.cell21}}</span></span>\n  <span flex style=\"color: white;text-align: center\"><span class=\"material-icons\">{{data.cell22}}</span></span>\n  <span flex style=\"color: white;text-align: center\"><span class=\"material-icons\">{{data.cell23}}</span></span>\n  <span flex style=\"color: white;text-align: center\"><span class=\"material-icons\">{{data.cell24}}</span></span>\n  <span flex style=\"color: white;text-align: center\"><span class=\"material-icons\">{{data.cell25}}</span></span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":990,"y":360,"wires":[[]]},{"id":"7adde26c.514aec","type":"function","z":"5f633a28.607134","name":"Format forecast data","func":"var fcdata = {};\nvar units=flow.get('units');\nvar degreesToCardinal = function(deg){\nif (deg>22.50 && deg<=67.50){\nreturn \"north_east\";\n  }else if (deg>67.51 && deg<112.50){\nreturn \"east\";\n  }else if (deg>112.51 && deg<157.50){\nreturn \"south_east\";\n  }else if (deg>157.51 && deg<202.50){\nreturn \"south\";\n  }else if (deg>202.51 && deg<247.50){\nreturn \"south_west\";\n  }else if (deg>247.51 && deg<292.50){\nreturn \"west\";\n  }else if (deg>292.51 && deg<337.50){\nreturn \"north_west\";\n  }else{\nreturn \"north\"; \n  }\n}\nif (units===undefined)\n{\n  units=\"imperial\";\n}\nfunction formatTemp(high, low){\n    if (units == \"imperial\") {\n        if (low){\n          temp = parseFloat(high).toFixed() + '|' + parseFloat(low).toFixed()\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°F'\n        }\n    }\n    else { // metric\n//        temp = parseFloat(temp).toFixed(1) + '°'\n        if (low){\n          temp = parseFloat(high).toFixed() + '°|' + parseFloat(low).toFixed()+'°'\n        }\n        else {\n          temp = parseFloat(high).toFixed() + '°'\n        }\n    }\n    return temp;\n}\nfunction dayName(unixTime){\n    var d = new Date(unixTime * 1000);\n    var weekday = new Array(7);\n        weekday[0] = \"Søn\";\n        weekday[1] = \"Man\";\n        weekday[2] = \"Tirs\";\n        weekday[3] = \"Ons\";\n        weekday[4] = \"Tors\";\n        weekday[5] = \"Fre\";\n        weekday[6] = \"Lør\";\n\n    return weekday[d.getDay()]\n}\nfunction timeConvert(UNIX_timestamp){\n  var a = new Date(UNIX_timestamp * 1000);\n  var hour = a.getHours();\n  //var suffix = \" am\";\n  //if (hour >= 12) {\n //   hour = hour - 12;\n  //  suffix = \" pm\";\n // }\n  //if (hour === 0) {\n  //  hour = 12;\n // }\n  var min = a.getMinutes();\n  if (min < 10) {min = \"0\" + min;}\n  return hour + ':' + min; //+ suffix;\n  return hour;\n}\n// prepare forecast data for CSS based ui widget\n\nfcdata.payload = {\n  rowtext: {\n  \tdata01: {\n      cell01: timeConvert(msg.payload.hourly[1].dt),\n      cell02: timeConvert(msg.payload.hourly[3].dt),\n      cell03: timeConvert(msg.payload.hourly[5].dt),\n      cell04: timeConvert(msg.payload.hourly[7].dt),\n      cell05: timeConvert(msg.payload.hourly[9].dt),\n      cell06: timeConvert(msg.payload.hourly[11].dt),\n      cell07: dayName(msg.payload.daily[1].dt),\n      cell08: dayName(msg.payload.daily[2].dt),\n      cell09: dayName(msg.payload.daily[3].dt),\n      cell10: dayName(msg.payload.daily[4].dt),\n      cell11: dayName(msg.payload.daily[5].dt),\n  \t},\n  \tdata02: {\n       cell01: formatTemp(msg.payload.hourly[1].temp),\n       cell02: formatTemp(msg.payload.hourly[3].temp),\n       cell03: formatTemp(msg.payload.hourly[5].temp),\n       cell04: formatTemp(msg.payload.hourly[7].temp),\n       cell05: formatTemp(msg.payload.hourly[9].temp),\n       cell06: formatTemp(msg.payload.hourly[11].temp),\n       cell07: formatTemp(msg.payload.daily[1].temp.max, msg.payload.daily[0].temp.min),\n       cell08: formatTemp(msg.payload.daily[2].temp.max, msg.payload.daily[1].temp.min),\n       cell09: formatTemp(msg.payload.daily[3].temp.max, msg.payload.daily[2].temp.min),\n       cell10: formatTemp(msg.payload.daily[4].temp.max, msg.payload.daily[3].temp.min),\n       cell11: formatTemp(msg.payload.daily[5].temp.max, msg.payload.daily[4].temp.min),\n  \t},\n  \tdata03: {\n       cell01: msg.payload.hourly[1].humidity + '%',\n       cell02: msg.payload.hourly[3].humidity + '%',\n       cell03: msg.payload.hourly[5].humidity + '%',\n       cell04: msg.payload.hourly[7].humidity + '%',\n       cell05: msg.payload.hourly[9].humidity + '%',\n       cell06: msg.payload.hourly[11].humidity + '%',\n  \t},\n  \tdata04: {\n       cell01: msg.payload.hourly[1].wind_speed.toFixed(0) + ' m/s',\n       cell02: msg.payload.hourly[3].wind_speed.toFixed(0) + ' m/s',\n       cell03: msg.payload.hourly[5].wind_speed.toFixed(0) + ' m/s',\n       cell04: msg.payload.hourly[7].wind_speed.toFixed(0) + ' m/s',\n       cell05: msg.payload.hourly[9].wind_speed.toFixed(0) + ' m/s',\n       cell06: msg.payload.hourly[11].wind_speed.toFixed(0) + ' m/s',\n  \t}\n  },\n  rowicons: {\n  \tdata01: {\n  \t\tcell01: msg.payload.hourly[1].weather[0].icon,\n  \t\tcell02: msg.payload.hourly[3].weather[0].icon,\n  \t\tcell03: msg.payload.hourly[5].weather[0].icon,\n  \t\tcell04: msg.payload.hourly[7].weather[0].icon,\n  \t\tcell05: msg.payload.hourly[9].weather[0].icon,\n  \t\tcell06: msg.payload.hourly[11].weather[0].icon,\n  \t\tcell07: msg.payload.daily[1].weather[0].icon,\n  \t\tcell08: msg.payload.daily[2].weather[0].icon,\n  \t\tcell09: msg.payload.daily[3].weather[0].icon,\n  \t\tcell10: msg.payload.daily[4].weather[0].icon,\n  \t\tcell11: msg.payload.daily[5].weather[0].icon,\n  \t}\n  \t\n  },\n  rowwind: {\n  \tdata05: {\n       cell21: msg.payload.hourly[1].wind_cardinal = degreesToCardinal(msg.payload.hourly[1].wind_deg),\n       cell22: msg.payload.hourly[3].wind_cardinal = degreesToCardinal(msg.payload.hourly[3].wind_deg),\n       cell23: msg.payload.hourly[5].wind_cardinal = degreesToCardinal(msg.payload.hourly[5].wind_deg),\n       cell24: msg.payload.hourly[7].wind_cardinal = degreesToCardinal(msg.payload.hourly[7].wind_deg),\n       cell25: msg.payload.hourly[9].wind_cardinal = degreesToCardinal(msg.payload.hourly[9].wind_deg),\n       cell26: msg.payload.hourly[11].wind_cardinal = degreesToCardinal(msg.payload.hourly[11].wind_deg),\n  \t}\n  }\n}\n\nreturn fcdata;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":360,"wires":[["9dbf3c95.67c74","fd418185.620748"]]},{"id":"d8c5527f.7739","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":2,"width":3,"height":1,"name":"Temperature","label":"","format":"<font size=6>{{msg.payload.current.temp}}","layout":"col-center","x":990,"y":100,"wires":[]},{"id":"681b2b94.9f7a44","type":"http request","z":"5f633a28.607134","name":"Get OWM data","method":"GET","ret":"obj","paytoqs":true,"url":"https://api.openweathermap.org/data/2.5/onecall","tls":"","persist":false,"proxy":"","authType":"","x":480,"y":160,"wires":[["67075190.fc6f3","7adde26c.514aec","30342c8c.30450c"]]},{"id":"c72d96f0.204148","type":"inject","z":"5f633a28.607134","name":"Trigger","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"600","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":120,"y":100,"wires":[["79276db2.a2ce14"]]},{"id":"67075190.fc6f3","type":"function","z":"5f633a28.607134","name":"Format current data","func":"var icon = {};\n\nvar units=flow.get('units');\nif (units===undefined)\n{\n  units=\"imperial\";\n}\n\nfunction timeConvert(UNIX_timestamp){\n  var a = new Date(UNIX_timestamp * 1000);\n  var hour = a.getHours();\n  //var suffix = \" am\";\n  //if (hour >= 12) {\n //   hour = hour - 12;\n  //  suffix = \" pm\";\n // }\n  //if (hour === 0) {\n  //  hour = 12;\n // }\n  var min = a.getMinutes();\n  if (min < 10) {min = \"0\" + min;}\n  return hour + ':' + min; //+ suffix;\n  \n}\n\nvar degreesToCardinal = function(deg){\nif (deg>11.25 && deg<=33.75){\nreturn \"NNE\";\n  }else if (deg>33.75 && deg<56.25){\nreturn \"NE\";\n  }else if (deg>56.25 && deg<78.75){\nreturn \"ENE\";\n  }else if (deg>78.75 && deg<101.25){\nreturn \"E\";\n  }else if (deg>101.25 && deg<123.75){\nreturn \"ESE\";\n  }else if (deg>123.75 && deg<146.25){\nreturn \"SE\";\n  }else if (deg>146.25 && deg<168.75){\nreturn \"SSE\";\n  }else if (deg>168.75 && deg<191.25){\nreturn \"S\";\n  }else if (deg>191.25 && deg<213.75){\nreturn \"SSW\";\n  }else if (deg>213.75 && deg<236.25){\nreturn \"SW\";\n  }else if (deg>236.25 && deg<258.75){\nreturn \"WSW\";\n  }else if (deg>258.75 && deg<281.25){\nreturn \"W\";\n  }else if (deg>281.25 && deg<303.75){\nreturn \"WNW\";\n  }else if (deg>303.75 && deg<326.25){\nreturn \"NW\";\n  }else if (deg>326.25 && deg<348.75){\nreturn \"NNW\";\n  }else{\nreturn \"N\"; \n  }\n}\n\nif (units == \"imperial\")\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed() + ' °F';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed() + ' mph';\n}\nelse // metric units\n{\n  msg.payload.current.temp = msg.payload.current.temp.toFixed(1) + ' °C';\n  msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed(1) + ' m/s';\n}\n\nmsg.payload.current.wind_cardinal = degreesToCardinal(msg.payload.current.wind_deg);\nmsg.payload.current.sunrise = timeConvert(msg.payload.current.sunrise);\nmsg.payload.current.sunset = timeConvert(msg.payload.current.sunset);\nmsg.payload.current.humidity = msg.payload.current.humidity + ' %';\n\n\nvar iconString = 'wi-owm-' + msg.payload.current.weather[0].icon + ' wi-4x';\nicon = {\n    ui_control: {\n        icon: iconString\n    }\n}; \n\nreturn [msg, icon];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":720,"y":160,"wires":[["d8c5527f.7739","ec4eb2d0.974c","9c052db7.3c434","40f44662.3ecde8","5b97953.01fdd6c","8d7cf800.2eb93"],["180a101a.9cd43"]]},{"id":"79276db2.a2ce14","type":"change","z":"5f633a28.607134","name":"Set location, appid, units","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload.lat","pt":"msg","to":"55.5","tot":"str"},{"t":"set","p":"payload.lon","pt":"msg","to":"12.1619","tot":"str"},{"t":"set","p":"payload.appid","pt":"msg","to":"","tot":"str"},{"t":"set","p":"payload.units","pt":"msg","to":"metric","tot":"str"},{"t":"set","p":"units","pt":"flow","to":"payload.units","tot":"msg"},{"t":"set","p":"payload.lang","pt":"msg","to":"da","tot":"str"},{"t":"set","p":"lang","pt":"flow","to":"payload.lang","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":100,"wires":[["681b2b94.9f7a44"]]},{"id":"16181411.5a365c","type":"ui_ui_control","z":"5f633a28.607134","name":"Update tab","events":"all","x":110,"y":200,"wires":[["3f3d5ab9.82b3a6"]]},{"id":"c5efdf55.db32f","type":"link out","z":"5f633a28.607134","name":"Refresh","links":["a6b24cea.e52a7"],"x":1105,"y":300,"wires":[]},{"id":"a6b24cea.e52a7","type":"link in","z":"5f633a28.607134","name":"","links":["c5efdf55.db32f"],"x":155,"y":140,"wires":[["79276db2.a2ce14"]]},{"id":"3f3d5ab9.82b3a6","type":"switch","z":"5f633a28.607134","name":"tab focus","property":"tab","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":280,"y":200,"wires":[["79276db2.a2ce14"]]},{"id":"fd418185.620748","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 5 days","order":9,"width":6,"height":3,"format":"<div style=\"height: 100%; justify-content: center; align-items: center;\">\n <div layout=\"rowicons\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowicons\" style=\"font-size:150%;padding-top: 5px;padding-bottom: 5px\">\n  \n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell07}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell08}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell09}}\"></i></span>\n  <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell10}}\"></i></span>\n   <span flex style=\"color: #097479;text-align: center\"><i class=\"wi wi-owm-{{data.cell11}}\"></i></span>\n </div>\n  <div layout=\"rowtext\" layout-align=\"space-around start\" ng-repeat=\"data in msg.payload.rowtext\" style=\"line-height: 150%\">\n  \n  <span flex style=\"color: #097479;text-align: center\">{{data.cell07}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell08}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell09}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell10}}</span>\n  <span flex style=\"color: #097479;text-align: center\">{{data.cell11}}</span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":980,"y":400,"wires":[[]]},{"id":"30342c8c.30450c","type":"debug","z":"5f633a28.607134","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":560,"wires":[]},{"id":"8d7cf800.2eb93","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":4,"width":2,"height":1,"name":"Humidity","label":"","format":"{{msg.payload.current.humidity}}","layout":"col-center","x":980,"y":260,"wires":[]},{"id":"70fb931.dfc146c","type":"ui_group","name":"MainGroup","tab":"4bb34f67.69a87","order":1,"disp":false,"width":6,"collapse":false},{"id":"4bb34f67.69a87","type":"ui_tab","name":"Weather","icon":"wi-wu-partlycloudy","order":2,"disabled":false,"hidden":false}]

the flow is a modification of this made by KanyonKris:

OpenWeatherMap Weather Dashboard with Icons - Landscape (flow) - Node-RED

[Paul-Reed]

@dceejay

Sounds like a job for @Paul-Reed

OP was using Font Awsome icons, and of course we have no direct control over FA's css files to add rotation values other than the default 90/180/270 degrees, as it is part of your dashboard build.

But there is no reason why we cant use font-awsome icons, and weather-icons-lite css like this;
<i class="fa fa-location-arrow wi-rotate-90 wi-4x"></i>
So instead of duplicating the icon in weather-icons-lite, I could just add a few additional lines of css to include 45/90/135/180/225/270/315 degrees, and then that would be also available to the full set of font-awsome icons, allowing any icon to be rotated in 45 deg increments.

Thoughts?

[hotNipi]

Even if it looks a bit hacky, if it works it doesn't hurt.

[dceejay]

Make it so ! (Or feel free to also add your wind arrow to the lite set). And/or should there also be aliases. wi-rotate-NE. Etc to make it easy to create from ordinals.

[thomasvjohansen]

If a few lines can add that feature, then I think its worth it.
properly usable in other scenarios.

[Paul-Reed]

@dceejay

Make it so !

Done.
v1.4.0 is now on npm with the 45 deg changes.

@dceejay

And/or should there also be aliases. wi-rotate-NE. Etc to make it easy to create from ordinals.

Aah, sorry, I didn't know that you had edited your post until now..
I can add that, but for example, the FA icon mentioned above is positioned by default at 45deg.

so adding wi-rotate-S would result in;

[dceejay]

errr - well yes - but if you pick fa-arrow-down then it works ok... and/or if you did add your own arrow it could be made to work without any fa interaction

[Paul-Reed]

@dceejay

but if you pick fa-arrow-down then it works ok.

Yep, I'll add them in as well, and let you know when done

[Paul-Reed]

@dceejay

but if you pick fa-arrow-down then it works ok

Just to be clear...

Should we assume that the icon's default orientation is 0 deg, and therefore applying wi-rotate-NE should rotate the icon 45 deg?
Just wondered when you mentioned fa-arrow-down ?

[dceejay]

the arrow points the way the wind is coming from... so a north wind is a downwards arrow = 0 degrees.... so yes NE wind is rotate clockwise 45 and the tip of the arrow points to SW...

[dceejay]

So thanks to Paul we will have wi-rotate-0, 45, 90 etc and wi-rotate-N, NE, .. which all work with fa-arrow-down as they assume 0 degrees is a north wind...

I also forgot we can of course just apply css styles dynamically as well - eg

[{"id":"c6e0b0d4.efd7b","type":"ui_template","z":"ab9333b5.f44f6","group":"61ae4ef4.28011","name":"","order":10,"width":"1","height":"1","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":520,"wires":[[]]},{"id":"97f4ec25.ab953","type":"template","z":"ab9333b5.f44f6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<i style=\"transform:rotate({{payload}}deg);\" class=\"fa fa-fw fa-2x fa-arrow-down\"></i>","output":"str","x":420,"y":520,"wires":[["c6e0b0d4.efd7b"]]},{"id":"3bd7a6.e387c85a","type":"ui_slider","z":"ab9333b5.f44f6","name":"","label":"slider","tooltip":"","group":"61ae4ef4.28011","order":10,"width":"5","height":"1","passthru":true,"outs":"all","topic":"","min":0,"max":"359","step":1,"x":270,"y":520,"wires":[["97f4ec25.ab953"]]},{"id":"61ae4ef4.28011","type":"ui_group","name":"Group 1","tab":"5c9690fd.741cc","order":1,"disp":true,"width":"6","collapse":false},{"id":"5c9690fd.741cc","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]