Circular gauge

Hi, I’m completely new to Intuiface and I would like to know if there is a way to make a circular gauge. So the same thing as the linear gauge but in a circle. I did something using a circular panel and a countdown to change the opacity of the items inside but I would like to have a real animation (as if I changed the value of a Pi chart, with a extrapolated animation between each step). Thank in advance.

Hi Fernand,

You should be able to cook something for an half-circle gauge (like a speed-o-meter), using circle shape cropped by a group or proper image, and a linear converter on angle to have something like:
image

… but I don’t think you can easily have a pie chart fully built in Intuiface.
image

We also have an article on how to use Google Charts here, with an HTML Frame Asset.

Do you have more details or a capture on exactly what you want to build?

Regards,

Alex.

2 Likes

Hi Alex, Thank you for the quick reply. I thought of doing something like this :


Not necessarily with the color change but with a smooth animation of the circle

It would be cool to be able to make arcs in addition to ellipses. it would make things like that so simple :thinking:

Hi Fernand,

Yes, unfortunately, we do not support polygon shape yet :confused: (but the day we do…)

There is some workaround possible, based on the Circular Panel (windows only) and by using a binding on a dimension that you will animate for instance.
It’s a little bit too much from the tests I did, but it works, even if it’s not the most elegant.

Here is a quick sample, let’s say … for educational purpose :wink:
Community-CircleGauge.zip (6.2 MB)



3 Likes

Very nice tip. I did not think about changing the collection size. Thank you very much. I think I’ll start from that. :+1:

the example makes me think of something else that I wondered too: Is it possible to change the origin of a rectangle? For example if we want to make it grow to the right with a point of origin on the left … Ok otherwise, we must also vary its position :upside_down_face:

The way to do it is indeed to change his position while changing it’s size.
Composer is very efficient when it comes to basics animations (or sets of basics animations) but it won’t be as good as specialized animating tool.

1 Like

Ok, It’s already good

@Alex and @fernand,

I took the example Alex made and was able to make rounded tips for you! Check it out! :slight_smile:

Community-CircleGauge - Rounded Tips.zip (6.3 MB)

4 Likes

Yeaaaah, thanks @megan it rocks! :star_struck:

1 Like

So cool ! Thanks !

1 Like

@paolo posted another version here for the record.

1 Like

@alex I didn’t realize you already posted something on this topic. I need to do my homework next time :slight_smile:

1 Like

No problem, it’s always better to have more than “not enough” :wink:

3 Likes