# How to put msg.payload value in html tag?

**URL:** https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222
**Category:** General
**Created:** [21 November 2019 08:24 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222 "2019-11-21T08:24:26Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![ECat](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@ECat](https://discourse.nodered.org/u/ECat)
#### Post date: [21 November 2019 08:24 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/1 "2019-11-21T08:24:26Z")

</div>

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

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

```

```auto
[{"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}]

```

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [21 November 2019 10:46 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/2 "2019-11-21T10:46:20Z")

</div>

Please read [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) 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>`?

---

<div class="post-metadata">

### Author: ![ECat](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@ECat](https://discourse.nodered.org/u/ECat)
#### Post date: [21 November 2019 23:18 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/3 "2019-11-21T23:18:00Z")

</div>

Thanks for letting me know how

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [22 November 2019 00:52 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/4 "2019-11-22T00:52:21Z")

</div>

Try

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

```

---

<div class="post-metadata">

### Author: ![ECat](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@ECat](https://discourse.nodered.org/u/ECat)
#### Post date: [22 November 2019 01:16 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/5 "2019-11-22T01:16:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [22 November 2019 01:24 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/6 "2019-11-22T01:24:49Z")

</div>

Why not use the ui\_gauge and select the **donut** option?

---

<div class="post-metadata">

### Author: ![ECat](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@ECat](https://discourse.nodered.org/u/ECat)
#### Post date: [22 November 2019 01:31 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/7 "2019-11-22T01:31:46Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [22 November 2019 01:44 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/8 "2019-11-22T01:44:32Z")

</div>

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](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

---

<div class="post-metadata">

### Author: ![ECat](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@ECat](https://discourse.nodered.org/u/ECat)
#### Post date: [22 November 2019 02:01 UTC](https://discourse.nodered.org/t/how-to-put-msg-payload-value-in-html-tag/18222/9 "2019-11-22T02:01:49Z")

</div>

Continued help suddenly. I will study more.