hosted-apl-overlay-1.0.0.json

{
  "type": "APL",
  "version": "1.7",
  "layouts": {
    "Overlay": {
      "parameters": [
        "line1",
        "line2",
        "line3"
      ],
      "item": {
        "type": "Container",
        "id": "overlayLayer",
        "display": "none",
        "position": "absolute",
        "justifyContent": "center",
        "alignItems": "center",
        "width": "100vw",
        "height": "100vh",
        "items": [
          {
            "type": "Frame",
            "description": "overlay background",
            "width": "100%",
            "height": "100%",
            "backgroundColor": "#00000099",
            "opacity": 70
          },
          {
            "type": "Container",
            "id": "hintBox",
            "description": "hint box",
            "position": "absolute",
            "width": "@hintBoxWidth",
            "height": "@hintBoxHeight",
            "items": [
              {
                "type": "Frame",
                "width": "@hintBoxWidth",
                "height": "@hintBoxHeight",
                "borderColor": "#B7AA9C",
                "borderWidth": "10",
                "borderRadius": "20dp",
                "backgroundColor": "#293131",
                "items": {
                  "type": "Container",
                  "width": "@hintBoxWidth",
                  "height": "@hintBoxHeight",
                  "padding": "20dp",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "items": [
                    {
                      "type": "Text",
                      "textAlign": "center",
                      "text": "${line1}",
                      "maxLines": 2
                    },
                    {
                      "type": "Text",
                      "textAlign": "center",
                      "text": "${line2}",
                      "maxLines": 2
                    },
                    {
                      "type": "Text",
                      "textAlign": "center",
                      "text": "${line3}",
                      "maxLines": 2
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  },
  "resources": [
    {
      "booleans": {
        "isPortrait": "${@viewportOrientation == @viewportOrientationPortrait}"
      },
      "dimensions": {
        "hintBoxHeight": "${viewport.height * .6}",
        "hintBoxWidth": "${viewport.width * .6}",
        "hintBoxTop": "${viewport.height * .2}"
      }
    },
    {
      "when": "${@isPortrait}",
      "dimensions": {
        "hintBoxHeight": "${viewport.height *.4}",
        "hintBoxWidth": "${viewport.width *.9}"
      }
    }
  ],
  "commands": {
    "showHint": {
      "commands": [
        {
          "type": "Sequential",
          "sequencer": "animation",
          "commands": [
            {
              "type": "SetValue",
              "componentId": "overlayLayer",
              "property": "display",
              "value": "normal"
            },
            {
              "type": "AnimateItem",
              "easing": "ease-in-out",
              "duration": 600,
              "componentId": "hintBox",
              "value": [
                {
                  "property": "transform",
                  "from": [
                    {
                      "translateY": "-100vh"
                    }
                  ],
                  "to": [
                    {
                      "translateY": 0
                    }
                  ]
                }
              ]
            },
            {
              "type": "AnimateItem",
              "easing": "ease-in-out",
              "duration": 450,
              "delay": 3000,
              "componentId": "hintBox",
              "value": [
                {
                  "property": "transform",
                  "from": [
                    {
                      "translateY": 0
                    }
                  ],
                  "to": [
                    {
                      "translateY": "-100vh"
                    }
                  ]
                }
              ]
            },
            {
              "type": "SetValue",
              "componentId": "overlayLayer",
              "property": "display",
              "value": "none"
            }
          ]
        }
      ]
    }
  }
}