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.
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?
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?
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.)
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?
@ 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?
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.