Why is Menu not showing up in sliding panel ?

Question

I have developed a GUI application for Raspberry Pi.
It has 3 sliding dialogs or panels that move in a way similar to the example SolarDemo.
The first two panels have toggle switches that control relays.
The third panel is just a place holder, it has a text message.
This all works very well.

But now I want to put the third panel to work.
To my Application unit I add a Menu class derived from Templates::Menu, a MenuItem class derived from Templates::MenuItem,  and a MainMenu class derived from Application::Menu.

In class Main Menu I added 2 menu items. I just call them Item1 and Item2 for now, they do nothing.

I added an object MainMenu to my third panel..  It shows up in the canvas.

But here are my 2 problems.
1) no matter where I position the menu object on the canvas, when I run Build/Start Prototyper (F5) to test this panel on its own, the menu always shows up exactly in the middle of the screen.

2) when I run Build/Start Protyper with Application class (ctrl+F5) to see the whole thing run, the menu does not show up at all.

As a test I added the menu to my first panel instead, the one that is visible at the start, and when I do that and run the program the menu shows up and slides with the first panel as expected.  But it is still in the exact middle of the screen. And I dont really want to make the menu panel the first panel.

As another test I put some buttons on the third panel, and they show up and move with the panel as expected.

I have tried changing the alignment settings but that seems to make no difference.

Why cant I put this menu on the third panel ?  
Why cant I move it to a location of my choice ?

Robert.

Answer 1

Hello Robert,

I have understood you have created a menu based on the Menu component template, right? In such case please take a look in the implementation of the Menu class. There you see the method autoResize. This method implements code to adjust the size of the menu so that it is large enough for the contained items and it calculates the position where to show the menu. The default implementation centers the menu. This method is intended to be adapted according to your own layout expectations:

When you open the method in the Code Editor, you see in the last row following code to change the size/position of the menu. Depending on your layout rules how you want the menus to appear on the screen, you can adapt this implementation:

For example, if you don't want the menu to change its position, modify the row as follows. It adjusts the size of the menu only. Please note, that in this case and depending on the number of menu items the menu may appear partially outside the screen. So in practice it should always be a kind of position alignment:

Concerning your second question, it is difficult to say, why the menu is not shown. May be you can upload an example demonstrating this issue and we will analyze it?

Best regards

Paul Banach

Comments

Paul
Thank you for the reply.
I understand the autoresize now and it explains why the menu is always centered.  I may change that code later or I may decide I like the menu centered afterall.

I have uploaded a simplified version of my project which you can examine.

I am not sure if I need to upload the entire folder or just the ewp file. Let me know If I need to upload more.

I also tried adding a menu to the example project SolarDemo, which has sliding dialogs.
And it showed the same problem.

The first picture shows what happens with  Build/Start Prototyper (F5).  The menu is there and I can click the items.

But when I run Build/Start Protyper with Application class (ctrl+F5) to see the whole thing run, the menu does not show up at all.

It does show up if I add it to the first dialog (Stereo::dlgPower) instead of either of the other two.

I also tried adding a menu to the example SolarDemo.  And it gives me the same problem.

Does this have anything to do with the SlideTouchHandler ?https://ask.embedded-wizard.de/?qa=blob&qa_blobid=7258185560569466718

Thanks
Robert 

---

The more I think about it I think you must need the entire folder.  

So here it is.

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

---

Hello Robert,

it seems, the menu is not part of any GUI component. Accordingly it is not used in the project and it is not shown. Assuming you want the menu to appear in the Stereo::dlgPower component, try following:

1. In the Navigation Bar switch to the Stereo::dlgPower class.

2. Switch to the Browser window on the left side of the Embedded Wizard.

3. In the Browser window look for the Application::MainMenu class. It represents the menu. You can use the 'Search ...' edit field in the upper area of the Browser window to find the right class. For example, enter in the search edit field 'menu'.

4. While holding down the keys CTRL + ALT pressed, click with the mouse on the Application::MainMenu item and drag it to the Composer. Release the mouse and then the keys CTRL + ALT.

Following figure illustrates the steps. Theser are also explained in the article Create new Embedded object:

