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

4 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