578 views
in Embedded Wizard Studio by

Hello Team,

         I have a little problem ,https://ask.embedded-wizard.de/?qa=blob&qa_blobid=16714695663402216096

        The result I need is to press tab key to make board change colors,

       in the example,you can find i need press on Tab key for a while ,it can change the board.color, 

       Or is there a better way to do that ?

Best regards,

Tonny

1 Answer

0 votes
by

Hello Tonny,

sorry, but don't understand your question: "in the example, you can find i need press on Tab key for a while ,it can change the board.color, Or is there a better way to do that ?".

Do you expect the delay and want to know how to implement it in another way?

Or,

Do you wonder about the cause of the delay because you don't want any delay?

Best regards

Paul Banach

by
Hello Paul,

      i don't want any delay.What should I do ?

    and I would also like to know what causes the delay

Best regards,

Tonny
by

Hello Tonny,

in such case please take a look at the slot method onTabKey: It contains in the first row a condition if ( !TabKeyHandler.Repetition ) .... This condition remains true unless the user holds the key for longer time (Repetition = true). In such case the condition is false and the operation in the else branch is executed changing the button color to red:

Try following:

Now, the button changes its color immediately just in the moment when you press the Tab key. See also the documentation Implement OnPress, OnHold and OnRelease slot methods.

Does it help you further?

Best regards

Paul Banach

by

Hello Paul,

       If I had to press the tab button again ,and the color change #000000FF?

       in the onTabKey Slot ,How to Correct ?

 

 

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

     in the example ,the Focused select button 1,button 2 and button 3,

one.Border.Visible = aState.contains( Core::ViewState[ Focused ]);
two.Border.Visible = aState.contains( Core::ViewState[ Focused ]);
three.Border.Visible = aState.contains( Core::ViewState[ Focused ]);

     Under these circumstances, if i want to press on Key Tab ,  it can change directly the (button 4,button 5  and button 6) color,what should i do?

Best regards,

Tonny.

 

by

Hello Tonny,

the simplest would be you toggle the color value with each Tab event. Try following implementation of the onTabKey slot method:

Additionally, in the TabKeyHandler disconnect the slot method from the property OnHold. Otherwise the button will toggle repeatedly when you hold the key pressed:

Concerning your second question, repeat the code to modify the color value for each further button. For example:

Best regards

Paul Banach

 

by

Hello Paul,

         if i want to focus three class together,https://ask.embedded-wizard.de/?qa=blob&qa_blobid=7048178447356325346

        The code :


if ( !TabKeyHandler.Repetition )
{
     //  PROC
    if(Focus == one)  
    Focus = two;
    else if(Focus == two)
    {
         Focus = four;
         Focus = five;
         Focus = six;
    }
 
    else  
    Focus = one;
}        

this right?I find this impossible !!

Best regards,

Tonny

by

Hello Paul,

      Now ,I just need to know if I can focus on three class together?

   

if(Focus == two)
    {
         Focus = four;
         Focus = five;
         Focus = six;
    }

Best regards,

Tonny

by

Hello Tonny,

as its name indicates, the focus affects only one component - literally it focuses this component for user inputs. However, since components are nested, each nesting level may have one focused component. If you look at such nested components you would recognize a kind of focus path. If you are interested in the concept of focus, I would recommend you following section Keyboard events and the focus path.

Best regards

Paul Banach

by

Hello Paul,

        How to press tab key to turn the  (button2 and button3).Border.Color = red?

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

 in the example ,I found that I can jump but I can't do it

How can I do that press on Tab Key?

step1:                                                                                                       step2:                                                                                               step3:

button1.border.color = red                                                              button1.border.color = black                                                          button1.border.color = red 

button1.border.color = black   ------press on Tab Key---------->   button2.border.color = red      ------press on Tab Key---------->  button1.border.color = black    

button2.border.color = black                                                           button3.border.color = red                                                             button2.border.color = black

I've tried a lot but I just can' t. I hope you can help me ,Thank you very much!!!

Best regards,

Tonny

by

Hello Tony,

following is the short solution for the problem based on your actual implementation:

Step 1: Navigate to the class Application::PushButton and change their the property Visible of the Border view to the value true as shown in the screenshot below:

Step 2: While the Border view is still selected, change its property Color to the value #000000FF.

Step 3: Navigate to the class Application::Application and open its method UpdateViewState. Replace the implementation of the method by following code:

// First give the ancestor class a chance to process this event.
super( aState );

Step 4: Still in the class Application::Application open its method onTabKey and replace the implementation of the method by following code:

if ( PushButton1.Border.Color == #FF1700FF )
{
  PushButton1.Border.Color = #000000FF;
  PushButton2.Border.Color = #FF1700FF;
}

else if ( PushButton2.Border.Color == #FF1700FF )
{
  PushButton2.Border.Color = #000000FF;
  PushButton3.Border.Color = #FF1700FF;
}

else
{
  PushButton3.Border.Color = #000000FF;
  PushButton1.Border.Color = #FF1700FF;
}

Your approach to modify the border color directly is not ideal. I would rethink the application case.

Analyze: You want a button that should appear with red or black border, right? The red border appears only when the button is selected. The user should be able to toggle through the buttons by pressing the TAB key. I suppose, the user will also be able to activate the just selected button by pressing e.g. OK key, etc.

If the above analyze is correct, following could be a better solution to implement such buttons:

Step 1: Add a new button component to your unit Application. Use the provided templates for this purpose. More details can be found in Creating components from templates). Following screenshot demonstrates the step:

Step 2: Double-Click on the just added PushButton component to open it. You see the implementation of this component now. For example:

Step 3: Open the UpdateViewState method of the just added PushButton component. There you see code to colorize the background and border depending on the status of the button. Modify this code as shown in the screenshot below. Here you can also adapt the behavior of the button more flexibly. You can e.g. determine which colors should be used when the button is activated (pressed), etc.:

Step 4: In your old button component (Application::PushButton) select the members Text, LabelText and OnSetLabelText. Copy the selected members by pressing the keys CTRL+C:

Step 5: Navigate to the new Push Button and paste there the just copied members by pressing the key CTRL+V. Thereupon the previously copied Text view and the LabelText property is added to the new Push Button. Adjust the size of the Text view to fill the complete Canvas area. Move the property to not overlap the existing OnActivate property.  The following screenshot demonstrates the result:

The Push Button is ready now.

Step 6: Navigate to the Application::Application class where you want the Push Buttons to appear. Being there open the UpdateViewState method and replace its implementation by code as shown below:

// First give the ancestor class a chance to process this event.
super( aState );

Step 7: Being still in the Application::Application class select the old buttons and delete them. The application should be empty with the gray background only.

Step 8: Search in the Browser window for the new created Push Button component. You can enter button in the Search field for this purpose:

Step 9: Drag&Drop the found PushButton to the Application component while holding down the CTRL+ALT keys. The following screenshot demonstrates it. More details are found in Create new embedded object:

The above operation adds a new instance of the Push Button class. Resize and arrange the button as desired.

Step 10: Repeat Step 9 if you need more buttons.

Step 11: In the Application::Application class open the slot method onTabKey and implement following code to toggle the selection over the buttons. The implementation assumes you have three buttons:

That is all. The application contains several buttons and each time you press the Tab key, the application selects the next button. The buttons are also able to react to user inputs (on the keyboard the key Enter). When you connect slot methods to the buttons, the methods are executed when after selecting the button (with the key Tab) you activate it with the key Enter.

I hope the explication helps you further.

Best regards

Paul Banach

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

...