Use Gauge with Custom Tiles

I have created a custom tile to show the Air Quality Index from Purple Air. It shows a number and changes colour depending in the value.
What I would like to do is convert this to a gauge which would also show segments for the different ranges.
Can anyone give me some pointers about how to do this?

If it’s in a Custom Tile with your own HTML + JS, you could use any of the gauge libraries that are available on the web. We put together two Gauge Custom Tile examples that you might find helpful as a reference.

Alternatively, if you can get the Air Quality Index from Purple Air into a SharpTools Variable, you could use the native gauges that we released for Super Tiles. For example, if your Custom Tile is using API calls to get the AQI value, you might be able to mirror that logic in a SharpTools Rule.

Thanks for the ideas Josh,
I’ll look at it over the next few days and let you know how I go.

I created the tile using both a rule and a custom tile. The rule was a bit messy so I ended up going with the custom tile, which allowed me to add a few extras as well.
I was quite happy with the way it turned out.

Thanks for your guidance.

image