Loading progress Circle?-VBForums
Results 1 to 36 of 36

Thread: Loading progress Circle?

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Loading progress Circle?

    Afternoon,

    searched the web but cannot find any type of code that will allow me to implement a loading circle. Can someone please post me some code that can achieve this?

    or can vb2008 allow me to change the look of the original proress bar?

    ta

  2. #2
    PowerPoster kevininstructor's Avatar
    Join Date
    Jun 2008
    Location
    Oregon
    Posts
    5,696

    Re: Loading progress Circle?


  3. #3

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    thanks for the link but isnt that code in C#?

  4. #4
    Hyperactive Member
    Join Date
    Jul 2011
    Posts
    278

    Re: Loading progress Circle?

    The link Kevin posted is really helpful even if it is in C#, I've previously created my own circular progress bar within VB.NET but not even considered the method he used.

    My advice rafter would be to have a go at creating the control yourself, that way you become the artist and you can make changes in anyway you like. You can use not only the method mentioned in the post, but also if you didn't know, the syntax of C# is easily converted if it's not already the same.

    If you have any problems, post here and I'll have a look for you.

  5. #5

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by OhGreen View Post
    The link Kevin posted is really helpful even if it is in C#, I've previously created my own circular progress bar within VB.NET but not even considered the method he used.

    My advice rafter would be to have a go at creating the control yourself, that way you become the artist and you can make changes in anyway you like. You can use not only the method mentioned in the post, but also if you didn't know, the syntax of C# is easily converted if it's not already the same.

    If you have any problems, post here and I'll have a look for you.
    thanks for the advice, ive tried converting it to vb.net but its way above me..

    i need to familiarize myself firstly with vb.net before anything else.

    can i have a look at the vb.net code that you did for the progress bar?

    ta

  6. #6
    Hyperactive Member
    Join Date
    Jul 2011
    Posts
    278

    Re: Loading progress Circle?

    I don't personally like gifting answers, I feel that you don't learn anything that way.

    Method:

    The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

    You then, draw a line from a point on the smaller circle to a point on the larger circle.

    Using the tick event of a timer, you can keep painting the next line on the next two points.

    For now that is your aim.

    To do that, take some baby steps:

    - Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

    - Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

    You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.

  7. #7

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by OhGreen View Post
    I don't personally like gifting answers, I feel that you don't learn anything that way.

    Method:

    The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

    You then, draw a line from a point on the smaller circle to a point on the larger circle.

    Using the tick event of a timer, you can keep painting the next line on the next two points.

    For now that is your aim.

    To do that, take some baby steps:

    - Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

    - Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

    You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.
    "You may not like the fact I'm not doing the work for you", dont worry about it.. ill see what i can do.. but thanks for your advice

  8. #8

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by OhGreen View Post
    I don't personally like gifting answers, I feel that you don't learn anything that way.

    Method:

    The idea is to draw two imaginary circles, one smaller than the other and placed in the middle of the larger.

    You then, draw a line from a point on the smaller circle to a point on the larger circle.

    Using the tick event of a timer, you can keep painting the next line on the next two points.

    For now that is your aim.

    To do that, take some baby steps:

    - Do some googling, learn how to paint a line on a form. Once you've done it, play around with changing it's colour, location etc until you're confident.

    - Make sure you know how to use a timer to move that line and draw it somewhere else. To do this, make some integer variables and use them as your x and y locations for the line, then on timer tick add 10 to the variables and redraw.

    You may not like the fact I'm not doing the work for you, but you'll learn a lot by trying the above.
    so, does the code that i right for drawing two circles go into a class that is attached to the project?

    so if when i start by drawing a line on the form, will all my drawing code go in a class or directly in my form code?
    Last edited by rafter_01; Feb 22nd, 2012 at 05:55 AM. Reason: missed q

  9. #9
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    87,829

    Re: Loading progress Circle?

    I would think that the most logical thing to do would be to create a custom control. You could inherit the PictureBox for example, which is already optimised for graphics, and override its OnPaint method to do the drawing. You then have all the logic encapsulated in a control that you can simply add to a form from the Toolbox, just like any other control. You could add logic to set the speed of the animation if you wanted and various other things like that.

    2007-2014

    Why is my data not saved to my database? | MSDN Data Walkthroughs
    MSDN "How Do I?" Videos: VB | C#
    VBForums Database Development FAQ
    My CodeBank Submissions: VB | C#
    My Blog: Data Among Multiple Forms (3 parts) | WP8 Turnstile Feather Transition with Pivot Control
    Beginner Tutorials: VB | C# | SQL

  10. #10

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by jmcilhinney View Post
    I would think that the most logical thing to do would be to create a custom control. You could inherit the PictureBox for example, which is already optimised for graphics, and override its OnPaint method to do the drawing. You then have all the logic encapsulated in a control that you can simply add to a form from the Toolbox, just like any other control. You could add logic to set the speed of the animation if you wanted and various other things like that.
    thanks for this but me bieng new to vb, would my override code go into a seperate class ?

  11. #11
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    87,829

    Re: Loading progress Circle?

    It would go in the custom control, which inherits PictureBox. You can't override a member of a class anywhere other than inside that class.

    2007-2014

    Why is my data not saved to my database? | MSDN Data Walkthroughs
    MSDN "How Do I?" Videos: VB | C#
    VBForums Database Development FAQ
    My CodeBank Submissions: VB | C#
    My Blog: Data Among Multiple Forms (3 parts) | WP8 Turnstile Feather Transition with Pivot Control
    Beginner Tutorials: VB | C# | SQL

  12. #12
    Hyperactive Member
    Join Date
    Jul 2011
    Posts
    278

    Re: Loading progress Circle?

    I would've thought creating a custom control would be a bit of a stretch for someone new to VB?

    That's the only reason I suggested a more primitive "draw it yourself" technique.

  13. #13
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    87,829

    Re: Loading progress Circle?

    It may seem like an advanced concept but the code you put in an overridden OnPaint method will be the same as the code you put in a Paint event handler, so you get a more flexible outcome from basically the same work.

    2007-2014

    Why is my data not saved to my database? | MSDN Data Walkthroughs
    MSDN "How Do I?" Videos: VB | C#
    VBForums Database Development FAQ
    My CodeBank Submissions: VB | C#
    My Blog: Data Among Multiple Forms (3 parts) | WP8 Turnstile Feather Transition with Pivot Control
    Beginner Tutorials: VB | C# | SQL

  14. #14

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by jmcilhinney View Post
    It may seem like an advanced concept but the code you put in an overridden OnPaint method will be the same as the code you put in a Paint event handler, so you get a more flexible outcome from basically the same work.
    guys im confused

    whats the difference between overriden OnPaint Method and paint event handler?

  15. #15
    PowerPoster kevininstructor's Avatar
    Join Date
    Jun 2008
    Location
    Oregon
    Posts
    5,696

    Re: Loading progress Circle?

    If you have time to create your own control as jmc recommended this would be best as you have full control over it. If instead time is important then I would use the control at Code Project. Simply compile the project which creates CircularProgressbarControl.dll and then reference this in your project, there is no need to convert this control to VB.NET as all we care about is in the end the control does what you want.

  16. #16

  17. #17
    Fanatic Member SJWhiteley's Avatar
    Join Date
    Feb 2009
    Location
    South of the Mason-Dixon Line
    Posts
    974

    Re: Loading progress Circle?

    Quote Originally Posted by rafter_01 View Post
    guys im confused

    whats the difference between overriden OnPaint Method and paint event handler?
    The OnPaint method is called when a control needs painting. This method will raise the Paint event.

    So, you can either handle the Paint event, by effectively adding an event handler, or you can override the OnPaint event. In the latter case, *your* method will be called when the control needs painting.

    If you are performing painting/drawing within the control, you will ordinarily override the OnPaint event - this will leave the Paint method to be handled exclusively by the consumer of the control (e.g. the form that the control is hosted on).

    While handling the Paint event within the control *can* work, if the consumer also handles the paint event, it can lead to unpredictable behavior (multiple consumers of an event) since the order in which the methods are called that handle the event is not strictly defined. By overriding the OnPaint event you are ensuring that your drawing in that method is performed before (or after) the event handlers. You will raise the Paint method by calling the base OnPaint method that you overrode.

    The short answer is that you will always use the (overridden) OnPaint method when drawing within your own control.
    "Ok, my response to that is pending a Google search" - Bucky Katt.
    "There are two types of people in the world: Those who can extrapolate from incomplete data sets." - Unk.
    "Before you can 'think outside the box' you need to understand where the box is."

  18. #18
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

    Stage 1. Take an image like this Name:  RotaryIndicator.png
