# Can't get hotNipi gauge to work

**URL:** https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271
**Category:** General
**Tags:** dashboard-2
**Created:** [29 January 2026 14:29 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271 "2026-01-29T14:29:51Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![acestu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acestu/32/90408_2.png) [@acestu](https://discourse.nodered.org/u/acestu)
#### Post date: [29 January 2026 14:29 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/1 "2026-01-29T14:29:51Z")

</div>

Hi,

I have had a look at hotNipis gauge on Github, however when I copy the node-red example code and paste it into a ui-template as stated together with an inject node for some numbers, all i get is a white box when i open Dashboard2, am I doing it wrong ?

Thanks

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [29 January 2026 16:16 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/2 "2026-01-29T16:16:25Z")

</div>

Provide a link to the github page please.

---

<div class="post-metadata">

### Author: ![acestu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acestu/32/90408_2.png) [@acestu](https://discourse.nodered.org/u/acestu)
#### Post date: [29 January 2026 16:22 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/3 "2026-01-29T16:22:06Z")

</div>

Hi Colin,

The link is:

> **[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

Thanks

---

<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: [29 January 2026 17:02 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/4 "2026-01-29T17:02:13Z")

</div>

OK, so this is the web component version of the gauge. Gifted by hotnipi to the community and hosted by me with a few tweaks for the web component wrapper.

It _should_, I think, work with D2 but I can't say I've tested it. It _does_ work with UIBUILDER. It would also work with http-in/-response nodes.

> [@acestu](#):
>
> all i get is a white box when i open Dashboard2

Open your browser's dev tools, look at the console and report back what errors you see.

---

<div class="post-metadata">

### Author: ![acestu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acestu/32/90408_2.png) [@acestu](https://discourse.nodered.org/u/acestu)
#### Post date: [30 January 2026 08:41 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/5 "2026-01-30T08:41:08Z")

</div>

Hi Totally,

I can't take a screenshot of the Dev screen but it says this:

```auto
The resource from “http://localhost:1880/js/gauge-hotnipi.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
page1
Loading failed for the <script> with source “http://localhost:1880/js/gauge-hotnipi.js”. page1:1:1
errorCaptured TypeError: this.getElement(...).update is not a function

```

Thanks

---

<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: [30 January 2026 11:00 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/6 "2026-01-30T11:00:05Z")

</div>

How have you made the component available to D2?

I see that I haven't shared any methods on how to do that in the repo.

If you were using it with UIBUILDER, you could simply install the github version using uibuilder's library manager. But if you aren't doing that, you will need to put [gauge-hotnipi.iife.min.js](https://github.com/TotallyInformation/gauge-hotnipi/blob/main/gauge-hotnipi.iife.min.js) into a location that Node-RED will serve to the D2 front-end (as indicated by the "browser" property in the package.json file). You would then reference that in a link in a `ui_template` node. The minimised version will be optimised unlike the version you've used.

---

<div class="post-metadata">

### Author: ![acestu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acestu/32/90408_2.png) [@acestu](https://discourse.nodered.org/u/acestu)
#### Post date: [30 January 2026 11:07 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/7 "2026-01-30T11:07:54Z")

</div>

Hi Totally,

I just did like it said in the Node-Red example, put a template node in node red with the code supplied and that is all I did apart from adding an inject node with a number to try it.

Thanks

---

<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: [30 January 2026 11:16 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/8 "2026-01-30T11:16:55Z")

</div>

I've just added some installation instructions to the GitHub repo.

If not using UIBUILDER, you will need to configure a static resource folder for Node-RED - see the property in settings.js. Then copy the file to that folder. Node-RED will serve anything in that folder automatically.

---

<div class="post-metadata">

### Author: ![acestu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acestu/32/90408_2.png) [@acestu](https://discourse.nodered.org/u/acestu)
#### Post date: [30 January 2026 11:45 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/9 "2026-01-30T11:45:27Z")

</div>

Hi Totally,

Thanks for doing that I will have a go after work.

Thanks

---

<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: [30 April 2026 11:46 UTC](https://discourse.nodered.org/t/cant-get-hotnipi-gauge-to-work/100271/10 "2026-04-30T11:46:13Z")

</div>

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