I can't figure out what I'm doing wrong in my skill. Highlight mode is not working and the content doesn't stay in view even though speakItem claim to do it automatically ...
I have the same problem in another way more complicated APL document where the ID is dynamic. Can someone explain me what I'm doing wrong?
EDIT 30/09/2019 (Morning): I managed to get the automated scrolling working but the highlightMode is still not working ... Code updated.
EDIT 30/09/2019 (Afternoon): Got it to work. I tried to change the highlighting color and now it does everything it should. The code is updated and working ...
{
"type": "APL",
"version": "1.1",
"theme": "dark",
"import": [],
"settings": {},
"resources": [],
"styles": {
"karaokeText": {
"values": [
{
"color": "colorAfterHighlighting",
"textAlign": "center",
"textAlignVertical": "center",
"fontFamily": "Amazon Ember Display",
"fontSize": "26"
},
{
"when": "${state.karaoke}",
"color": "colorBeforeHighlighting"
},
{
"when": "${state.karaokeTarget}",
"color": "HighlightedLineColor"
}
]
}
},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"description": "Contenitore principale",
"type": "Container",
"width": "100%",
"height": "100%",
"numbered": false,
"alignItems": "center",
"direction": "column",
"justifyContent": "center",
"items": [
{
"type": "Frame",
"width": "99%",
"height": "99%",
"backgroundColor": "white",
"borderColor": "#0075AA",
"borderRadius": "1000",
"borderWidth": "7",
"alignSelf": "center",
"position": "absolute"
},
{
"type": "Image",
"width": "45%",
"source": "...",
"align": "center",
"alignSelf": "center",
"position": "absolute",
"bottom": "330"
},
{
"type": "ScrollView",
"width": "90%",
"height": "100%",
"alignSelf": "center",
"top": "150",
"item": [
{
"type": "Container",
"item": [
{
"type": "Text",
"id": "articleInfo",
"text": "${PathToText}",
"speech": "${PathToSpeech}",
"style": "karaokeText"
},
{
"type": "Text",
"id": "articleContent",
"text": "${PathToText}",
"speech": "${PathToSpeech}",
"style": "karaokeText"
}
]
}
]
}
]
}
]
}
}
commands.json
[
{
"type": "SpeakItem",
"componentId": "articleInfo",
"highlightMode": "line",
"align": "first"
},
{
"type": "Idle",
"delay": 400
},
{
"type": "SpeakItem",
"componentId": "articleContent",
"highlightMode": "line",
"align": "first"
}
]
APL render function
if (supportsAPL(handlerInput)) {
return handlerInput.responseBuilder
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: 'articleToken',
document: require('./article_presentation/layout.json'),
datasources: {
resources: {
type: 'object',
properties: {
ssmlText: `<speak>${articleText}</speak>`,
ssmlDate: `<speak>${articleDate}</speak>`
},
transformers: [
{
inputPath: 'ssmlText',
outputName: 'articleSpeech',
transformer: 'ssmlToSpeech'
},
{
inputPath: 'ssmlText',
outputName: 'articleText',
transformer: 'ssmlToText'
},
{
inputPath: 'ssmlDate',
outputName: 'dateSpeech',
transformer: 'ssmlToSpeech'
},
{
inputPath: 'ssmlDate',
outputName: 'dateText',
transformer: 'ssmlToText'
}
]
}
}
})
.addDirective({
type: 'Alexa.Presentation.APL.ExecuteCommands',
token: 'articleToken',
commands: require('./article_presentation/commands.json')
})
.reprompt(repromptSpeech)
.getResponse();
}
I also have another question, a bit off-topic ...
Is there a way I can isolate the datasource like I did with commands and layout when I need to use a value that I can get only in the index.js file?
