Forum Academy Marketplace Showcase Pricing Features

πŸ†• PLUGIN | Gauge Complete (Speedometer)

iFrame Gauge Complete

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

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

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

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

:blue_book: We offer full documentation with the plugin and forum support.

EXAMPLES

image
image


image

LINKS

:link: Plugin page

:link: Demo app
:link: Demo editor

:link: Documentation

:gift: WIN IT

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


Logo Ottho
This plugin is made by the French platform Ottho .

3 Likes

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

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 :slight_smile:

1 Like

great addition indeed

1 Like

Awesome! Thanks for the free gift. Great plugin!

You’re welcome! :wink:

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.

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

images (1)

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.

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.
image

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 :smiley:
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.

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...

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

Thank you very much.

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

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!

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

1 Like