handling key evening for multiple screens

72 views
asked Sep 18, 2019 in GUI Development by Chaitra
Hi team,

i have two GUI components and each has it its own unique Key handlers.

When a button is pressed in GUI component 1 , GUI compnent 2 will be added to main application and only key handler in component 2 works.

when i press right or left in component 2 i have to jump to GUI component 1 and the with focus on other buttons in that screen.

i am not able to forward the key event to GUI component 1.

is there a way wher this can be done?

 

Regards,

Chaitra SG
commented Sep 18, 2019 by Chaitra
hi team,

i would like add a few points for the question.

in component 2 i have given a vertical list were the selection changes on up and down key press.

Method tried:

tried to have only on key handler in my main application and keeing component 2 in main application and enabling the visiblity on button press.

in this case vertical list is not getting refreshed on up /down key press(no change in vertical list)

1 Answer

0 votes
answered Sep 18, 2019 by Manfred Schweyer

Hello Chaitra,

it is difficult to say what exactly is missing - without seeing your implementation. Maybe the following hints will help - otherwise, maybe you can provide a small example.

1.) All components that you have placed within your GUI application have to be able to react on keyboard events. Does each of your GUI components work within the Prototyper, when you load the component itself into the Prototyper?

2.) The GUI components that should react on a key event have to be a member of the focus path. Is this the case?

3.) The GUI components have to be enabled (i.e. the property Enabled has to be true).

For more details, please have a look to the chapter Handling keyboard events within our online documentation.

Best regards,

Manfred.

commented Sep 19, 2019 by Chaitra

Hi Manfred,

I have attached a sample project for reference.

the use case is as below:

 Frequently used application will be added dynamically to main screen.

 on right or left key press we need to get the next application in line and respective application should open.

use up and down key to select option from current application.

on left/right key press current application should close and next application in line should be focused.

I have attached an sample project for reference.

https://ask.embedded-wizard.de/?qa=blob&qa_blobid=1971310390454274419

Thank you.

 

Regards,

Chaitra

 

commented Sep 20, 2019 by Manfred Schweyer

Hello Chaitra,

thanks for providing the example. In order to get this working, let us implement the missing parts...

First, the GUI component that contains the vertical list, should have key event handler to react on a KeyUp and a KeyDown event. For that purpose, add two slot methods (OnKeyUp, OnKeyDown) and two KeyPressHandler (KeyHandlerUp, KeyHandlerDown).

Configure the KeyHandllerUp in order to react on the 'Up' key and connect it with the slot method OnKeyUp:

Implement the code to select the previous list item when the 'Up' key is pressed:

Configure the KeyHandllerDown in order to react on the 'Down' key and connect it with the slot method OnKeyDown:

Implement the code to select the next list item when the 'Down' key is pressed:

Now you can test the component within the Prototyper (just press 'F5') and you can navigate by 'Up' and 'Down' key inputs within your list (increase the NoOfItems to a higher number e.g. 50). Does this work?

Now you can implement a similar navigation within your main component in order to react on the keys 'Left' and 'Right'. Unfortunately I do not understand how you want to show or create the GUI components within your main screen - but the principles of navigation are the same. Please make sure that your key handler does not consume all key events (by setting the Filter to AnyKey).

Once you have shown the GUI component which contains the vertical list (your Item2), make sure that it is within the focus path:

Does it work?

By the way, you have implemented the menu buttons in a way that you control their selection state by accessing the member 'Line' from outside:

This is not very flexible and maintainable - maybe it would be better to implement them as a toggle button and use the property 'Active'.

Best regards,

Manfred

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

...