as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート
アクセスいただきありがとうございます。こちらのページは現在英語のみのご用意となっております。順次日本語化を進めてまいりますので、ご理解のほどよろしくお願いいたします。

@amazon-devices/kepler-graphics

The Kepler Graphics API provides functionality that allows apps to query the capabilities of the connected display. This includes capabilities such as screen resolution, refresh rate, color depth and format, and HDR support. The API also considers the device's support and returns the capabilities according to the device's limitations.

Get started

Prerequisites

Kepler apps can consume this package through the Kepler SDK.

For instructions on how to install the Kepler SDK, see Kepler SDK Setup.

Setup

The Kepler Graphics Turbo Module is provided by the kepler-graphics npm package. Add the following library dependency to the dependencies section of your package.json file.

Copied to clipboard.

"@amazon-devices/kepler-graphics": "~2.3.0",

Permissions

The display API consists of both get methods and set methods. Apps that use the set methods via DisplayManager class require the security privilege com.amazon.graphics.privilege.display.manager it their app's manifest.toml file under [needs] section as shown below.

Copied to clipboard.

[[needs.privilege]]
id = "com.amazon.graphics.privilege.display.manager"

Note the get methods do not require any privilege.

Usage

The following is a list of supported use cases:

  • Listening to display hotplug events.
  • Querying supported Screen Resolutions (width x heigh) and Refresh rates of the display.
  • Querying supported HDR types/Transfer Functions, maximum HDCP level, Screen Density (DPI) of the display.
  • Querying currently active Screen Resolution, Refresh Rate, Color Depth, Color Format, HDR Mode, Low Latency Mode (ALLM) for the display.
  • Listening to change events for the above mentioned display properties.

If the app requests and receives the system privilege mentioned in the Permissions section, then the following set of operations are allowed.

  • Changing current Screen Resolution and Refresh Rate to one of the supported values.
  • Changing other display properties like Color Depth, Color Format, HDR Mode, and ALLM.

The following sections provide sample code for some of the use cases.

Import the required components

To use the Kepler Graphics API, import the required components from @amazon-devices/kepler-aps-client.

The interfaces and types should be imported from the kepler-graphics package in a source code file as shown below:

Copied to clipboard.

import {
    Display,
    DisplayManager,
    DisplayController,
    ColorDepth,
    ColorSpace,
    HdcpLevel,
    HdrType,
    LlmState,
    HdrMode,
    IDisplayConfig,
    IDisplayListener,
    IDisplayControllerListener,
    ISubscription
} from '@amazon-devices/kepler-graphics';

The preceeding import show all all of the potential components. You need only import that components for the methods that your app consumes.

Check display status

To check if a display is already connected or not to the device, use the following method.

Copied to clipboard.

const displayConnected = DisplayController.isPrimaryDisplayConnected();
if (displayConnected) {
    // Perform operations on the display.
} else {
    // Display is not connected, Do NOT use the `Display` and `DisplayManager` methods.
    // In this case, the hotplug event callbacks can be used to know
    // when a new display is connected.
}

Display hotplug events

Get callback events when display panels are connected or disconnected. The IDisplayControllerListener.onAddDisplay() and IDisplayControllerListener.onRemoveDisplay() callback methods provide those events as shown below.

Copied to clipboard.

const displayControllerListener: IDisplayControllerListener = {

    onAddDisplay: (id: Int32) => {
      console.log("IDisplayControllerListener::onAddDisplay - ", id);
      // Any initialization when new display is connected.
    },
    onRemoveDisplay: (id: Int32) => {
      console.log("IDisplayControllerListener::onRemoveDisplay - ", id);
      // Any cleanup required.
      // Please note the `Display` and `DisplayManager` methods do not work
      // when the display is disconnected.
    },
  };

// Register the listener callback object to receive events.
const subscription: ISubscription = DisplayController.addListener(displayControllerListener);

Get the current screen resolution and refresh rate

Display.getCurrentConfig() returns the currently active configuration as an IDisplayConfig object. The members of the IDisplayConfig object provides the screen resolution (width x height), screen density, supported refresh rates, and more.

Copied to clipboard.

// Get currently active display config.
const displayConfig = Display.getCurrentConfig();
// Current width in pixels.
const width = displayConfig.widthInPixels;
// Current height in pixels.
const height = displayConfig.heightInPixels;
// Screen Density in DPI (dots-per-inch).
const dpi = displayConfig.screenDensityInDpi;

// Current refresh rate in milli hz (eg: 60000 = 60Hz).
const currentRefreshRate = Display.getCurrentRefreshRateInMillihertz();

Check HDR support

The following example code shows how to check whether HDR is supported by the display and by the device.

Copied to clipboard.

// Checks if the display along with device supports any of the HDR formats.
const hdrSupport = Display.isHDRSupported();

// Get the current user selected HDR mode - possible values are in 'enum HdrMode'.
const hdrMode = Display.getHdrMode();

