Another gauge.js library

Dashboard
21

BTW, you have some errant triple backticks at the end of your flow, that may confuse new users trying to import it.

image

22

Finally figured this out... between strange ways of formatting the command in some examples (shows error but centering still worked?)
image

image

My best results was to format the div like this... fore and aft of all other code

<div style="margin:auto">

<script src="/Canvas-Gauges/gauge.min.js"></script>

<canvas data-type="radial-gauge"
    data-width="300"
.....
    data-value={{msg.payload}}
></canvas>

</div>

Meanwhile... interference from code in another other gauge example (in same tab, but different group) was stopping the above codes from working... I figured out the part that was interfering (after posting this) and am now working on eliminating the slider and incorporating payload inject (not going so well :frowning: )

image

[{"id":"7aac70aaf6e1046b","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":6,"format":"<style>\n      body{ background-color: white; }\n      #wrapper{ position:auto; }\n      canvas{ position:absolute; left:45px; top:5px;}\n      #amount{ position:absolute; left:0px; top:5px; margin-bottom:15px; width:35px; border:0; color:#000000; font-weight:bold; }\n      #slider-vertical{ position:absolute; left:13px; top:45px; width:11px; height:210px; border:0px; color:#f6931f; font-weight:bold; }\n</style>\n\n  \n<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n<script>\n  $(function() {\n\n      let canvas=document.getElementById(\"canvas\");\n      let ctx=canvas.getContext(\"2d\");\n\n      let PI=Math.PI;\n      let cx=180;\n      let cy=210;\n      let radius=90;\n      let min=0;\n      let max=1000;\n      let minBound=250;\n      let maxBound=750;\n      let arcWidth=40;\n      let tickWidth=4;\n      let tickValue=400;\n      let tickColor=\"black\";\n\n      $( \"#slider-vertical\" ).slider({\n        orientation: \"vertical\",\n        range: \"min\",\n        min: min,\n        max: max,\n        value:tickValue,\n        slide:function( event, ui ) {\n          $( \"#amount\" ).val(ui.value);\n          draw(ui.value);\n        }\n      });\n\n      $( \"#amount\" ).val( $( \"#slider-vertical\" ).slider( \"value\" ) );\n\n\n      draw(tickValue);\n\n      function draw(value){\n          tickValue=value;\n          tickColor=\"orange\";\n          if(tickValue<minBound){tickColor=\"green\";}\n          if(tickValue>maxBound){tickColor=\"red\";}\n          //\n          ctx.clearRect(0,0,canvas.width,canvas.height);\n          drawArc();\n          drawTick(minBound,\"gray\");\n          drawTick(maxBound,\"gray\");\n          drawTick(tickValue,tickColor,10);\n          drawLabel(minBound,\"gray\",20,18);\n          drawLabel(maxBound,\"gray\",20,18);\n          drawLabel(tickValue,tickColor,55,24);   \n      }\n\n      function drawArc(){\n          ctx.beginPath();\n          ctx.arc(cx,cy,radius,0,PI,true);\n          ctx.lineWidth=arcWidth;\n          ctx.strokeStyle=\"lightgray\";\n          ctx.stroke();\n      }\n\n      function drawTick(tickValue,color,extension){\n          let plus=extension||0;\n          let angle=PI+tickValue/(max-min)*PI;\n          let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n          let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n          let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n          let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n          ctx.beginPath();\n          ctx.moveTo(x1,y1);\n          ctx.lineTo(x2,y2);\n          ctx.lineWidth=tickWidth;\n          ctx.strokeStyle=color;\n          ctx.stroke();\n      }\n\n      function drawLabel(tickValue,color,extension,fontsize){\n          let angle=PI+tickValue/(max-min)*PI;\n          let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n          let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n          ctx.textAlign=\"center\";\n          ctx.fillStyle=color;\n          ctx.font=fontsize+\"px arial\";\n          ctx.fillText(tickValue,x,y);\n      }\n\n  });   // end $(function(){});\n</script>\n\n\n<body>\n    <div id=\"wrapper\">\n        <input type=\"text\" id=\"amount\" />\n        <div id=\"slider-vertical\"></div>\n        <canvas id=\"canvas\" width=372 height=250></canvas>\n    </div>\n</body>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":820,"y":560,"wires":[[]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]
23

Got it...

image

[{"id":"62bd02c06586e2a6","type":"ui_template","z":"8c7dfd6121113522","group":"f9a22db17d48a558","name":"Adjustable gauge with trigger points for label colour change","order":1,"width":8,"height":"5","format":"<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />\n<script src=\"http://code.jquery.com/jquery-1.9.1.js\"></script>\n<script src=\"http://code.jquery.com/ui/1.10.3/jquery-ui.js\"></script>\n\n<div style=\"margin:auto\">\n\n<script>\n  $(function() {\n      \n      (function(scope) {\n          scope.$watch('msg', function(msg) {\n              if (msg) {\n                  let tickValue = msg.payload;\n                  draw(tickValue);\n              }\n          });\n      })(scope);\n      \n      let canvas=document.getElementById(\"canvas\");\n      let ctx=canvas.getContext(\"2d\");\n      let PI=Math.PI;\n      let cx=180;\n      let cy=210;\n      let radius=100;\n      let min=0;\n      let max=100;\n      let startBound=0;\n      let minBound=25;\n      let midBound=50;\n      let maxBound=75;\n      let endBound=100;\n      let arcWidth=40;\n      let tickWidth=4;\n      let tickColor=\"black\";\n      let tickValue=50;\n\n      draw(tickValue);\n\n      function draw(value){\n          tickValue=value;\n          tickColor=\"black\";\n          if(tickValue<minBound){tickColor=\"green\";}\n          if(tickValue>minBound&&tickValue<midBound){tickColor=\"yellow\";}\n          if(tickValue>midBound&&tickValue<maxBound){tickColor=\"orange\";}\n          if(tickValue>maxBound){tickColor=\"red\";}\n          //\n          ctx.clearRect(0,0,canvas.width,canvas.height);\n          drawArc();\n          drawTick(startBound,\"green\");\n          drawTick(minBound,\"yellow\");\n          drawTick(midBound,\"orange\");\n          drawTick(maxBound,\"red\");\n          drawTick(endBound,\"red\");\n          drawTick(tickValue,tickColor,10);\n          drawLabel(startBound,\"gray\",20,18);\n          drawLabel(minBound,\"gray\",20,18);\n          drawLabel(midBound,\"gray\",20,18);\n          drawLabel(maxBound,\"gray\",20,18);\n          drawLabel(endBound,\"gray\",20,18);\n          drawLabel(tickValue,tickColor,55,24);   \n      }\n\n      function drawArc(){\n          ctx.beginPath();\n          ctx.arc(cx,cy,radius,0,PI,true);\n          ctx.lineWidth=arcWidth;\n          ctx.strokeStyle=\"lightgray\";\n          ctx.stroke();\n      }\n\n      function drawTick(tickValue,color,extension){\n          let plus=extension||0;\n          let angle=PI+tickValue/(max-min)*PI;\n          let x1=cx+(radius-arcWidth/2)*Math.cos(angle);\n          let y1=cy+(radius-arcWidth/2)*Math.sin(angle);\n          let x2=cx+(radius+arcWidth/2+plus)*Math.cos(angle);\n          let y2=cy+(radius+arcWidth/2+plus)*Math.sin(angle);\n          ctx.beginPath();\n          ctx.moveTo(x1,y1);\n          ctx.lineTo(x2,y2);\n          ctx.lineWidth=tickWidth;\n          ctx.strokeStyle=color;\n          ctx.stroke();\n      }\n\n      function drawLabel(tickValue,color,extension,fontsize){\n          let angle=PI+tickValue/(max-min)*PI;\n          let x=cx+(radius+arcWidth/2+extension)*Math.cos(angle);\n          let y=cy+(radius+arcWidth/2+extension)*Math.sin(angle);\n          ctx.textAlign=\"center\";\n          ctx.fillStyle=color;\n          ctx.font=fontsize+\"px arial\";\n          ctx.fillText(tickValue,x,y);\n      }\n  });   // end $(function(){});\n</script>\n\n\n<body>\n    <div id=\"wrapper\">\n        <canvas id=\"canvas\" width=370 height=210></canvas>\n    </div>\n</body>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":660,"wires":[[]]},{"id":"4250dc9e50afa42f","type":"random","z":"8c7dfd6121113522","name":"","low":"0","high":"100","inte":"true","property":"payload","x":340,"y":660,"wires":[["62bd02c06586e2a6"]]},{"id":"b6abc32d4305e190","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":660,"wires":[["4250dc9e50afa42f"]]},{"id":"f9a22db17d48a558","type":"ui_group","name":"Custom Gauge 3","tab":"2deac665c2e9da53","order":8,"disp":true,"width":8,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]
1 Like
24

I have edited my flow and the guidelines! Thanks for the tip!

I also changed the centering to what you posted above. It works ok.

Many thanks for your input!

1 Like
25

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.