question

newuser-cb951f1b-ba5a-4827-a3ab-4a537d9bf595 avatar image

APL no Display on Echo Show or Simulator

Hi Alexa Devs,

Good Evening.

I am unable to display my APL document on my Echo Show's screen. It shows a black screen, however when I upload the code to the authoring tool it displayed just fine.

APL is enabled in the manifest. The S3 image is publicly accessible.

I have tried the following:

  1. Exporting the code from the authoring tool and exporting the code. After seeing the code functioning properly in the authoring tool.
    1. This code was only included in the document below.
  2. I have tried splitting the documents up as shown below.
  3. Been comparing examples to the Alexa Labs example skills but cannot pin point why the screen is black.

Here is a snippet from my Lambda code:

 return handlerInput.responseBuilder
      .speak(speechText)
      .reprompt(speechText)
      //.withSimpleCard('Welcome to Elevator Pitch', speechText)
      .addDirective({
        type : 'Alexa.Presentation.APL.RenderDocument',
        version: '1.0',
        document : require('./welcometemplate.json'),
        dataSources : require('./welcomedatasource.json')
      })
      .getResponse();

Here is my document code:

{
    "document": {
        "type": "APL",
        "version": "1.0",
        "theme": "dark",
        "import": [
            {
                "name": "alexa-layouts",
                "version": "1.0.0"
            }
        ],
        "resources": [
            {
                "description": "Stock color for the light theme",
                "colors": {
                    "colorTextPrimary": "#151920"
                }
            },
            {
                "description": "Stock color for the dark theme",
                "when": "${viewport.theme == 'dark'}",
                "colors": {
                    "colorTextPrimary": "#f0f1ef"
                }
            },
            {
                "description": "Standard font sizes",
                "dimensions": {
                    "textSizeBody": 48,
                    "textSizePrimary": 27,
                    "textSizeSecondary": 23,
                    "textSizeSecondaryHint": 25
                }
            },
            {
                "description": "Common spacing values",
                "dimensions": {
                    "spacingThin": 6,
                    "spacingSmall": 12,
                    "spacingMedium": 24,
                    "spacingLarge": 48,
                    "spacingExtraLarge": 72
                }
            },
            {
                "description": "Common margins and padding",
                "dimensions": {
                    "marginTop": 40,
                    "marginLeft": 60,
                    "marginRight": 60,
                    "marginBottom": 40
                }
            }
        ],
        "styles": {
            "textStyleBase": {
                "description": "Base font description; set color and core font family",
                "values": [
                    {
                        "color": "@colorTextPrimary",
                        "fontFamily": "Amazon Ember"
                    }
                ]
            },
            "textStyleBase0": {
                "description": "Thin version of basic font",
                "extend": "textStyleBase",
                "values": {
                    "fontWeight": "100"
                }
            },
            "textStyleBase1": {
                "description": "Light version of basic font",
                "extend": "textStyleBase",
                "values": {
                    "fontWeight": "300"
                }
            },
            "mixinBody": {
                "values": {
                    "fontSize": "@textSizeBody"
                }
            },
            "mixinPrimary": {
                "values": {
                    "fontSize": "@textSizePrimary"
                }
            },
            "mixinSecondary": {
                "values": {
                    "fontSize": "@textSizeSecondary"
                }
            },
            "textStylePrimary": {
                "extend": [
                    "textStyleBase1",
                    "mixinPrimary"
                ]
            },
            "textStyleSecondary": {
                "extend": [
                    "textStyleBase0",
                    "mixinSecondary"
                ]
            },
            "textStyleBody": {
                "extend": [
                    "textStyleBase1",
                    "mixinBody"
                ]
            },
            "textStyleSecondaryHint": {
                "values": {
                    "fontFamily": "Bookerly",
                    "fontStyle": "italic",
                    "fontSize": "@textSizeSecondaryHint",
                    "color": "@colorTextPrimary"
                }
            }
        },
        "layouts": {},
        "mainTemplate": {
            "parameters": [
                "dataSources"
            ],
            "items": [
                {
                    "type": "Container",
                    "height": "100vh",
                    "items": [
                        {
                            "type": "Image",
                            "source": "${dataSources.bodyTemplate6Data.backgroundImage.sources[0].url}",
                            "scale": "best-fill",
                            "width": "100vw",
                            "height": "100vh",
                            "position": "absolute"
                        },
                        {
                            "type": "AlexaHeader",
                            "headerAttributionImage": "${dataSources.bodyTemplate6Data.logoUrl}"
                        },
                        {
                            "type": "Container",
                            "grow": 1,
                            "justifyContent": "${viewport.shape == 'round' ? 'center' : 'end'}",
                            "items": [
                                {
                                    "paddingLeft": "@marginLeft",
                                    "paddingRight": "@marginRight",
                                    "type": "Text",
                                    "text": "${dataSources.bodyTemplate6Data.textContent.primaryText.text}",
                                    "style": "textStyleBody",
                                    "textAlign": "${viewport.shape == 'round' ? 'center' : 'left'}"
                                }
                            ]
                        },
                        {
                            "when": "${viewport.shape != 'round'}",
                            "type": "AlexaFooter",
                            "footerHint": "${dataSources.bodyTemplate6Data.hintText}"
                        }
                    ]
                }
            ]
        }
    }
    
}

