Using canvas-gauges package with Node-Red

Dashboard
1

I've found "canvas-gauges" which is a fully flexible way to create gauges and display data on the dashboard. I have installed the full package using NPM, but I can not figure out how to use them through node-red.

Has anyone implemented canvas-gauges who could point me in the right direction and maybe give me an example of using one of their gauges.

2

There seems to be a previous question here: Gauge node >3 colors although it might not be the answer you were hoping for. There doesn't seem to be any other discussion around the package.

3

I found that thread and it didn't help because it asked essentially the same question which no one answered. The fundamental question is when using the home assistant supervisor implementation of node-red, how do you add desktop script code? Hopefully someone will post a simple cookbook to adding the code.....I thought I did it right...in fact when I look at the developer windows in a browser, I see those two script files referenced with the full path I entered....but then the display is just a blank box. I've tried chrome and Firefox.

4

So are you trying to use NR to display the donut graphs ? Why ? There are plenty of great Dashboard add-ons in HA that will do what you want and that are well supported.

Craig

5

two reasons:

  1. I would like to find a guage that will allow me to display the temperature of a probe which is measuring the temperature of my smoker (I smoke meats as a hobby). I would like to display on a gauge with yellow up to my set "low" temperature....then a white segment...and finally red starting at the high temperature. The low and high temperatures change depending on what I am smoking. Additionally, I want a pointer to show the measured temperature on that gauge. I haven't found this in any "built in" add-ons...but if you can point me to one that does at least most of what I want to do...I'd appreciate it.

  2. I'd like to understand the correct way to install a script.js and deploy an addon that uses a script file in the home assistant environment..

6

The problem with the NR install that HA does is that it is slightly changed from the norm - we get a stream of people over on this forum who are trying to run NR as an add-in through HACS and there are lots of small differences.

I would suggest that you look at installing NR on its own box/VM/docker instance and use that instead of the inbuilt.

In terms of canvas style gauges

Its in this thread somewhere - i thought i had it bookmarked but seem to have lost it - definitely in this thread where he links to his github though

Craig

7

Here is the one i was thinking of

8

Solution:

  1. create a new folder...I created node-red-static in the same folder as node-modules...but it could be anywhere.

  2. put the .js file in that folder...or if you can make another folder and put it there.

  3. in setting.js add the path to this folder in httpStatic:

httpStatic: '/config/node-red/node-red-static/',

  1. then in your template, include the following line:
<script src="http://192.168.254.201:1881/gauge.min.js"></script>

where gauge.min.js is the name of your js file and the url is your url.
  1. Test to see if you installed it correctly.....http://192.168.254.201:1881/gauge.min.js should show you the javascript file.
2 Likes
9

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