I have developed an app and it is functioning properly, however when it comes to designing, i am unable to achieve what is given in the example despite of doing the same code in the example. I want to achieve this design where image is in the center with title above and description down but what I am getting is this, side image, side title and description down. Please let me know how to achieve that. Here is my sample of my code
"response" : {
"outputSpeech" : {
"type" : "SSML",
"ssml" : "<speak>Hello,welcome!</speak>"
},
"card": {
"type": "Standard",
"title": "My Title",
"text": "My description",
"image": {
"smallImageUrl": "small image with the width 720 and height 480",
"largeImageUrl": "large image with the width 1200 and height=800"
}
},
"reprompt": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>I am waiting for your command!!</speak>"
}
},
"shouldEndSession" : false
}
It looks like Amazon has changed the Standard Card layout. Images are now shrinked and pushed to the left. The examples shown in current documentation on Cards have the new layout. The blog post you are referring is more than one and half years old
Related
Creating an alexa skill with APL. I have some uses of AnimateItem in the apl document I'm sending. If the output speech is very long, the whole animation renders. If it is short, it ends right as the speech ends. Is this intended? I want to render the whole animation.
"onMount": [
{
"type": "AnimateItem",
"easing": "ease-out",
"duration": 3000,
"value": {
"property": "opacity",
"from": 0,
"to": 1
}
},]
I noticed this in the response json
"timeoutType": "SHORT"
Could this have something to do with it?
I have a JSON file with a list of iconCards where each iconCard has a property icon.
This property contains the name of a react-icons Component I want to display.
My JSON file:
{
"input": {
"placeholder": "Paste in your individual video url here..."
},
"button": {
"text": "Download video"
},
"iconCards": [
{
"icon": "BsEmojiHeartEyes",
"title": "Free to use",
"description": "Our website offers a free way to download Instagram videos. No registration or sign-up is required. Enter the URL of the video you wish to download and click the 'Download' button."
},
{
"icon": "BsStopwatch",
"title": "Fast download speeds",
"description": "Our Instagram video downloader website offers fast download speeds so you can quickly and easily download your favourite videos."
},
{
"icon": "GrUserExpert",
"title": "Download in HD",
"description": "Our Instagram video downloader allows you to download videos in high definition, so you can enjoy your favourite videos in the best quality possible."
},
{
"icon": "AiOutlineVideoCamera",
"title": "No Download Limits",
"description": "Our Instagram video downloader has no download limits, so you can download as many videos as you want!"
},
{
"icon": "GrUserExpert",
"title": "Fully Secured",
"description": "Our website is fully secured with the latest security features. Your data is safe with us. We use the latest encryption technology to protect your data."
},
{
"icon": "GrUserExpert",
"title": "Mp4 format",
"description": "Our website offers the ability to download Instagram videos in MP4 format. This popular video format is widely compatible with many devices and media players."
}
],
"sections": [
{
"title": "Instagram Video-Download",
"description": {
"paragraphs": [
"Our website is the best place to download Instagram videos. With our simple and easy-to-use interface, you can download videos from Instagram in just a few clicks. We offer high-quality videos optimized for all devices so that you can enjoy your videos on any device."
]
}
},
{
"title": "About Instagram Video Downloader?",
"description": {
"paragraphs": [
"If you are looking for a website that will allow you to download videos from Instagram, then you are in the right place. This website is straightforward to use, and it is entirely free. Enter the URL of the Instagram video you want to download and click on the download button. You can save the video to your device within seconds."
]
}
},
{
"title": "How to Download Instagram Videos?",
"description": {
"paragraphs": [
"By visiting this page, your purpose is to download an Instagram video and save it to your device. Since Instagram doesn't offer a download option, we're here to help you.",
"1) Simply enter the Instagram video URL of your choice, and click on the Download button.",
"2) Our servers will start fetching the video and provide you with a preview option and a download button to start downloading the video.",
"By hitting the download button, you can save it to your device in MP4 format."
]
}
}
],
"faqs": {
"heading": "FAQs for Instagram Video Downloader",
"items": [
{
"question": "Can we download reels or IGTV videos from this tool?",
"answer": "This website supports all kinds of Instagram video downloading, whether it be Instagram video, Instagram reels or IGTV video. "
},
{
"question": "Is it legal to download videos from Instagram?",
"answer": "Yes, it is legal to download videos from Instagram. However, you should only download videos that you have the rights to. If you download a video you do not have the right to, you could infringe on copyright laws."
},
{
"question": "How to download video from Instagram?",
"answer": "Our website solves the same purpose. All you need is Instagram video URL to download it."
},
{
"question": "How to download a video from Instagram with audio?",
"answer": "Our website downloads the video with audio only. If you wish to download only audio from Instagram videos, you can check out Instagram audio downloader page."
}
]
},
"headings": {
"h1": "Instagram Video Downloader",
"h1Paragraph": "Download Instagram videos and save them to your device.",
"h2": "Instagram Video Downloader Features",
"h2Paragraph": "List of top features"
}
}
In my Tsx I Failed hard tho, I tried everything I can think of:
<UL>
{content.iconCards.map((Item, index) => (
<LI key={index}>
<>
<Item.icon/> <-- How to render it?
<h3 className="font-bold">{Item.title}</h3>
<p>{Item.description}</p>
</>
</LI>
))}
</UL>
My interface:
interface PageProps {
input: {
placeholder: string
}
button: {
text: string
}
iconCards: {
icon: React.ReactNode
title: string
description: string
}[]
sections: {
title: string
description: { paragraphs: string[] }
}[]
faqs: {
heading: string
items: {
question: string
answer: string
}[]
}
headings: {
h1: string
h1Paragraph: string
h2: string
h2Paragraph: string
}
}
I made this working in a TypeScript file, where I can type the Icon as ReactIcon. However,
I want to build a multilingual Page and for that, JSON files are better, I guess.
Thanks!
You can import separte React icons folder in a Single Component & map it accordingly.
import * as ReactIconAI from "react-icons/ai";
import * as ReactIconGR from "react-icons/gr";
import * as ReactIconBS from "react-icons/bs";
const ReactIcon = ({ icons }) => {
const iconFolder = icons.slice(0, 2).toLowerCase();
// Map Icon to Respective Folder by comparing the First two Character of the
//Icons
let icon =
iconFolder === "ai"
? ReactIconAI[icons]
: iconFolder === "bs"
? ReactIconBS[icons]
: iconFolder === "gr"
? ReactIconGR[icons]
: "";
// return only if the icon Exist
return icon && React.createElement(icon);
};
By using the above component , You can map through your json.
return (
<>
{content.iconCards.map((Item, index) => (
<>
<h3 className="font-bold">{Item.title}</h3>
<p>{Item.description}</p>
<ReactIcon icons={Item.icon} />
</>
))}
</>
);
Background: I am working through a flashcard Skill that enables Alexa to ask basic questions about a programming language. The user can choose between Ruby, Python or JS.
The progression goes:
LaunchRequest welcomes the user, then asks for their language preference
User responds, causing SetLanguageIntent to trigger
A question is then asked of the user
However, I am unable to get past the SetLanguageIntent without encountering "There was a problem with the requested skill's response".
Here is the dialogue:
As one can see from the response, SetLanguageIntent is activated properly with the slot ruby also matching correctly.
"request": {
"type": "IntentRequest",
"requestId": "amzn1.echo-api.request.743f750e-96d9-4ef9-aeba-e0aec2e45afb",
"timestamp": "2018-09-12T13:35:25Z",
"locale": "en-US",
"intent": {
"name": "SetMyLanguageIntent",
"confirmationStatus": "NONE",
"slots": {
"language": {
"name": "language",
"value": "ruby",
"resolutions": {
"resolutionsPerAuthority": [
{
"authority": "amzn1.er-authority.echo-sdk.amzn1.ask.skill.ee34487d-d343-4deb-ab6c-193777c92aa8.languages",
"status": {
"code": "ER_SUCCESS_MATCH"
},
"values": [
{
"value": {
"name": "ruby",
"id": "58e53d1324eef6265fdb97b08ed9aadf"
}
}
]
}
]
},
"confirmationStatus": "NONE"
}
}
}
However, at this point the error message "There was a problem with the requested skill's response" always appears. There are no errors reported on CloudWatch Logs.
For reference, here is the SetLanguageIntent code. As noted in the comment, the test "Okay" should at least have been said. However, it does not get executed.
'SetMyLanguageIntent': function() {
this.response.speak('Okay'); //this should at least have been said
this.attributes.flashcards.currentLanguage = this.event.request.intent.slots.languages.value;
var currentLanguage = this.attributes.flashcards.currentLanguage
this.response
.speak('Okay, I will ask you some questions about ' +
currentLanguage + '. Here is your first question. ' +
AskQuestion(this.attributes))
.listen(AskQuestion(this.attributes));
this.emit(':responseReady');
},
Any help is much appreciated!
Edit: updated with slot names
I see a problem with your code. This is why you're probably having an issue. You are trying to access an undefined property this.event.request.intent.slots.languages.value. The mistake is word languages. It should be language.
So the way to acces a slot value should be:
this.event.request.intent.slots.language.value
I fixed the same problem for myself by simply adding a cardRenderer() to my response. Like this:
this.response.speak("my text").cardRenderer("ttitle","some content","image");
In the test simulator's device log, I noticed the card renderer show up, saying the skill responded with a failure. So I took a shot and it worked. Hopefully this fixes it for you too!
By using plotly, I am creating my analytics dashboard which has pie, bar and different kind of charts. I have a pie chart which has huge data and legends nearly more than 60. It's rendering properly in browser(bigger screen) problem is with the mobile screens. Chart legends are overlapping the actual chart.I am expecting to show chart as like below in mobile screens. Can anyone help me on this.
My Json looks like below.
{
"data": [{
"values": [1058,177,75,53,28,23,15,8,7,6,5,5,2,2,1,1,1,1,1,1,0],
"labels": ["Vision Corporation","Corporate Human Resources","Human Resources-West","Human Resources-East","Human Resources-Central","Recruiting-East","Human Resources","Recruiting-South","Payroll","Recruiting-West","Human Resources-South","Recruiting-Central","200-Human Resources","Direction des Ressources Humaines","Accounts Payable","Commercial Sales","Commercial Sales-West","Services-East","Vision Australia","Vision Industries","Others"],
"type": "pie",
"textposition":"inside"
}],
"linked": {
"layout": {
"legend":{
"orientation": "h",
"x": 1.02,
"xanchor": "center",
"y": 1.0,
"yanchor": "bottom"
},
"margin":{
"l": 0
}
}
}
}
Disclaimer: have not tried this on mobile. However, I had a similar issue on the browser (huge legend) - and the following did solve the issue:
You can control the size of the chart. By increasing the height property, you will leave more room for your legend.
Add a 'height' property under the 'layout' object, and play with the sizing to fit your data -
"layout": {
"height": 1000, ...
You can also add a width property if needed. See an example here (not in JSON, but the properties are clear).
I have been trying to create a bundle of cards in https://developers.google.com/glass/tools-downloads/playground without success, here is what I did:
insert a card with the following json:
{
"text": "Cover",
"bundleId": "123",
"isBundleCover": true,
"notification": {
"level": "DEFAULT"
}
}
then insert a 2nd card with the following json:
{
"text": "Card 1","bundleId": "123","notification": {
"level": "DEFAULT"
}
}
But they don't appear to be threaded in my timeline under playground. What did I do wrong? Thanks in advance!
From the usage information at https://developers.google.com/glass/tools-downloads/playground
Note: The Playground does not support bundles.
Your card json looks to be correct though, so it should show up correctly on Glass.