360° Interior Viewer
Overview
The Interior Viewer
component displays an interactive 360° panoramic view of a vehicle's interior. It provides navigation controls for panning, zooming, and fullscreen viewing, allowing users to explore the interior of a vehicle in detail.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the Interior Viewer component in a standard HTML page:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
data-carpose-component
string
-
Identifies the component type, must be set to "interior-viewer"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-identifier
string
-
Identifier for the interior panorama image. Required if car-id is not provided.
data-car-id
string
-
ID of the car to display interior panorama for. Required if identifier is not provided.
Features
Interactive 360° panoramic view of vehicle interiors
Navigation controls for:
Panning up, down, left, and right
Zooming in and out
Fullscreen viewing (on non-mobile devices)
Loading indicator while panorama is being fetched
Fallback screen when no interior panorama is available
Overlay with usage hints
Example
Behavior
Data Loading:
On initialization, the component fetches the interior panorama data from the API using either the provided identifier or car ID.
A loading screen is displayed while the image is being loaded.
If no panorama is available, a message is displayed indicating that no 360° interior view is available.
Navigation Controls:
Arrow buttons allow panning up, down, left, and right
Plus/minus buttons control zoom level
Fullscreen button toggles fullscreen mode (not available on mobile devices)
Users can also navigate by dragging the panorama with their mouse or touch gestures
Responsive Behavior:
The component adapts to the container size
Controls are accessible on both desktop and mobile devices
Fullscreen option is automatically disabled on mobile devices
Integration with Other Components
The Interior Viewer component is typically used in conjunction with the Car Detail view to provide an immersive experience of the vehicle's interior. It complements the Exterior Viewer component, which provides a similar experience for the vehicle's exterior.
Last updated