This is a comparison view for distance. Graphics represent a planet's distance from the sun, relative to the farthest planet. Graphics are highlighted when they correspond with the planet(s) in question.
Stagger animations were added to the document's onMount
field and the distance graphics were animated to scale in at a constant rate, relative to their distance from the sun.
- Distance graphics are created using Containers, Frames and TouchWrappers that are sized according to distance data.
- Within the footer, a
textToHint
transform is used to create a Hint, which adds the user-defined wake word to a provided string. This is then supplied to theAlexaFooter
'sfooterHint
* property.*
- alexa-styles
- alexa-layouts
- Container
- Frame
- TouchWrapper
- Image
- Text
- alexa-layouts:AlexaHeader
- alexa-layouts:AlexaFooter
The Layouts are the same for these devices, with Text callouts positioned at the bottom. The callout on the right is only shown when the distance is relative to the sun and not another planet.
Vertical height limits the number of planet graphics that can fit on screen, so it is constrained to three at a time.
The screen size prevents effective imagery, so the layout is altered to show only the relevant information.