[RESOLVED] flickering problem Button with PNG image.

[smallbit]

Hi Again,
So next riddle for you guys,
I have a button which location is changing dynamically, the button itself has a PNG image set from which some parts are transparent, and background colour is set to transparent.

Now moving the button I get the flickering issue(for some milliseconds you can see the entire button in white).

1) I tried double buffering:
Form1(void)
{
InitializeComponent();
SetStyle(ControlStyles::UserPaint, true);
SetStyle(ControlStyles::AllPaintingInWmPaint, true);
SetStyle(ControlStyles:oubleBuffer, true);
UpdateStyles();

But it gives no effect.

2)Also I used the Paint method of the button to redraw the button image but neither that one worked.

private: System::Void Button_Palanca_IZQ_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) {
g->DrawImage(image,loc);
}

3) I tried the advice from other topic to use bufferedGraphics
http://msdn.microsoft.com/en-us/libr...dgraphics.aspx
But it didn't work.

I am new to this stuff, so maybe somebody will give me a clue where to look for ?
Thanks in Advance

[Eri523]

Hmmm... I couldn't reproduce your problem here. But maybe that's due to incomplete information about what you're actually trying to do.

I have set up a toy app with a button that contains a PNG bitmap which has a transparent area. The button's BackColor can be toggled between what has been set up in the Forms Designer (didn't change the default of SystemColors::Control) and Color::Transparent. When clicked, the button traves along a circle, driven by a timer that fires at an interval of 40 ms, until it returns to its original position. The circular shape the button travels along can be visibly painted onto the form. This serves two purposes: to demonstrate that the button actually is transparent (i.e. providing something to be actually seen behind the button) and to paint something directly to the form, which is critical as TheGreatCthulhu said.

I have attached a screen shot of that toy app (sorry, it takes up a lot of screen real estate while not actually showing much content - in return it compresses pretty good... ) and these are the event handlers involved:

// Form1.cpp

#include "stdafx.h"

#include "Form1.h"

using namespace MovingButton;

System::Void Form1::button1_Click(System::Object^  sender, System::EventArgs^  e)
{
  m_dAngle = 0;
  timer1->Start();
}

System::Void Form1::timer1_Tick(System::Object^  sender, System::EventArgs^  e)
{
  if ((m_dAngle += m_dAngleStep) <= 2 * Math::PI)
    button1->Location = m_ptRotationCenter
      + Drawing::Size(m_nRadius * Math::Sin(m_dAngle), - m_nRadius * Math::Cos(m_dAngle))
      + m_szOriginVector;
  else {
    timer1->Stop();
    button1->Location = m_ptOriginalButtonLocation;
  }
}

System::Void Form1::Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e)
{
  if (chkShowTrack->Checked)
    e->Graphics->DrawEllipse(Pens::Black, Rectangle(m_ptRotationCenter - Drawing::Size(m_nRadius, m_nRadius),
      Drawing::Size(2 * m_nRadius, 2 * m_nRadius)));
}

System::Void Form1::chkShowTrack_CheckedChanged(System::Object^  sender, System::EventArgs^  e)
{
  Invalidate();
}

System::Void Form1::chkTransparent_CheckedChanged(System::Object^  sender, System::EventArgs^  e)
{
  button1->BackColor = chkTransparent->Checked ? Color::Transparent : m_clrOriginalButtonColor;
}

I didn't see anything disturbing with any of the possible combinations of settings, in particular not the button flashing up in white for a short but noticable time as you describe. I just would've expected the motion to look smoother at 25 fps.

Note that I didn't change any of the form's defaults with respect to painting (except for setting up the Paint event handler you can see in the listing) and double buffering.

Why do you have a Paint handler for the button at all? The Forms::Button class knows various ways to hold bitmaps in its original incarnation without the need to override anything.

[smallbit]

Well,
I don't need to override anything, I just tried to resolve the flickering.
When I leave it to the class itself it flickers. I read somewhere here that this is the common solution fot that.

Anyway I couldn't fix it yet, My app is quite complex already, it has many buttons and other controls, as well as Glpanel, webbrowser etc maybe this is a reason. Thus the button animation goes in 10FPS only and still flickers.

