Alexa Presentation Language Document rendering while speaking - command

I am trying to render an Alexa Presentation Language document while Alexa is speaking her speech. I tried with a pager with several pages and the AutoPager command. The problem I am trying to solve is that the document is rendered when Alexa starts speaking but the command is started when the speech is finished, and I would like to see the three pages moving while speaking.
I am using the RenderDocumet and the executeCommand and the speak directives of responseBuilder.
The Document Template:
PagerDoc —>
{
"type": "APL",
"version": "1.0",
"theme": "dark",
"import": [],
"resources": [],
"styles": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"datasource"
],
"item": [{
"type": "Container",
"items": [
{
"type": "Sequence",
"id": "pagerComponentId",
"scrollDirection": "vertical",
"numbered": true,
"width": "100vw",
"height": "100vh",
"alignItems": "center",
"justifyContent": "center",
"direction": "column",
"items": [
{
"type": "Image",
"source": "${datasource.app.properties.images.robot1}",
"position": "relative",
"width": "100vw",
"height": "100vh"
},
{
"type": "Image",
"source": "${datasource.app.properties.images.robot2}",
"position": "relative",
"width": "100vw",
"height": "100vh"
}
]
}
]
}
]
}
}
And the Directives:
var response = handlerInput.responseBuilder;
return response
.addDirective({
type : 'Alexa.Presentation.APL.RenderDocument',
token: 'pagerToken',
document : pagerDoc,
datasources : {
"app": {
"properties": {
"images": {
"robot1": "https://xxx/robot1.png",
"robot2": "https://xxx/robot2.png"
}
}
}
}
})
.addDirective({
type: 'Alexa.Presentation.APL.ExecuteCommands',
token: 'pagerToken',
commands: [
{
"type": "Parallel",
"commands": [
{
"type": "Scroll",
"componentId": "pagerComponentId",
"distance": 1
}
]
})
.speak(speechOutput)
.reprompt(repromptOutput)
.getResponse();
Could somebody tell me what should I do? If this is possible with Alexa?
Thanks a lot in advance and best regards,
Fernando

It's not posible yet. If you wait until the release of APL 1.1 (coming soon)
APL 1.1 will add onMount to the APL document which should allow for the execution of commands as soon as a document is loaded (eg. before alexa speaks)

Related

Extensibility point on release results page

I am part of VS performance team, I need to create a new tab for the Release result page.Release result page
Previously it was possible with the target ms.vss-releaseManagement-web.release-details-view but that no longer works on the new experience, do you know how the contribution configuration should look?, this is what I have so far:
"id": "pit-tab",
"type": "ms.vss-releaseManagement-web.release-summary-tab",
"targets": [
"ms.vss-releaseManagement-web.release-details-view"
],
"properties": {
"name": "Performance",
"uri": "dist/index.html",
"order": "99",
"icon": "asset://img/icon.png",
"supportsMobile": true
}
Try with below script:
{
"id": "release-environments-tab",
"type": "ms.vss-web.tab",
"description": "Adds a 'Merlin Insert' tab to the release environment.",
"targets": [
"ms.vss-releaseManagement-web.release-environment-editor-tab"
],
"properties": {
"name": "Merlin Insert",
"order": "30",
"uri": "index.html"
}
},

react-map-gl without API key using osm tiles

Is it possible?
This tells me it is, but dont know why it defines and API key.
but I cannot get it to work with react-map-gl StaticMap class. The property I can see from that class is just mapStyle which would take a standard Mapbox vector tiles path/name. Does it take an object? My code does not give me an error or show the tiles I request.
<DeckGL>
<StaticMap
mapStyle= {{
"version": 7,
"sources": {
"simple-tiles": {
"type": "raster",
"tiles":["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
"tileSize": 256
},
"power": {
"type": "vector",
"tiles": ["http://gpstrails.info/ex/leaflet/power/osm/{z}/{x}/{y}.json"]
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "simple-tiles",
"minzoom": 0,
"maxzoom": 22
},
{
"id": "road",
"source": "power",
"source-layer": "power",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round",
},
"paint": {
"line-color": "red",
"line-width": 4,
}
}]
}}/>
</DeckGL>
Thank you
Edit: from the correct answer, and to keep things in SO, this is the json living on the S3:
{
"version": 8,
"name": "OSM",
"metadata": {
},
"sources": {
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key={key}"
},
"osm": {
"type": "raster",
"tiles": [
"http://tile.openstreetmap.org/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 14
},
"91y5159eg": {
"type": "vector",
"url": "http://localhost:3000/tilejson.json"
}
},
"sprite": "https://openmaptiles.github.io/klokantech-basic-gl-style/sprite",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=undefined",
"layers": [
{
"id": "osm",
"type": "raster",
"source": "osm"
}
],
"id": "klokantech-basic"
}
UPDATE: Mapbox changed their license in 2.0 so the accepted answer is correct for versions < 2.0. Mapbox > 2.0 will complain if no access_token is provided.
The trick is in the style that's used. A style is a JSON object, whose specification you can read more about here. You can generate custom styles using tools such as Maputnik, a visual editor that generates style-compliant files for use in MapboxGL maps. Once you have an appropriate style generated, you can use it in React Map GL.
Here's what the basic component would look like, as altered from the example in the Github repo:
<ReactMapGL
mapStyle="https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.json"
{...this.state.viewport}
onViewportChange={viewport => this.setState({ viewport })}
/>
Note that this is just an abstract example. The tile loads from OSM here are a bit too slow to be useful in production. But it should illustrate how to make maps without relying on the services side of Mapbox.

AWS CloudFormation: Template format error: At least one Resources member must be defined

I am sure this template worked previously, but when I validate in the designer now it says:
12/5/2018, 9:41:47 AM - Template contains errors.: Template format
error: At least one Resources member must be defined.
I can't figure out why. I have only the one resource, and it's defined?
{
"AWSTemplateFormatVersion": "2010-09-09",
"Metadata": {
"AWS::CloudFormation::Designer": {
"7edb75f7-c18f-41d8-972e-959e2326ffda": {
"size": {
"width": 60,
"height": 60
},
"position": {
"x": 255,
"y": 217
},
"z": 0,
"embeds": []
}
}
},
"Resources": {
"DemoEc2Stack": {
"Type": "AWS::EC2::Instance",
"Properties": {
"KeyName": "InSiteAutoScaleKey",
"DisableApiTermination": false,
"ImageId": "ami-redacted",
"InstanceType": "t2.micro",
"Monitoring": false,
"SecurityGroupIds": [
"sg-redacted"
],
"Tags": [
{
"Key": "Name",
"Value": "api-demo-cloudformed"
}
]
},
"Metadata": {
"AWS::CloudFormation::Designer": {
"id": "7edb75f7-c18f-41d8-972e-959e2326ffda"
}
}
}
}
}
Problem solved. Such a stupid one! I was on the 'Resources' tab when I was pasting in my CF template from VS Code. I needed to be in the 'Template' tab of the Stack designer in AWS Console. Ugh. I want to jump off a cliff O.O

How to change HERE maps type in SAP Visual Business GeoMap?

According to this Map Provider Configuration Changes, I use this configuration to add HERE maps in GeoMap:
var oMapConfig = {
"MapProvider": [{
"name": "HEREMAPS",
"type": "HERETerrainMap",
"description": "",
"tileX": "256",
"tileY": "256",
"maxLOD": "20",
"copyright": "Tiles Courtesy of HERE Maps",
"Source": [{
"id": "s1",
"url": "https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/reduced.day/{LOD}/{X}/{Y}/256/png8?app_id=MY_ID&app_code=MY_CODE"
}, {
"id": "s2",
"url": "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/reduced.day/{LOD}/{X}/{Y}/256/png8?app_id=MY_ID&app_code=MY_CODE"
}
]
}],
"MapLayerStacks": [{
"name": "DEFAULT",
"MapLayer": {
"name": "layer1",
"refMapProvider": "HEREMAPS",
"opacity": "1.0",
"colBkgnd": "RGB(255,255,255)"
}
}]
};
this.oMap.setMapConfiguration(oMapConfig);
this.oMap.setRefMapLayerStack("DEFAULT");
But my map is in black and white style:
What I want is standard map:
In Configuring HERE (formerly Nokia, NAVTEQ) maps, new server URL is provided, I've tried this, but not working.
{
"id": "s1",
"url": http://1.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png?app_id=YOUR_APP_ID&app_code=YOUR_APP_CODE"
}, {
"id": "s2",
"url": "http://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png?app_id=MY_APP_ID&app_code=MY_APP_CODE"
}
And failed to find MapProvider configuration documentation in setMapConfiguration of GeoMap
Just change reduced.day to normal.day in your map URL, and you'll get colored map:)
edit:
Please refer to https://developer.here.com/documentation/map-tile/topics/examples.html for detailed APIs

How can I use bootstrap with cloudflare apps

I have tried adding bootstrap css to the install.json file the following way, but I got an error:
,
{
"type": "style",
"src": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
}
How can I add it to the project and use it?
I tested this in my install.json and it worked fine
"resources": {
"body": [
{
"type": "style",
"src": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
},
{
"type": "style",
"src": "./source/app.css"
},
{
"type": "script",
"src": "./source/app.js"
}
]
},
"preview": {
"handlers": [
{
"options": ["_default"],
"execute": "INSTALL_SCOPE.setOptions(INSTALL_OPTIONS)"
},
{
"options": ["_product"],
"execute": "INSTALL_SCOPE.setProduct(INSTALL_PRODUCT)"
}
]
},
"options": {}
}
There is likely something wrong with the JSON of your install.json. You could try copy and paste your install.json in this tool to test: https://www.cloudflare.com/apps/developer/install-json-tester