Progress Circle Gauge Thingy

Today, I made a Progress Circle Gauge for one of my projects. I saw one here but I needed some more options.
You can play with the settings in the inspector and all should be very easy to use.

Since it’s kinda hard to draw circles that have sharp edges, I’ve added a (1 to 5) SmoothFactor -option. This makes things pretty sharp on both Retina and non-Retina. (Try to keep this number low when you make your control very large because the larger the control, the more it has to calculate while it’s not really needed. I will add caching to speed things up if there’s interest.)

I’ve included a simple demo project (that has a build script that makes it Retina aware).


I don’t have Windows to test it on but I expect it will flicker. If it does, please try to turn on Doublebuffer and let me know if it works.

You can download it here: https://dl.dropboxusercontent.com/u/609785/Xojo/MHProgressCircle/MHProgressCircle.zip

Have fun. I hope you like it. :slight_smile:

Thank you Marco :slight_smile:

With GDI+ on and on the canvasses set doublebuffer on these controls don’t flicker on Windows 10, not even in fullscreen!

Great job Marco.

BTW just had to disable the declare in the open event because it’s Mac only.

Better:

#If TargetMacOS

Update!! :slight_smile:

  • Things are now Cached so the pics are only generated if a value has changed. This made a big difference. Especially with resizing.

  • I didn’t like the Smooth Factor setting so removed it. It now calculates the best smoothing option itself.
    Both on Retina and non-Retina, the edges look as sharp as (I think) possible. If anyone can get it sharper/smoother, I can’t wait to hear how you did that. :slight_smile:

https://dl.dropboxusercontent.com/u/609785/Xojo/MHProgressCircle/MHProgressCircle.zip

@Andre Kuiper: Thank you for letting me know! I’m really glad it works on Windows. Sorry for the declare. I forgot to take it out.

Works fine for me on Windows 7 and I don’t even have to useGDIPlus. Smooth circles, no flickering… excellent!

Nice! Worked on Linux Mint with no issues.

That’s great to hear. Thanks!

Thanks for this! Seems to work fine on Raspbian Jessie so I might use this for my RPi project :wink:

@Marco Hof,
Found a little issue just now when running on a RPi with a tiny 2.2"(320x240px) LCD.
The “wheel” looks great but the text in the center does barely show. The setting “mhTextAdjustPercentage” has no effect? :slight_smile:
(Sorry for the really bad photo…)

No worries. Whatever it is, I’ll fix it as soon as I get home tonight. (If you can forward me a little code snippet on what you’re doing, that would be great.)
But looking at the photo, are the edges really that grainy? That’s not good. :confused:

I’ve only copied the control over to a new project from your download :slight_smile:
It’s no rush. I replaced the text with a label.
I’m building Xojo RPi app to display current/daily/weekly water flow from a hall sensor that my parents will use in their cabin to know their water consumption. They get their water from a water well :slight_smile:

The edges look a bit grainy but that is not your control, it’s the low resolution on the 2.2" LCD :wink:
Your control looks really good on a retina display! Kudos!

Might as well release the unencrypted version so you can fiddle with the source yourself. :slight_smile:

I made a small update in the Bytecount method because Apple seems to count 1KB as 1000B instead of 1024.

Progress Circle Gauge Thingy with Source: https://dl.dropboxusercontent.com/u/609785/Xojo/MHProgressCircle/MHProgressCircle.zip

Looks good Marco. How long are you coding in Xojo ?

I for one would leave out the inner text drawing and make it optional by raising the paint event earlier
or even add a custom event drawInnerText(g as Graphics) or so.
Also a making the control transparent (inner Circle) would be good.

You’re right.
Or maybe a toggle for the text drawing so it won’t break. In one of the projects where I use it, I actually leave the text blank so it skips it. The paint event is normally fired so I used that to draw a little play triangle in it.
I will look into making the inner circle transparent as well. I like that.

Thanks for the kudos.
I consider myself a newbie. I’m using Xojo for 6 or 7 months or so. I do mainly Go(lang) but needed a quick UI for something and liked Xojo so sticked around. What about you?

I actually got inspired a while back by work you posted here. I think it was called ScopeToolbar. I liked the look and started making a modern looking button with way too many options. :slight_smile:

I never finished it though. :confused:

[quote=239537:@Marco Hof]You’re right.
Or maybe a toggle for the text drawing so it won’t break. In one of the projects where I use it, I actually leave the text blank so it skips it. The paint event is normally fired so I used that to draw a little play triangle in it.
I will look into making the inner circle transparent as well. I like that.

Thanks for the kudos.
I consider myself a newbie. I’m using Xojo for 6 or 7 months or so. I do mainly Go(lang) but needed a quick UI for something and liked Xojo so sticked around. What about you?

I actually got inspired a while back by work you posted here. I think it was called ScopeToolbar. I liked the look and started making a modern looking button with way too many options. :slight_smile:

I never finished it though. :/[/quote]

Thanks for the kudos too. I was hoping someone picks it up and gets inspired by. I like the “ToSides” animation which I actually wanted in the original version but dropped it as I think it was too much animation.

Thank you Marco for your extraordinary work! I love them, and I’ll use them very very soon!

Anyone know where this (or any other good analog gauge controls) can be found? The links are broken :frowning:

Never mind, I just bought gGauge, it’s awesome.

https://www.gate61.com/ggauge.html

Hi @Julia Truchsess,
Thanks for appreciating and for buying :wink:

Regards from Gate61,

Olivier