I have noticed that it might depend on the cpu "condition", when I run it fresh after rebooting it goes smoothly with almost no flicker, than after an hour or two with more apps opened it flickers more and more.

Cheers,
Smallbit

[Eri523]

Can you set up a sample app that reproduces the problem? (Please do a Clean on the project before zipping and uploading it.) If not, I could use some tips to tune my own sample app to get closer to the problem.

CPU load might be problematic when approaching 100%, especially if your app already generates much of that without the animation. Did you have a look at the CPU load generated by your animation? My demo app is somewhere around 5% on my 1.8 GHz P4.

[smallbit]

Hi Eri,
Attached you will find a small project that reproduces the problem, I have noticed that is not a problem of PNG itself, because it only happens when there is another picture below as a background.

Please check if you get it too.

Thanks.

P.S. i am running on :
Processor: Intel(R) Core(TM)2 Quad CPU Q9550 @ 2.83GHz (4 CPUs)

[Eri523]

After downloading, converting, building and running your sample project I could see myself what the problem is. The next thing I did then was adding a background bitmap to my test app as well, to see whether this would reproduce the problem, and it actually did.

The fact that I used a somewhat more traditional button design gave me some additional information. (See attached screen shot.) Obviously the button is dragging along an "echo" of itself while moving. So the problem can be narrowed down to repaintig the region of the form the button has just left. This leads me to the conclusion that just double-buffering the painting of the form itself wouldn't solve the problem. (Actually, I discovered that double-bufferig of the form is already enabled by default.) What we need is rendering both the form and the controls it hosts to a BufferedGraphics and finally blit the entire thing onto the form's surface. That way repainting of the form and the moving button would get force-synchronized.

I'm currently working on a solution to that, involving an OnPaint() overload in the form class, but that's not working yet. I'm struggling with the fact that the Control class has a DrawToBitmap() method but nothing like a DrawToGraphics(). I'll probably come up with more after I had some sleep but wanted to post a status report in the meantime.

P.S. i am running on :
Processor: Intel(R) Core(TM)2 Quad CPU Q9550 @ 2.83GHz (4 CPUs)

Well... That's probably a bit more powerful than what I have... If I get that working on my system it will certainly work on yours too.

[TheGreatCthulhu]

smallbit, you must be doing something wrong here...

This is what I had in mind:

+----------------------------+
| Form1 (normal painting)    |
+----------------------------+
|                            |
|            +-------------+ |
|            |             |........... SpititLevel Control
|            | []          | |     (not moving, custom painting: background > bubbles > frame)
|            |  .       [] | |
|            +--.--------.-+ |
|               .        .   |
|               ..................... Bubbles (can be moved/animated)
|                            |
+----------------------------+

// Intended usage (for example, from within a containing form):
// (Note: I'm not sure how your multiple bubbles are used; I'll just call them X, and Y.)
aSpititLvl->SetXBubble(0.4);    // (for example: -1 is left, 0 is level, 1 is right)
aSpiritLvl->SetYBubble(-0.12);    // (same logic...)

// (u can also use properties)

So, based on what you've said before: why would the bubbles need button-like functionality anyway?


If such functionality is not required, you can just draw the PNG image of the bubble on your user control. Keep it simple.

If it is required, Eri523's approach should work... Can you post a sample app that reproduces the problem again? I need to see what kind of flicker it is. Unless you manage to fix it after this, of course.

@Eri523:

But let me suggest an alternative approach, [...] which is completely flicker-free.

Nice! Good job.

[smallbit]

Well I have never written that this is still bubble case

This is different part already therefore I created a new thread here.
This is gonna be some sort of joystick that does two things,
- reflects the state of the game pad joystick.
- can be used as a virtual joystick using mouse.

However in the bubble case while i'm moving them there is no flicker at all although I haven't written any custom methods for that.


I adjust the sample code of the button in the panel creating flicker.

[Eri523]

Completing the changes analoguos to my suggestions in post #14 (that you already applied partially), just applying them to PanREAL instead of the form class eliminates flicker here as well.

I have attached a ZIP file containing the two modified project files (PanREAL.h and PanREAL.cpp) to this post.

