Carpose.de - Documentation
Carpose.de
  • React Integration
    • Getting Started
    • Demo
  • Car Search Modules
    • Car Search Form
    • Car Search Small
    • Car Search (KI)
    • Car Group
  • Offer Modules
    • Offer Slider
    • Offer Item
  • Misc Modules
    • Employee List
    • Store List
  • Components
    • Image Slider Viewer
    • 360° Interior Viewer
    • 360° Exterior Viewer
    • CO2 Class Label
    • Consumption Box
  • Angular Integration [DEPRECATED]
    • Getting Started
    • Slider
    • 360° Interior Viewer
    • 360° Exterior Viewer
Powered by GitBook
On this page
  • Overview
  • Installation
  • Usage
  • Configuration Attributes
  • Features
  • Example
  • Behavior
  • Integration with Other Components
  1. Components

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-car-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-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

<!-- 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-car-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

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.

PreviousImage Slider ViewerNext360° Exterior Viewer

Last updated 5 days ago