Human Viewer: Toolbar & Chapter Pagination Updates
- Clearer chapter pagination for tours
- More consistent toolbar experience across devices
- Configurable media controls for animations
The controls for navigating through multi-chapter tours have gotten two upgrades to better inform learners of their purpose and provide a more consistent experience across different device sizes:
- Relocated chapter navigation arrows. Just like the toolbar, the location of the chapter navigation arrows used to change depending on the size of the Viewer. At larger sizes these arrows would appear on each side of the model, and at smaller sizes they would appear at the bottom. Now, the arrows always appear in the lower-right corner of the model regardless of the Viewer's size. This update enables learners to recognize more quickly that the model is part of a tour and provides a more seamless experience if they resize the Viewer or access the tour from a different device.
- New progress indicator. When the Viewer is >600 pixels wide, the new chapter controls also inform learners of 1) what chapter they are currently viewing and 2) the total number of chapters in the tour (e.g., 1 / 4). When the Viewer is ≤600 pixels wide, this information is hidden to preserve space.
Large (≥961px wide)
Medium (601-960px wide)
Small (≤600px wide)
We’ve updated the toolbar to provide a more consistent experience when the Viewer is resized or accessed from different device types and sizes.
Previously, when the Viewer was ≥961 pixel wide, the toolbar would be appear at the bottom-center of the model but would move to the lower-right corner when the width was <961 pixels. Now, the toolbar remains in the lower-right corner of the model regardless of the Viewer's size, and simply decreases in scale when the width of the Viewer falls below 961 pixels to preserve space.
Large (≥961px wide)
Small (≤960px wide)
A new URL parameter, ui-media-controls, allows you to determine which media controls get displayed in your animated models or chapters:
|none||Do not show media controls|
|small||Only show play/pause button|
|full||Show play/pause button and scrubber|
For a full list of supported URL parameters, visit our developer portal (developer access required).