hart-estate-widget

Компонент HART Estate Widget

Способ установки с помощью NPM:

npm install hart-estate-widget --save

Пример использования:

import React, { useEffect, useState } from 'react';
import { Widget, rotationModes } from 'hart-estate-widget';
// либо
import 'hart-estate-widget/build/widget.bundle.js'; // в таком случае создается глобальная переменная WidgetLibrary

const WIDGET_OPTIONS = {
  tabs: ['planImage', 'rotation', 'panorama'],
  logo: '/path/to/logo.png',
  planImage: '/path/to/plan.jpg',
  rotationMode: rotationModes.DEFAULY,
  rotationData: {
    type: 'top_down',
    items: [
      '/path/to/rotation_image_1.jpg',
      ...
      '/path/to/rotation_image_5.jpg',
    ],
  },
  panoramaData: {
    type: 'sphere',
    items: [
      {
        camera_id: '1234',
        images: ['/path/to/panorama_image.jpg'],
        room_id: '1234',
      },
    ],
  },
};

const App = () => {
  const [widget, setWidget] = useState(null);

  useEffect(() => {
    const createdWidget = new Widget('#widget-container', WIDGET_OPTIONS);
    setState(createdWidget);
  }, []);
  
  return (
    <div>
      <div id="widget-container" />
    </div>
  );
}

export App;

Параметры:

{
  // элементы  
  tabs: ['rotation', 'panorama'], // включенные элементы

  // логотип
  logo: '', // путь к логотипу
  logoUrl: '', // ссылка, открывающаяся по клику на логотип

  // локализация
  locale: 'en', // языковой код ISO 639

  // ширина/высота
  width: 1920,
  height: 1080,
  resizable: true, // автоматически менять размер виджета под размер контейнера при изменении размеров окна

  // значения
  planImage: '', // путь к изображению планировки (необходимо для панорамного тура)
  topViewImage: '', // путь к изображению планировки сверху
  rotationMode: 'default', // режим работы изображений планировки
  rotationData: {}, // тип изображений и пути к изображениям кругового просмотра (порядок обязателен)
  panoramaData: {}, // тип панорамы и пути к изображениям 360°
  panoramaFov: 75, // угол обзора камеры в режиме панорманого тура
}

Типы элементов

tabs: [
  'rotation', // изображения кругового просмотра (порядок обязателен)
  'panorama', // изображения 360°
],
rotationMode: [
  rotationModes.DEFAULT, // режим просмотра вида сверху (несколько ракурсов) и стилизованной планировки
  rotationModes.THREESIXTY, // режим прокрутки изображений кругового просмотра
],
rotationData.type: [
  'top_down', // полная модель
  'middle_cut', // модеь со срезом посередине
],
panoramaData.type: [
  'sphere', // панорама с изображениями 360°
  'cube', // панорама с 6 изображениями (top, down, left, right, front, back)
],
locale: [
  'ru', // русский язык
  'en', // английский язык
],