Now, when you start the prototyper for the entire application (Ctrl+F5), the menu appears embedded within the dlgPower component. You can interact with the menu and you can slide horizontally the dialogs:

Does it solve the problem?

One hint more:

You created the menu from a template. This is the right way. Then you have added two menu items to the just created Application::MainMenu class. If you don't plan to create more menus, it is ok. However, If you plan to create more menus, you would need to duplicate the implementation of the menu class for each of them. Try following:

1. Remove again the both items from the class Application::MainMenu. The component should appear without any menu item inside it as shown below:

2. Switch to the Application unit. And being there select and rename the class MainMenu to something more generic, e.g. Menu.

The resulting class Application::Menu serves thereupon as a generic base class for all menu components you plan to create in your application.

3. Derive a new class from the Application::Menu class. For this purpose, you drag&drop the class Menu while holding down the keys Ctrl + Shift. This creates a new class named per default Main1 as shown in the screenshot below:

4. Rename the derived class Menu1 to e.g. MainMenu.

5. Open the derived class by double clicking on it. New Composer page appears.

As you see the derived class does not contain any Bricks to implement the menu functionality. This functionality is inherited from the base class Menu. Now you can add menu items to the derived class similarly as you added the menu items to the 'old' MainMenu class. 

6. Wherever you want the derived menu to appear create an instance of it as shown at the beginning of my answer above.

The advantage of this approach is, you can derive more menu classes. All menu classes will inherit the functionality from the generic base class Menu. No duplication of the functionality is found reducing so the code size of your application. Later if you decide to change some functionality of your menus you do this in the base class Menu only and all derived menu classes are automatically affected by this modification.

I hope this helps you further.

Best regards

Paul Banach

---

Paul
Thank you for looking at my project.

But this does not solve my problem.

I already know I can add the menu to the dlgPower component.  This is what I meant in my post when I said it worked when I put it in the first dialog, but not when I put it in the third.  I mean the first dialog in the slider carousel as opposed to either the second or third one.

I want the menu in the third dialog.  My reason is that it will be rarely used.

I dont understand when you say the menu is not part of any GUI component.  It is part of  Stereo::dlgMenu , the item called TheMenu, class type Application::MainMenu.

I added it by dragging the Chora Template "Class" onto the composer, then setting the Class type to Application::MainMenu.  I think this is the same thing as doing it your way, but just in case I removed it, then added it back in your way, that is from the browser.

And of course it is the same result.
When I add the menu component to the second or third dialog ( dlgMenu or dlgAmpSpkr ) it shows up in the prototyper for the dialog alone (F5), but does not show up for the full application (ctrl-F5).

I dont have this problem with other components such as buttons or text boxes.  They show up OK on the second and third dialogs.  Only the menu component is a problem.

Robert.

---

Hello Robert,

you are right. How embarrassing. I messed up something and followed the wrong path too soon. I'm sorry. Now, I think I have found the cause of the problem. Please take a look at the implementation of the method autoResize within the class Application::MainMenu.. In its last row the method calculates the position and the size for the menu:

The in the template implemented calculation assumes that Owner component will fill the screen and it will be arranged at position 0,0. However, at the startup time of your application the dlgMenu component is arranged outside on the left of the screen. As consequence the calculated position for the menu is negative too. The menu is invisible therefore.

Try the following modification. The difference is the additionally used orect instant property. This modifies the calculation so that it will ignore the position of Owner component. It calculates only with the size of the Owner:

Does it solve the issue?

Concerning your other observations:

I added it by dragging the Chora Template "Class" onto the composer, then setting the Class type to Application::MainMenu.  I think this is the same thing as doing it your way, but just in case I removed it, then added it back in your way, that is from the browser.

Yes, the effect is the same.

I dont have this problem with other components such as buttons or text boxes.  They show up OK on the second and third dialogs.  Only the menu component is a problem.

This is because the problem results from the position calculation in the menu class. Other components (buttons, text boxes, etc.) do not calculate this position.

I hope it helps you further.

Best regards

Paul Banach

---

Paul

Yes, that works perfectly now.  

I understand now why it was not showing up on 2nd or 3rd dialog.

Thank you for the explanation.