[RESOLVED] Prevent flicker

[krtxmrtz]

I have an image control sitting on a picturebox. The picturebox contains the plot of a function y=f(x) and the image control has a small transparent picture representing the orientation of the axes, like this:



I sometimes drag it around if it is covering some relevant part of the graph and the problem then is it does flicker somewhat.

What would the best way be to avoid that flicker?

[Nightwalker83]

How are you updating the picture?

[krtxmrtz]

How are you updating the picture?

PictureBox.AutoRedraw = True

[jmsrickland]

I don't think AutoRedraw = True has any effect on your image control. AutoRedraw only has effect on the picturebox's picture like when you are drawing to the picturebox but not other controls. I'm not sure how to avoid flicker as I have same problem with my project where I am manually moving controls.

[passel]

An Image is a lightwight control, which means its contents are drawn on its container, it does not have its own window handle.
So, it has to erase a portion of the underlying container image, have the image redraw itself, and then it draws on top of that.
There isn't any way to stop that flickering since you don't control the redraw cycle of the image.
In the past, I've placed the transparent image into two non-visible pictureboxes, one with a black background and one with a white background. I could then use bitblt with the AND rasterOP using the White background source, and the OR rasterOp on the Black background source to draw the image on the visible picturebox. That way you can control the update and eliminate the flicker.
I looked around and found an old example (from 2006) that is sort of example of the principle. I'll attach it.
If you click the button it draws random color circles in a black picturebox and a white picturebox (the black picturebox is visible so you can see the circles (unless they're black, which you would see on the white background box).
If you drag around on the form, you'll see that pattern of circles dragged around, with transparency in the non-circle areas.
When you release, the circles are made a permanent part of the background, but in your case you wouldn't want to do that.

[passel]

A quick look at something more like you would want, you can remove the MouseUp event handler, and copy the "Erase" line into the MouseDown event handler.
This allows erasing the existing object and moving it (or a newly generated one) to another area.

The code works by having another copy of the background so that it can be used to erase the "foreground" object whenever you need to move it to another location.

The updated code (for the project attached in the previous post):

Option Explicit
Private Declare Function BitBlt Lib "gdi32" (ByVal hDestDC As Long, ByVal X As Long, ByVal Y As Long, ByVal nWidth As Long, ByVal nHeight As Long, ByVal hSrcDC As Long, ByVal xSrc As Long, ByVal ySrc As Long, ByVal dwRop As Long) As Long
Dim xl As Single, yl As Single

Private Sub Command1_Click()
  Dim i As Long, r As Single, X As Long, Y As Long, c As Long
  Picture1(0).Cls
  Picture1(1).Cls
  
  For i = 0 To 20
    r = 30 * Rnd
    X = r + (Picture1(0).ScaleWidth - 2 * r) * Rnd
    Y = r + (Picture1(0).ScaleHeight - 2 * r) * Rnd
    c = QBColor(14 * Rnd) + 1
    Picture1(0).FillColor = c
    Picture1(1).FillColor = c
    Picture1(0).Circle (X, Y), r
    Picture1(1).Circle (X, Y), r
  Next
End Sub

Private Sub Form_Load()
  Picture2.Picture = Me.Picture
End Sub

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  BitBlt Me.hDC, xl, yl, Picture1(0).ScaleWidth, Picture1(0).ScaleHeight, Picture2.hDC, xl, yl, vbSrcCopy 'erase
  BitBlt Me.hDC, X, Y, Picture1(0).ScaleWidth, Picture1(0).ScaleHeight, Picture1(0).hDC, 0, 0, vbSrcPaint
  BitBlt Me.hDC, X, Y, Picture1(1).ScaleWidth, Picture1(1).ScaleHeight, Picture1(1).hDC, 0, 0, vbSrcAnd
  xl = X: yl = Y
  Me.Refresh
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  If Button = 1 Then
    BitBlt Me.hDC, xl, yl, Picture1(0).ScaleWidth, Picture1(0).ScaleHeight, Picture2.hDC, xl, yl, vbSrcCopy 'erase
    xl = X: yl = Y

    BitBlt Me.hDC, xl, yl, Picture1(0).ScaleWidth, Picture1(0).ScaleHeight, Picture1(0).hDC, 0, 0, vbSrcPaint
    BitBlt Me.hDC, xl, yl, Picture1(1).ScaleWidth, Picture1(1).ScaleHeight, Picture1(1).hDC, 0, 0, vbSrcAnd
    Me.Refresh
  End If
End Sub

'Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
'  BitBlt Picture2.hDC, xl, yl, Picture1(1).ScaleWidth, Picture1(1).ScaleHeight, Me.hDC, xl, yl, vbSrcCopy
'End Sub

[jmsrickland]

@passel

I understand what you are saying about the Image Control but in my case I am using a UC that has the shape of the image I want to move from one point to another. I do not drag the control but rather I mouse down on it which the UC switches pictures from the regular image to the same image but it is highlighted. (The UC has two StdPictures, one that shows the image as not selected and the other as selected). To move the image I then mouse down on the area where I want the image moved to. This all works very well except for when I mouse down on the UC I see a very fast flicker flash and then dissapears. It doesn't flicker every time I mouse down on it but it does it enough that it becomes a problem. Have no idea what so ever how to avoid this.

[passel]

I read that if you set the User Control to a windowless control with transparent background it should eliminate the User Control flickering, but I've never used User Controls, and trying to build one quickly to test doesn't seem like a straight forward thing to do.
I'll have to scrape together some time another day, perhaps in a few months when things slow down, to try and remedy my lapse in knowledge about vb6 user controls.
I guess why I haven't used user controls is because I started doing graphical type controls on systems before we had controls, so drew everything ourselves and tested mouse hits of rectangles and maintained z-order in our own structures.
So, in VB, for more graphical type objects to be drawn and moved around, I just did the same thing.
An example of that is a small project I put together as an example for someone who was writing a "game" for their two year old daughter.
They wanted to click on an object to "pick it up" and have it follow the mouse and click again to "drop it".
They also wanted the "drawing" area to be bigger than the window, but have it scroll automatically as the mouse moved around the drawing, rather than have the user (a toddler), have to use scroll bars or other actions to move the picture.
I put together an example of one way to accomplish some of those things. I'll attach that code here in case there might be some interest in looking at it, but I'm not suggesting it as a solution to any specific need.
Another person on the other forum wrote an object oriented (with classes) version of the example as an exercise in implementing the objects and linked lists using class objects, rather than an array of UDTs as I did.

[krtxmrtz]

@passel

Thanks for a clear explanation of how the image control works. Indeed, I thought I might end up using some sort of bitblt'ing but I first had to make sure there wasn't any more straightforward way with the image control.

Thanks also for the nice exaples you've posted, I'm sure they'll make things easier for me.