Last active
January 18, 2019 10:40
-
-
Save mlopezr/eb6951788d2f204a462a1e5e9a20c1ba to your computer and use it in GitHub Desktop.
Sample Spoken Horizontal List
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "directives": [ | |
| { | |
| "type": "Alexa.Presentation.APL.RenderDocument", | |
| "token": "intro", | |
| "document": { | |
| "type": "APL", | |
| "version": "1.0", | |
| "theme": "dark", | |
| "import": [], | |
| "resources": [], | |
| "styles": { | |
| "itemBorderStyle": { | |
| "description": "Style highlighting in white items when spoken", | |
| "values": [ | |
| { | |
| "borderWidth": 4, | |
| "borderColor": "transparent" | |
| }, | |
| { | |
| "when": "${state.focused}", | |
| "borderWidth": 4, | |
| "borderColor": "#FFFFFF" | |
| }, | |
| { | |
| "when": "${state.karaoke}", | |
| "borderWidth": 4, | |
| "borderColor": "#FFFFFF" | |
| } | |
| ] | |
| } | |
| }, | |
| "layouts": { | |
| "FullHorizontalListItem": { | |
| "description": "Item for small screens, with a full screen image and text, spoken and highlighted", | |
| "item": [ | |
| { | |
| "type": "Container", | |
| "id": "item${index}", | |
| "speech": "${data.speech}", | |
| "width": "100vw", | |
| "height": "100vh", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "height": "70%", | |
| "width": "100%", | |
| "source": "${data.imageURL}", | |
| "scale": "best-fill" | |
| }, | |
| { | |
| "type": "Frame", | |
| "position": "absolute", | |
| "bottom": "0", | |
| "height": "30vh", | |
| "width": "100vw", | |
| "backgroundColor": "rgba(0, 0, 0, 0.5)", | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Text", | |
| "text": "${data.primaryText}", | |
| "maxLines": 1, | |
| "fontSize": "30dp", | |
| "textAlign": "center", | |
| "width": "80vw", | |
| "paddingTop": "50px" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.secondaryText}", | |
| "fontSize": "20dp", | |
| "textAlign": "center", | |
| "width": "60vw" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "HorizontalListItem": { | |
| "description": "Item for large screen layout, with an image and text, spoken and highlighted", | |
| "item": [ | |
| { | |
| "type": "TouchWrapper", | |
| "id": "item${index}", | |
| "speech": "${data.speech}", | |
| "onPress": { | |
| "type": "SendEvent", | |
| "arguments": [ | |
| "CategorySelected", | |
| "${index}" | |
| ] | |
| }, | |
| "item": { | |
| "type": "Frame", | |
| "width": "32vw", | |
| "height": "100%", | |
| "paddingLeft": "1vw", | |
| "paddingRight": "1vw", | |
| "style": "itemBorderStyle", | |
| "inheritParentState": true, | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "direction": "column", | |
| "paddingTop": "1vw", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "source": "${data.imageURL}", | |
| "width": "30vw", | |
| "height": "30vw", | |
| "scale": "best-fill" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.primaryText}", | |
| "textAlign": "center", | |
| "maxLines": 1, | |
| "paddingTop": "10px", | |
| "spacing": 12 | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.secondaryText}", | |
| "textAlign": "center", | |
| "spacing": 4 | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| }, | |
| "mainTemplate": { | |
| "parameters": [ | |
| "payload" | |
| ], | |
| "item": [ | |
| { | |
| "when": "${viewport.shape == 'round'}", | |
| "type": "Pager", | |
| "id": "introComponent", | |
| "speech": "${payload.data.properties.introSpeech}", | |
| "height": "100vh", | |
| "width": "100vw", | |
| "data": "${payload.data.properties.itemList}", | |
| "firstItem": { | |
| "type": "Container", | |
| "justifyContent": "center", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "source": "${payload.data.properties.backgroundImage}", | |
| "scale": "best-fill", | |
| "position": "absolute", | |
| "width": "100vw", | |
| "height": "100vh" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.title}", | |
| "width": "80vw" | |
| } | |
| ] | |
| }, | |
| "items": [ | |
| { | |
| "type": "FullHorizontalListItem" | |
| } | |
| ] | |
| }, | |
| { | |
| "when": "${viewport.shape != 'round'}", | |
| "type": "Container", | |
| "height": "100vh", | |
| "width": "100vw", | |
| "items": [ | |
| { | |
| "id": "introComponent", | |
| "speech": "${payload.data.properties.introSpeech}", | |
| "type": "Image", | |
| "source": "${payload.data.properties.backgroundImage}", | |
| "overlayColor": "rgba(0, 0, 0, 0.7)", | |
| "scale": "best-fill", | |
| "width": "100%", | |
| "height": "100%", | |
| "position": "absolute" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.title}", | |
| "paddingTop": "30px", | |
| "paddingLeft": "30px", | |
| "paddingBottom": "30px" | |
| }, | |
| { | |
| "type": "Container", | |
| "direction": "row", | |
| "paddingLeft": "20px", | |
| "paddingRight": "20px", | |
| "height": "70vh", | |
| "width": "100%", | |
| "data": "${payload.data.properties.itemList}", | |
| "item": [ | |
| { | |
| "type": "HorizontalListItem" | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.hintText}", | |
| "paddingLeft": "30px" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }, | |
| "datasources": { | |
| "data": { | |
| "type": "object", | |
| "properties": { | |
| "backgroundImage": "https://steamcdn-a.akamaihd.net/steam/apps/27020/0000007627.1920x1080.jpg?t=1447351711", | |
| "title": "In which category do you want to play?", | |
| "introText": "<speak>Welcome! Do you want to play in category: </speak>", | |
| "hintText": "Try: Alexa, pick a random category.", | |
| "itemList": [ | |
| { | |
| "primaryText": "Celebrities", | |
| "ssml": "<speak>Celebrities,</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://i.pinimg.com/originals/e3/10/6d/e3106d1062ef7324449d187d54f88ddd.jpg" | |
| }, | |
| { | |
| "primaryText": "Fiction", | |
| "ssml": "<speak>Fiction,</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://lumiere-a.akamaihd.net/v1/images/Darth-Vader_6bda9114.jpeg?region=0%2C23%2C1400%2C785" | |
| }, | |
| { | |
| "primaryText": "Crime", | |
| "ssml": "<speak>or crime?</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://cosmos-magazine.imgix.net/file/spina/photo/1975/250515_Microbiome_4.jpg?ixlib=rails-1.1.0&h=445&w=657" | |
| } | |
| ] | |
| }, | |
| "transformers": [ | |
| { | |
| "inputPath": "itemList[*].ssml", | |
| "outputName": "speech", | |
| "transformer": "ssmlToSpeech" | |
| }, | |
| { | |
| "inputPath": "introText", | |
| "outputName": "introSpeech", | |
| "transformer": "ssmlToSpeech" | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| { | |
| "type": "Alexa.Presentation.APL.ExecuteCommands", | |
| "token": "intro", | |
| "commands": [ | |
| { | |
| "type": "Sequential", | |
| "commands": [ | |
| { | |
| "type": "SpeakItem", | |
| "componentId": "introComponent" | |
| }, | |
| { | |
| "type": "SetPage", | |
| "componentId": "introComponent", | |
| "position": "relative", | |
| "value": 1 | |
| }, | |
| { | |
| "type": "SpeakItem", | |
| "componentId": "item0" | |
| }, | |
| { | |
| "type": "SetPage", | |
| "componentId": "introComponent", | |
| "position": "relative", | |
| "value": 1 | |
| }, | |
| { | |
| "type": "SpeakItem", | |
| "componentId": "item1" | |
| }, | |
| { | |
| "type": "SetPage", | |
| "componentId": "introComponent", | |
| "position": "relative", | |
| "value": 1 | |
| }, | |
| { | |
| "type": "SpeakItem", | |
| "componentId": "item2" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ], | |
| "shouldEndSession": false | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "document": { | |
| "type": "APL", | |
| "version": "1.0", | |
| "theme": "dark", | |
| "import": [], | |
| "resources": [], | |
| "styles": { | |
| "itemBorderStyle": { | |
| "description": "Style highlighting in white items when spoken", | |
| "values": [ | |
| { | |
| "borderWidth": 4, | |
| "borderColor": "transparent" | |
| }, | |
| { | |
| "when": "${state.focused}", | |
| "borderWidth": 4, | |
| "borderColor": "#FFFFFF" | |
| }, | |
| { | |
| "when": "${state.karaoke}", | |
| "borderWidth": 4, | |
| "borderColor": "#FFFFFF" | |
| } | |
| ] | |
| } | |
| }, | |
| "layouts": { | |
| "FullHorizontalListItem": { | |
| "description": "Item for small screens, with a full screen image and text, spoken and highlighted", | |
| "item": [ | |
| { | |
| "type": "Container", | |
| "id": "item${index}", | |
| "speech": "${data.speech}", | |
| "width": "100vw", | |
| "height": "100vh", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "height": "70%", | |
| "width": "100%", | |
| "source": "${data.imageURL}", | |
| "scale": "best-fill" | |
| }, | |
| { | |
| "type": "Frame", | |
| "position": "absolute", | |
| "bottom": "0", | |
| "height": "30vh", | |
| "width": "100vw", | |
| "backgroundColor": "rgba(0, 0, 0, 0.5)", | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Text", | |
| "text": "${data.primaryText}", | |
| "maxLines": 1, | |
| "fontSize": "30dp", | |
| "textAlign": "center", | |
| "width": "80vw", | |
| "paddingTop": "50px" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.secondaryText}", | |
| "fontSize": "20dp", | |
| "textAlign": "center", | |
| "width": "60vw" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "HorizontalListItem": { | |
| "description": "Item for large screen layout, with an image and text, spoken and highlighted", | |
| "item": [ | |
| { | |
| "type": "TouchWrapper", | |
| "id": "item${index}", | |
| "speech": "${data.speech}", | |
| "onPress": { | |
| "type": "SendEvent", | |
| "arguments": [ | |
| "CategorySelected", | |
| "${index}" | |
| ] | |
| }, | |
| "item": { | |
| "type": "Frame", | |
| "width": "32vw", | |
| "height": "100%", | |
| "paddingLeft": "1vw", | |
| "paddingRight": "1vw", | |
| "style": "itemBorderStyle", | |
| "inheritParentState": true, | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "direction": "column", | |
| "paddingTop": "1vw", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "source": "${data.imageURL}", | |
| "width": "30vw", | |
| "height": "30vw", | |
| "scale": "best-fill" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.primaryText}", | |
| "textAlign": "center", | |
| "maxLines": 1, | |
| "paddingTop": "10px", | |
| "spacing": 12 | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${data.secondaryText}", | |
| "textAlign": "center", | |
| "spacing": 4 | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| }, | |
| "mainTemplate": { | |
| "parameters": [ | |
| "payload" | |
| ], | |
| "item": [ | |
| { | |
| "when": "${viewport.shape == 'round'}", | |
| "type": "Pager", | |
| "id": "introComponent", | |
| "speech": "${payload.data.properties.introSpeech}", | |
| "height": "100vh", | |
| "width": "100vw", | |
| "data": "${payload.data.properties.itemList}", | |
| "firstItem": { | |
| "type": "Container", | |
| "justifyContent": "center", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "type": "Image", | |
| "source": "${payload.data.properties.backgroundImage}", | |
| "scale": "best-fill", | |
| "position": "absolute", | |
| "width": "100vw", | |
| "height": "100vh" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.title}", | |
| "width": "80vw" | |
| } | |
| ] | |
| }, | |
| "items": [ | |
| { | |
| "type": "FullHorizontalListItem" | |
| } | |
| ] | |
| }, | |
| { | |
| "when": "${viewport.shape != 'round'}", | |
| "type": "Container", | |
| "height": "100vh", | |
| "width": "100vw", | |
| "items": [ | |
| { | |
| "id": "introComponent", | |
| "speech": "${payload.data.properties.introSpeech}", | |
| "type": "Image", | |
| "source": "${payload.data.properties.backgroundImage}", | |
| "overlayColor": "rgba(0, 0, 0, 0.7)", | |
| "scale": "best-fill", | |
| "width": "100%", | |
| "height": "100%", | |
| "position": "absolute" | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.title}", | |
| "paddingTop": "30px", | |
| "paddingLeft": "30px", | |
| "paddingBottom": "30px" | |
| }, | |
| { | |
| "type": "Container", | |
| "direction": "row", | |
| "paddingLeft": "20px", | |
| "paddingRight": "20px", | |
| "height": "70vh", | |
| "width": "100%", | |
| "data": "${payload.data.properties.itemList}", | |
| "item": [ | |
| { | |
| "type": "HorizontalListItem" | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "Text", | |
| "text": "${payload.data.properties.hintText}", | |
| "paddingLeft": "30px" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }, | |
| "dataSources": { | |
| "data": { | |
| "type": "object", | |
| "properties": { | |
| "backgroundImage": "https://steamcdn-a.akamaihd.net/steam/apps/27020/0000007627.1920x1080.jpg?t=1447351711", | |
| "title": "In which category do you want to play?", | |
| "introText": "<speak>Welcome! Do you want to play in category: </speak>", | |
| "hintText": "Try: Alexa, pick a random category.", | |
| "itemList": [ | |
| { | |
| "primaryText": "Celebrities", | |
| "ssml": "<speak>Celebrities,</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://i.pinimg.com/originals/e3/10/6d/e3106d1062ef7324449d187d54f88ddd.jpg" | |
| }, | |
| { | |
| "primaryText": "Fiction", | |
| "ssml": "<speak>Fiction,</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://lumiere-a.akamaihd.net/v1/images/Darth-Vader_6bda9114.jpeg?region=0%2C23%2C1400%2C785" | |
| }, | |
| { | |
| "primaryText": "Crime", | |
| "ssml": "<speak>or crime?</speak>", | |
| "secondaryText": "", | |
| "imageURL": "https://cosmos-magazine.imgix.net/file/spina/photo/1975/250515_Microbiome_4.jpg?ixlib=rails-1.1.0&h=445&w=657" | |
| } | |
| ] | |
| }, | |
| "transformers": [ | |
| { | |
| "inputPath": "itemList[*].ssml", | |
| "outputName": "speech", | |
| "transformer": "ssmlToSpeech" | |
| }, | |
| { | |
| "inputPath": "introText", | |
| "outputName": "introSpeech", | |
| "transformer": "ssmlToSpeech" | |
| } | |
| ] | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment