Designing One mappView HMI for Displays with Different Aspect Ratios

Hi,

I’m working on a project with mapp View, and I have two types of PLCs, a PC2200 and a C50. I want the same HMI for both displays but don’t want to create different layouts and pages for each screen.

The problem is that the PC2200 and C50 have different aspect ratios. If I design an HMI for the PC2200, when I load the same HMI on the C50, a cut appears at the bottom of the screen.

Does anyone know if there’s a way to do this?

Thanks!

can anyone help @TiagoDomingos?

Hi Tiago,

My first thought would be to enable the “zoom” property in the .vis file. You can then set the zoomMode for each page. Have you tried this?

Hi Marcus,

I already tried that, but the problem is that my layout was designed for a PC2200 with a width of 1920 and a height of 1080. However, the C50 has a width of 1280 and a height of 800, and the same layout doesn’t adjust to fit the screen properly on the C50. Is it possible to change the layout at runtime?

Tiago,
the only real way to do this is by creating pages with specific layouts for each aspect ratio and no unfortunately you cannot change the aspect ratio on the fly so to speak.

A case like yours is the reason I personally prefer using content loading with a single page instead of page navigation because it allows you that freedom without duplicating every page for every aspect ratio.

For example I made a sample project that supports our 4 main aspect ratios

16x9 - 16x10 - 5x4 - 4x3

The areas within each layout are of equal size that means I can reuse all content for each of the different visualizations.
In the configuration I have 4 .vis files reach referencing a single page representing the given aspect ratio.

All bindings are the same except for the eventbindings controlling the content loading since that now is depended on the active page. Each eventbinding is pretty much the same one the page reference changes.

As last step you can now configure the RedirectConfiguration that allows the system to select the correct vis based on different parameters like aspect ratio.

4 Likes

Hi Marcel,

Your suggestion worked for me! I only need to adjust my containers to work on both displays. Fortunately, I prefer my HMI, like yours, with just one page and containers, which really helps in this case.

Thanks for the help.

2 Likes