Navigation Button indicates Category

Ask Questions HMI & Visualization
1

Hello B&R community,

I am working with mappView V.6.7.0 and Automation Runtime V.6.5.2.12.

I would like to create a simple, performant visualisation where I have a permanent navigation menu on the right-hand side with four navigation buttons, each representing a category.
When the linked ‘main page’ of the category is opened by clicking the first button, the button is displayed with the ‘checkedBackColor’ background colour. If I then navigate to a subpage, the button is displayed with the ‘backColor’ again. Is it possible to configure this so that ‘checkedBackColor’ continues to be displayed as long as the user remains on a specific subpage within the category?

Alternatively: What is a more efficient way to implement this behaviour?

Thanks,
A.Lehner

2

Hi Andreas, welcome to the B&R Community!

There is a property for navigation button called “isToggle”

The help states the following:

Defines whether the NavigationButton works as a ToggleButton. A ToggleButton can only be reset by any other widget NavigationButton.

If the same NavigationButton widget is pressed, it will no longer be colored as checked; however, the page will not change.

If the NavigationButton should not be a ToggleButton, then the color of the NavigationButton associated with the currently displayed page does not change.

The other option and I’m not sure if you are already using it is to place all navigation buttons inside a NavigationBar. That will help control which button is pressed and reset when another navigation button is pressed.

Please check out those option and see if they help.

3

Hello Marcel,

thanks for the warm welcome – I’m excited to be part of the B&R community. Thanks for the quick reply to my first post. I’ve tested the property you suggested. Unfortunately, the description here isn’t correct and the actual behaviour differs at least in my version.

In my case, it behaves as follows :

ToggleButton.isToggle = True: When the button is clicked, it becomes active (by ‘active’ I mean that the ‘checkedBackColor’ is displayed) and navigation to the linked page takes place. If I then click it again, the button remains active and does not become inactive as described in the help secti on

ToggleButton.isToggle = False: When the button is clicked, it does not become active and navigation to the linked page takes place. If I click it again afterwards, the button remains inactive.

It appears that the navigation button corresponding to the currently displayed page is always shown as active, regardless of whether the navigation buttons are contained within a navigation bar or not.

To illustrate once again what I need:

- Navigation bar with two buttons: ‘System’ and ‘Diagnosis’

- Pages: ‘System’, ‘System_ChangeSpeed’, ‘System_SetSpeedlimit’ and ‘Diagnosis’

- If I click the ‘System’ button, I want to display the ‘System’ page

- If I click the ‘Diagnosis’ button, I want to display the ‘Diagnosis’ page

- If I click a button on the ‘System’ page to change the speed, I want to display the ‘System_ChangeSpeed’ page but keep the ‘System’ button active (because it is a subpage o f ‘System’)

- If I click a button on the “System” page to set the speed limit, I want to display the “System_SetSpeedlimit” page but keep the “System” button active (as it is a subpage of “System”)

- I do not want to use the “TabControl” widget due to high performance requirements

Many thanks in advance for your help

4

Andreas,

I’ll try and provide you with a solution in the meantime you mentioned you don’t like to use the TabControl because of the performance concern.

I agree with you in general but we can use it without a performance penalty by using ContentControl under each tab. Doing that will only load the content assigned to the ContentControl when the given tab is active unlike the regular tab control.

The new mappView templates in AS6 make use of this concept throughout. There is a management content assigned to the page with TabControl but each tab only calls ContentControl. For each tab there is then a dedicated content assigned to each ContentControl per tab.

image
image2286×862 136 KB