Views: 2750
Size:  2.1 KB (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

    Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

    Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

    Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:
    vb Code:
    1. Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    2.     Private spokeCount As Integer = 14
    3.     Private angle As Single = 0
    4.  
    5.     Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    6.         Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
    7.         Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
    8.         e.Graphics.TranslateTransform(center.X, center.Y)
    9.         e.Graphics.RotateTransform(angle)
    10.         e.Graphics.TranslateTransform(-center.X, -center.Y)
    11.         e.Graphics.DrawImage(rotaryImage, drawLocation)
    12.     End Sub
    13.  
    14.     Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
    15.         angle += 360.0F / spokeCount
    16.         PictureBox1.Invalidate()
    17.     End Sub
    18.  
    19.     Private Sub StartRotaryIndicator()
    20.         Timer1.Start()
    21.     End Sub
    22.  
    23.     Private Sub StopRotaryIndicator()
    24.         Timer1.Stop()
    25.     End Sub
    26.  
    27.     Private Sub ResetRotaryIndicator()
    28.         angle = 0
    29.     End Sub
    30.  
    31.     Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    32.         If Timer1.Enabled = False Then
    33.             ResetRotaryIndicator()
    34.             StartRotaryIndicator()
    35.             PictureBox1.Show()
    36.         Else
    37.             StopRotaryIndicator()
    38.             PictureBox1.Hide()
    39.         End If
    40.     End Sub
    A few notes:
    1. SpokeCount = 14 is the number of spokes in this particular image.
    2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
    3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

    BB

  19. #19

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

    Stage 1. Take an image like this Name:  RotaryIndicator.png
Views: 2750
Size:  2.1 KB (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

    Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

    Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

    Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:
    vb Code:
    1. Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    2.     Private spokeCount As Integer = 14
    3.     Private angle As Single = 0
    4.  
    5.     Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    6.         Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
    7.         Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
    8.         e.Graphics.TranslateTransform(center.X, center.Y)
    9.         e.Graphics.RotateTransform(angle)
    10.         e.Graphics.TranslateTransform(-center.X, -center.Y)
    11.         e.Graphics.DrawImage(rotaryImage, drawLocation)
    12.     End Sub
    13.  
    14.     Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
    15.         angle += 360.0F / spokeCount
    16.         PictureBox1.Invalidate()
    17.     End Sub
    18.  
    19.     Private Sub StartRotaryIndicator()
    20.         Timer1.Start()
    21.     End Sub
    22.  
    23.     Private Sub StopRotaryIndicator()
    24.         Timer1.Stop()
    25.     End Sub
    26.  
    27.     Private Sub ResetRotaryIndicator()
    28.         angle = 0
    29.     End Sub
    30.  
    31.     Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    32.         If Timer1.Enabled = False Then
    33.             ResetRotaryIndicator()
    34.             StartRotaryIndicator()
    35.             PictureBox1.Show()
    36.         Else
    37.             StopRotaryIndicator()
    38.             PictureBox1.Hide()
    39.         End If
    40.     End Sub
    A few notes:
    1. SpokeCount = 14 is the number of spokes in this particular image.
    2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
    3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

    BB
    many many thanks for this,

    by the way how do i stop the image from bouncing? i just want it to rotate.

    now i must learn how to turn it into a custom control...

  20. #20

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    Hi rafter, it wouldn't surprise me if you are suffering from information overload. I agree with OGreen, start simple. I suggest you break it down into three stages.

    Stage 1. Take an image like this Name:  RotaryIndicator.png
Views: 2750
Size:  2.1 KB (right click to save) and get it rotating in a picture box on a form. I'll give you an example of the code below.

    Stage 2. Generate the image yourself in code, so that you can change values like the color, the number of spokes, the line thickness etc.

    Stage 3. If you want to use the progress indicator in other projects, you could consider turning it into a custom control. That's not too hard in theory -- a lot of the code will be the same as in stage1/stage2. But in practice it can be a lot of work especially if you have a lot of properties you want to expose in the designer. And there are pitfalls.

    Here's what I suggest for Stage 1. Open a form, and add a picture box(PictureBox1, Size about 50x50 pixels, BackColor = Transparent. Leave other properties at default.), a Button (Button1) and a Timer (Timer1, Interval = 100). Try the following code to start and stop rotation:
    vb Code:
    1. Private rotaryImage As Image = Image.FromFile(_image file path+name _)
    2.     Private spokeCount As Integer = 14
    3.     Private angle As Single = 0
    4.  
    5.     Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    6.         Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
    7.         Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
    8.         e.Graphics.TranslateTransform(center.X, center.Y)
    9.         e.Graphics.RotateTransform(angle)
    10.         e.Graphics.TranslateTransform(-center.X, -center.Y)
    11.         e.Graphics.DrawImage(rotaryImage, drawLocation)
    12.     End Sub
    13.  
    14.     Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
    15.         angle += 360.0F / spokeCount
    16.         PictureBox1.Invalidate()
    17.     End Sub
    18.  
    19.     Private Sub StartRotaryIndicator()
    20.         Timer1.Start()
    21.     End Sub
    22.  
    23.     Private Sub StopRotaryIndicator()
    24.         Timer1.Stop()
    25.     End Sub
    26.  
    27.     Private Sub ResetRotaryIndicator()
    28.         angle = 0
    29.     End Sub
    30.  
    31.     Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    32.         If Timer1.Enabled = False Then
    33.             ResetRotaryIndicator()
    34.             StartRotaryIndicator()
    35.             PictureBox1.Show()
    36.         Else
    37.             StopRotaryIndicator()
    38.             PictureBox1.Hide()
    39.         End If
    40.     End Sub
    A few notes:
    1. SpokeCount = 14 is the number of spokes in this particular image.
    2. The only complicated part is in the Paint event. You have to shift the center of rotation from the origin to the actual center (line 8), then do the rotation (line 9), and then shift it back again (line 10).
    3. The control is transparent, but only to its Parent control - normally the form. If you want to show it on a button, for example, you need to set PictureBox1.Parent = button and adjust the Location accordingly. This limitation applies to all transparency in Windows Forms controls.

    BB
    btw at stage 2, you mentioned changing the color, thickness etc, how would i implement this?

  21. #21
    Angel of Code Niya's Avatar
    Join Date
    Nov 2011
    Posts
    4,972

    Re: Loading progress Circle?

    Quote Originally Posted by rafter_01 View Post
    thanks for the advice, ive tried converting it to vb.net but its way above me..

    i need to familiarize myself firstly with vb.net before anything else.

    can i have a look at the vb.net code that you did for the progress bar?

    ta
    Why not simply download the one from the link and use that ?

  22. #22
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Quote Originally Posted by rafter_01 View Post
    many many thanks for this,

    by the way how do i stop the image from bouncing? i just want it to rotate.

    now i must learn how to turn it into a custom control...
    If it's "bouncing" the image must be off-center. The code works perfectly for me, and I can't see how it can go wrong unless you grabbed the image instead of downloading it. Just to be sure, I've put a zipped copy of the PNG file in the download link below. Please try with this image.

    I'll try to answer your other questions later.

    BB
    Attached Files Attached Files

  23. #23

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    If it's "bouncing" the image must be off-center. The code works perfectly for me, and I can't see how it can go wrong unless you grabbed the image instead of downloading it. Just to be sure, I've put a zipped copy of the PNG file in the download link below. Please try with this image.

    I'll try to answer your other questions later.

    BB
    oh many thanks

  24. #24

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    If it's "bouncing" the image must be off-center. The code works perfectly for me, and I can't see how it can go wrong unless you grabbed the image instead of downloading it. Just to be sure, I've put a zipped copy of the PNG file in the download link below. Please try with this image.

    I'll try to answer your other questions later.

    BB
    Ive just tried this and still the same issue. Strangley the image works fine but is flying around in circles at a steady speed....

  25. #25
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Quote Originally Posted by rafter_01 View Post
    Ive just tried this and still the same issue. Strangley the image works fine but is flying around in circles at a steady speed....
    There must be something different in your code. I wonder if you coded the Paint event handler of the Form instead of the Picture Box? If that's possible, check the Handles clause (the end of line 5 in the code I posted). Otherwise, if you have changed anything else in the paint sub, please post the code.

    BB

  26. #26

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    The code ive implemented:


    Code:
    Public Class Form1
    
        Private rotaryImage As Image = Image.FromFile("C:\Users\Downloads\RotaryIndicator\RotaryIndicator.png")
        Private spokeCount As Integer = 14
        Private angle As Single = 0
    
       
    
        Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
            angle += 360.0F / spokeCount
            PictureBox1.Invalidate()
        End Sub
    
        Private Sub StartRotaryIndicator()
            Timer1.Start()
        End Sub
    
        Private Sub StopRotaryIndicator()
            Timer1.Stop()
        End Sub
    
        Private Sub ResetRotaryIndicator()
            angle = 0
        End Sub
    
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
            If Timer1.Enabled = False Then
                ResetRotaryIndicator()
                StartRotaryIndicator()
                PictureBox1.Show()
            Else
                StopRotaryIndicator()
                PictureBox1.Hide()
            End If
        End Sub
    
        Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
            Dim center As New PointF(PictureBox1.Width / 2.0F, PictureBox1.Width / 2.0F)
            Dim drawLocation = New PointF(center.X - rotaryImage.Width / 2.0F, center.Y - rotaryImage.Height / 2.0F)
            e.Graphics.TranslateTransform(center.X, center.Y)
            e.Graphics.RotateTransform(angle)
            e.Graphics.TranslateTransform(-center.X, -center.Y)
            e.Graphics.DrawImage(rotaryImage, drawLocation)
        End Sub
    End Class
    Last edited by rafter_01; Feb 23rd, 2012 at 12:58 PM.

  27. #27
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    I'm baffled. Your code is identical to what I posted (except of course for the file path). To be sure I even started a new project in VB2008 with a copy of your code and my own original image, and the indicator turned smoothly around its center without bouncing. BB

  28. #28

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    BB,

    ive tried this on a different machine, the same code the same way but still the circle hoovers around. Also for some strange reason now the rotation is very slow...




  29. #29
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    hi rafter,

    I don't know if it will help, but could you post the code in your form's designer file? To get that, click the "show all files" button at the top of the Solution Explorer, click the + sign next to Form1.vb, and open the Form1.Designer.vb file.

    The designer file contains all the code that is generated automatically in the forms designer. It's useful to know about anyway if you want to develop your own controls.

    BB

  30. #30

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    hi rafter,

    I don't know if it will help, but could you post the code in your form's designer file? To get that, click the "show all files" button at the top of the Solution Explorer, click the + sign next to Form1.vb, and open the Form1.Designer.vb file.

    The designer file contains all the code that is generated automatically in the forms designer. It's useful to know about anyway if you want to develop your own controls.

    BB
    the code for my forms designer is:

    Code:
    <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
    Partial Class Form1
        Inherits System.Windows.Forms.Form
    
        'Form overrides dispose to clean up the component list.
        <System.Diagnostics.DebuggerNonUserCode()> _
        Protected Overrides Sub Dispose(ByVal disposing As Boolean)
            Try
                If disposing AndAlso components IsNot Nothing Then
                    components.Dispose()
                End If
            Finally
                MyBase.Dispose(disposing)
            End Try
        End Sub
    
        'Required by the Windows Form Designer
        Private components As System.ComponentModel.IContainer
    
        'NOTE: The following procedure is required by the Windows Form Designer
        'It can be modified using the Windows Form Designer.  
        'Do not modify it using the code editor.
        <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()
            Me.components = New System.ComponentModel.Container
            Me.PictureBox1 = New System.Windows.Forms.PictureBox
            Me.Button1 = New System.Windows.Forms.Button
            Me.Timer1 = New System.Windows.Forms.Timer(Me.components)
            CType(Me.PictureBox1, System.ComponentModel.ISupportInitialize).BeginInit()
            Me.SuspendLayout()
            '
            'PictureBox1
            '
            Me.PictureBox1.BackColor = System.Drawing.Color.Transparent
            Me.PictureBox1.Location = New System.Drawing.Point(81, 65)
            Me.PictureBox1.Name = "PictureBox1"
            Me.PictureBox1.Size = New System.Drawing.Size(50, 50)
            Me.PictureBox1.TabIndex = 0
            Me.PictureBox1.TabStop = False
            '
            'Button1
            '
            Me.Button1.Location = New System.Drawing.Point(182, 215)
            Me.Button1.Name = "Button1"
            Me.Button1.Size = New System.Drawing.Size(75, 23)
            Me.Button1.TabIndex = 1
            Me.Button1.Text = "Button1"
            Me.Button1.UseVisualStyleBackColor = True
            '
            'Timer1
            '
            Me.Timer1.Interval = 1000
            '
            'Form1
            '
            Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
            Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
            Me.ClientSize = New System.Drawing.Size(284, 262)
            Me.Controls.Add(Me.Button1)
            Me.Controls.Add(Me.PictureBox1)
            Me.Name = "Form1"
            Me.Text = "Form1"
            CType(Me.PictureBox1, System.ComponentModel.ISupportInitialize).EndInit()
            Me.ResumeLayout(False)
    
        End Sub
        Friend WithEvents PictureBox1 As System.Windows.Forms.PictureBox
        Friend WithEvents Button1 As System.Windows.Forms.Button
        Friend WithEvents Timer1 As System.Windows.Forms.Timer
    
    End Class

  31. #31
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Thanks. Nothing to see there, unfortunately, except the timer interval is set to 1000 which might account for the slowness on your other machine. The bouncing must be something to do with the image. I wonder whether it could be the pixel resolution? I saved the image with the default resolution (on my computer) of 120*120, but it might be a different default on your system. Would you please try changing the last line of the Paint sub to this:
    Code:
            e.Graphics.DrawImage(rotaryImage, New RectangleF(drawLocation, rotaryImage.Size))
    It's an overload of the DrawImage method that isn't affected by the pixel resolution. Does it fix the bouncing problem?

    BB

  32. #32

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    Thanks. Nothing to see there, unfortunately, except the timer interval is set to 1000 which might account for the slowness on your other machine. The bouncing must be something to do with the image. I wonder whether it could be the pixel resolution? I saved the image with the default resolution (on my computer) of 120*120, but it might be a different default on your system. Would you please try changing the last line of the Paint sub to this:
    Code:
            e.Graphics.DrawImage(rotaryImage, New RectangleF(drawLocation, rotaryImage.Size))
    It's an overload of the DrawImage method that isn't affected by the pixel resolution. Does it fix the bouncing problem?

    BB
    BB, u STAR..adding this line works perfectly. Ive changed the timer interval to 500 and runs perfectly.

    Ive also created a user control out of it.

    another Q, i want to save this user control so that all my projects can see it, is this possible?

    Many many thanks

  33. #33

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    Thanks. Nothing to see there, unfortunately, except the timer interval is set to 1000 which might account for the slowness on your other machine. The bouncing must be something to do with the image. I wonder whether it could be the pixel resolution? I saved the image with the default resolution (on my computer) of 120*120, but it might be a different default on your system. Would you please try changing the last line of the Paint sub to this:
    Code:
            e.Graphics.DrawImage(rotaryImage, New RectangleF(drawLocation, rotaryImage.Size))
    It's an overload of the DrawImage method that isn't affected by the pixel resolution. Does it fix the bouncing problem?

    BB
    forgot to ask, how would i change the color? another line of code in the Paint Sub?

  34. #34
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Well I'm glad we got that sorted. Putting the code into a user control seems like a good way of making it reusable and I have a few suggestions about that.

    As to changing the color, you could in theory do something using a ColorMatrix in the DrawImage sub, but it would take a lot of working out. I think it would easier (for me) to move on to Stage 2 where you build the image yourself in code and can choose any color. I'll go into details tomorrow (W.European time). Now where's that sleepy smiley....? BB

  35. #35

    Thread Starter
    Addicted Member
    Join Date
    Jan 2012
    Posts
    144

    Re: Loading progress Circle?

    Quote Originally Posted by boops boops View Post
    Well I'm glad we got that sorted. Putting the code into a user control seems like a good way of making it reusable and I have a few suggestions about that.

    As to changing the color, you could in theory do something using a ColorMatrix in the DrawImage sub, but it would take a lot of working out. I think it would easier (for me) to move on to Stage 2 where you build the image yourself in code and can choose any color. I'll go into details tomorrow (W.European time). Now where's that sleepy smiley....? BB
    Hey appreciate your time and help so far.

    Stage 1 was a kind of cheat for me coz you Practically did everything.

    Can we go a bit steady in Stage 2 so that any code i implement i completely
    understand it?

    Stage 1, some of the code is insane to me.... no idea

  36. #36
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    2,424

    Re: Loading progress Circle?

    Quote Originally Posted by rafter_01 View Post
    Hey appreciate your time and help so far.

    Stage 1 was a kind of cheat for me coz you Practically did everything.

    Can we go a bit steady in Stage 2 so that any code i implement i completely
    understand it?

    Stage 1, some of the code is insane to me.... no idea
    I don't know what you find "insane" in stage 1. I hope the basic idea is clear: you use the Timer1.Tick to increase the angle, then you draw the result at that angle in the PictureBox1.Paint sub. The result is a spinning image. I said that the Graphics code in the Paint event is the most difficult part, and I don't expect you to understand that if you are having difficult with other parts. So if you have any other problems, please say what they are.

    Stage 2, creating the image in code, is all graphics stuff. In principle it is the same as the code in the CodeBank example that kevininstructor linked to in page 2, although I think I can explain my version in slightly easier steps. Still, it sounds like you aren't ready to understand the details of it.

    As to Stage 3, making it into a reusable control, I think you came up with a better (or a least easier) way yourself. So first of all I'll tell you about my suggestions for the UserControl.

    1. You don't need the Button in the UserControl because that is only for testing purposes. The code for the button could go on a test form which hosts your user control.

    2. Set the Dock property of the picture box to DockStyle.Fill (you can do that in the designer).

    3. The three subs on lines 19-29 of the code I posted need to be Public instead of Private. That is so that you can call them from the form. Maybe it would be a good idea to shorten their names like this:
    Code:
    	Public Sub Start()
    		rotationTimer.Start()
    	End Sub
    
    	Public Sub [Stop]()
    		rotationTimer.Stop()
    	End Sub
    
    	Private Sub Reset()
    		wheelRotation = 0
    		Me.Invalidate()
    	End Sub
    (note: "Stop" has to have square brackets round it when you use it as the name of a sub, because it's a reserved word.) The idea is that when you put your user control onto a form, you can start, stop and reset the rotation whenever you like. Let's suppose you call your user control ProgressUC. On the form, you would use it like this:
    Code:
    ProgressUC.Show
    ProgressUC.Start
    'do long process
    ProgressUC.Stop
    ProgressUC.Hide
    I hope you can follow all this. If you want my code for designing the image yourself (stage 2) I can do that next.

    BB

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.