ui/resolution

Calculate the base rem font size.

This is how the magic happens. This accepts an optional screenType name. If one isn't provided, the currently detected screen type is used. This uses the config option orientationHandling, which when set to "scale" and the screen is in portrait orientation, will dynamically calculate what the base font size should be, if the width were proportionally scaled down to fit in the portrait space.

To use, put the following in your application code:

import ri from '@enact/ui/resolution';

ri.config.orientationHandling = 'scale';
ri.init();

This has no effect if the screen is in landscape, or if orientationHandling is unset.

Sets up screen resolution scaling capabilities by defining an array of all the screens being used.

These should be listed in order from smallest to largest, according to width.

The name, pxPerRem, width, and aspectRatioName properties are required for each screen type in the array. Setting base: true on a screen type marks it as the default resolution, upon which everything else will be based.

Executing this method also initializes the rest of the resolution-independence code.

Example:

import ri from 'enact/ui/resolution';

ri.defineScreenTypes([
	{name: 'vga',     pxPerRem: 8,  width: 640,  height: 480,  aspectRatioName: 'standard'},
	{name: 'xga',     pxPerRem: 16, width: 1024, height: 768,  aspectRatioName: 'standard'},
	{name: 'hd',      pxPerRem: 16, width: 1280, height: 720,  aspectRatioName: 'hdtv'},
	{name: 'fhd',     pxPerRem: 24, width: 1920, height: 1080, aspectRatioName: 'hdtv', base: true},
	{name: 'uw-uxga', pxPerRem: 24, width: 2560, height: 1080, aspectRatioName: 'cinema'},
	{name: 'uhd',     pxPerRem: 48, width: 3840, height: 2160, aspectRatioName: 'hdtv'}
]);

Calculates the aspect ratio of the specified screen type.

If no screen type is provided, the current screen type is used.

Returns the name of the aspect ratio for a specified screen type, or for the default screen type if none is provided.

Returns the CSS classes for the given type.

Returns the ratio of pixels per rem for the given type to the pixels per rem for the base type.

Fetches the name of the screen type that best matches the current screen size.

The best match is defined as the screen type that is the closest to the screen resolution without going over. ("The Price is Right" style.)

Returns the pixels per rem for the given type.

This will need to be re-run any time the screen size changes, so all the values can be re-cached.

Takes a provided pixel value and performs a scaling operation based on the current screen type.

Shorthand for when you know you need to scale some pixel value and have it converted to "rem" for proper scaling.

This runs ui/resolution.scale and ui/resolution.unit together.

Selects the ideal image asset from a set of assets, based on various screen resolutions: HD (720p), FHD (1080p), UHD (4k).

When a src argument is provided, selectSrc() will choose the best image with respect to the current screen resolution. src may be either the traditional string, which will pass straight through, or a hash/object of screen types and their asset sources (keys:screen and values:src). The image sources will be used when the screen resolution is less than or equal to the provided screen types.

Example:

// Take advantage of the multi-res mode
import {Image} from '@enact/ui/Image';

const src = {
    'hd': 'http://lorempixel.com/64/64/city/1/',
    'fhd': 'http://lorempixel.com/128/128/city/1/',
    'uhd': 'http://lorempixel.com/256/256/city/1/'
};
...
<Image src={src} ... />
...

Convert to various unit formats.

Useful for converting pixels to a resolution-independent measurement method, like "rem". Other units are available if defined in the ui/resolution.unitToPixelFactors object.

Example:

import ri from '@enact/ui/resolution';

// Do calculations and get back the desired CSS unit.
var frameWidth = 250,
    frameWithMarginInches = ri.unit( 10 + frameWidth + 10, 'in' ), // '2.8125in' == frameWithMarginInches
    frameWithMarginRems = ri.unit( 10 + frameWidth + 10, 'rem' ); // '22.5rem' == frameWithMarginRems