@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.
