Free Control for Dashboards

  1. 4 years ago

    Tomas J

    14 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)

    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.

    -image-

    The Control and sample project:
    https://dl.dropboxusercontent.com/u/30535865/xojo/DashControl.zip

    Enjoy!

  2. Albin K

    14 Nov 2013 Europe (Sweden, Jönköping)
    Edited 4 years ago

    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?

  3. Tomas J

    14 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)
    Edited 4 years ago

    @Albin: Neither I do have one but It should look well 'cause it's made of Shapes.

  4. Albin K

    14 Nov 2013 Europe (Sweden, Jönköping)

    @Tomas J @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!

  5. Tomas J

    14 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)
    Edited 4 years ago

    ....would be great if somebody with Retina Display could confirm this.

  6. Alexander v

    15 Nov 2013 Europe (Houten, The Netherland...

    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?

  7. Alexander v

    15 Nov 2013 Europe (Houten, The Netherland...

    I mean start at the edge and shorten the length of the line? [can't edit]

  8. Tomas J

    15 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)

    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.

  9. Albin K

    15 Nov 2013 Europe (Sweden, Jönköping)
    Edited 4 years ago

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

  10. Tomas J

    16 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)

    Thx Albin...

  11. Alexander v

    16 Nov 2013 Europe (Houten, The Netherland...

    @Tomas J 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.

    Yes, it is ok now. Nice control. Gonna use it immediately. Thanks.

  12. Alexander v

    16 Nov 2013 Europe (Houten, The Netherland...

    A small remark: in your demo the big chart has its label not centered correctly if the value < 100%.

  13. Tomas J

    16 Nov 2013 Pre-Release Testers, Xojo Pro Europe (Germany)
    Edited 4 years ago

    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?

    ;-)

  14. Peter T

    16 Nov 2013 Pre-Release Testers, Xojo Pro Oakland, CA USA

    Very nice, Tomas!

    The Offset is due the Stringlenght of the value (3-2 or 1 digit).

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

  15. Philippe G

    4 Dec 2013 Pre-Release Testers

    I love you !!

  16. Joseph E

    4 Dec 2013 Pre-Release Testers CA

    Very nice Thomas!

  17. Sascha S

    4 Dec 2013 Pre-Release Testers, Xojo Pro Germany/W'haven

    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?

  18. Tomas J

    4 Dec 2013 Pre-Release Testers, Xojo Pro Europe (Germany)
    Edited 4 years ago

    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?

    -image-

    P.S. I've updated the .zip file

  19. Russ L

    4 Dec 2013 Pre-Release Testers, Xojo Pro

    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.

  20. Newer ›

or Sign Up to reply!