🆕 PLUGIN | Gauge Complete (Speedometer)

[vnihoul77]

Gauge Complete

Hi there!
We just release this new plugin to the Bubble marketplace !

This plugin allows you to add a highly customizable and dynamic gauge elements to your Bubble app.

Over 30 customizable parameters
Fully dynamic when the value change
Can be animated
Complete documentation

The plugin is available for $4/month or $25 for a lifetime license.

We offer full documentation with the plugin and forum support.

EXAMPLES

LINKS

Plugin page

Demo app
Demo editor

Documentation

WIN IT

The first 3 people to suggest an improvement track will have a free lifetime license!

---

This plugin is made by the French platform Ottho .

[MarkusBoostedApp]

This plugin is so good that it’s hard to suggest any improvements but this is one: make the bar gradient

[vnihoul77]

For now, you can set a gradient for the filled part of the gauge but not the background as the picture shows, and it’s indeed a good idea, I’ll work on it

[lucas.ar]

great addition indeed

[MarkusBoostedApp]

Awesome! Thanks for the free gift. Great plugin!

[vnihoul77]

You’re welcome!

[christo1]

Is there any ability to make it a bar gauge rather than a radial gauge? So basically the same idea, just a horizontal bar with a needle floating to indicate measurement. I basically want to have a bar show when a user is in the correct range vs being under or over. Similar to your first example, but flat. A horizontal arrangement would just take up less space.

[vojdany.ali]

Very nice
Add textures for better reality
Add digital display (7 segment fonts)

[christo1]

It would also be great if you could add a Tooltip for each Zone, so you can explain what each area is for when the mouse is hovered over it.

[christo1]

Hmm, Is this still supported? My questions remain unanswered 2 months later.

I was hoping to mention that it is an issue if the gauge is holy a half-circle, because the top 1/2 of the gauge is blank and that leaves unwanted space above the gauge. I wish it would not take up that space in these instances.

[vnihoul77]

Hey @christo1,
Sorry, I took your last comment as feedback (which was added to our roadmap) and not a question.

The plugin is indeed still regularly updated and maintained
That’s indeed a problematic behaviour, probably caused by the fact that you can also create round gauges. However, the responsive box should adapt to its content anyway and this shouldn’t happen.

I was not able to reproduce the bug on my end, as you can see below the responsive box adapts to its content and borders are correctly defined.

Do you have a preview link you could share so we can investigate the issue?
In the meantime, if you need an emergency fix and using the new responsive editor, you can set a negative top margin/border on the element to fix the issue.

[christo1]

Thank you for the quick reply. I am pleased that it is still a supported plugin. I’ll message you with the preview link. The Radius is set at 50, where your sample seems to be around 75? . Here is a gif of my setup. Screen Recording 2022-10-07...

[vnihoul77]

Got it, I’ll investigate the behaviour in the next hours and will get back to you here.

[christo1]

Thank you very much.

[christo1]

Your image got me thinking and I played around a bit to get this:

The Radius scale seems to decide how much of the element the gauge fills. The arc Angle at 0 creates 1/2 an arc. The size of the gauge appears to be directly linked to the height of the element and not the width. So I needed to play around with this to get the size just right.

It appears that for a 1/2 gauge like this one a ratio of the height being about 6% (62% is what I used) of the width, fills the entire element most completely.

So it is all sorted for now, thank you!

[vnihoul77]

Happy that you found out, and thanks for sharing the solution