Gauges Available in Super Tiles!

Hey everyone! Remember our Gauge Custom Tiles release? Well, we’ve got something even better for you now - native gauges for Super Tiles are now available!

Gauge Types

  • Choose from: Radial, Arc, or Circle

Pointer Types

  • Options include: Default¹, Thumb, Needle, Triangle, or None
  • Needle variations: Regular, Short, or Threaded
  • Triangle options: Inner or Outer

Customization Options

  • Min/Max/Step: Defaults to 0-100 with 1-step increments, but fully customizable
  • Segments: Create custom colored gauge segments
  • Read Only: Set to read-only by default. Change to ‘Gauge’ in the Action setting for interactive mode

¹ Note: The ‘Default’ pointer adapts based on gauge type, presence of custom segments, and read-only configuration.

Give It a Try!

We’re excited to see what you’ll do with these new gauge options. Have any thoughts, feedback, or cool setups you want to share? Let us know in the comments below!

Happy tinkering, everyone!

8 Likes

Nice Josh-

A couple things. I cannot make the minimum go below zero. Where I’m from, we do get negative temperatures… Uggh.

I’ve played around a bit. I’d like to be able to make the gauge itself transparent and only use the needle. That way I could put the needle (whole gauge really) over my guage face. I could draw a guage face without a needle.
Temp 10
I can get it to line up nicely, I can’t get rid of the arc or circle.

I’m not sure what makes this tick, but I’d also be happy to to draw some vector gauge faces…

It’s likely the formatting / number parsing. Typing the negative symbol while the zero is in the minimum field would result in -0 which would parse to 0.

So type your desired value and the add the negative sign in front of it. Eg. type 10 first and then add the - in front of it.

You should be able to customize the segments and use a transparent color for your custom segment, then customize the gauge to use a needle for the ‘Pointer Type’.

It looks like something about the transparent colors isn’t working with the gauges though, so I’ll take a look at that.

If you are looking for advanced customizations, using one of the Gauge Custom Tiles as a baseline is probably a better starting point.

Is there a simple guide on how to make a gauge?

Here’s a video demo on how to use Gauges in Super Tiles.

I was a bit amped up on a Monster Energy Drink, so I was talking a bit fast, but you can always use the video controls to slow things down or pause as needed.

4 Likes

I’ve pushed out an update to properly support transparent and semi-transparent colors for the customized segments in gauges. Make sure to refresh the page to pull in the latest updates.

1 Like

Thanks for the excellent video Josh :slightly_smiling_face:

That resolved the issue.

That resolved that issue.

Is there a setting to change the needle color in settings or do I need to do that with CSS?

How about dropping the numbers if I only want the needle? Settings or CSS?

This looks promising as a Super tile for data visualizations. What determines (limits?) the ability to expose additional attributes some sensors might already make available via the Hubitat driver that they operate with?

The Thing selector is filtered to devices that have numeric attributes. And the attribute selector is filtered to numeric attributes.

It’s also covered in the How To video in my reply above if you want to give that a watch.

1 Like

The available settings are noted in the first post. As you alluded to, you could use CSS for certain customizations.

And I would reiterate that for advanced bespoke customization, the Gauge Custom Tiles are a good starting point.

1 Like

Thanks for doing this. Very helpful.

1 Like

Hello, I have found that you cant enter decimals in the gauge Max/Min or Segments. Becomes a bit problematic for certain things like battery voltages where the Max and Min are only a few digits apart.

Thanks for sharing the use-case. I’m looking into this closer now.

I suspect it’s related to the number parsing that was mentioned above with negative numbers.

Workarounds

  • You can type the decimal value somewhere else, like a text editor or even temporarily in your URL bar, then copy and paste it into the field.
  • You can enter the value skipping the . character, then insert the . character.
    • 11511.5

The field will likely show a red underline, but you should still be able to save it just fine.

I just pushed an update which should make it easier to enter negative numbers and decimal numbers for the Gauge settings. Make sure to refresh the page to pull in the latest updates.

1 Like

Confirmed, got decimals now.

Ohh thats really coool !.. I love it thanks !..you both rock !

2 Likes

Hi Josh, Great addition -
I have been creating a new Super Tile with more than one gauge, but the measurement font size seems a bit random, ion both the design phase and when displaying in the dashboard as shown in the image.
Is there anyway of controlling the font size?
Also the font color would be useful as it tends to get a bit lost with the pointer

image

The more I use this feature the more impressed I am! The results look great. The gauges are easy to use. They’re easy to customize.

Pat yourself on the back for this accomplishment!

2 Likes