if (hdrSupport && (hdrMode !== HdrMode.DISABLED)) {
    // HDR is supported.
    // Now get the current configuration to check if required HDR format is supported.
    const displayConfig = Display.getCurrentConfig();
    for (const hdrType of displayConfig.supportedHdrType) {
        if (hdrType === HdrType.HDR10) {
            // HDR10 supported.
        } else if (hdrType === HdrType.HDR10_PLUS) {
            // HDR10+ supported.
        } else if (hdrType === HdrType.HLG) {
            // HLG supported.
        } else if (hdrType == HdrType.DOLBY_VISION) {
            // Dolby Vision supported.
        }
    }
} else {
    // HDR is not supported or disabled by user.
}

NOTE: The supported HDR types retrieved in the example code represents the current active display configuration (resolution) only. Other display configurations obtained through Display.getAllSupportedConfigs() might list certain HDR types. Those HDR types are usable only when the current active configuration is changed to that particular display configuration through DisplayManager.requestConfigChange() method.

Query other display properties

Copied to clipboard.

// Query the display connector name.
const name = Display.getName();

// Get current HDCP level - possible values are in 'enum HdcpLevel'.
const hdcpLevel = Display.getCurrentHdcpLevel();

// Get current color depth - possible values are in 'enum ColorDepth'.
const colorDepth = Display.getColorDepth();

// Get current color space - possible values are in 'enum ColorSpace'.
const colorSpace = Display.getColorSpace();

// Check if low latency mode is supported in the device.
llmSupported = Display.isLowLatencyModeSupported();
if (llmSupported) {
    // Low Latency Mode is supported in the display.
}

Listen for change events

Applications can listen for changes to the display properties like screen resolution, refresh rate, color depth/space, HDCP level, HDR mode, and Low Latency Mode through the IDisplayListener callback interface. See the following code example:

Copied to clipboard.

const displayListener: IDisplayListener = {

    onConfigChange: (config: IDisplayConfig) => {
      console.log("IDisplayListener onConfigChange  ==  ", config);
    },
    onRefreshRateChange: (refreshRateInrMillihertz: Int32) => {
      console.log("IDisplayListener onRefreshRateChange  ==  ", refreshRateInrMillihertz);
    },
    onColorDepthChange: (colorDepth: ColorDepth) => {
      Alert.alert("IDisplayListener onConfigChange  == ");
      console.log("IDisplayListener onColorDepthChange  ==  ", colorDepth);
    },
    onColorSpaceChange: (colorSpace: ColorSpace) => {
      console.log("IDisplayListener onColorSpaceChange  ==  ", colorSpace);
    },
    onHdcpLevelChange: (level: HdcpLevel) => {
      console.log("IDisplayListener onHdcpLevelChange  ==  ", level);
    },
    onAutoConfigSwitchStateChange: (state: boolean) => {
      console.log("IDisplayListener onAutoConfigSwitchStateChange  ==  ", state);
    },
    onMultipleRefreshRateStateChange: (state: boolean) => {
      console.log("IDisplayListener onMultipleRefreshRateStateChange  ==  ", state);
    },
    onLowLatencyModeStateChange: (state: LlmState) => {
      console.log("IDisplayListener onLowLatencyModeStateChange  ==  ", state);
    },
    onHdrModeChange: (hdr_mode: HdrMode) => {
      console.log("IDisplayListener onHdrModeChange  ==  ", hdr_mode);
    },
    onSinkStateChange: (active: boolean) => {
      console.log("IDisplayListener onSinkStateChange  ==  ", active);
    }
};

// Register the listener object to receive the callbacks.
const subscription: ISubscription = Display.addDisplayListener(displayListener);

FAQs

Q1: Why is a display supported HDR type is not listed in the IDisplayConfig.supportedHdrType array?

In addition to the display properties, the method implementation considers the device capabilities when reporting the supported types. If the device does not support certain HDR type, for example "Dolby Vision", then the list reported by IDisplayConfig.supportedHdrType does not contain it.

Q2: How to unsubscribe for the listener callbacks?

The methods Display.addDisplayListener() and DisplayController.addListener() return a ISubscription object. This object is used to unsubscribe the listener by calling the unsubscribe() method. See the following code example.

Copied to clipboard.

  useEffect(() => {
    const subscription: ISubscription = DisplayController.addListener(displayControllerListener);
    return () => {
      subscription.unsubscribe();
    };
  }, []);

Q3: Why does supportedHdrType return multiple duplicated values like

Copied to clipboard.

  {
      "heightInPixels": 1080,
      "maxHdcpLevel": 7,
      "screenDensityInDpi": 81,
      "supportedHdrType": [
          1,
          1,
          1,
          1,
          1
      ],
      "supportedRefreshRatesInMillihertz": [
          60000,
          50000,
          30000,
          25000,
          24000
      ],
      "widthInPixels": 1920
  }

HDR types are correlated with refresh rates. In this scenario, there are five different refresh rates, each with its corresponding HDR type support information. For instance, at a refresh rate of 60 millihertz (mHz), the HDR support type is 1, which corresponds to HdrType.NONE.

Modules


Last updated: Oct 02, 2025