Mapp View multiple displays

[c587561 (Tobias Zadravec)]

Hello everyone!
I am looking for advice in mapp view visualization, how to display it on multiple screens.

• First of all, I would work on the visualization on two screens that are of different sizes. One is 1280x800 and the other is 1920x1080. Pages or the visualization would be the same, only the difference in the size of the screens.
• As another or as an upgrade, I would like to be able to show on one of the screens only a portion of the pages that I choose to be suitable for display on the other screen. Prepare one main screen and one secondary screen.
  I am asking for configuration advice, maybe also from B&R help for links that would help me with implementation.

Thanks for the tips!

[marcel.voigt]

@c587561 Tobias,

Great question!
As usual there are many different ways you can go about this but I’m going to use the Mapp Framework as my base for my example. If you haven’t already please check out.

The mappFramwork visualization is actually based and sized for your 1280x800 HMI. In order to make using the framework easy for other size especially different aspect ratios we only use one page and reference the different content into the specific area.

Step 1 would be to create a new layout which is the base for your pages size and aspect ratio.

In the mappView folder under Layouts create a new layout called HDpage layout with an overall size 1920x1080. Inside that layout I have two areas, the same areas with the same size as in the default StandardPage layout.

Step 2 create a new page under Visualization>Pages

Lets set the page layout reference to the HDpage layout we created in Step 1.

The HD page now looks like this in comparison to the default Demo page

Now we assign the same content from Demo page into the same areas of the HD page.
AreaContent > Help_content
AreaNavigation > Navigation_content

Step 3 is to create a new Visualization / .vis file so you have a new visualization ID for your HD page. I copied the Vizualization.vis file from the framework, renamed it,changed the id to HDvis and replaced the Demo_page with HD_page

Now you have two visualizations, one for 1280x800 and aspect ratio 16:10 and a second 1920x1080 with a 16:9 aspect ratio.

Since the mappFramework vis is the default vis assigned you see that when loading from localhost

If you now add “/HDvis” you see the second visualization you just created

You can see the difference between the two. Same content loaded into the same size area creating a lot of white space around the content on the HDvis.

B&R mappView Help - Designing a page

This setup now allows you to use the same content for both size visualizations.

As mentioned the navigation is a bit different with this approach. Instead of changing pages you are just changing content on the active page. This is done with an LoadContentInArea action because of that you two sets of eventbindings. For this example you need two navigation eventbindings one for Demo_page one for HD_page, I hope this makes sense.

Some additional notes. In order to fill out the space on the HD_page you simply increase the size of the area while maintaining the aspect ratio. Doing so results in bigger coverage on the vis.

[c587561 (Tobias Zadravec)]

Thank you. Very nice tutorial. It helped a lot. I have one additional question about resizing. What would be solution for linear scaling from 16:10 (1280x800) to 16:9(1366x768 or 1920x1080). I want to create flexible visualization so if customer chooses for example smaller/larger display then I don’t need to resize every page.

[marcel.voigt]

@c587561 Tobias,

glad to hear you found it useful!

I just created a new post how to test different screen aspect ratios and sizes in simulation here mappView Screen testing

In general mappView can scale with the same aspect ratio automatically. To do so you need to add the “zoom” property and set it “= true” into the configuration of the mappView .vis file. mappView will also zoom and scale to different aspect ratios but just like watching an old movie on an HD TV you will get bars on the the sides or top/bottom because the content will stay true to it’s original aspect ratio.

You also need to consider that a visualization developed for a small screen, lets say 10" will look massive on a 24" screen and vice versa widgets sized for a 24" screen will look tiny on a zoomed out 10" screen. If you have an application which such a large size spread you can either develop the content on a 18" screen so it will look slight bigger on 24" and slightly smaller on 10" or really develop 2 separate pages on different layouts.

mappView configuration