This time I decided to implement the two new member functions in the .cpp file instead of the .h file to avoid the common circular inclusion problem in case you want to make the actual button click handler a member of the form class. Also, I implemented the panel's click handler as a base class method override instead of an event handler (mainly to avoid having to manually deal with delegates):

// Mouse click handler of the panel - this time implemented as base class member override

void PanREAL::OnMouseClick(MouseEventArgs ^e)
{
  // If the click hits the invisible button explicitly invoke its Click handler
  if (e->Button == Windows::Forms::MouseButtons::Left && button2->Bounds.Contains(e->Location))
    TheButtonHasBeenClicked(this, e);
    // Alternatively static_cast<Form1 ^>(Parent)->TheButtonHasBeenClicked(this, e);
    // to call an equivalent (public) handler in the form class
}

Calling the actual button click handler could also be implemented using delegates here (like the .NET framework handles this) but that would be a bit more complicated and would only gain something in case you want to reuse the panel class, because then it wouldn't need to know anything about its parent class.

Unfortunately, my IDE refused to open both the form and the panel of the converted project in design view this time. It complained about an exception of type System::Exception (huh, the most informative exception type of them all... ) having been thrown and the call stack showed lots of stuff from the Microsoft::VisualC namespace I never heard of...

The only change I needed to apply to the design was to set button2->Visible to false though, and I manually edited that into PanREAL::InitializeComponent(). For this reason the caveats I mentioned in post #14 about replacing/modifying .h files used by the Forms Designer apply even more here.

All new stuff is marked with comments beginning with *****.

[TheGreatCthulhu]

Well I have never written that this is still bubble case

()->

(translation: I made a big grin (but a sarcastic one, cause I'm actually angry.))

Why didn't you say so in the first place?! How can one provide you with meaningful help if you haven't clearly stated both what is the problem and what the requirements are?

Well, at least not all of the discussion was off-track.

[smallbit]

()->

(translation: I made a big grin (but a sarcastic one, cause I'm actually angry.))

Why didn't you say so in the first place?! How can one provide you with meaningful help if you haven't clearly stated both what is the problem and what the requirements are?

Well, at least not all of the discussion was off-track.

Well forgive me, but

Hi Again,
So next riddle for you guys,

The only thing that two examples had in common is a PNG file used. I'am sorry I thought it was clear. Anyway I described the problem precisely and upload an example recreating it, therefore i don't really understand why did you wrote that :

... if you haven't clearly stated both what is the problem and what the requirements are?

//////////////////////////////////////

The only change I needed to apply to the design was to set button2->Visible to false though, and I manually edited that into PanREAL::InitializeComponent(). For this reason the caveats I mentioned in post #14 about replacing/modifying .h files used by the Forms Designer apply even more here.

Big thanks, Now the solution is complete !!!

Thanks again guys !!!

[TheGreatCthulhu]

Well forgive me, but
The only thing that two examples had in common is a PNG file used. I'am sorry I thought it was clear.

Don't sweat it: if I meant it seriously, I wouldn't have used smilies to express it.

I somehow connected this thread to the previous one cause IIRC you mentioned that you had some flicker problems with the bubble. And a sample app did contain a bubble-like sphere; furthermore, since it was just a sample app meant to reconstruct the problem, I thought that it just had some random background.
And, yes, you did say it's another puzzle, but that doesn't automatically mean that it's not the part of the same overall problem.

Anyway, people asking questions on the forums often presume that people reading will have their mind set in a similar state, so that it is not necessary to explicitly state some things; however, this is generally not the case - people will interpret someone's words differently for various reasons. Because of that, it's best to be as explicit as possible - and not just on forums, but when discussing/documenting software in general.

[KieBenJ54]

Guys I could use some tips to tune my sample app to get closer to the problem. but that's conditional. because I have noticed that is not a problem of PNG itself, because it only happens when there is another picture below as a background.

[Eri523]

Guys I could use some tips to tune my sample app to get closer to the problem. but that's conditional. because I have noticed that is not a problem of PNG itself, because it only happens when there is another picture below as a background.

So please give us more details to get started with. What you already posted is practically nothing.

Also, chances are your concrete problem isn't really so closely related to what has been discussed in this more than one year old thread. Unless it's really quite similar, please start a new thread.