Touch Wrapper height simulator vs device?

Question

question

newuser-fd1fcd19-5865-4bf2-a186-0ec9e517aaa7 asked Mar 27, '19

Touch Wrapper height simulator vs device?

Hi everyone,

I'm trying to make some kind of bar graph using APL. Works like a charm when just trying to display the bars, but after trying to wrap each bar into a touch wrapper, it appears that the positioning or the height of either the touch wrapper or the frame inside the touch wrapper seems to have an unexpected behaviour.

The weird thing is that it appears fine of the APL editor, and and the Test simulator, but not on devices.

The code without the touch wrapper, which works fine:

...
{
  "type": "Container",
  "width": "60vw",
  "maxWidth": "60vw",
  "data": "${payload.bargraph.data.VALUES}",
  "alignItems": "end",
  "direction": "row",
  "justifyContent": "spaceBetween",
  "items": [
    {
      "height": "${payload.bargraph.data.VALUES[index]}%",
      "type": "Frame",
      "width": "5dp",
      "backgroundColor": "#66cbff"
    }
  ]
}
...

And with the touch wrapper, which displays differently on devices compared to simulators:

...
{
  "type": "Container",
  "width": "60vw",
  "maxWidth": "60vw",
  "data": "${payload.bargraph.data.VALUES}",
  "alignItems": "end",
  "direction": "row",
  "justifyContent": "spaceBetween",
  "items": [
    {
      "type": "TouchWrapper",
      "onPress": [{ 
        "type": "SendEvent", 
        "arguments": ["${index}", "bargraph"]
      }],
      "height": "${payload.bargraph.data.VALUES[index]}%",
      "item": [{
        "type": "Frame",
        "width": "5dp",
        "backgroundColor": "#66cbff",
        "height": "100%"
      }]
      
    }
  ]
}
...

I found a workaround, which is to force the height of the container, but it's not really what I wanted, as the Container above that is using flexbox-grow to scale-up. I'm surprised about the fact that the TouchWrapper seems to have an odd behaviour.

Alex

alexa skills kit apl alexa simulator display templates

10 |5000

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

Answer 1 · 2019-04-01T16:53:42Z

Gaetano@Amazon answered Apr 1, '19

Hi,

thanks for posting. By default, a TouchWrapper is not "visible" by the user so in order to keep track of its position I'd suggest setting the same width and height as the Frame that is contained inside. Here's an example:

{
    "type": "TouchWrapper",
    "width": "50vw",
    "height": "50vh",
    "onPress": {
        "type": "SendEvent",
        "arguments": [
            "spot"
        ]
    },
    "item": [{
        "type": "Frame",
        "borderColor": "#f44242",
        "borderWidth": "5px",
        "width": "50vw",
        "height": "50vh",
        "item": [{
            "type": "Image",
            "width": "50vw",
            "height": "50vh",
            "source": "https://pngimg.com/uploads/amazon/amazon_PNG27.png"
        }]
    }]
},

As you can see they are both set as 50vw and 50vh. Also, the frame has a borderWidth of 5px wich let you "see" what is the TouchWrapper actually wrapping.

Please share your full JSON layout and datasources (or hardcode them) so we can assist you further.

Which devices are you trying to render the layout on? Also, please share some pictures of the rendering result of the simulator versus the device.

Kind regards,
Gaetano

10 |5000

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

question