in GUI Development by

I have a problem with the Simple Touch Handler.

For Example I click at a distance of round about 5px outside the PushButton from Components in the Prototyper. To my own surprise the Button reacts, and I can't follow why.
In my Application with modal menus and overlapping touchhandlers it's a problem.
The deflected Touch Event bypasses my modal menu in the edge area.
How can I ensure that the Simple Touch Handler detects touch events just within its area?

Best regards,

1 Answer

+1 vote

Hello Achim,

this behavior may surprise you because you are working with mouse pointer and you expect to activate the touch handler where you did point in with the mouse pointer. However, when working with a touch screen the position is not so accurate. When the user touches the screen, the finger covers a determined screen area. This is especially problematic when the component (the button, etc.) the user intend to activate is small relative to the finger. Trying to hit the right component will become even more difficult the larger the viewing angle - in other words when the user looks from the side on the screen.

To handle such situation, Embedded Wizard implements an algorithm to find the best candidate lying within the area covered by the finger. Instead of searching for the handler exactly enclosing the touched X,Y position, Embedded Wizard searches for handlers which intersect an imaginary rectangle constructed around the touched X,Y position. Depending on the intersection area between the rectangle and the affected handler as well as other parameters the algorithm selects the best appropriate handler. The following image demonstrates the idea. Here the button is activated although the user hit on the border of the button:

The following are the possible approaches what you can do to handle with this problem:

1. If you are developing an application to run on a touch screen device, the problem should not be noticed when you interact with the application by touching the screen with fingers. On the contrary, the application should react better especially when it contains small components or when the user do not always hit inside the desired component.

2. If your application is intended to be controlled by mouse device or a pen, you can disable the above algorithm. To do this you have to modify the value of the property CursorDragLimit in your application component. The property determines the size of the above described rectangle. You can set this property to the value 0. For this purpose, open your application component im Composer, then in Inspector look for the member called this. After selecting this member in Inspector you see its properties including the property CursorDragLimit:

Hope it helps you further.

Best regards

Paul Banach

Hello Paul,

thanks for the detailed and helpful reply.

Best regards,

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint