Hubitat Gauge Tile

This is a proof-of-concept for displaying Hubitat data as Gauges in a Custom Tile.

image

:man_technologist: This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.

image

Setup

Enable Hubitat Maker API

Follow the steps below to enable Maker API in Hubitat admin page.

  • Select the devices that can be controlled using this Maker API
  • Enable Allow Access via Remote/Cloud
  • Add https://run.sharptools.app/ in the Allowed Hosts (for CORS) field
  • Scroll down and copy one of the example cloud endpoints
  • Make sure to press Done to save your changes!

Create Custom Tile

  • Tap the Import button above to import the tile, then scroll down and save the tile
    • Optionally, press Preview to try out the tile without saving (you’ll need the details from the Enable Hubitat Maker API section above)
  • Go to the desired dashboard, Edit, and Add Item. Tap “Custom Tile” in the Other section and add this custom tile.
  • Edit the tile, fill-in the settings, and save:
    • Sample Maker API Url - use one of the Hubitat Maker API Cloud endpoints
    • Device ID - enter the ID of a device with a battery attribute
      • Note that you can find the device ID in the URL of your browser when you are viewing a devices details within the Hubitat Admin UI page

Your final tile configuration should look something like the following:

Note that you can also optionally set the ‘Attribute’ field to pick a numeric attribute other than ‘battery’ to display. Similarly, you can fill in the ‘Label’ field to override the label that is displayed within the gauge.

2 Likes

I’ve made some cool flexibility additions to the gauge. Now inside the Tile Editor you can tweak the following: Tile name, gauge center name separately, units, decimals, refresh time, choose another attribute if your device has more than 1. You can change them or leave blank to use the default values, or space bar to omit… So far Im sharing the HTML for 12V battery, Humidity, and Temperature. You can adjust from there. Adjusting color bands and max/min is easy to do in the HTML after you copy into custom tile editor.

image

5 Likes

I’ve been trying to make the gauges bigger to fill in the dead space around them. I can make them bigger but they don’t center in the tile. See top left gauge. If anyone knows how to accomplish this much appreciated!
image

Some gauge improvements:

  1. Can now change size and center gauge in tile to fill out the tile dead space.
  2. Had an issue where using attribute number was changing randomly. Now you enter the attribute name instead of number. Like “temperature”, “voltage”, etc… Instructions in the ReadMe.

image

4 Likes

Thanks to you guys for a great addon. I would like to use a gauge to display watts but not quite sure how or which example, kampto or James to use. I am looking to display watts from 0 to 10,000 with color green on the lower range, yellow on the mid range and red on the high range.

Thanks in advance for any help or tips to achieve this.

@Scunny, something like this?
image

This is created using @kampto’s Gauge12V custom tile, and is configured as shown below.

When you add @kampto’s custom tile code in to the Custom Developer editor interface, you can set the gauge’s ranges and colors to whatever you need in the Gauge Boundary’s section.

2 Likes

Thanks James, that works perfectly. Couple of follow-up questions if I may. Can you explain what minor and major ticks are? I see the major adds marks on the scale but what about minor and what does the numeric reference do? Is there a table that shows what the valid units are? And finally, is there a way to adjust the font of the Gauge label?

Thanks again to you and @kampto for this work.

minorTicks is the number of ticks inbetween the big 5 tick marks. I see in James example he has 500! which is making them all overlap creating that gray area around the circumference which is a slick idea if you want more border and less color. I have been using 5.

majorTicks is the labels for the 5 big tick marks. If you dont want these labels just delete that line. Or put nothing in the single quotes like the example gauge HTML has. You can mix numbers and letter in the major tick labels like this.

minorTicks: 5,
majorTicks: [‘0’, ‘’, ‘Humidity’, ‘’, ‘100’],

image

You can enter what ever units you want for the value at the bottom of the gauge in the tile editor.
The font can be changed but inside thr HTML code, I would have to mess around with it.

Got it. Thanks for the reply. Is there a way to format the output so that 7600 Watts becomes 7,600 Watts? Also not sure I want to do this but is there a way to increase the refresh interval to less than 1 minute?

To get less them one minute find this line in the HTML code
setTimeout(valuePollingScheduler, (refreshIntervCalc * 60 * 1000));
Delete the 60 * Then update code at thr bottom.
Now when you enter the Refresh time in the tile editor its in seconds not minutes.

There’s probably a way to get 7,600 (comma) on the main value, Im not sure the cleanest way to do it.

Thanks again. James’s proof of concept example has the formatting I’m looking for. I’ll poke around in that code and see if I can make the change.

This is reading through Hubitat’s cloud servers (which relay to your hub), so as a courtesy to them I would try not to poll too frequently. :slight_smile:

I took a brief look through the code and it looks like the refresh() method has a section for formatting the decimal display.

Reading through the documentation on Google’s NumberFormat, it looks like you could change the pattern to something like #,###

image

1 Like

Thank you sir. And a ramble to get past the 20 character minimum:)

1 Like