========================= Datasource code=============================
{
   "bodyTemplate6Data": {
    "type": "object",
    "objectId": "bt6Sample",
    "backgroundImage": {
        "contentDescription": null,
        "smallSourceUrl": null,
        "largeSourceUrl": null,
        "sources": [
            {
                "url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
                "size": "small",
                "widthPixels": 0,
                "heightPixels": 0
            },
            {
                "url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
                "size": "large",
                "widthPixels": 0,
                "heightPixels": 0
            }
        ]
    },
    "image": {
        "contentDescription": null,
        "smallSourceUrl": null,
        "largeSourceUrl": null,
        "sources": [
            {
                "url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
                "size": "small",
                "widthPixels": 0,
                "heightPixels": 0
            },
            {
                "url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
                "size": "large",
                "widthPixels": 0,
                "heightPixels": 0
            }
        ]
    },
    "textContent": {
        "primaryText": {
            "type": "PlainText",
            "text": "Welcome to Phelps Fast Pitch"
        }
    },
    "logoUrl": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
    "hintText": "Try, \"Alexa, Open Phelps fast pitch.\""
  }
}


 

Thank you for your time.

alexa skills kitaplalexa presentation language
10 |3000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

newuser-cb951f1b-ba5a-4827-a3ab-4a537d9bf595 avatar image
newuser-cb951f1b-ba5a-4827-a3ab-4a537d9bf595 answered
I tweaked the code to the following... It is not sending the JSON template but still a black screen.

Below is the output code in the JSON output. I changed the dataSources above to be a payload. I also changed the .addDirective to be calling constants earlier in the script as opposed to requiring the variable in line.

Still a black screen...


