question

Patrick COPINE avatar image
Patrick COPINE asked

Error with AnimateItem command in APL

Hello everybody,

A few months ago (summer 2019), the APL document below worked under "Alexa Developer Console" and in my test skill.

{
  "document": {
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [
      {
        "name": "alexa-layouts",
        "version": "1.1.0"
      }
    ],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {
      "Pollair": {
        "parameters": [],
        "commands": [
          {
            "type": "Parallel",
            "when": "${environment.aplVersion == '1.1'}",
            "commands": [
              {
                "type": "Sequential",
                "commands": [
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter1",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "-25vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '33vw': '52vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter2",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "125vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '45vw': '59vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter3",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "25vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '59vw': '67vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter4",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "125vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '69vw': '73vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter5",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "-25vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '81vw': '79vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter6",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "125vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '91vw': '85vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "AnimateItem",
                    "easing": "ease-in-out",
                    "duration": 1800,
                    "componentId": "letter7",
                    "value": [
                      {
                        "property": "opacity",
                        "to": 1
                      },
                      {
                        "property": "transform",
                        "from": [
                          {
                            "translateX": "-25vw"
                          },
                          {
                            "translateY": "${Math.round(Math.random() * 100) + 'vw'}"
                          },
                          {
                            "rotate": 720
                          }
                        ],
                        "to": [
                          {
                            "translateX": "${viewport.shape == 'round' ? '101vw': '91vw'}"
                          },
                          {
                            "translateY": "${viewport.shape == 'round' ? '15vh': '25vh'}"
                          },
                          {
                            "rotate": 0
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "layouts": {},
    "mainTemplate": {
      "parameters": [
        "payload"
      ],
      "items": [
        {
          "type": "Container",
          "height": "100%",
          "width": "100%",
          "items": [
            {
              "description": "Container for all shapes",
              "type": "Container",
              "height": "${viewport.shape == 'round' ? '25vh' : '20vh'}",
              "width": "100vw",
              "items": [
                {
                  "type": "Frame",
                  "width": "100vw",
                  "height": "${viewport.shape == 'round' ? '25vh': '20vh'}",
                  "backgroundColor": "#BA2027",
                  "item": [
                    {
                      "when": "${viewport.shape != 'round'}",
                      "type": "AlexaHeader",
                      "headerBackButton": true,
                      "headerTitle": "Pollair",
                      "headerSubtitle": "Pollution de l'air",
                      "width": "100%",
                      "headerAttributionImage": "https://storage.googleapis.com/misc-13102018/ciel-v0.png"
                    },
                    {
                      "when": "${viewport.shape == 'round'}",
                      "type": "AlexaHeader",
                      "paddingLeft": "25vw",
                      "headerAttributionImage": "https://storage.googleapis.com/misc-13102018/ciel-v0.png"
                    }
                  ]
                }
              ]
            },
            {
              "type": "Container",
              "width": "125vw",
              "height": "${viewport.shape == 'round' ? '45vh' : '60vh'}",
              "top": "${viewport.shape == 'round' ? '25vh' : '20vh'}",
              "position": "absolute",
              "items": [
                {
                  "type": "Frame",
                  "width": "125vw",
                  "left": "-25vw",
                  "height": "${viewport.shape == 'round' ? '45vh' : '60vh'}",
                  "backgroundColor": "white",
                  "position": "absolute",
                  "item": [
                    {
                      "when": "${environment.aplVersion == '1.1'}",
                      "type": "Container",
                      "width": "125vw",
                      "height": "${viewport.shape == 'round' ? '45vh' : '60vh'}",
                      "left": "-25vw",
                      "position": "absolute",
                      "onMount": [
                        {
                          "type": "Pollair"
                        }
                      ],
                      "items": [
                        {
                          "type": "Image",
                          "id": "letter1",
                          "source": "https://storage.googleapis.com/images-01040218/lettreP-v2.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "75",
                          "height": "75"
                        },
                        {
                          "type": "Image",
                          "id": "letter2",
                          "source": "https://storage.googleapis.com/images-01040218/lettreO-v1.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "80",
                          "height": "80"
                        },
                        {
                          "type": "Image",
                          "id": "letter3",
                          "source": "https://storage.googleapis.com/images-01040218/lettreL-v2.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "75",
                          "height": "75"
                        },
                        {
                          "type": "Image",
                          "id": "letter4",
                          "source": "https://storage.googleapis.com/images-01040218/lettreL-v2.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "75",
                          "height": "75"
                        },
                        {
                          "type": "Image",
                          "id": "letter5",
                          "source": "https://storage.googleapis.com/images-01040218/lettreA-v1.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "68",
                          "height": "68"
                        },
                        {
                          "type": "Image",
                          "id": "letter6",
                          "source": "https://storage.googleapis.com/images-01040218/lettreI-v2.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "75",
                          "height": "75"
                        },
                        {
                          "type": "Image",
                          "id": "letter7",
                          "source": "https://storage.googleapis.com/images-01040218/lettreR-v2.png",
                          "scale": "fill",
                          "position": "absolute",
                          "width": "75",
                          "height": "75"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "Container",
              "width": "100vw",
              "height": "${viewport.shape == 'round' ? '30vh': '20vh'}",
              "item": [
                {
                  "type": "Frame",
                  "width": "100vw",
                  "height": "${viewport.shape == 'round' ? '35vh' : '20vh'}",
                  "top": "0vh",
                  "paddingTop": "${viewport.shape == 'round'? '02vh': '0vh'}",
                  "backgroundColor": "#BA2027",
                  "item": [
                    {
                      "when": "${viewport.shape != 'round'}",
                      "hintText": "Essayez, \"Alexa, info Pollair\" ou \"Alexa, quiz\"",
                      "type": "AlexaFooter"
                    },
                    {
                      "when": "${viewport.shape == 'round'}",
                      "type": "AlexaFooter",
                      "hintText": "Essayez, \"Alexa aide\""
                    }
                  ]
                }
              ],
              "position": "absolute",
              "top": "${viewport.shape == 'round' ? '70vh' : '80vh'}"
            }
          ]
        }
      ]
    }
  }
}

Now it does not work anymore and I have the following errors that I do not understand. Do you have any idea of or errors in the code?

- should NOT have additional properties : left(350,20)
- Failed to find JSON schema for graphic: AnimateItem(27,18)
- Failed to find JSON schema for graphic: AnimateItem(64,18)
- Failed to find JSON schema for graphic: AnimateItem(101,18)
- Failed to find JSON schema for graphic: AnimateItem(138,18)
- Failed to find JSON schema for graphic: AnimateItem(175,18)
- Failed to find JSON schema for graphic: AnimateItem(212,18)
- Failed to find JSON schema for graphic: AnimateItem(249,18)
- Failed to find JSON schema for graphic: Sequential(24,14)
- Failed to find JSON schema for graphic: Parallel(20,10)

In advance, thank you for your return.

Best regards,

apl
10 |5000

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

0 Answers