Justgage in UIbuilder

Dashboard
1

I have the need to introduce a gauge into my UIbuilder dashboard, so looked at several options, but found that the justgage library both looks good, with plenty of options to personalise, so if anyone is interested this is how I use it in UIbuilder.

  1. Link the justgage & raphael libraries in the head section of your index.html file above the link for uibuilder.iife.min.js;
    <script defer src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/justgage@1.7.0/justgage.min.js"></script>

..and add this in the <body> section - <div id="gauge-temp" class="gauge"></div> to draw the gauge.

  1. In index.css, add this;
.gauge {
    width: 325px;
    height: 200px;
    display: inline-block;
}

Those settings determine the height & width of the gauge in the dashboard.

  1. In index.js add the following;
document.addEventListener('DOMContentLoaded', () => {
  // Create just one gauge up front
  const tempGauge = new JustGage({
    id: 'gauge-temp',
    value: 0,
    min: 0,
    max: 100,
    symbol: '°C',
    pointer: true,
    pointerOptions: {
      toplength: -15,
      bottomlength: 10,
      bottomwidth: 12,
      color: '#8e8e93',
      stroke: '#ffffff',
      stroke_width: 3,
      stroke_linecap: 'round'
    },
    title: 'Temperature (°C)',
    label: 'Temperature',
    labelMinFontSize: 14,
    valueFontColor: '#a2a2a2'
  });

  // Handle incoming data via uibuilder
  uibuilder.onChange('msg', (msg) => {
    if (msg.topic === 'sensorTemp') {
      tempGauge.refresh(Number(msg.payload));
    } else {
      console.warn('Unhandled topic', msg.topic, msg.payload);
    }
  });
});

Those entries determine the look and feel of the gauge, see justgage docs for further details.

  1. To pass the data feed from node-RED to the gauge, pass a msg into the uibuilder node, comprising of a payload containing the data feed (must be a number!!), and a topic which matches the topic listed in index.js
{"payload":37,"topic":"sensorTemp"}

gauges

3 Likes
2

Thanks for sharing again Paul. It is great to see your journey with UIBUILDER. :slight_smile:

For folk interested in gauges, as Paul mentions, there are many options. Not least of which is a fantastic looking gauge from our own @hotNipi that is available in several forms, including the web component version that he gifted to the community and that I host:

As a web component, it should be useable just about anywhere.

1 Like
3

Afterthought....
Instead of linking the libraries to a CDN (like I have above), it's easy to download them into your <project>/src/ directory instead, and link them in index.html like this;

    <script defer src="./raphael.min.js"></script>
    <script defer src="./justgage.min.js"></script>
4

Even better though would be to install the npm version using UIBUILDER's library manager. :wink:

Makes it available to any uibuilder instance (and to dashboards, etc as well).

image

Access from uibuilder front-end html:

<script defer src="../uibuilder/vendor/raphael/raphael.min.js"></script>
<script defer src="../uibuilder/vendor/justgage/dist/justgage.min.js"></script>

Installing the JustGage module also installs the raphael dependency.

Don't forget to include the defer attribute if using the standard index.html so as to match the defer on the client library.

5

Sorry Paul, took the liberty of editing your code to include the defer attribute on the html scripts. It defers loading the scripts in the head section and is equivalent (but cleaner html than) putting the scripts at the end of the body. But all must have or not have the defer or they may load in the wrong order.

6

No worries, thanks for that.

I haven't got to that chapter yet :wink:

1 Like
7

Tried using using UIbuilder's library manager, which works fine, although I'm not finding it easy to add the libraries to the PWA cache list.
The PWA files - manifest.json & service.worker sit in the <project>/src/ directory, and I previously had the justgage libraries in <project>/src/libs/.
So in the service.worker, I would link to the files by './lib/raphael.min.js', & './lib/justgage.min.js', which worked fine, but the UIbuilder library manager places the libraries in uibuilder/node_modules/justgage/dist/justgage.min.js and similar for raphael.

Is file access restricted for the service.worker to within src, or have I got the path wrong?
(../../node_modules/justgage/dist/justgage.min.js doesn't work)

8

I think that the path is a URL, ../../node_modules/justgage/dist/justgage.min.js would be a filing system path. I think that the entries in the service worker need to use the same URL you would have in your script tag.

../uibuilder/vendor/raphael/raphael.min.js
../uibuilder/vendor/justgage/dist/justgage.min.js

You can, of course, automate things in the service worker such that any requested URL will be cached. There are also patterns that allow you to update the cached item whenever it is accessed and you are online. This is the idea on my backlog for an automated creator for manifests and service workers for uibuilder.

Mozilla has put together a cookbook where you can get examples of the different approaches:

And here is the general info:

9

I tried that first, but didn't work unfortunately.
But not to worry, I've reverted back to keeping the libraries in <project>/src/lib and it's all good now.

10

I will certainly try to work something out when I get some time.

11

I've revisited this, and yes, using your suggested paths do work;

I think my previous issues were caused because I had not deleted the existing PWA cache/cookies after making the changes.
So, all good now :grinning_face:

1 Like