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:

<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-identifier="your-identifier"
  data-vehicle-id="your-car-id"
></div>

Configuration Attributes

The component reads configuration from data attributes on the provided element:

Attribute	Type	Default	Description
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-vehicle-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

<!-- Using identifier -->
<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-identifier="vehicle-interior-123"
></div>

<!-- Using car ID -->
<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
></div>

Behavior

1. 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.

2. 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

3. 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