Compass gauge : issue with [°] sign?

Hi all,

I want to display an angle in degree, in the Compass gauge . I read the info :
image
so , in the Value format i apply : {{azimuth}}°

BUT : the gauge dos not update the new value :
with%20degre

IF i delete : the [°] : {{azimuth}} : the update is working :
without%20degr%C3%A9

i try with the {{azimuth | number:1}}% like in the example but no working too .

For information , this is the paylod enter in the Compass gauge:

var azimuth = Math.round(msg.payload.azimuth*10)/10;
 node.send([{
    startTime:msg.startTime,
    endTime:msg.endTime,
    endLocaleTime:endLocaleTime,
    seconds:seconds,
    azimuth:azimuth,
    altitude:altitude
     },null,null]);

Why does the sign bug the update of the widget?

Try: {{azimuth}} &deg

[can you share a small flow that shows how you have it configured ?
A simple example with the value in payload like this is ok

[{"id":"96e5eea7.fd60c","type":"ui_slider","z":"439238bf.9f6608","name":"","label":"slider","tooltip":"","group":"5c9feba7.6ad924","order":0,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":"360","step":1,"x":690,"y":1160,"wires":[["134eb0d3.8efbbf"]]},{"id":"134eb0d3.8efbbf","type":"change","z":"439238bf.9f6608","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.azimuth","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":850,"y":1160,"wires":[["ecfa467f.cbf0e8"]]},{"id":"ecfa467f.cbf0e8","type":"ui_gauge","z":"439238bf.9f6608","name":"","group":"5c9feba7.6ad924","order":1,"width":0,"height":0,"gtype":"compass","title":"gauge","label":"degrees","format":"{{payload.azimuth}}°","min":0,"max":"359","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1030,"y":1160,"wires":[]},{"id":"5c9feba7.6ad924","type":"ui_group","name":"Group 2","tab":"e6777ecd.b6d0f","order":2,"disp":true,"width":6},{"id":"e6777ecd.b6d0f","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

this is the flow working (without [°] in the compass gauge) :

[{"id":"ecaab073.c7e0b","type":"inject","z":"7b1045d6.2de07c","name":"make request","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"","x":154.2857208251953,"y":527.1428833007812,"wires":[["3739bab7.8c3b66"]]},{"id":"3739bab7.8c3b66","type":"sunpos","z":"7b1045d6.2de07c","name":"","lon":"6.4751","lat":"43.5427","start":"sunrise","startoffset":0,"end":"sunset","endoffset":0,"x":314.52381896972656,"y":527.0598602294922,"wires":[["40006f37.e60ff"]]},{"id":"40006f37.e60ff","type":"function","z":"7b1045d6.2de07c","name":"endTime +alt/azi+icone","func":"var seconds = msg.payload.endTime;\nvar endLocaleTime;\nvar azimuth = Math.round(msg.payload.azimuth*10)/10;//msg.payload.azimuth;//azimuth = azimuth.toFixed(1);\nvar altitude = Math.round(msg.payload.altitude*10)/10;//msg.payload.altitude;//altitude = altitude.toFixed(1);\nvar sunInSky = msg.payload.sunInSky;\n\n//transforme epoch en 21:01:449\nvar d = new Date(msg.payload.endTime);\nvar n = d.toLocaleTimeString();\nendLocaleTime = n;\n\n//compare si nuit ou jour ?\nvar secondsNow = msg.time;\nif (secondsNow > seconds || secondsNow < msg.startTime){\n    flow.set('wvcPow5min',0 );  //evite 0.8w toute la nuit\n    msg.razCountEnergy = 0;\n    msg.state = \"wvcPow5min=0 !\";\n    msg.icone = 'https://cdn.icon-icons.com/icons2/1370/PNG/128/if-weather-4-2682847_90799.png';//https://cdn.icon-icons.com/icons2/799/PNG/128/night-01_icon-icons.com_65776.png';//https://cdn.icon-icons.com/icons2/1465/PNG/512/640crescentmoon_100402.png';\n    msg.title = 'Stand by !' ;\n    \n}else{\n    msg.razCountEnergy = 0;\n    msg.state = \"Production !\";\n    msg.icone = 'https://cdn.icon-icons.com/icons2/1370/PNG/128/if-weather-3-2682848_90785.png';//https://cdn.icon-icons.com/icons2/799/PNG/128/sunny512x512-01_icon-icons.com_65775.png';//https://cdn.icon-icons.com/icons2/1465/PNG/512/643sunwithface_101008.png';\n    msg.title = 'Working good !' ;\n   \n}if (secondsNow == seconds){\n    msg.razCountEnergy = 1;\n    msg.state = \"Production en pause !\";\n    }\n\n//********** affiche le status du Node **********\nnode.status({text:n}); //value});\n\n//prepare les sorties\n node.send([{\n    startTime:msg.startTime,\n    endTime:msg.endTime,\n    endLocaleTime:endLocaleTime,\n    seconds:seconds,\n    azimuth:azimuth,\n    altitude:altitude\n    \n },null,null]);\n \n node.send([null,{\n     state:msg.state,\n     icone:msg.icone,\n     title:msg.title,\n     razCountEnergy:msg.razCountEnergy,\n     sunInSky:sunInSky\n     \n },null]);\n //POUR TEST\n  node.send([null,null,{\n    payload:altitude\n     \n }]);\n","outputs":3,"noerr":0,"x":542.8928680419922,"y":526.7383728027344,"wires":[["5e4c1eaa.9496c","7be13895.ee58f8","7154520d.6a23ac","b24062a1.29372"],["34e8b65.3fc404a","e163232e.853c7"],[]]},{"id":"7154520d.6a23ac","type":"ui_gauge","z":"7b1045d6.2de07c","name":"gaugeAzimuth","group":"8aeba035.813e","order":12,"width":"4","height":"3","gtype":"compass","title":"","label":"","format":"{{azimuth}}","min":"0","max":"359","colors":["#ffff80","#ff8000","#ca3838"],"seg1":"","seg2":"","x":803.9526519775391,"y":507.3454704284668,"wires":[]},{"id":"7be13895.ee58f8","type":"ui_gauge","z":"7b1045d6.2de07c","name":"gaugeAltitude","group":"8aeba035.813e","order":11,"width":"4","height":"3","gtype":"compass","title":"","label":"","format":"{{altitude}}","min":0,"max":"359","colors":["#ffff80","#ff8000","#ca3838"],"seg1":"","seg2":"","x":806.8094673156738,"y":478.7743558883667,"wires":[]},{"id":"5e4c1eaa.9496c","type":"ui_text","z":"7b1045d6.2de07c","group":"8aeba035.813e","order":5,"width":"3","height":"1","name":"alti/azi","label":"<font color=grey><b>altitude: <font color=white>{{altitude}}°</b>","format":"<font color=grey>azimuth:<font color=white> {{azimuth}}°","layout":"row-left","x":765.8370094299316,"y":445.9072914123535,"wires":[]},{"id":"34e8b65.3fc404a","type":"ui_template","z":"7b1045d6.2de07c","group":"8aeba035.813e","name":"status","order":8,"width":"4","height":"1","format":"<p>\n<font color=grey>{{msg.state}}</font>\n<img width=\"30\" height=\"30\" src=  {{msg.icone}} alt='Not found' title={{msg.title}} />\n</p>\n\n<!--\n{{msg.event}}\n<p>\n    <font color=grey>Status: </font>\n<img width=\"30\" height=\"30\" src=  {{msg.payload}} alt='Not found' title={{msg.title}} />\n{{msg.event}}\n</p>\n-->\n\n\n\n<!--\n<strong> </strong>\n<div height=\"50\" style=\"height: 50px;\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\nhttps://pngimage.net/wp-content/uploads/2018/06/power-on-png-1.png\nhttp://educainternet.es/documents/10718/download\nhttps://pngimage.net/wp-content/uploads/2018/06/power-off-png-5.png\nhttps://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png\nhttps://pngimage.net/wp-content/uploads/2018/06/power-off-png-2.png\nhttps://banner2.kisspng.com/20180404/euq/kisspng-computer-icons-electrical-switches-button-off-5ac452e9048ee7.9894894815228157210187.jpg\n\n<div ng-bind-html=\"msg.payload\"></div>\n\n<div height=\"50\" style=\"height: 50px;\" ng-click=\"send({payload:'Clicked'});\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\n<div height=\"50\" style=\"height: 50px;\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\n<div height=\"50\" style=\"height: 50px;\" ng-bind-html=\"msg.payload\" width=\"35\">\n</div>\n\n<div height=\"50\" style=\"height: 50px;\">\n<div ng-bind-html=\"msg.payload\" width=\"35\"><br/>\n</div>\n\n<div style=\"display: inline-block; width: 150px; height: 150px;\" ng-click=\"send({payload:'Clicked'});\">\n<img src=\"/Block_Gray.png\" width=\"140\"><br/>\n</div>\n\n\n\n-->\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":772.8571662902832,"y":541.4286489486694,"wires":[[]]},{"id":"e163232e.853c7","type":"ui_text","z":"7b1045d6.2de07c","group":"8aeba035.813e","order":7,"width":"4","height":"1","name":"sunInSky","label":"<font color=grey>sunInSky: </font>{{sunInSky}}","format":"","layout":"row-left","x":923.7144203186035,"y":542.0007133483887,"wires":[]},{"id":"b24062a1.29372","type":"ui_text","z":"7b1045d6.2de07c","group":"8aeba035.813e","order":6,"width":"4","height":"1","name":"endTime","label":"<font color=grey>{{seconds}}s","format":"{{endLocaleTime}}","layout":"row-left","x":958.6549530029297,"y":490.3574161529541,"wires":[]},{"id":"8aeba035.813e","type":"ui_group","z":"","name":"Power","tab":"255f2630.e1c57a","order":1,"disp":true,"width":"12","collapse":true},{"id":"255f2630.e1c57a","type":"ui_tab","z":"","name":"wvc","icon":"flash_on","order":2,"disabled":false,"hidden":false}]

[EDIT] : i try your flow and working good !

@edje11

not working :
image

Copy/paste the string from Dave's flow.

if it was to work it would be &deg; with a ;

not working too :

image

[{"id":"557aeff4.a36cb","type":"ui_gauge","z":"fe2c7bc6.bd49c8","name":"gaugeAzimuth","group":"8aeba035.813e","order":16,"width":"4","height":"3","gtype":"compass","title":"","label":"","format":"{{azimuth}} &deg;","min":"0","max":"359","colors":["#ffff80","#ff8000","#ca3838"],"seg1":"","seg2":"","x":745.7145233154297,"y":2102.8571071624756,"wires":[]},{"id":"796a91ee.2919c","type":"function","z":"fe2c7bc6.bd49c8","name":"endTime +alt/azi+icone","func":"var seconds = msg.payload.endTime;\nvar endLocaleTime;\nvar azimuth = Math.round(msg.payload.azimuth*10)/10;//msg.payload.azimuth;//azimuth = azimuth.toFixed(1);\nvar altitude = Math.round(msg.payload.altitude*10)/10;//msg.payload.altitude;//altitude = altitude.toFixed(1);\nvar sunInSky = msg.payload.sunInSky;\n\n//transforme epoch en 21:01:449\nvar d = new Date(msg.payload.endTime);\nvar n = d.toLocaleTimeString();\nendLocaleTime = n;\n\n//compare si nuit ou jour ?\nvar secondsNow = msg.time;\nif (secondsNow > seconds || secondsNow < msg.startTime){\n    flow.set('wvcPow5min',0 );  //evite 0.8w toute la nuit\n    msg.razCountEnergy = 0;\n    msg.state = \"wvcPow5min=0 !\";\n    msg.icone = 'https://cdn.icon-icons.com/icons2/1370/PNG/128/if-weather-4-2682847_90799.png';//https://cdn.icon-icons.com/icons2/799/PNG/128/night-01_icon-icons.com_65776.png';//https://cdn.icon-icons.com/icons2/1465/PNG/512/640crescentmoon_100402.png';\n    msg.title = 'Stand by !' ;\n    \n}else{\n    msg.razCountEnergy = 0;\n    msg.state = \"Production !\";\n    msg.icone = 'https://cdn.icon-icons.com/icons2/1370/PNG/128/if-weather-3-2682848_90785.png';//https://cdn.icon-icons.com/icons2/799/PNG/128/sunny512x512-01_icon-icons.com_65775.png';//https://cdn.icon-icons.com/icons2/1465/PNG/512/643sunwithface_101008.png';\n    msg.title = 'Working good !' ;\n   \n}if (secondsNow == seconds){\n    msg.razCountEnergy = 1;\n    msg.state = \"Production en pause !\";\n    }\n\n//********** affiche le status du Node **********\nnode.status({text:n}); //value});\n\n//prepare les sorties\n node.send([{\n    startTime:msg.startTime,\n    endTime:msg.endTime,\n    endLocaleTime:endLocaleTime,\n    seconds:seconds,\n    azimuth:azimuth,\n    altitude:altitude\n    \n },null,null]);\n \n node.send([null,{\n     state:msg.state,\n     icone:msg.icone,\n     title:msg.title,\n     razCountEnergy:msg.razCountEnergy,\n     sunInSky:sunInSky\n     \n },null]);\n \n  node.send([null,null,{\n    payload:altitude\n     \n }]);\n /*\n msg.payload = [];//prepare les sorties\n node.send([{\n    startTime:msg.startTime,\n    endTime:msg.endTime,\n    endLocaleTime:endLocaleTime,\n    seconds:seconds,\n    azimuth:azimuth,\n    altitude:altitude\n    \n },null]);\n \n node.send([null,{\n     state:msg.state,\n     icone:msg.icone,\n     title:msg.title,\n     razCountEnergy:msg.razCountEnergy,\n     sunInSky:sunInSky\n     \n }]);\n */\n \n \n \n /*\n msg.payload = [];//prepare les sorties\n node.send([{\n    startTime:msg.startTime,\n    endTime:msg.endTime,\n    endLocaleTime:endLocaleTime,\n    seconds:seconds,\n    azimuth:azimuth,\n    altitude:altitude\n    \n },null]);\n \n node.send([null,{\n     payload:msg.endTimeOn\n     \n }]);\n */","outputs":3,"noerr":0,"x":461.7975616455078,"y":2119.392890930176,"wires":[["3df592e4.ea359e","40a39504.ff86ec","f69ba939.ed66c8","557aeff4.a36cb","32bbb7dd.b9f828"],["9a43d3a.7772d3","d5355045.f137b"],["109fee9.3012011"]]},{"id":"3df695cb.25097a","type":"sunpos","z":"fe2c7bc6.bd49c8","name":"","lon":"6.4751","lat":"43.5427","start":"sunrise","startoffset":0,"end":"sunset","endoffset":0,"x":256.2856903076172,"y":2122.571496963501,"wires":[["796a91ee.2919c","2147b18.79c844e"]]},{"id":"451fc132.9331d","type":"inject","z":"fe2c7bc6.bd49c8","name":"make request","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"","x":96.04759216308594,"y":2122.65452003479,"wires":[["3df695cb.25097a"]]},{"id":"8aeba035.813e","type":"ui_group","z":"","name":"Power","tab":"255f2630.e1c57a","order":1,"disp":true,"width":"12","collapse":true},{"id":"255f2630.e1c57a","type":"ui_tab","z":"","name":"wvc","icon":"flash_on","order":2,"disabled":false,"hidden":false}]

the "slider " working good :
image

1 Like

@dceejay
i try something with your "slider" flow : i modified the "change node"

[{"id":"c8487b85.55abd8","type":"ui_gauge","z":"fe2c7bc6.bd49c8","name":"gaugeAzimuth","group":"8aeba035.813e","order":18,"width":"4","height":"3","gtype":"compass","title":"","label":"azi","format":"{{azimuth}}","min":0,"max":"359","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1212.8571739196777,"y":2309.9999599456787,"wires":[]},{"id":"6a9c6df5.32fcd4","type":"ui_gauge","z":"fe2c7bc6.bd49c8","name":"gaugeAltitude","group":"8aeba035.813e","order":18,"width":"4","height":"3","gtype":"compass","title":"","label":"alti","format":"{{altitude}}°","min":0,"max":"359","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1205.714282989502,"y":2264.2859897613525,"wires":[]},{"id":"f21fbb92.4462d8","type":"change","z":"fe2c7bc6.bd49c8","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"altitude","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1012.8571548461914,"y":2262.8571376800537,"wires":[["6a9c6df5.32fcd4"]]},{"id":"a7a54082.1783e","type":"change","z":"fe2c7bc6.bd49c8","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"azimuth","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1012.8571624755859,"y":2308.571563720703,"wires":[["c8487b85.55abd8"]]},{"id":"f8d93f62.9f765","type":"ui_slider","z":"fe2c7bc6.bd49c8","name":"","label":"slider","tooltip":"","group":"8aeba035.813e","order":19,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":"360","step":"0.1","x":857.1428833007812,"y":2297.1427478790283,"wires":[["f21fbb92.4462d8","a7a54082.1783e"]]},{"id":"8aeba035.813e","type":"ui_group","z":"","name":"Power","tab":"255f2630.e1c57a","order":1,"disp":true,"width":"12","collapse":true},{"id":"255f2630.e1c57a","type":"ui_tab","z":"","name":"wvc","icon":"flash_on","order":2,"disabled":false,"hidden":false}]

The value without [°] updated while, the value with [°] not updated.
What do you thing about ?