Return html / fa icon code in a function

Dashboard
42

Above expectations the report but for sure correct path to follow :upside_down_face:

43

@hotNipi
in your weathercard example, how did you get minimum temp and weather icon in the ui_artlessgauge?

44

I use openweathermap weather data. That contains many options for icon but most of them need some kind of mappings. I found that easiest way is to use wi-owm set of icons but using them via iconify icons as I use iconify in other places also so no need to load in another set of icons and that way the data doesn't need any mapping.

Many of artless-gauge options support overrides using the msg.control property.

[{"id":"21f3a56d.0978aa","type":"function","z":"6d08d5ab.a8aa3c","name":"openweathermap data","func":"var weather = {\"dt\":1607857783,\"sunrise\":1607842463,\"sunset\":1607865660,\"temp\":-3.63,\"feels_like\":-7.68,\"pressure\":1018,\"humidity\":92,\"dew_point\":-4.61,\"uvi\":0.17,\"clouds\":90,\"visibility\":10000,\"wind_speed\":2.1,\"wind_deg\":120,\"weather\":[{\"id\":600,\"main\":\"Snow\",\"description\":\"light snow\",\"icon\":\"13d\"}]}\nmsg.payload = weather\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":1040,"wires":[["65a45405.3f57ec","b202de85.fd78"]]},{"id":"45e14f89.faba9","type":"ui_artlessgauge","z":"6d08d5ab.a8aa3c","group":"346f3afd.14dd56","order":2,"width":4,"height":4,"name":"temperatuur","icon":"fa-thermometer","label":"CURRENT WEATHER","unit":"Ā°C","layout":"radial","decimals":"1","differential":true,"minmax":true,"colorTrack":"#444444","style":"","colorFromTheme":true,"property":"payload","sectors":[{"val":-30,"col":"#2994ff","t":"min","dot":0},{"val":0,"col":"#ff8000","t":"sec","dot":0},{"val":30,"col":"#ff8000","t":"max","dot":0}],"lineWidth":"5","bgcolorFromTheme":true,"diffCenter":"","x":890,"y":1040,"wires":[]},{"id":"b202de85.fd78","type":"function","z":"6d08d5ab.a8aa3c","name":"","func":"var out = {}\nout.payload = msg.payload.temp\n//different icons for night or day\n//let's see if timestamp is between sunrise and sunset\n\nvar period = 'night'\nif(msg.payload.dt > msg.payload.sunrise && msg.payload.dt < msg.payload.sunset){\n    period = 'day'\n}\n\nout.control = {\n    icon:'iconify-wi:owm-'+period+'-'+msg.payload.weather[0].id,\n    unit:msg.payload.feels_like\n}\n\nreturn out;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":700,"y":1040,"wires":[["45e14f89.faba9","954bfe69.5a20c"]]},{"id":"65a45405.3f57ec","type":"debug","z":"6d08d5ab.a8aa3c","name":"WEATHER CURRENT","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":740,"y":920,"wires":[]},{"id":"3bbc7254.4c003e","type":"inject","z":"6d08d5ab.a8aa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":1040,"wires":[["21f3a56d.0978aa"]]},{"id":"954bfe69.5a20c","type":"debug","z":"6d08d5ab.a8aa3c","name":"DATA FOR GAUGE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":890,"y":980,"wires":[]},{"id":"346f3afd.14dd56","type":"ui_group","name":"Default","tab":"445e350b.bd700c","order":1,"disp":true,"width":"6","collapse":false},{"id":"445e350b.bd700c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Edit: you'll need to add a ui_template with this, added to site head, to get iconify icons working.

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
45

@hotNipi thx, got it working.
Though I have some small development suggestions to the artless gauge widget.

  1. Could wish for choosing fontsize of center number in gauge
  2. possible to add unit/text to the big center number.
  3. the unit field below is great but as you can see my weather icon almost covers it up.

Else its absolute a great widget.

the cardinals next to the arrows will be removed but waiting for Poul to update the weather-icons-lite to npm :wink:

Udklip4

46

If you define some icon as default at configuration page, the center text will be placed higher. Without icon it just looks better if placed more down .

The value with unit (and then one more additional value field) is in plans.

47

Hint taken @thomasvjohansen !
NPM has just been updated to v1.6.0 which includes the following changes;

  1. Addition of wi-arrow & wi-direction icons.

  1. Addition of 'half-winds' rotation angles - 0, 23, 45, 68, 90, 133, 135, 158, 180, 203, 225, 248, 270, 293, 315, 338 which can be accessed by wi-rotate-293, wi-towards-WNW or wi-from-ESE

These features will be available to use once node-red-dashboard has been updated to the next version by the node-RED team.

3 Likes
48

Awesome thx :+1:

49

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