{
	"body": {
		"version": "1.0",
		"response": {
			"outputSpeech": {
				"type": "SSML",
				"ssml": "<speak>Welcome to the Phelps Inc. Elevator Pitch. You can say things like give it to me and lets hear it.</speak>"
			},
			"card": {
				"type": "Simple",
				"title": "Welcome to Elevator Pitch",
				"content": "Welcome to the Phelps Inc. Elevator Pitch. You can say things like give it to me and lets hear it."
			},
			"directives": [
				{
					"type": "Alexa.Presentation.APL.RenderDocument",
					"document": {
						"document": {
							"type": "APL",
							"version": "1.0",
							"theme": "dark",
							"import": [
								{
									"name": "alexa-layouts",
									"version": "1.0.0"
								}
							],
							"resources": [
								{
									"description": "Stock color for the light theme",
									"colors": {
										"colorTextPrimary": "#151920"
									}
								},
								{
									"description": "Stock color for the dark theme",
									"when": "${viewport.theme == 'dark'}",
									"colors": {
										"colorTextPrimary": "#f0f1ef"
									}
								},
								{
									"description": "Standard font sizes",
									"dimensions": {
										"textSizeBody": 48,
										"textSizePrimary": 27,
										"textSizeSecondary": 23,
										"textSizeSecondaryHint": 25
									}
								},
								{
									"description": "Common spacing values",
									"dimensions": {
										"spacingThin": 6,
										"spacingSmall": 12,
										"spacingMedium": 24,
										"spacingLarge": 48,
										"spacingExtraLarge": 72
									}
								},
								{
									"description": "Common margins and padding",
									"dimensions": {
										"marginTop": 40,
										"marginLeft": 60,
										"marginRight": 60,
										"marginBottom": 40
									}
								}
							],
							"styles": {
								"textStyleBase": {
									"description": "Base font description; set color and core font family",
									"values": [
										{
											"color": "@colorTextPrimary",
											"fontFamily": "Amazon Ember"
										}
									]
								},
								"textStyleBase0": {
									"description": "Thin version of basic font",
									"extend": "textStyleBase",
									"values": {
										"fontWeight": "100"
									}
								},
								"textStyleBase1": {
									"description": "Light version of basic font",
									"extend": "textStyleBase",
									"values": {
										"fontWeight": "300"
									}
								},
								"mixinBody": {
									"values": {
										"fontSize": "@textSizeBody"
									}
								},
								"mixinPrimary": {
									"values": {
										"fontSize": "@textSizePrimary"
									}
								},
								"mixinSecondary": {
									"values": {
										"fontSize": "@textSizeSecondary"
									}
								},
								"textStylePrimary": {
									"extend": [
										"textStyleBase1",
										"mixinPrimary"
									]
								},
								"textStyleSecondary": {
									"extend": [
										"textStyleBase0",
										"mixinSecondary"
									]
								},
								"textStyleBody": {
									"extend": [
										"textStyleBase1",
										"mixinBody"
									]
								},
								"textStyleSecondaryHint": {
									"values": {
										"fontFamily": "Bookerly",
										"fontStyle": "italic",
										"fontSize": "@textSizeSecondaryHint",
										"color": "@colorTextPrimary"
									}
								}
							},
							"layouts": {},
							"mainTemplate": {
								"parameters": [
									"payload"
								],
								"items": [
									{
										"type": "Container",
										"height": "100vh",
										"items": [
											{
												"type": "Image",
												"source": "${payload.bodyTemplate6Data.backgroundImage.sources[0].url}",
												"scale": "best-fill",
												"width": "100vw",
												"height": "100vh",
												"position": "absolute"
											},
											{
												"type": "AlexaHeader",
												"headerAttributionImage": "${payload.bodyTemplate6Data.logoUrl}"
											},
											{
												"type": "Container",
												"grow": 1,
												"justifyContent": "${viewport.shape == 'round' ? 'center' : 'end'}",
												"items": [
													{
														"paddingLeft": "@marginLeft",
														"paddingRight": "@marginRight",
														"type": "Text",
														"text": "${payload.bodyTemplate6Data.textContent.primaryText.text}",
														"style": "textStyleBody",
														"textAlign": "${viewport.shape == 'round' ? 'center' : 'left'}"
													}
												]
											},
											{
												"when": "${viewport.shape != 'round'}",
												"type": "AlexaFooter",
												"footerHint": "${payload.bodyTemplate6Data.hintText}"
											}
										]
									}
								]
							}
						}
					},
					"datasources": {
						"bodyTemplate6Data": {
							"type": "object",
							"objectId": "bt6Sample",
							"backgroundImage": {
								"contentDescription": null,
								"smallSourceUrl": null,
								"largeSourceUrl": null,
								"sources": [
									{
										"url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
										"size": "small",
										"widthPixels": 0,
										"heightPixels": 0
									},
									{
										"url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
										"size": "large",
										"widthPixels": 0,
										"heightPixels": 0
									}
								]
							},
							"image": {
								"contentDescription": null,
								"smallSourceUrl": null,
								"largeSourceUrl": null,
								"sources": [
									{
										"url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
										"size": "small",
										"widthPixels": 0,
										"heightPixels": 0
									},
									{
										"url": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
										"size": "large",
										"widthPixels": 0,
										"heightPixels": 0
									}
								]
							},
							"textContent": {
								"primaryText": {
									"type": "PlainText",
									"text": "Welcome to Phelps Fast Pitch"
								}
							},
							"logoUrl": "https://s3.amazonaws.com/phelpsinc-fast-pitch/images/phelpsinc-background.jpg",
							"hintText": "Try, \"Alexa, Open Phelps fast pitch.\""
						}
					}
				}
			],
			"reprompt": {
				"outputSpeech": {
					"type": "SSML",
					"ssml": "<speak>Welcome to the Phelps Inc. Elevator Pitch. You can say things like give it to me and lets hear it.</speak>"
				}
			},
			"shouldEndSession": false
		},
		"sessionAttributes": {},
		"userAgent": "ask-node/2.3.0 Node/v8.10.0"
	}
}
2 comments
10 |3000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

This was supposed to be a comment or update, my bad.

0 Likes 0 ·
Alexander Martin avatar image Alexander Martin newuser-cb951f1b-ba5a-4827-a3ab-4a537d9bf595 ·

see line 25, you have a document within a document.

your directive should look like:

{
  "type": "Alexa.Presentation.APL.RenderDocument",
  "document": {
    "type": "APL",
    ....
  }
}

either update your code (see the document line, I added .document there)

(I changed the misspelled dataSources to datasources aswell!!!!)

return handlerInput.responseBuilder
      .speak(speechText)
      .reprompt(speechText)
      //.withSimpleCard('Welcome to Elevator Pitch', speechText)
      .addDirective({
        type : 'Alexa.Presentation.APL.RenderDocument',
        version: '1.0',
        document : require('./welcometemplate.json').document,
        datasources : require('./welcomedatasource.json')
      })
      .getResponse();

or update your source file (I removed the "document" key)

{
    "type": "APL",
    "version": "1.0",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    ...

your datasources object is not valid aswell

official documentation:

https://developer.amazon.com/de/docs/alexa-presentation-language/apl-data-source.html#object-data-source

dataSources should be "datasources" within your directive and your datasources object should have a properties object with your properties.

"datasources": {
  "bodyTemplate6Data": {
    "type": "object",
    "objectId": "bt6Sample",
    "properties": { 
      "backgroundImage": {
        "contentDescription": null,
        "smallSourceUrl": null,
        "largeSourceUrl": null,
        "sources": []
      }                
    }
  }
}
0 Likes 0 ·