Alexa Smart Screen Sample Web App
The Alexa Smart Screen Sample Web App is a configurable client that you can use to showcase Alexa Voice Service(AVS) Device SDK visual capabilities, such as Alexa Presentation Language (APL) and cameras, and interact with the AVS Device SDK IPC Server Sample App through inter-process communication (IPC).
For details about building the alexa-smart-screen-web-components
library, including opening the sample web application, see the Alexa Smart Screen Web Components Quick Start Guide. Make sure that you use an IPC server app, such as the AVS SDK IPC Server Sample App, to initialize the Sample Web App through the configureClient
API call of the SessionSetupHandler
. This API provides the Sample Web App with the required configuration payload.
For details about configuring the Sample Web App to emulate different device setups, see Sample App configuration parameters.
To further control the features and functionality of the Sample Web App, use the Sample App environment properties.
Sample App configuration parameters
As shown in the following example, you can find the Typescript interface for the configuration in ISampleAppConfigPayload
.
{ "version" : "1.0.0", "description":"{{STRING}}", "mode":{{DeviceMode}}, "displayMode": {{DisplayMode}}, "audioInputInitiator":{{AudioInputInitiator}}, "windows": [ {{WindowConfig}}, {{WindowConfig}}, ... ] "defaultWindowId":"{{STRING}}", "deviceKeys": {{DeviceKeys}}, "emulateDisplayDimensions":{{BOOLEAN}}, "scaleToFill":{{BOOLEAN}}, "liveViewCameraOptions":{{OBJECT}} }
The following table shows the parameters for configuring the Sample Web App.
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
|
Version of the Sample Web App supported by this configuration. |
string |
None |
Yes |
|
Description of device presented on the Sample Web App |
string |
None |
No |
|
The expected DeviceMode of the device. Note: The mode values are case-sensitive. Currently only
'HUB' and 'TV' are fully supported device modes. 'MOBILE' , 'PC' , and 'AUTO' might produce unexpected results in APL content. |
string |
|
No |
|
The expected display mode of the device. Valid values: |
string |
|
No |
|
The AudioInputInitiator type for the Sample Web App. |
string |
|
No |
|
An array of Window configuration parameters created in the Sample Web App and reported in |
Window configuration parameters array [] |
None |
Yes |
|
The ID of the Window configuration parameters used as the default for visual responses. Note: The configuration for this window ID is also used as the configuration for the PlayerInfo window for audio playback UI presentation.
|
string |
None |
Yes |
|
The Device Keys configuration defines core function keys in the Sample Web App about |
None |
Yes | |
|
When |
Boolean |
|
No |
|
When |
Boolean |
|
No |
|
Optional configuration for the Live View Camera UI. Note: This setting is relevant only to device makers who implement live view cameras.
|
None |
No |
Window configuration parameters
The following example shows the parameters for creating windows and configuring any additional runtime features of the client, like APL, that might be running in the window.
{ "id": "{{STRING}}", "displayWindowConfig": {{DisplayWindowConfig}}, "supportedInterfaces: [ {{STRING}}, ... ], "zOrderIndex": {{NUMBER}}, "windowPosition": "{{STRING}}", "aplRendererParameters": {{AplRendererParameters}} }
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
|
A unique identifier for the window instance used to target content to this window. |
string |
None |
Yes |
|
Optional configuration if the window should be based on an |
None |
No | |
|
An array of strings representing the AVS Interface for visual presentations supported by the window. |
string array [] |
None |
Yes |
|
The relative z-order index for the window. Note: The
WindowManager determines the final z-order. |
number |
None |
Yes |
|
The screen position of the window. |
string |
|
No |
|
Parameters for APL renderer supported by the window instance. Used only if window supports |
None |
No |
Display window configuration parameters
The following table shows the parameters for display window configurations based on visualCharacteristics
.
{ "templateId": "{{STRING}}", "configurations": { "landscape": { "sizeConfigurationId": "{{STRING}}", "interactionMode": "{{STRING}}", "position": "{{STRING}}" }, "portrait": { "sizeConfigurationId": "{{STRING}}", "interactionMode": "{{STRING}}", "position": "{{STRING}}" } } }
Parameter | Description | Type | Required |
---|---|---|---|
|
The window template in the |
string |
Yes |
|
Template orientation definitions for this display window configuration. |
Yes |
Display window orientation configurations
ORIENTABLE
display types. When the display type is ORIENTABLE
, you must set the orientation definition to either portrait
or landscape
.The following table shows the parameters for display window orientations.
Parameter | Description | Type | Required |
---|---|---|---|
|
Optional Window instance configuration for |
No, unless | |
|
Optional Window instance configuration for |
No, unless |
Display window instance parameters
The following table shows the parameters for window template instances.
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
|
The active size configuration of the window as defined in |
string |
None |
Yes |
|
An "id" value representing the current |
string |
None |
Yes |
|
The optional screen position to use for this window instance configuration. |
string |
None |
No |
APL Renderer parameters
The following example shwos the parameters for APL Renderer supported by a window instance.
{ "theme": "{{STRING}}", "allowOpenUrl": {{BOOLEAN}}, "animationQuality": "{{STRING}}, "supportedExtensions": [ {{STRING}}, ... ] }
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
|
Preferred basic color scheme of the window. Content developers might optionally use this value for styling their visual response. |
string |
|
No |
|
Indicates if the window supports the APL |
Boolean |
|
No |
|
Level of AnimationQuality support in the window. |
string |
|
No |
|
An optional array of APL extension URIs supported in the window instance. Note: Any extensions declared here must have been built with the APLClient extension framework to be available to the APL runtime for the window.
|
string array [] |
|
No |
Device Keys parameters
The following table shows the parameters for device input keys.
Parameter | Description | Type | Required |
---|---|---|---|
|
Key used in the Sample Web App to send a |
Yes | |
|
Key used in the Sample Web App to send a |
Yes | |
|
Key used in the Sample Web App to send a |
Yes | |
|
Key used in the Sample Web App to send a |
Yes | |
|
Key used in the Sample Web App to send a |
Yes |
Device key parameters
The following table shows the parameters for each device key.
Parameter | Description | Type | Required |
---|---|---|---|
|
Property representing a physical key on the keyboard, following the |
string |
Yes |
|
Property representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key, following the |
number |
Yes |
|
Property representing the value of the key pressed by the user, following the |
string |
Yes |
Sample App environment properties
In addition to the runtime Sample App configuration, the Sample Web App also exposes a few build-time ENV
properties, which you can use to control functionality and features within the application.
You can modify the ENV
properties when you build the Sample Web App by using the following commands.
cd <path-to-repo-clone>/alexa-smart-screen-web-components/samples/alexa-smart-screen-sample-app
yarn build --env <ENV_PROP>=<ENV_PROP_VALUE> --env <ENV_PROP>=<ENV_PROP_VALUE> ...
The following example shows how to change the log level.
yarn build --env LOG_LEVEL='DEBUG'
Environment properties
The following table shows the Sample App environment properties. Refer to the env configuration file for Typescript definitions.
Parameter | Description | Type | Default |
---|---|---|---|
|
The log level for logs written to the server app from the Sample Web App. |
| |
|
The SSL security property for the web socket server when the web socket server is used. |
Boolean |
|
|
When |
Boolean |
|
|
Sets whether to transform keyboard events to have valid KeyCodes. |
Boolean |
|
|
When Note: The SDK IPC Server App must also be built with Live View Camera enabled to use this feature.
|
Boolean |
|
|
When |
Boolean |
|
Related topics
Last updated: Aug 15, 2022