"Lazy" interface when using graphic buttons

koppel · Feb 10th 2011

We have written software where we are using graphic buttons. Of course, windows CE does not have graphic buttons build in. So we have to create our own control based on generic Control Class. The problem is now that when somebody click on that control, there is a moment, about 0.25-0.5 second, when whole interface hangs. It is really stressful for operator.
We was trying to turn off redrawing methods, to check if there is some problem with speed there, but even when control is not redraft, there is still interface hang after pressing the control.

We was also testing openNetCF, Button2 control, but the result is the same:
<a class="postlink" href="http://www.opennetcf.com/Products/SmartDeviceFramework/tabid/65/Default.aspx">http://www.opennetcf.com/Products/Smart ... fault.aspx</a>
When we are using normal buttons, there is not a problem. Did you meet problem like this? Is there any solution?

The interface does not have to be extremely reactive. But it is very annoying that it does not remember user "clicks" when it hangs. I mean, if I am using software keyboard, and choice 12345 quite fast, it just react for 1 3 and 5.

fs-support_HK · Feb 10th 2011

Are you using standard C/C++ or C#/VB on .NET?

Can you show us the generic skeleton of your code for the control? Or even the whole control? Usually such problems are the result of not understanding the event character of the windowing system. For example you are only allowed to draw if you get the appropriate paint event. And as long as you are inside of your function, nothing else happens in the GUI because all other events will only be handled after you return from your function. So for example if you draw the button in some "depressed" state, wait for a while, and then redraw the button again in a "released" state, all without returning from the paint()-function in between, then you have exactly the behavior that you are describing.

milan99 · Feb 10th 2011

We are (me and koppel) using C# on .NET.

Code of the graphic button:

Code

public partial class ImageButton : Control
{
#region Attributes
protected Image image;
protected Image selectedImage;
protected bool isPushed;
protected Bitmap m_bmpOffscreen;
protected String imageUrl;
protected String selectedImageUrl;
protected Boolean autoPushed = true;
protected bool autoSize = true;
protected bool drawPushedRect;
#endregion
public ImageButton()
{
}
#region Accessors
/// <summary>
/// Gets or sets image of the button.
/// </summary>
public Image Image
{
get { return this.image; }
set
{
this.image = value;
if (autoSize)
{
this.ClientSize = new Size(image.Width, image.Height);
this.Width = image.Width;
this.Height = image.Height;
}
}
}
/// <summary>
/// Gets or sets image of the selected button.
/// </summary>
public Image SelectedImage
{
get { return this.selectedImage; }
set { this.selectedImage = value; }
}
/// <summary>
/// Gets or sets image's relative url of button.
/// </summary>
public String ImageUrl
{
get { return this.imageUrl; }
set
{
this.imageUrl = value;
string ExecutionPath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase);
Image = new Bitmap(ExecutionPath + value);
Invalidate();
}
}
/// <summary>
/// Gets or sets image's relative url of selected button.
/// </summary>
public String SelectedImageUrl
{
get { return this.selectedImageUrl; }
set
{
this.selectedImageUrl = value;
string ExecutionPath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase);
SelectedImage = new Bitmap(ExecutionPath + value);
Invalidate();
}
}
/// <summary>
/// Gets or sets image's auto pushed
/// </summary>
public bool AutoPushed
{
get { return this.autoPushed; }
set { this.autoPushed = value; }
}
/// <summary>
/// Gets or sets pushed state
/// </summary>
public bool IsPushed
{
get { return this.isPushed; }
set { this.isPushed = value; }
}
/// <summary>
/// Gets or sets autosize flag
/// </summary>
public bool AutoSize
{
get { return this.autoSize; }
set { this.autoSize = value; }
}
/// <summary>
/// Gets or sets a value that indicates whether pushed rectangle should be drawing
/// </summary>
public bool DrawPushedRect
{
get { return this.drawPushedRect; }
set { this.drawPushedRect = value; }
}
#endregion
#region Paint methods
/// <summary>
/// Raises the System.Windows.Forms.Control.Paint event.
/// </summary>
/// <param name="e"></param>
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
Graphics g = e.Graphics;
Clear(g);
DrawImage(g);
}
private void Clear(Graphics g)
{
g.Clear(this.BackColor);
g.FillRectangle(new SolidBrush(Parent.BackColor), this.ClientRectangle);
}
private void DrawImage(Graphics g)
{
if (image != null)
{
//Center the image relativelly to the control
int imageLeft = (this.Width - image.Width) / 2;
int imageTop = (this.Height - image.Height) / 2;
Rectangle imgRect = new Rectangle(imageLeft, imageTop, image.Width, image.Height);
if (isPushed && drawPushedRect)
{
imgRect.X++;
imgRect.Y++;
}
Image img = isPushed && selectedImage != null ? selectedImage : image;
g.DrawImage(img, imgRect, new Rectangle(0, 0, image.Width, image.Height), GraphicsUnit.Pixel);
}
}
/// <summary>
/// Paints the background of the control.
/// </summary>
/// <param name="e"></param>
protected override void OnPaintBackground(System.Windows.Forms.PaintEventArgs e)
{
}
#endregion
#region Mouse events
/// <summary>
/// Raises the Windows.Forms.Control.MouseDown event.
/// </summary>
/// <param name="e"></param>
protected override void OnMouseDown(System.Windows.Forms.MouseEventArgs e)
{
if (autoPushed)
{
isPushed = true;
this.Invalidate();
}
}
/// <summary>
/// Raises the Windows.Forms.Control.MouseUp event.
/// </summary>
/// <param name="e"></param>
protected override void OnMouseUp(System.Windows.Forms.MouseEventArgs e)
{
if (autoPushed)
{
isPushed = false;
this.Invalidate();
}
}
#endregion
}

Display More

fs-support_MK · Feb 10th 2011

Is this bad response independet from using a mouse or touchscreen?

koppel · Feb 10th 2011

We are using touchscreen only. We can hear the "click" from system, but there is no reaction.

fs-support_HK · Feb 11th 2011

Is the delay always the same? Or is it only if you press a button for the first time? Because then it could be that loading of the image takes some time. The second time you press the button, the image is already loaded and available in RAM.

milan99 · Feb 12th 2011

Delay is always the same. If we are using ImageButton based on generic Control and we are displaying button with only a text, we have delays too.
Here is the sample application.

fs-support_MK · Feb 14th 2011

It might be possible that the graphical power of PicoCOM2 is at it its limit here. Depending of the progress of your project the PicoCOM4 will be an alternative. PicoCOM4 is designed to replace the PicoCOM2 with the benefit of more computing power (240MHz -> 400MHz). By default PicoCOM4 also features more memory (64MB RAM and Flash by default).
And additionally PicoCOM4 includes 2D support, which will surely be a benefit for your application (GUI).

PicoCOM4 will be available after Embedded World2011 (beginning of March).

BTW: Have you already thought about using Silverlight technology in your application development? Especially in graphical user interfaces SIlverlight/XAML offers a new and powerfull possiblity on Windows CE 6.0 R3.

Share