# Justgage in UIbuilder

**URL:** <https://discourse.nodered.org/t/justgage-in-uibuilder/97919>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [2 July 2025 14:00 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919 "2025-07-02T14:00:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [2 July 2025 14:00 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/1 "2025-07-02T14:00:57Z")

</div>

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`;

```auto
    <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;

```auto
.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;

```auto
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](https://github.com/toorshia/justgage?tab=readme-ov-file#options) 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`

```auto
{"payload":37,"topic":"sensorTemp"}

```

![gauges](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/188cce8fad1c13fda0884144900de1dece2582c6.gif)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 July 2025 14:08 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/2 "2025-07-02T14:08:30Z")

</div>

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

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:

> **[GitHub - TotallyInformation/gauge-hotnipi: A nice looking gauge W3C component gifted by...](https://github.com/TotallyInformation/gauge-hotnipi)**
>
> A nice looking gauge W3C component gifted by hotnipi for use with Node-RED, uibuilder and other uses

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [2 July 2025 14:11 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/3 "2025-07-02T14:11:18Z")

</div>

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;

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

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 July 2025 14:21 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/4 "2025-07-02T14:21:23Z")

</div>

> [@Paul-Reed](#):
>
> it's easy to download them into your `<project>/src/` directory instead

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

> **[justgage](https://www.npmjs.com/package/justgage)**
>
> JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.. Latest version: 1.7.0, last published: a...

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33d78420b778864b4993c4329da9b2a8ba90bf3c.png)

Access from uibuilder front-end html:

```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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 July 2025 14:32 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/5 "2025-07-02T14:32:45Z")

</div>

> [@Paul-Reed](#):
>
> `<script src="./justgage.min.js"></script>`

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [2 July 2025 14:48 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/6 "2025-07-02T14:48:02Z")

</div>

> [@TotallyInformation](#):
>
> took the liberty of editing your code to include the `defer` attribute on the html scripts

No worries, thanks for that.

> [@TotallyInformation](#):
>
> Even better though would be to install the `npm` version using UIBUILDER's library manager

I haven't got to that chapter yet 😉

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [2 July 2025 18:28 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/7 "2025-07-02T18:28:31Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 July 2025 21:15 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/8 "2025-07-02T21:15:15Z")

</div>

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.

```auto
../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:

> **[IGRICE Za Decu Od 3 Do 103 godine - ServiceWorker Cookbook](https://serviceworke.rs)**
>
> Igrice za decu od 3 do 103 godine. Nove online friv igrice, mobilne za telefon.

And here is the general info:

> **[Progressive web apps | MDN](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)**
>
> A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [3 July 2025 08:32 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/9 "2025-07-03T08:32:59Z")

</div>

> [@TotallyInformation](#):
>
> I think that the entries in the service worker need to use the same URL you would have in your script tag.
> 
> ```auto
> ../uibuilder/vendor/raphael/raphael.min.js
> ../uibuilder/vendor/justgage/dist/justgage.min.js
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 July 2025 12:07 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/10 "2025-07-03T12:07:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 July 2025 12:04 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/11 "2025-07-19T12:04:00Z")

</div>

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

> [@TotallyInformation](#):
>
> ```auto
> ../uibuilder/vendor/raphael/raphael.min.js
> ../uibuilder/vendor/justgage/dist/justgage.min.js
> 
> ```

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 😀

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 August 2025 12:04 UTC](https://discourse.nodered.org/t/justgage-in-uibuilder/97919/12 "2025-08-18T12:04:12Z")

</div>

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