How to put msg.payload value in html tag?

General
1

Hi!
I'm wondering how to put the value of msg.payload in the HTML TAG in node-red.

What I want to do is put that value in a custom gauge.

In the image below
I want to put msg.payload instead of 80 for the data-percent = "80" part.
Please help

<div class="wrap">
		<div class="progress" data-percent="80">
		  <span>{{msg.payload}}</span>
		</div>
	</div>

[{"id":"a09b6ef1.3fe2f","type":"ui_template","z":"6358b5a9.73708c","group":"b1c8e7de.29dc28","name":"","order":12,"width":0,"height":0,"format":"<style>\n* {margin:0; padding:0;}\nli {list-style:none;}\nbody{background:url(\"./images/bg.jpg\") 50% 50% no-repeat; height:1100px;}\n\n.wrap {\n\twidth:200px; \n\tmargin:0 auto;\n\tpadding-top:50px;\n}\n.progress {\n\tposition:relative;\n\twidth:200px;\n\theight:200px;\n\tborder-radius:50%;\n\tbackground:#dedddd;\n\tbox-shadow:2px 2px 2px 2px #a3a3a3 inset;\n\t-webkit-box-shadow:2px 2px 2px 2px #a3a3a3 inset;\n\t-moz-box-shadow:2px 2px 2px 2px #a3a3a3 inset;\n\t-ms-box-shadow:2px 2px 2px 2px #a3a3a3 inset;\n}\n.progress div {\n\tposition:absolute;\n\tleft:100px; \n\ttop:0px;\n\tdisplay:none; \n\twidth:2px;\n\theight:100px;\n\tbackground: red;\n\ttransform-origin: 0px 100px;\n\t-webkit-transform-origin: 0px 100px;\n\t-moz-transform-origin: 0px 100px;\n\t-ms-transform-origin: 0px 100px;\n}\n\n.progress_value {\n\ttransform:lotate(0deg);\n\t-webkit-transform:lotate(0deg); \n\t-moz-transform:lotate(0deg); \n\t-ms-transform:lotate(0deg);\n}\n\nspan {\n\tposition:absolute;\n\tz-index:10;\n\tleft:25px;\n\ttop:25px;\n\twidth:150px;\n\theight:150px;\n\tline-height:150px; \n\ttext-align:center;\n\tbackground:#fcfcfc;\n\tborder-radius:50%;\n\tbox-shadow:2px 2px 2px 2px #a3a3a3;\n\t-webkit-box-shadow:2px 2px 2px 2px #a3a3a3;\n\t-moz-box-shadow:2px 2px 2px 2px #a3a3a3;\n\t-ms-box-shadow:2px 2px 2px 2px #a3a3a3;\n\tfont-size:42px; \n\tfont-weight:bold;\n\tcolor:#666; \n\ttext-shadow:2px 2px 2px #000;\n\t-webkit-text-shadow:2px 2px 2px #000;\n\t-moz-text-shadow:2px 2px 2px #000;\n\t-ms-text-shadow:2px 2px 2px #000;\n}\n</style>\n\n<script>\n(function(){\n\tvar doms = '';\n\tvar $m = $('.progress');\n\tvar $data = $m.find('span');\n\tvar data = $m.data('percent');\n\tvar com = Math.round(data / 100 * 360);\n\tvar dur = 2000;\n\n\tvar getVendorPrefix = function() {\n\t\tvar body = document.body || document.documentElement,\n\t\t\tstyle = body.style,\n\t\t\ttransition = \"Transition\",\n\t\t\tvendor = [\"Moz\", \"Webkit\", \"ms\"],\n\t\t\tlastGage,\n\t\t\ti = 0;\n\t\twhile (i < vendor.length) {\n\t\t\tif (typeof style[vendor[i] + transition] === \"string\") {\n\t\t\t\treturn vendor[i];\n\t\t\t}\n\t\t\ti++;\n\t\t}\n\t\treturn false;\n\t};\n\tvar prefix = getVendorPrefix();\n\tvar transform = prefix + 'Transform';\n\n\tfor(var i=0; i <= com; i++){\n\t doms = '<div class=\"gage-bar\"></div>';\n\t $m.append(doms);\n\t $('.gage-bar:last').css(transform, 'rotate(' + i + 'deg)');\n\t}\n\n\t//$m.append(doms);\n\n\t$m.find('div').each(function(index, item){\n\t  $(item).stop().delay(index * 5).fadeIn(50);\n\t});\n\n\tfor(var j=0; j <= data; j++){\n\t\t(function(index){\n\t\t   var time = (360/100*index)*5;\n\t\t\t  setTimeout(function(){\n\t\t\t\t$data.text( index + '%');\n\t\t\t  }, time);\n\t\t})(j);\n\t}\n})();\n</script>\n\n<div class=\"wrap\">\n\t\t<div class=\"progress\" data-percent=\"80\">\n\t\t  <span>{{msg.payload}}</span>\n\t\t</div>\n\t</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":680,"y":240,"wires":[[]]},{"id":"b1c8e7de.29dc28","type":"ui_group","z":"","name":"test","tab":"4a776ba7.f41614","disp":true,"width":"6","collapse":false},{"id":"4a776ba7.f41614","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2

Please read How to share code or flow json then edit your first post and readd your flow so it can be viewed.

did you try using the why you use in the <span>?

3

Thanks for letting me know how

4

Try

<div class="wrap"> 
   <div class="progress" data-percent="{{msg.payload}}"> 
      <span>{{msg.payload}}</span> 
   </div> 
</div>
5

Thanks
The problem I wanted was solved but the gauge doesn't work.

6

Why not use the ui_gauge and select the donut option?

7

I know that's a simple way but I haven't used ui_gague too small at the same size. Compared to a custom gauge, the donut's ring is too thick. Do you know how to change the options?

I want a gauge that is 3x3 full and the donut's ring is not thick and shows a large number in the middle.

8

You can use CSS to change some of that and take a look at the other things you can change https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md

9

Continued help suddenly. I will study more.