Adapt an experience for different display sizes and aspect ratios

Table of Contents

    Introduction

    The physical size of a display has no relevance for IntuiFace. IntuiFace has no knowledge of - nor needs to know - whether a display has a 12" diagonal or an 82" diagonal.

    What does matter are the number of pixels in each dimension and the resulting aspect ratio of a display.

    This article discusses how to adapt an IntuiFace experience for displays with a differing number of pixels in each dimension and thus different aspect ratios.

    What is an aspect ratio?

    For rectangular shapes - i.e. for digital displays - the aspect ratio is the ratio of the length of the longer side to the length of the shorter side.

    Consider a Full HD display. This display's dimensions, measured in pixels, are 1920 pixels wide by 1080 pixels tall. Its aspect ratio is 1920 divided by 1080, expressed as the ratio 16:9.

    The most common aspect ratios:

    • 4:3 -> iPad, both with and without the Retina display
    • 16:9 -> Most Android devices. Also widescreen televisions and most Windows PC displays
    • 16:10 -> Some Android tablets and Windows PC displays

    NOTE: Different pixel counts can have the same aspect ratio. A 2K display (1920x1080) and a 4K display (3840x2160) have the same 16:9 aspect ratio.

    Specifying the dimensions in pixels (and thus aspect ratio) in Composer

    For a new project

    Composer needs to be informed of the target display's dimensions measured in pixels. This information is requested when creating a new experience. As noted above, the aspect ratio is simply a reflection of the longer side measured in pixels divided by the shorter side.

    In the image below, the "Display size" drop-down has been clicked in Composer's "New Project" dialog. Choose a preset or scroll to the bottom of this list and use the Custom option to enter any pixel dimensions you wish, including those for multi-screen display walls.

    For an existing project

    The dimensions, measured in pixels, of a project can be changed at any time. In Composer, select the experience itself in the Scene Structure panel and open the Properties panel. Use the "Display size" drop-down to change the pixel dimensions.

    Affect on item placement within a project when changing the dimensions

    Items within an experience - e.g. assets and collections - are ignorant of that experience's dimensions as measured in pixels. All an item in an IntuiFace experience knows is its X,Y coordinates, i.e. the location of its center point within the experience relative to the upper-left corner of that experience.

    A change in the pixel dimensions of a project - its "Display size" - has no effect on those X,Y coordinates. Items are not moved to accommodate new dimensions. They are not responsive to the change.

    In the first image below, a single image is located in the bottom-right corner of a 2K experience. Using the "Display size" property of the experience, this display size was changed to 4K. Note how the image appears to have move up and to the left. In fact, it hasn't moved. Rather, its center point has retained its original X,Y coordinates.

    It is likely that after changing the display size of a project, you will have to reposition items to ensure they are are properly spaced and located.

    Special cases

    Case One: IntuiFace experience and actual display have different aspect ratios

    If an IntuiFace experience with aspect ratio A is run on a display with aspect ratio B, the experience will be letterboxed - i.e. forced to retain the original aspect ratio. To achieve this, the longer axis of the original experience will be fit within the display and the shorter axis will be placed next to blank bars. For example, in the following image, a 4:3 experience is being run on a 16:9 screen. Note the black bars on the right and left side, next to the shorter vertical axis.

    Case Two: IntuiFace experience and actual display have same aspect ratios but different pixel dimensions

    Consider an IntuiFace experience built for a 2K display but run on a 4K display. Because the aspect ratio is the same, the IntuiFace experience will still be run full screen.

    In general, it is not necessary to change the pixel dimensions of an IntuiFace experience if it will be used on displays with different pixel dimensions but the same aspect ratio.

    IntuiFace can both scale up and scale down an experience when the aspect ratio is the same but the pixel dimensions are different. When this scaling occurs, the X,Y coordinates of each item in the experience are adjusted accordingly, maintaining each item's position relative to the display and to each other.

    WARNING: Yes, IntuiFace can scale experiences when the display's aspect ratio is the same but dimensions in pixels are different. However, all media will be increased/decreased in size to match the change in scale. If the scale is increased - i.e. if a display with larger pixel dimensions is used - graphic media could become blurry if they are of insufficient quality. Thus, for example, if you want the same experience to be crystal clear on both a 2K and 4K display, use graphic media suitable for 4k displays.