Mapp View Screen testing

Share Info & Ideas
1

Hello Community,

the following is a quick tutorial how to test different screen aspect ratios, sizes in simulation.

Introduction

When developing mappView visualizations it is sometimes necessary to start developing before actual hardware is available. There are multiple easy to use solution based on Chrome extensions but they only consider the actual screen size not the pixels per inch (PPI) for different displays.
The PPI can be calculated using the Pythagoras and the diagonal screen size:

  1. Calculate diagonal resolution in pixels

image

  1. Calculate the PPI

image

image
image887×201 58.4 KB

Solution

When calculating different PPIs for different screen the following results can be used to determine the correct emulator screen size for the used screens PPI.

For example:

Device Resolution Diagonal size PPI
Dell laptop screen 1920 x 1080 15.6” 141.22
Display monitor ViewSonic 1920 x 1080 24” 91.78
B&R panel 1920 x 1080 10.1” 218
Emulated device on Dell laptop 1247 x 701 10.1” 141.6

In order to create an emulated display close to the correct dimensions of the physical display we can simply calculate the difference of PPI between the two.

Display to be tested PPI / Available Display PPI = PPI ratio

218 / 141.22 = 1.54

Now we can scale the screen resolution to the available PPI.

Available Display Pixel width / PPI ratio
and
Available Display Pixel height / PPI ratio

1920 / 1.54 ≈ 1247
and
1080 / 1.54 ≈ 701

The resulting new display size is 1247 x 701 and still in the correct 16:9 aspect ratio but now scaled to the PPI of the Dell laptop screen.

The resulting window in Chrome is exactly 10.1” on the Dell laptop screen @ 100% zoom (see image below).

Usage

Enabling and adding emulated displays in Chrome is done through the Developer Tools (F12) or a Chrome extension.

image

Through the device bar Edit it’s now possible to add custom devices.

image
image255×792 61.8 KB

image
image1039×654 54.4 KB

Even without setting PPI accurate custom devices this is a very helpful function to test visualization for different aspect ratios especially when you trying to develop multiple sizes like discussed here Mapp View multiple display sizes

17 Likes
2

Thanks for sharing this.

I personally have always been doing that as well. Saves me time and trouble to get hardware setups with different Panel types when doing design work on mappView.

Don’t forget to set the zoom keyword to true in the vis file, otherwise it won’t scale the application to fit the new screen size.

There are many more useful ways of using the developer tools like:

  • Taking a screenshot of what the canvas is currently showing (or even screenshots of specific node elements)
  • Turning on vision deficiency mode (afaik that is only enabled by default in edge)
  • Removing specific html widget nodes on runtime to check stuff like flexboxes without having to add bindings and a demo for it
  • using the throttling functionality and setting it to mid-tier mobile to emulate a panel performance in-between T50 and T80

So everyone who has been reading this post also please check out the link to the dev tools documentation that Marcel shared. It will open up a total new world of designing and trying out things with mappView.

2 Likes
3

This is great, I had no idea about those developer tools :grimacing: