Hi Xojo Developers,
today I throw in this xojo control for free (LGPL). It is not perfect but it simply does its job in displaying percentage values on a Dashboard.
Feel free to download, improve and use in your projects. It would be great to use this thread for discussion or more improvements.
And I hope to give an example for more devs, throwing in their xojo code snippets or controls.
The Control and sample project:
Tomas, that’s really great work! Thank you for sharing!
I’m not at my MBPr right now but do you know if it looks good on retina displays?
@Albin: Neither I do have one but It should look well 'cause it’s made of Shapes.
Great! I’ll just take a look when I get home then
Again, great work!
…would be great if somebody with Retina Display could confirm this.
Nice job though on Windows there is too much flicker. I see that your technique fills the circle with a line and places a blank circle in the middle at every iteration? Why not shorten the length of the line?
I mean start at the edge and shorten the length of the line? [can’t edit]
Thank you Alexander for your Feedback. I’ve updated the control, so the flicker should be eleminated now. Also please enable GDI+ in your Win App.
Here’s what it looks like on a MacBook Pro with Retina Display!
Looks fine to me
(don’t know how this image turns out on a non-retina…)
Yes, it is ok now. Nice control. Gonna use it immediately. Thanks.
A small remark: in your demo the big chart has its label not centered correctly if the value < 100%.
Well this is might be one issue when I told “it’s not perfect”.
The Offset is due the Stringlenght of the value (3-2 or 1 digit).
It would be better to use real Pixellenght of the Text… maybe some work to fix it for you or anybody else?
Very nice, Tomas!
One easy way to deal with this is to use a stringShape passed to g.drawObject instead of a string passed to g.drawstring since the X coordinate of the stringShape is in the center of its width.
Here’s some replacement code that looks pretty good to me (at the end of DashControl.DrawCircle - “ss” having been previously defined):
// Legende in die Mitte setzen
ss = NEW stringShape
ss.Text = cstr(Me.PercentValue) +"%"
ss.Bold = true
ss.FillColor = Me.TextColor
ss.TextSize = (BG.Height) - (BG.Height/1.23)
ss.TextFont = g.TextFont
// move the text slightly to the right to account for the perceived width of "%"
ss.x = ss.TextSize/10
// move the text down because y=0 will center the baseline
ss.y = ss.TextSize/2.5
g.DrawObject(ss, self.Width/2, self.Height/2 )
// g.DrawString(cstr(Me.PercentValue) +"%", (self.Width)-(BG.Width/2.5) - (cstr(Me.ArcValue).Len+1)*(BG.Width/12), (self.Height)-(BG.Height/2.35))
(Note that I added an adjustment to the stringShape’s X and Y properties to account for the fact that the 0,0 point is at the baseline of the text and that the “%” glyph is visually narrower than its mathematical width. Those adjustments may need to be changed for different fonts and/or radically different text sizes.)
Awesome! Thank you for sharing this.
How can i make the Background of this Control Transparent when placed on a normal Window? So that on Windows and OS X, only the Arc and the Text is visible please?
Thank you guys!
@ Sascha: Well this is might be a problem. Transparency Flag seems not to work with Doublebuffered Canvas Objects. On Mac it works (see screenshot) but same on Windows and it flickers like hell. Maybe you’ll find an solution for this?
P.S. I’ve updated the .zip file
I wrote a similar control ages ago for a job. Took me ages to get it right at the time because i was just getting into rb
I didnt like the jaggedy edges of the arcshape so i drew a circle of the background color over the top of it as ovalshapes dont have jaggy edges. You need to enable gdi on windows but it makes it perfectly round.
Also you need to move the text left or right a bit if its < 10% or > 99% or the text isnt centred.
I wanted the end of the color bar to be an arrowhead but could never work out a good way to make it work.
Thank you Thomas.Not even the MBS Plugins cover this “issue”, but i will continue to dig the net for a solution