Please help me to slove dashboard not show details as UI Template Thanks..... [{"id":"bd597e9e.e430e","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"e1d79532.e184a8","type":"inject","z":"bd597e9e.e430e","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"155","payloadType":"num","x":310,"y":200,"wires":[["20468be.1356674"]]},{"id":"20468be.1356674","type":"template","z":"bd597e9e.e430e","name":"cv","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":" \n \n \n Arduino Two Temperatures \n \n \n \n \n var data_val = 5071;\n var data_val2 = 112;\n\t\tvar data_int = 20;\n\t\tvar data_tens = 13.6;\n\t\tvar data_pres = 7.2;\n\t\tvar data_fuel =4;\n\t\tvar data_t_mot = 96;\n\t\t\n\t\t\n\t\t\n \nvar Gauge=function(b){function l(a,b){for(var c in b)\"object\"==typeof b[c]&&\"[object Array]\"!==Object.prototype.toString.call(b[c])&&\"renderTo\"!=c?(\"object\"!=typeof a[c]&&(a[c]={}),l(a[c],b[c])):a[c]=b[c]}function q(){z.width=b.width;z.height=b.height;A=z.cloneNode(!0);B=A.getContext(\"2d\");C=z.width;D=z.height;t=C/2;u=D/2;f=t<u?t:u;A.i8d=!1;B.translate(t,u);B.save();a.translate(t,u);a.save()}function v(a){var b=new Date;G=setInterval(function(){var c=(new Date-b)/a.duration;1<c&&(c=1);var f=(\"function\"==\ntypeof a.delta?a.delta:M[a.delta])(c);a.step(f);1==c&&clearInterval(G)},a.delay||10)}function k(){G&&clearInterval(G);var a=I-n,h=n,c=b.animation;v({delay:c.delay,duration:c.duration,delta:c.fn,step:function(b){n=parseFloat(h)+a*b;E.draw()}})}function e(a){return a*Math.PI/180}function g(b,h,c){c=a.createLinearGradient(0,0,0,c);c.addColorStop(0,b);c.addColorStop(1,h);return c}function p(){var m=92*(f/100),h=f-m,c=91*(f/100),e=88*(f/100),d=85*(f/100);a.save();b.glow&&(a.shadowBlur=h,a.shadowColor=\n\"rgba(0, 0, 0, 10)\");a.beginPath();a.arc(0,0,m,0,2*Math.PI,!0);a.fillStyle=g(\"#000\",\"#000\",m);a.fill();a.restore();a.beginPath();a.arc(0,0,c,0,2*Math.PI,!0);a.fillStyle=g(\"#000\",\"#000\",c);a.fill();a.beginPath();a.arc(0,0,e,0,2*Math.PI,!0);a.fillStyle=g(\"#000\",\"#000\",e);a.fill();a.beginPath();a.arc(0,0,d,0,2*Math.PI,!0);a.fillStyle=b.colors.plate;a.fill();a.save()}function w(a){var h=!1;a=0===b.majorTicksFormat.dec?Math.round(a).toString():a.toFixed(b.majorTicksFormat.dec);return 1<b.majorTicksFormat[\"int\"]?\n(h=-1 c;c++)b.majorTicks.push(w(b.minValue+h*c));b.majorTicks.push(w(b.maxValue))}for(c=0;c<b.majorTicks.length;++c)a.rotate(e(45+c*(270/(b.majorTicks.length-\n1)))),a.beginPath(),a.moveTo(0,m),a.lineTo(0,m-15*(f/100)),a.stroke(),a.restore(),a.save();b.strokeTicks&&(a.rotate(e(90)),a.beginPath(),a.arc(0,0,m,e(45),e(315),!1),a.stroke(),a.restore(),a.save())}function J(){var m=81*(f/100);a.lineWidth=1;a.strokeStyle=b.colors.minorTicks;a.save();for(var h=b.minorTicks*(b.majorTicks.length-1),c=0;c<h;++c)a.rotate(e(45+c*(270/h))),a.beginPath(),a.moveTo(0,m),a.lineTo(0,m-7.5*(f/100)),a.stroke(),a.restore(),a.save()}function s(){for(var m=55*(f/100),h=0;h a;a=Math.abs(a);if(0<h){a=a.toFixed(h).toString().split(\".\");h=0;for(c-=a[0].length;h<c;++h)a[0]=\"0\"+a[0];a=(f?\"-\":\"\")+a[0]+\".\"+a[1]}else{a=Math.round(a).toString();h=0;for(c-=a.length;h<c;++h)a=\"0\"+a;a=(f?\"-\":\"\")+a}return a}function F(a,b){var c=\nMath.sin(b),f=Math.cos(b);return{x:0*f-a*c,y:0*c+a*f}}function N(){a.save();for(var m=81*(f/100),h=m-15*(f/100),c=0,g=b.highlights.length;c<g;c++){var d=b.highlights[c],r=(b.maxValue-b.minValue)/270,k=e(45+(d.from-b.minValue)/r),r=e(45+(d.to-b.minValue)/r);a.beginPath();a.rotate(e(90));a.arc(0,0,m,k,r,!1);a.restore();a.save();var l=F(h,k),p=F(m,k);a.moveTo(l.x,l.y);a.lineTo(p.x,p.y);var p=F(m,r),n=F(h,r);a.lineTo(p.x,p.y);a.lineTo(n.x,n.y);a.lineTo(l.x,l.y);a.closePath();a.fillStyle=d.color;a.fill();\na.beginPath();a.rotate(e(90));a.arc(0,0,h,k-0.2,r+0.2,!1);a.restore();a.closePath();a.fillStyle=b.colors.plate;a.fill();a.save()}}function K(){var m=12*(f/100),h=8*(f/100),c=77*(f/100),d=20*(f/100),k=4*(f/100),r=2*(f/100),l=function(){a.shadowOffsetX=2;a.shadowOffsetY=2;a.shadowBlur=10;a.shadowColor=\"rgba(188, 143, 143, 0.45)\"};l();a.save();n=0>n?Math.abs(b.minValue-n):0<b.minValue?n-b.minValue:Math.abs(b.minValue)+n;a.rotate(e(45+n/((b.maxValue-b.minValue)/270)));a.beginPath();a.moveTo(-r,-d);a.lineTo(-k,\n0);a.lineTo(-1,c);a.lineTo(1,c);a.lineTo(k,0);a.lineTo(r,-d);a.closePath();a.fillStyle=g(b.colors.needle.start,b.colors.needle.end,c-d);a.fill();a.beginPath();a.lineTo(-0.5,c);a.lineTo(-1,c);a.lineTo(-k,0);a.lineTo(-r,-d);a.lineTo(r/2-2,-d);a.closePath();a.fillStyle=\"rgba(255, 255, 255, 0.2)\";a.fill();a.restore();l();a.beginPath();a.arc(0,0,m,0,2*Math.PI,!0);a.fillStyle=g(\"#f0f0f0\",\"#ccc\",m);a.fill();a.restore();a.beginPath();a.arc(0,0,h,0,2*Math.PI,!0);a.fillStyle=g(\"#e8e8e8\",\"#f5f5f5\",h);a.fill()}\nfunction L(){a.save();a.font=40*(f/200)+\"px Led\";var b=x(y),h=a.measureText(\"-\"+x(0)).width,c=f-33*(f/100),g=0.12*f;a.save();var d=-h/2-0.10*f,e=c-g-0.04*f,h=h+0.20*f,g=g+0.07*f,k=0.025*f;a.beginPath();a.moveTo(d+k,e);a.lineTo(d+h-k,e);a.quadraticCurveTo(d+h,e,d+h,e+k);a.lineTo(d+h,e+g-k);a.quadraticCurveTo(d+h,e+g,d+h-k,e+g);a.lineTo(d+k,e+g);a.quadraticCurveTo(d,e+g,d,e+g-k);a.lineTo(d,e+k);a.quadraticCurveTo(d,e,d+k,e);a.closePath();d=a.createRadialGradient(0,c-0.12*f-0.025*f+(0.12*f+0.045*f)/\n2,f/10,0,c-0.12*f-0.025*f+(0.12*f+0.045*f)/2,f/5);d.addColorStop(0,\"#000\");d.addColorStop(1,\"#000000\");a.strokeStyle=d;a.lineWidth=0.05*f;a.stroke();a.shadowBlur=0.012*f;a.shadowColor=\"rgba(0, 0, 0, 1)\";a.fillStyle=\"#000000\";a.fill();a.restore();a.shadowOffsetX=0.04*f;a.shadowOffsetY=0.004*f;a.shadowBlur=0.012*f;a.shadowColor=\"rgba(0, 0, 0, 0.3)\";a.fillStyle=\"#888\";a.textAlign=\"center\";a.fillText(b,-0,c);a.restore()}Gauge.Collection.push(this);this.config={renderTo:null,width:200,height:200,title:!1,\nmaxValue:100,minValue:0,majorTicks:[],minorTicks:10,strokeTicks:!0,units:!1,valueFormat:{\"int\":1,dec:0},majorTicksFormat:{\"int\":1,dec:0},glow:!0,animation:{delay:10,duration:250,fn:\"cycle\"},colors:{plate:\"#000000\",majorTicks:\"#000000\",minorTicks:\"#000000\",title:\"#888\",units:\"#888\",numbers:\"#888\",needle:{start:\"rgba(240, 0, 0, 1)\",end:\"rgba(255, 160, 122, .9)\"}},highlights:[{from:20,to:60,color:\"#eee\"},{from:60,to:80,color:\"#ccc\"},{from:80,to:100,color:\"#999\"}]};var y=0,E=this,n=0,I=0,H=!1;this.setValue=\nfunction(a){n=b.animation?y:a;var d=(b.maxValue-b.minValue)/100;I=a>b.maxValue?b.maxValue+d:a<b.minValue?b.minValue-d:a;y=a;b.animation?k():this.draw();return this};this.setRawValue=function(a){n=y=a;this.draw();return this};this.clear=function(){y=n=I=this.config.minValue;this.draw();return this};this.getValue=function(){return y};this.onready=function(){};l(this.config,b);this.config.minValue=parseFloat(this.config.minValue);this.config.maxValue=parseFloat(this.config.maxValue);b=this.config;n=\ny=b.minValue;if(!b.renderTo)throw Error(\"Canvas element was not specified when creating the Gauge object!\");var z=b.renderTo.tagName?b.renderTo:document.getElementById(b.renderTo),a=z.getContext(\"2d\"),A,C,D,t,u,f,B;q();this.updateConfig=function(a){l(this.config,a);q();this.draw();return this};var M={linear:function(a){return a},quad:function(a){return Math.pow(a,2)},quint:function(a){return Math.pow(a,5)},cycle:function(a){return 1-Math.sin(Math.acos(a))},bounce:function(a){a:{a=1-a;for(var b=0,\nc=1;;b+=c,c/=2)if(a>=(7-4*b)/11){a=-Math.pow((11-6*b-11*a)/4,2)+Math.pow(c,2);break a}a=void 0}return 1-a},elastic:function(a){a=1-a;return 1-Math.pow(2,10*(a-1))*Math.cos(30*Math.PI/3*a)}},G=null;a.lineCap=\"round\";this.draw=function(){if(!A.i8d){B.clearRect(-t,-u,C,D);B.save();var g={ctx:a};a=B;p();N();J();d();s();b.title&&(a.save(),a.font=24*(f/200)+\"px Arial\",a.fillStyle=b.colors.title,a.textAlign=\"center\",a.fillText(b.title,0,-f/4.25),a.restore());b.units&&(a.save(),a.font=22*(f/200)+\"px Arial\",\na.fillStyle=b.colors.units,a.textAlign=\"center\",a.fillText(b.units,0,f/3.25),a.restore());A.i8d=!0;a=g.ctx;delete g.ctx}a.clearRect(-t,-u,C,D);a.save();a.drawImage(A,-t,-u,C,D);if(Gauge.initialized)L(),K(),H||(E.onready&&E.onready(),H=!0);else var e=setInterval(function(){Gauge.initialized&&(clearInterval(e),L(),K(),H||(E.onready&&E.onready(),H=!0))},10);return this}};Gauge.initialized=!1;\n(function(){var b=document,l=b.getElementsByTagName(\"head\")[0],q=-1!=navigator.userAgent.toLocaleLowerCase().indexOf(\"msie\"),v=\"@font-face {font-family: 'Led';src: url('fonts/digital-7-mono.\"+(q?\"eot\":\"ttf\")+\"');}\",k=b.createElement(\"style\");k.type=\"text/css\";if(q)l.appendChild(k),l=k.styleSheet,l.cssText=v;else{try{k.appendChild(b.createTextNode(v))}catch(e){k.cssText=v}l.appendChild(k);l=k.styleSheet?k.styleSheet:k.sheet||b.styleSheets[b.styleSheets.length-1]}var g=setInterval(function(){if(b.body){clearInterval(g);\nvar e=b.createElement(\"div\");e.style.fontFamily=\"Led\";e.style.position=\"absolute\";e.style.height=e.style.width=0;e.style.overflow=\"hidden\";e.innerHTML=\".\";b.body.appendChild(e);setTimeout(function(){Gauge.initialized=!0;e.parentNode.removeChild(e)},250)}},1)})();Gauge.Collection=[];\nGauge.Collection.get=function(b){if(\"string\"==typeof b)for(var l=0,q=this.length;l<q;l++){if((this[l].config.renderTo.tagName?this[l].config.renderTo:document.getElementById(this[l].config.renderTo)).getAttribute(\"id\")==b)return this[l]}else return\"number\"==typeof b?this[b]:null};function domReady(b){window.addEventListener?window.addEventListener(\"DOMContentLoaded\",b,!1):window.attachEvent(\"onload\",b)}\ndomReady(function(){function b(b){for(var e=b[0],d=1,g=b.length;d<g;d++)e+=b[d].substr(0,1).toUpperCase()+b[d].substr(1,b[d].length-1);return e}for(var l=document.getElementsByTagName(\"canvas\"),q=0,v=l.length;q<v;q++)if(\"canv-gauge\"==l[q].getAttribute(\"data-type\")){var k=l[q],e={},g,p=parseInt(k.getAttribute(\"width\"),10),w=parseInt(k.getAttribute(\"height\"),10);e.renderTo=k;p&&(e.width=p);w&&(e.height=w);p=0;for(w=k.attributes.length;p<w;p++)if(g=k.attributes.item(p).nodeName,\"data-type\"!=g&&\"data-\"==\ng.substr(0,5)){var d=g.substr(5,g.length-5).toLowerCase().split(\"-\");if(g=k.getAttribute(g))switch(d[0]){case \"colors\":d[1]&&(e.colors||(e.colors={}),\"needle\"==d[1]?(d=g.split(/\\s+/),e.colors.needle=d[0]&&d[1]?{start:d[0],end:d[1]}:g):(d.shift(),e.colors[b(d)]=g));break;case \"highlights\":e.highlights||(e.highlights=[]);g=g.match(/(?:(?:-?\\d*\\.)?(-?\\d+){1,2} ){2}(?:(?:#|0x)?(?:[0-9A-F|a-f]){3,8}|rgba?\$.*?\$)/g);for(var d=0,J=g.length;d<J;d++){var s=g[d].replace(/^\\s+|\\s+$/g,\"\").split(/\\s+/),x={};\ns[0]&&\"\"!=s[0]&&(x.from=s[0]);s[1]&&\"\"!=s[1]&&(x.to=s[1]);s[2]&&\"\"!=s[2]&&(x.color=s[2]);e.highlights.push(x)}break;case \"animation\":d[1]&&(e.animation||(e.animation={}),\"fn\"==d[1]&&/^\\s*function\\s*\\(/.test(g)&&(g=eval(\"(\"+g+\")\")),e.animation[d[1]]=g);break;default:d=b(d);if(\"onready\"==d)continue;if(\"majorTicks\"==d)g=g.split(/\\s+/);else if(\"strokeTicks\"==d||\"glow\"==d)g=\"true\"==g?!0:!1;else if(\"valueFormat\"==d)if(g=g.split(\".\"),2==g.length)g={\"int\":parseInt(g[0],10),dec:parseInt(g[1],10)};else continue;\ne[d]=g}}e=new Gauge(e);k.getAttribute(\"data-value\")&&e.setRawValue(parseFloat(k.getAttribute(\"data-value\")));k.getAttribute(\"data-onready\")&&(e.onready=function(){eval(this.config.renderTo.getAttribute(\"data-onready\"))});e.draw()}});window.Gauge=Gauge;\n \n \n \n \n \n\t\t \n\t\t \n <canvas id=\"an_gauge_1\" data-title=\"Regime\" data-units=\"Tr/min\" width=\"50\" height=\"50\" data-major-ticks=\"0 1000 2000 3000 4000 5000 6000 7000\" data-type=\"canv-gauge\" data-min-value=\"0\" data-max-value=\"7000\" data-highlights=\"0 600 #222222, 600 3750 #0BB950, 3750 5200 #cc5, 5200 6000 #ff9900, 6000 7000 #f33\" data-onready=\"setInterval( function() { Gauge.Collection.get('an_gauge_1').setValue(data_val);}, 200);\"> \n\t\t \n\t\t \n\t\t \n\t\t \n\t\t \n\t\t \n\t\t \n\t\n\t \n \n\n","output":"str","x":490,"y":200,"wires":[["2fa49b99.be8b54"]]},{"id":"2fa49b99.be8b54","type":"ui_template","z":"bd597e9e.e430e","group":"48190cbf.587d84","name":"reds","order":3,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":630,"y":200,"wires":[[]]},{"id":"48190cbf.587d84","type":"ui_group","z":"","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","z":"","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]

I'm not sure what the deal is, but my NR doesn't like that JSON for some reason. I even deleted the part it was complaining about and re-typed it, and still couldn't get it to import. [image] I assume this isn't the root cause of your problem. Maybe put it in code/"Preformatted text" mode and it will go through correctly?

Thanks. tymarbut try my code again [{"id":"bd597e9e.e430e","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"e1d79532.e184a8","type":"inject","z":"bd597e9e.e430e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"155","payloadType":"num","x":310,"y":200,"wires":[["20468be.1356674"]]},{"id":"20468be.1356674","type":"template","z":"bd597e9e.e430e","name":"cv","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"\n\n \n Arduino Two Temperatures\n \n \n \n \n\n \n\t\t \n\t\t \n <canvas id="an_gauge_1" data-title="Regime" data-units="Tr/min" width="50" height="50" data-major-ticks="0 1000 2000 3000 4000 5000 6000 7000" data-type="canv-gauge" data-min-value="0" data-max-value="7000" data-highlights="0 600 #222222, 600 3750 #0BB950, 3750 5200 #cc5, 5200 6000 #ff9900, 6000 7000 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_1').setValue(data_val);}, 200);">\n\t\t \n\t\t \n\t\t \n\t\t \n\t\t \n\t\t \n\t\t\n\t\n\t\n\n\n","output":"str","x":470,"y":200,"wires":[["2fa49b99.be8b54","87ae9adf.09e488"]]},{"id":"2fa49b99.be8b54","type":"ui_template","z":"bd597e9e.e430e","group":"48190cbf.587d84","name":"reds","order":3,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":630,"y":200,"wires":[]},{"id":"87ae9adf.09e488","type":"debug","z":"bd597e9e.e430e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":680,"y":100,"wires":},{"id":"48190cbf.587d84","type":"ui_group","z":"","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","z":"","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]

You need to highlight all the code and click the little button that looks like at the top of the composer box.

[image] How to share code or flow json FAQs To share code samples or flow json in this forum, you need to take care to format it properly so that it is displayed correctly. The easiest way to do that is to click the 'Preformatted Text' button in the toolbar: [image] Then paste in your code or flow json. You should end up with three back-tick characters - ``` - on their own line before and after the code. On standard US English keyboards, this is on the same key as the ~ character. [IMG_20181111_155651] Using the backticks will ens…

I didn't see Dave's post in time, I was just about to say the same thing, and that I have edited the post so that it should now be importable.

Ah! I can import it now. @chawana, I believe the reason is that you don't have anything inside the template node. Just swap out your UI template node for a new one with the default text inside it, and then replace "payload" with "template" in the default text (since that's what you're calling the code you set up in the template node). Or put this in there (the default, with "template" in place of "payload"): inside the UI template. Of course, I wasn't able to see the gauge you're making, but I'm not plugged into your Arduino :wink:

tymarbut thanks.. after change but still not working ,please send back you code?after you fix it

Well... I'm sorry to tell you that I don't think I "fixed it" per se - I can just see that the template node isn't set up to show anything. So it'll be blank until you give it some sort of input, like it's set up to take by default. Somehow, your msg.template needs to be mentioned in the UI template node.

@chawana The reason you are not seeing anything is that the ui_template node works within tehdashboards framework. i.e. you are not building a complete web page but just a chunk of the webpage the dashboard builds. (@dceejay could explain this better) So instead of trying to build a complete new web page why not see if the tools that NR provides can solve your issue? With that in mind, it looks like you want to display a series of guages. If that is the case, why not use a number of ui_guage nodes? If that is not the case, what do you want to show on the dashboard?

@ zenofmud i want to show my custom gauges in template in dashboard

Node-RED

Node-RED Forum

UI Template why did not show data

Dashboard

dceejay 21 August 2020 08:55 5

Topic		Replies	Views
Need to help edit funtion UI Template send payload to gauge Dashboard	8	410	26 August 2020
I am unable to make responsive gauge or ui_template General dashboard , uibuilder	21	915	25 February 2023
Dashboard 2.0 Classic design multi needle gauge. Call for testing Dashboard dashboard-2	73	2231	26 July 2024
Another gauge.js library Dashboard	23	4182	14 August 2021
Gauge.js library & Node-Red Dashboard	16	2821	16 August 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

UI Template why did not show data

Related topics