How To fix a pre defined colors to gauges,
becz an industry standard the gauges must be pre defined only needle should move based on the pre setted input please help me to fix a color like below in the node red gauges
Hello and welcome to the forum.
I don't think you can set fixed ranges that always show to the ui_guage. You may have to go a more custom made path.
A quick Google found at least two older but possibly still relevant resources to making a custom gauge.
The artless gauge does not provide visible sections colors, only the colored dots as sector indicators, which is not same.
There is many explanations why most of web gauges are not made with visual sections and only the needle showing the value. (readability issues mostly) But the truth is always somewhere in between.
GitHub - e-tinkers/d3-dashboard-gauge: A node-RED inspired dashboard gauge. this one may helping me but i need to show a machine temperature, as of now i am receiving data from Modbus register is it possible in the same application, if is it is solve my problem.
Using the RGraph method, I was able to construct this style of gauge...
[{"id":"e7e455119bceb0a5","type":"ui_template","z":"6bb0b299df732ee8","group":"926072151b8e3190","name":"Custom Gauge","order":1,"width":"8","height":"3","format":"<script src=\"/RGraph/libraries/RGraph.common.core.js\"></script>\n<script src=\"/RGraph/libraries/RGraph.common.dynamic.js\"></script>\n<script src=\"/RGraph/libraries/RGraph.gauge.js\"></script>\n\n\n<canvas id=\"cvs\" width=\"400\" height=\"145\">\n [No canvas support]\n</canvas>\n\n\n\n<script language=\"javascript\" type=\"text/javascript\">\n\n (function(scope){ \n scope.$watch('msg', function(msg) {\n gauge3.value = msg.payload;\n gauge3.grow();\n });\n })(scope);\n \n var gauge3 = new RGraph.Gauge({\n id: 'cvs',\n min: 0,\n max: 40,\n value: 10,\n options: {\n centery: 120,\n radius: 110,\n anglesStart: RGraph.PI,\n anglesEnd: RGraph.TWOPI,\n needleSize: 65,\n borderWidth: 15,\n shadow: true,\n needleType: 'line',\n colorsRanges: [[0,8,'blue'], [8,16,'lightblue'], [16,24,'green'], [24,32,'orange'], [32,40,'red']],\n borderInner: 'rgba(0,0,0,0)',\n borderOuter: 'rgba(0,0,0,0)',\n borderOutline: 'rgba(0,0,0,0)',\n centerpinColor: 'rgba(0,0,0,0)',\n centerpinRadius: 5\n }\n });\n gauge3.grow();\n \n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":100,"wires":[[]]},{"id":"d52f9eb356a8db51","type":"inject","z":"6bb0b299df732ee8","name":"","props":[{"p":"payload"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":310,"y":100,"wires":[["e2c7ce49f51884e5"]]},{"id":"e2c7ce49f51884e5","type":"random","z":"6bb0b299df732ee8","name":"","low":"0","high":"40","inte":"true","property":"payload","x":460,"y":100,"wires":[["e7e455119bceb0a5"]]},{"id":"926072151b8e3190","type":"ui_group","name":"Custom Gauge","tab":"bfaf766f0535555b","order":1,"disp":true,"width":8,"collapse":false},{"id":"bfaf766f0535555b","type":"ui_tab","name":"Gauge","icon":"dashboard","disabled":false,"hidden":false}]
And tweaked a bit better for my dark theme.
[{"id":"e7e455119bceb0a5","type":"ui_template","z":"6bb0b299df732ee8","group":"926072151b8e3190","name":"Custom Gauge","order":1,"width":8,"height":3,"format":"<style>\n .nr-dashboard-widget-_ {\n color:lightgrey !important;\n font-size:24px;\n }\n</style>\n\n\n<script src=\"/RGraph/libraries/RGraph.common.core.js\"></script>\n<script src=\"/RGraph/libraries/RGraph.common.dynamic.js\"></script>\n<script src=\"/RGraph/libraries/RGraph.gauge.js\"></script>\n\n\n<canvas id=\"cvs\" width=\"400\" height=\"145\">\n [No canvas support]\n</canvas>\n\n\n\n<script language=\"javascript\" type=\"text/javascript\">\n\n (function(scope){ \n scope.$watch('msg', function(msg) {\n gauge3.value = msg.payload;\n gauge3.grow();\n });\n })(scope);\n \n var gauge3 = new RGraph.Gauge({\n id: 'cvs',\n min: 0,\n max: 40,\n value: 10,\n options: {\n centery: 120,\n radius: 110,\n anglesStart: RGraph.PI,\n anglesEnd: RGraph.TWOPI,\n backgroundColor: 'black',\n textColor: 'white',\n needleSize: 65,\n borderWidth: 15,\n shadow: true,\n needleType: 'line',\n colorsRanges: [[0,8,'blue'], [8,16,'lightblue'], [16,24,'green'], [24,32,'orange'], [32,40,'red']],\n borderInner: 'rgba(0,0,0,0)',\n borderOuter: 'rgba(0,0,0,0)',\n borderOutline: 'rgba(0,0,0,0)',\n centerpinColor: 'rgba(0,0,0,0)',\n centerpinRadius: 0\n }\n });\n gauge3.grow();\n \n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":100,"wires":[[]]},{"id":"d52f9eb356a8db51","type":"inject","z":"6bb0b299df732ee8","name":"","props":[{"p":"payload"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":310,"y":100,"wires":[["e2c7ce49f51884e5"]]},{"id":"e2c7ce49f51884e5","type":"random","z":"6bb0b299df732ee8","name":"","low":"0","high":"40","inte":"true","property":"payload","x":460,"y":100,"wires":[["e7e455119bceb0a5","a775a526df1384ae"]]},{"id":"a775a526df1384ae","type":"ui_text","z":"6bb0b299df732ee8","group":"926072151b8e3190","order":2,"width":8,"height":1,"name":"Temperature","label":" ","format":"{{msg.payload}} ° C","layout":"row-center","x":610,"y":60,"wires":[]},{"id":"926072151b8e3190","type":"ui_group","name":"Custom Gauge","tab":"bfaf766f0535555b","order":1,"disp":true,"width":8,"collapse":false},{"id":"bfaf766f0535555b","type":"ui_tab","name":"Gauge","icon":"dashboard","disabled":false,"hidden":false}]
3 Likes
I decided to try my hand at getting this one to work for the OP... and it should look like this...
But I am not doing so well getting it to run in Node-Red Dashboard 
Perhaps someone can give some pointers.
As with the prior gauge example, I made a suitable subfolder folder in my node-red-static folder and placed the library files inside.
I then copied the contents of the index.html into a dashboard template and made the necessary edits to point to my RPi. I removed the links back to the git-hub source page as they are irrelevant in this case
But I can only get this result... and the text isn't even centered as it should be. What am I missing in the template node? I thought it was capable of running "valid HTML"?
1 Like
@Gunner hi, same code i tried out in my PC but the gauge itself not reflecting in the dashboard.
for reference i am attached the snaps, anything required to add need to do the changes.
yes i was tried it already, that also not working.
What do you mean "also".. it IS the heart of that particular graphing method.
What I did was change my node-red settings.js ...
/** When httpAdminRoot is used to move the UI to a different root path, the
* following property can be used to identify a directory of static content
* that should be served at http://localhost:1880/.
*/
httpStatic: '/home/pi/node-red-static/',
Create a subfolder in my node-red-static folder called RGraph and extracted the contents of the downloaded zip file from Get hold of the RGraph software | RGraph.net into it.
It is that location of the RGraph library files which the contents of the provided flow utilizes in the embedded paths... (the /home/pi/node-red-static/ part of the path is already implied by the changes in the settings.js file)
The rest of the template contents just make the graph look the way it is, and adjust based on the msg.payload... (and set the colour of the text in the ui_text node).
That library can make all sorts of interesting looking graphs based on template settings.
Following SteveMcl's post in https://discourse.nodered.org/t/gauge-js-library-node-red/49449 I made this gauge:
[{"id":"5664307bd8383bfd","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"0181a540cb556a30","type":"ui_template","z":"5664307bd8383bfd","group":"4e5fdce778c7e0ac","name":"gauge.js","order":1,"width":0,"height":0,"format":"<script>\n(function(){function t(t,i){for(var e in i)m.call(i,e)&&(t[e]=i[e]);function s(){this.constructor=t}return s.prototype=i.prototype,t.prototype=new s,t.__super__=i.prototype,t}var i,e,s,n,o,p,a,h,r,l,g,c,u,d=[].slice,m={}.hasOwnProperty,x=[].indexOf||function(t){for(var i=0,e=this.length;i<e;i++)if(i in this&&this[i]===t)return i;return-1};function f(t,i){null==t&&(t=!0),this.clear=null==i||i,t&&AnimationUpdater.add(this)}function v(){return v.__super__.constructor.apply(this,arguments)}function y(t,i){this.el=t,this.fractionDigits=i}function V(t,i){if(this.elem=t,this.text=null!=i&&i,V.__super__.constructor.call(this),void 0===this.elem)throw new Error(\"The element isn't defined.\");this.value=1*this.elem.innerHTML,this.text&&(this.value=0)}function w(t){if(this.gauge=t,void 0===this.gauge)throw new Error(\"The element isn't defined.\");this.ctx=this.gauge.ctx,this.canvas=this.gauge.canvas,w.__super__.constructor.call(this,!1,!1),this.setOptions()}function S(t){this.elem=t}function M(t){var i,e;this.canvas=t,M.__super__.constructor.call(this),this.percentColors=null,\"undefined\"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext(\"2d\"),i=this.canvas.clientHeight,e=this.canvas.clientWidth,this.canvas.height=i,this.canvas.width=e,this.gp=[new p(this)],this.setOptions()}function C(t){this.canvas=t,C.__super__.constructor.call(this),\"undefined\"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext(\"2d\"),this.setOptions(),this.render()}function _(){return _.__super__.constructor.apply(this,arguments)}!function(){var s,n,t,o,i,e,a;for(t=0,i=(a=[\"ms\",\"moz\",\"webkit\",\"o\"]).length;t<i&&(e=a[t],!window.requestAnimationFrame);t++)window.requestAnimationFrame=window[e+\"RequestAnimationFrame\"],window.cancelAnimationFrame=window[e+\"CancelAnimationFrame\"]||window[e+\"CancelRequestAnimationFrame\"];s=null,o=0,n={},requestAnimationFrame?window.cancelAnimationFrame||(s=window.requestAnimationFrame,window.requestAnimationFrame=function(t,i){var e;return e=++o,s(function(){if(!n[e])return t()},i),e},window.cancelAnimationFrame=function(t){return n[t]=!0}):(window.requestAnimationFrame=function(t,i){var e,s,n,o;return e=(new Date).getTime(),o=Math.max(0,16-(e-n)),s=window.setTimeout(function(){return t(e+o)},o),n=e+o,s},window.cancelAnimationFrame=function(t){return clearTimeout(t)})}(),u=function(t){var i,e;for(t-=3600*(i=Math.floor(t/3600))+60*(e=Math.floor((t-3600*i)/60)),t+=\"\",e+=\"\";e.length<2;)e=\"0\"+e;for(;t.length<2;)t=\"0\"+t;return(i=i?i+\":\":\"\")+e+\":\"+t},g=function(){var t,i,e;return e=(i=1<=arguments.length?d.call(arguments,0):[])[0],t=i[1],r(e.toFixed(t))},c=function(t,i){var e,s,n;for(e in s={},t)m.call(t,e)&&(n=t[e],s[e]=n);for(e in i)m.call(i,e)&&(n=i[e],s[e]=n);return s},r=function(t){var i,e,s,n;for(s=(e=(t+=\"\").split(\".\"))[0],n=\"\",1<e.length&&(n=\".\"+e[1]),i=/(\\d+)(\\d{3})/;i.test(s);)s=s.replace(i,\"$1,$2\");return s+n},l=function(t){return\"#\"===t.charAt(0)?t.substring(1,7):t},f.prototype.animationSpeed=32,f.prototype.update=function(t){var i;return null==t&&(t=!1),!(!t&&this.displayedValue===this.value||(this.ctx&&this.clear&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),i=this.value-this.displayedValue,Math.abs(i/this.animationSpeed)<=.001?this.displayedValue=this.value:this.displayedValue=this.displayedValue+i/this.animationSpeed,this.render(),0))},t(v,h=f),v.prototype.displayScale=1,v.prototype.forceUpdate=!0,v.prototype.setTextField=function(t,i){return this.textField=t instanceof a?t:new a(t,i)},v.prototype.setMinValue=function(t,i){var e,s,n,o,a;if(this.minValue=t,null==i&&(i=!0),i){for(this.displayedValue=this.minValue,a=[],s=0,n=(o=this.gp||[]).length;s<n;s++)e=o[s],a.push(e.displayedValue=this.minValue);return a}},v.prototype.setOptions=function(t){return null==t&&(t=null),this.options=c(this.options,t),this.textField&&(this.textField.el.style.fontSize=t.fontSize+\"px\"),.5<this.options.angle&&(this.options.angle=.5),this.configDisplayScale(),this},v.prototype.configDisplayScale=function(){var t,i,e,s,n;return s=this.displayScale,!1===this.options.highDpiSupport?delete this.displayScale:(i=window.devicePixelRatio||1,t=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1,this.displayScale=i/t),this.displayScale!==s&&(n=this.canvas.G__width||this.canvas.width,e=this.canvas.G__height||this.canvas.height,this.canvas.width=n*this.displayScale,this.canvas.height=e*this.displayScale,this.canvas.style.width=n+\"px\",this.canvas.style.height=e+\"px\",this.canvas.G__width=n,this.canvas.G__height=e),this},v.prototype.parseValue=function(t){return t=parseFloat(t)||Number(t),isFinite(t)?t:0},s=v,y.prototype.render=function(t){return this.el.innerHTML=g(t.displayedValue,this.fractionDigits)},a=y,t(V,h),V.prototype.displayedValue=0,V.prototype.value=0,V.prototype.setVal=function(t){return this.value=1*t},V.prototype.render=function(){var t;return t=this.text?u(this.displayedValue.toFixed(0)):r(g(this.displayedValue)),this.elem.innerHTML=t},i=V,t(w,h),w.prototype.displayedValue=0,w.prototype.value=0,w.prototype.options={strokeWidth:.035,length:.1,color:\"#000000\",iconPath:null,iconScale:1,iconAngle:0},w.prototype.img=null,w.prototype.setOptions=function(t){if(null==t&&(t=null),this.options=c(this.options,t),this.length=2*this.gauge.radius*this.gauge.options.radiusScale*this.options.length,this.strokeWidth=this.canvas.height*this.options.strokeWidth,this.maxValue=this.gauge.maxValue,this.minValue=this.gauge.minValue,this.animationSpeed=this.gauge.animationSpeed,this.options.angle=this.gauge.options.angle,this.options.iconPath)return this.img=new Image,this.img.src=this.options.iconPath},w.prototype.render=function(){var t,i,e,s,n,o,a,h,r;if(t=this.gauge.getAngle.call(this,this.displayedValue),h=Math.round(this.length*Math.cos(t)),r=Math.round(this.length*Math.sin(t)),o=Math.round(this.strokeWidth*Math.cos(t-Math.PI/2)),a=Math.round(this.strokeWidth*Math.sin(t-Math.PI/2)),i=Math.round(this.strokeWidth*Math.cos(t+Math.PI/2)),e=Math.round(this.strokeWidth*Math.sin(t+Math.PI/2)),this.ctx.beginPath(),this.ctx.fillStyle=this.options.color,this.ctx.arc(0,0,this.strokeWidth,0,2*Math.PI,!1),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(o,a),this.ctx.lineTo(h,r),this.ctx.lineTo(i,e),this.ctx.fill(),this.img)return s=Math.round(this.img.width*this.options.iconScale),n=Math.round(this.img.height*this.options.iconScale),this.ctx.save(),this.ctx.translate(h,r),this.ctx.rotate(t+Math.PI/180*(90+this.options.iconAngle)),this.ctx.drawImage(this.img,-s/2,-n/2,s,n),this.ctx.restore()},p=w,S.prototype.updateValues=function(t){return this.value=t[0],this.maxValue=t[1],this.avgValue=t[2],this.render()},S.prototype.render=function(){var t,i;return this.textField&&this.textField.text(g(this.value)),0===this.maxValue&&(this.maxValue=2*this.avgValue),i=this.value/this.maxValue*100,t=this.avgValue/this.maxValue*100,$(\".bar-value\",this.elem).css({width:i+\"%\"}),$(\".typical-value\",this.elem).css({width:t+\"%\"})},t(M,s),M.prototype.elem=null,M.prototype.value=[20],M.prototype.maxValue=80,M.prototype.minValue=0,M.prototype.displayedAngle=0,M.prototype.displayedValue=0,M.prototype.lineWidth=40,M.prototype.paddingTop=.1,M.prototype.paddingBottom=.1,M.prototype.percentColors=null,M.prototype.options={colorStart:\"#6fadcf\",colorStop:void 0,gradientType:0,strokeColor:\"#e0e0e0\",pointer:{length:.8,strokeWidth:.035,iconScale:1},angle:.15,lineWidth:.44,radiusScale:1,fontSize:40,limitMax:!1,limitMin:!1},M.prototype.setOptions=function(t){var i,e,s,n,o;for(null==t&&(t=null),M.__super__.setOptions.call(this,t),this.configPercentColors(),this.extraPadding=0,this.options.angle<0&&(n=Math.PI*(1+this.options.angle),this.extraPadding=Math.sin(n)),this.availableHeight=this.canvas.height*(1-this.paddingTop-this.paddingBottom),this.lineWidth=this.availableHeight*this.options.lineWidth,this.radius=(this.availableHeight-this.lineWidth/2)/(1+this.extraPadding),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),e=0,s=(o=this.gp).length;e<s;e++)(i=o[e]).setOptions(this.options.pointer),i.render();return this.render(),this},M.prototype.configPercentColors=function(){var t,i,e,s,n,o,a;if(this.percentColors=null,void 0!==this.options.percentColors){for(this.percentColors=new Array,o=[],e=s=0,n=this.options.percentColors.length-1;0<=n?s<=n:n<=s;e=0<=n?++s:--s)a=parseInt(l(this.options.percentColors[e][1]).substring(0,2),16),i=parseInt(l(this.options.percentColors[e][1]).substring(2,4),16),t=parseInt(l(this.options.percentColors[e][1]).substring(4,6),16),o.push(this.percentColors[e]={pct:this.options.percentColors[e][0],color:{r:a,g:i,b:t}});return o}},M.prototype.set=function(t){var i,e,s,n,o,a,h,r,l;for(t instanceof Array||(t=[t]),e=s=0,h=t.length-1;0<=h?s<=h:h<=s;e=0<=h?++s:--s)t[e]=this.parseValue(t[e]);if(t.length>this.gp.length)for(e=n=0,r=t.length-this.gp.length;0<=r?n<r:r<n;e=0<=r?++n:--n)(i=new p(this)).setOptions(this.options.pointer),this.gp.push(i);else t.length<this.gp.length&&(this.gp=this.gp.slice(this.gp.length-t.length));for(a=e=0,o=t.length;a<o;a++)(l=t[a])>this.maxValue?this.options.limitMax?l=this.maxValue:this.maxValue=l+1:l<this.minValue&&(this.options.limitMin?l=this.minValue:this.minValue=l-1),this.gp[e].value=l,this.gp[e++].setOptions({minValue:this.minValue,maxValue:this.maxValue,angle:this.options.angle});return this.value=Math.max(Math.min(t[t.length-1],this.maxValue),this.minValue),AnimationUpdater.add(this),AnimationUpdater.run(this.forceUpdate),this.forceUpdate=!1},M.prototype.getAngle=function(t){return(1+this.options.angle)*Math.PI+(t-this.minValue)/(this.maxValue-this.minValue)*(1-2*this.options.angle)*Math.PI},M.prototype.getColorForPercentage=function(t,i){var e,s,n,o,a,h,r;if(0===t)e=this.percentColors[0].color;else for(e=this.percentColors[this.percentColors.length-1].color,n=o=0,h=this.percentColors.length-1;0<=h?o<=h:h<=o;n=0<=h?++o:--o)if(t<=this.percentColors[n].pct){e=!0===i?(r=this.percentColors[n-1]||this.percentColors[0],s=this.percentColors[n],a=(t-r.pct)/(s.pct-r.pct),{r:Math.floor(r.color.r*(1-a)+s.color.r*a),g:Math.floor(r.color.g*(1-a)+s.color.g*a),b:Math.floor(r.color.b*(1-a)+s.color.b*a)}):this.percentColors[n].color;break}return\"rgb(\"+[e.r,e.g,e.b].join(\",\")+\")\"},M.prototype.getColorForValue=function(t,i){var e;return e=(t-this.minValue)/(this.maxValue-this.minValue),this.getColorForPercentage(e,i)},M.prototype.renderStaticLabels=function(t,i,e,s){var n,o,a,h,r,l,p,c,u,d;for(this.ctx.save(),this.ctx.translate(i,e),l=/\\d+\\.?\\d?/,r=(n=t.font||\"10px Times\").match(l)[0],c=n.slice(r.length),o=parseFloat(r)*this.displayScale,this.ctx.font=o+c,this.ctx.fillStyle=t.color||\"#000000\",this.ctx.textBaseline=\"bottom\",this.ctx.textAlign=\"center\",a=0,h=(p=t.labels).length;a<h;a++)void 0!==(d=p[a]).label?(!this.options.limitMin||d>=this.minValue)&&(!this.options.limitMax||d<=this.maxValue)&&(r=(n=d.font||t.font).match(l)[0],c=n.slice(r.length),o=parseFloat(r)*this.displayScale,this.ctx.font=o+c,u=this.getAngle(d.label)-3*Math.PI/2,this.ctx.rotate(u),this.ctx.fillText(g(d.label,t.fractionDigits),0,-s-this.lineWidth/2),this.ctx.rotate(-u)):(!this.options.limitMin||d>=this.minValue)&&(!this.options.limitMax||d<=this.maxValue)&&(u=this.getAngle(d)-3*Math.PI/2,this.ctx.rotate(u),this.ctx.fillText(g(d,t.fractionDigits),0,-s-this.lineWidth/2),this.ctx.rotate(-u));return this.ctx.restore()},M.prototype.renderTicks=function(t,i,e,s){var n,o,a,h,r,l,p,c,u,d,g,m,x,f,v,y,V,w,S,M;if(t!=={}){for(l=t.divisions||0,w=t.subDivisions||0,a=t.divColor||\"#fff\",f=t.subColor||\"#fff\",h=t.divLength||.7,y=t.subLength||.2,u=parseFloat(this.maxValue)-parseFloat(this.minValue),d=parseFloat(u)/parseFloat(t.divisions),v=parseFloat(d)/parseFloat(t.subDivisions),n=parseFloat(this.minValue),o=0+v,r=(c=u/400)*(t.divWidth||1),V=c*(t.subWidth||1),m=[],S=p=0,g=l+1;p<g;S=p+=1)this.ctx.lineWidth=this.lineWidth*h,x=this.lineWidth/2*(1-h),M=this.radius*this.options.radiusScale+x,this.ctx.strokeStyle=a,this.ctx.beginPath(),this.ctx.arc(0,0,M,this.getAngle(n-r),this.getAngle(n+r),!1),this.ctx.stroke(),o=n+v,n+=d,S!==t.divisions&&0<w?m.push(function(){var t,i,e;for(e=[],t=0,i=w-1;t<i;t+=1)this.ctx.lineWidth=this.lineWidth*y,x=this.lineWidth/2*(1-y),M=this.radius*this.options.radiusScale+x,this.ctx.strokeStyle=f,this.ctx.beginPath(),this.ctx.arc(0,0,M,this.getAngle(o-V),this.getAngle(o+V),!1),this.ctx.stroke(),e.push(o+=v);return e}.call(this)):m.push(void 0);return m}},M.prototype.render=function(){var t,i,e,s,n,o,a,h,r,l,p,c,u,d,g,m;if(g=this.canvas.width/2,e=this.canvas.height*this.paddingTop+this.availableHeight-(this.radius+this.lineWidth/2)*this.extraPadding,t=this.getAngle(this.displayedValue),this.textField&&this.textField.render(this),this.ctx.lineCap=\"butt\",l=this.radius*this.options.radiusScale,this.options.staticLabels&&this.renderStaticLabels(this.options.staticLabels,g,e,l),this.options.staticZones)for(this.ctx.save(),this.ctx.translate(g,e),this.ctx.lineWidth=this.lineWidth,s=0,o=(p=this.options.staticZones).length;s<o;s++)r=(m=p[s]).min,this.options.limitMin&&r<this.minValue&&(r=this.minValue),h=m.max,this.options.limitMax&&h>this.maxValue&&(h=this.maxValue),d=this.radius*this.options.radiusScale,m.height&&(this.ctx.lineWidth=this.lineWidth*m.height,u=this.lineWidth/2*(m.offset||1-m.height),d=this.radius*this.options.radiusScale+u),this.ctx.strokeStyle=m.strokeStyle,this.ctx.beginPath(),this.ctx.arc(0,0,d,this.getAngle(r),this.getAngle(h),!1),this.ctx.stroke();else void 0!==this.options.customFillStyle?i=this.options.customFillStyle(this):null!==this.percentColors?i=this.getColorForValue(this.displayedValue,this.options.generateGradient):void 0!==this.options.colorStop?((i=0===this.options.gradientType?this.ctx.createRadialGradient(g,e,9,g,e,70):this.ctx.createLinearGradient(0,0,g,0)).addColorStop(0,this.options.colorStart),i.addColorStop(1,this.options.colorStop)):i=this.options.colorStart,this.ctx.strokeStyle=i,this.ctx.beginPath(),this.ctx.arc(g,e,l,(1+this.options.angle)*Math.PI,t,!1),this.ctx.lineWidth=this.lineWidth,this.ctx.stroke(),this.ctx.strokeStyle=this.options.strokeColor,this.ctx.beginPath(),this.ctx.arc(g,e,l,t,(2-this.options.angle)*Math.PI,!1),this.ctx.stroke(),this.ctx.save(),this.ctx.translate(g,e);for(this.options.renderTicks&&this.renderTicks(this.options.renderTicks,g,e,l),this.ctx.restore(),this.ctx.translate(g,e),n=0,a=(c=this.gp).length;n<a;n++)c[n].update(!0);return this.ctx.translate(-g,-e)},o=M,t(C,s),C.prototype.lineWidth=15,C.prototype.displayedValue=0,C.prototype.value=33,C.prototype.maxValue=80,C.prototype.minValue=0,C.prototype.options={lineWidth:.1,colorStart:\"#6f6ea0\",colorStop:\"#c0c0db\",strokeColor:\"#eeeeee\",shadowColor:\"#d5d5d5\",angle:.35,radiusScale:1},C.prototype.getAngle=function(t){return(1-this.options.angle)*Math.PI+(t-this.minValue)/(this.maxValue-this.minValue)*(2+this.options.angle-(1-this.options.angle))*Math.PI},C.prototype.setOptions=function(t){return null==t&&(t=null),C.__super__.setOptions.call(this,t),this.lineWidth=this.canvas.height*this.options.lineWidth,this.radius=this.options.radiusScale*(this.canvas.height/2-this.lineWidth/2),this},C.prototype.set=function(t){return this.value=this.parseValue(t),this.value>this.maxValue?this.options.limitMax?this.value=this.maxValue:this.maxValue=this.value:this.value<this.minValue&&(this.options.limitMin?this.value=this.minValue:this.minValue=this.value),AnimationUpdater.add(this),AnimationUpdater.run(this.forceUpdate),this.forceUpdate=!1},C.prototype.render=function(){var t,i,e,s;return t=this.getAngle(this.displayedValue),s=this.canvas.width/2,e=this.canvas.height/2,this.textField&&this.textField.render(this),(i=this.ctx.createRadialGradient(s,e,39,s,e,70)).addColorStop(0,this.options.colorStart),i.addColorStop(1,this.options.colorStop),this.radius,this.lineWidth,this.radius,this.lineWidth,this.ctx.strokeStyle=this.options.strokeColor,this.ctx.beginPath(),this.ctx.arc(s,e,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,!1),this.ctx.lineWidth=this.lineWidth,this.ctx.lineCap=\"round\",this.ctx.stroke(),this.ctx.strokeStyle=i,this.ctx.beginPath(),this.ctx.arc(s,e,this.radius,(1-this.options.angle)*Math.PI,t,!1),this.ctx.stroke()},t(_,e=C),_.prototype.strokeGradient=function(t,i,e,s){var n;return(n=this.ctx.createRadialGradient(t,i,e,t,i,s)).addColorStop(0,this.options.shadowColor),n.addColorStop(.12,this.options._orgStrokeColor),n.addColorStop(.88,this.options._orgStrokeColor),n.addColorStop(1,this.options.shadowColor),n},_.prototype.setOptions=function(t){var i,e,s,n;return null==t&&(t=null),_.__super__.setOptions.call(this,t),n=this.canvas.width/2,i=this.canvas.height/2,e=this.radius-this.lineWidth/2,s=this.radius+this.lineWidth/2,this.options._orgStrokeColor=this.options.strokeColor,this.options.strokeColor=this.strokeGradient(n,i,e,s),this},n=_,window.AnimationUpdater={elements:[],animId:null,addAll:function(t){var i,e,s,n;for(n=[],e=0,s=t.length;e<s;e++)i=t[e],n.push(AnimationUpdater.elements.push(i));return n},add:function(t){if(x.call(AnimationUpdater.elements,t)<0)return AnimationUpdater.elements.push(t)},run:function(t){var i,e,s,n,o,a,h;if(null==t&&(t=!1),isFinite(parseFloat(t))||!0===t){for(i=!0,h=[],s=e=0,o=(a=AnimationUpdater.elements).length;e<o;s=++e)a[s].update(!0===t)?i=!1:h.push(s);for(n=h.length-1;0<=n;n+=-1)s=h[n],AnimationUpdater.elements.splice(s,1);return AnimationUpdater.animId=i?null:requestAnimationFrame(AnimationUpdater.run)}if(!1===t)return!0===AnimationUpdater.animId&&cancelAnimationFrame(AnimationUpdater.animId),AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run)}},\"function\"==typeof window.define&&null!=window.define.amd?define(function(){return{Gauge:o,Donut:n,BaseDonut:e,TextRenderer:a}}):\"undefined\"!=typeof module&&null!=module.exports?module.exports={Gauge:o,Donut:n,BaseDonut:e,TextRenderer:a}:(window.Gauge=o,window.Donut=n,window.BaseDonut=e,window.TextRenderer=a)}).call(this); \n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":80,"wires":[[]]},{"id":"7fd322ae44092954","type":"ui_template","z":"5664307bd8383bfd","group":"4e5fdce778c7e0ac","name":"gauge","order":2,"width":"0","height":"0","format":"<canvas id=\"foo\">\n\n</canvas>\n\n<script>\nvar opts = {\n angle: 0, // The span of the gauge arc\n lineWidth: 0.32, // The line thickness\n radiusScale: 0.85, // Relative radius\n pointer: {\n length: 0.66, // // Relative to gauge radius\n strokeWidth: 0.057, // The thickness\n color: '#000000' // Fill color\n },\n limitMax: false, // If false, max value increases automatically if value > maxValue\n limitMin: true, // If true, the min value of the gauge will be fixed\n colorStart: '#e87227', // Colors\n colorStop: '#099b4e', // just experiment with them\n strokeColor: '#000000', // to see which ones work best for you\n generateGradient: true,\n highDpiSupport: true, // High resolution support\n staticZones: [\n {strokeStyle: \"#e82727\", min: 0, max: 20},\n {strokeStyle: \"#f66600\", min: 20, max: 40},\n {strokeStyle: \"#f6cf0c\", min: 40, max: 60}, \n {strokeStyle: \"#7fda43\", min: 60, max: 80}, \n {strokeStyle: \"#099b4e\", min: 80, max: 100} \n ],\n staticLabels: {\n font: \"10px sans-serif\", // Specifies font\n labels: [0, 20, 40, 60, 80, 100], // Print labels at these values\n color: \"#000000\", // Optional: Label text color\n fractionDigits: 0 // Optional: Numerical precision. 0=round off.\n },\n};\n\nvar target = document.getElementById('foo'); // your canvas element\nvar gauge = new Gauge(target).setOptions(opts); // create sexy gauge!\ngauge.maxValue = 100; // set max gauge value\ngauge.setMinValue(0); // Prefer setter over gauge.minValue = 0\ngauge.animationSpeed = 50; // set animation speed (32 is default value)\n//gauge.percentColors = [[0.0, \"#a9d70b\" ], [0.50, \"#f9c802\"], [1.0, \"#ff0000\"]],\n(function(scope) {\n\n scope.$watch('msg', function(msg) {\n if(msg) {\n if (msg.topic == \"set\") {\n gauge.set(msg.payload); // set actual value\n }\n }\n });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":120,"wires":[[]]},{"id":"a71899bf716e628e","type":"inject","z":"5664307bd8383bfd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"15","crontab":"","once":true,"onceDelay":"5","topic":"set","payload":"15","payloadType":"num","x":120,"y":80,"wires":[["7fd322ae44092954","67a33629802efcd6"]]},{"id":"d68ce9c08033dc5e","type":"inject","z":"5664307bd8383bfd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"20","crontab":"","once":true,"onceDelay":"10","topic":"set","payload":"82","payloadType":"num","x":120,"y":120,"wires":[["7fd322ae44092954","67a33629802efcd6"]]},{"id":"679930abd3f61438","type":"inject","z":"5664307bd8383bfd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"20","crontab":"","once":true,"onceDelay":"15","topic":"set","payload":"43","payloadType":"num","x":120,"y":160,"wires":[["7fd322ae44092954","67a33629802efcd6"]]},{"id":"67a33629802efcd6","type":"ui_text","z":"5664307bd8383bfd","group":"4e5fdce778c7e0ac","order":3,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"col-center","x":350,"y":160,"wires":[]},{"id":"4e5fdce778c7e0ac","type":"ui_group","name":"demo","tab":"efb78c573db87f94","order":1,"disp":true,"width":"6","collapse":false},{"id":"efb78c573db87f94","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
@jbudd Hi,
i tried it for single gauge, but for multiple gauges in a single window not able to display.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
