Hubitat Gauge Tile

James · April 28, 2021, 9:49pm

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

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.

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
  
  image1469×1252 168 KB
- 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.

kampto · April 29, 2021, 10:06pm

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.

kampto · May 1, 2021, 9:40pm

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!

kampto · May 10, 2021, 1:22am

Some gauge improvements:

Can now change size and center gauge in tile to fill out the tile dead space.
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.

Scunny · July 15, 2021, 4:22pm

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.

James · July 16, 2021, 12:49am

@Scunny, something like this?

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.

Scunny · July 16, 2021, 3:30pm

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.

kampto · July 16, 2021, 5:10pm

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’],

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.

Scunny · July 16, 2021, 5:30pm

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?

kampto · July 16, 2021, 7:26pm

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.

Scunny · July 16, 2021, 7:37pm

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.

josh · July 16, 2021, 7:42pm

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.

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 #,###

Scunny · July 16, 2021, 7:43pm

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

simon · May 14, 2022, 2:02pm

What part of the code controls the size of the gauge in the tile? I want to add a little more padding to @kampto tiles - someone in-between these and the original tile from @James

josh · May 14, 2022, 4:06pm

The size of the ‘chart’ div is what dictates the size of the gauge. So you would want to adjust the size / position of that div:

I think there was a minor typo in the original css – a trailing ; at the end of the html, body {} declaration. Something like the following would reduce the gauge to 80% of the original size and vertically and horizontally center it:

<style>
  html, body { height: 100%; width: 100%; margin: 0; }
  #chart { 
    height: 80%; 
    width: 80%;
  }
  body { 
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Lee_CCM · July 31, 2022, 12:50pm

Hi All, I’m very new to this so don’t chastise me.
I’m trying to change the colours on the tile gauge as I want to use them for temperature. I’m not having much success as I’m probably putting in the wrong code. Can someone help?

Thanks

kampto · July 31, 2022, 7:56pm

The only colors I have been able to get to work are red, orange, green and blue. For blue you need to trick it by changing the color with HEX code as shown in your code. There’s also some layering like some color will go over the top of other. Its limited by the “Google” gauge script. If you dont need blue it becomes easier like this

Lee_CCM · August 1, 2022, 11:53am

Ok, thanks I’ll have another go at getting the colours correct.

Mostafa_Mohab · August 3, 2022, 11:49pm

Interesting, is it possible to pass a variable to be displayed in gauge ?

kampto · August 4, 2022, 12:46am

Yes, If you have Hubitat and include the variable into Maker API. Sharptools can grab it into the custom gauge tile.