hart-estate-widget

    0.0.88 • Public • Published

    Компонент 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', // английский язык
    ],

    Install

    npm i hart-estate-widget

    DownloadsWeekly Downloads

    133

    Version

    0.0.88

    License

    none

    Unpacked Size

    2.42 MB

    Total Files

    6

    Last publish

    Collaborators

    • ibragimovai
    • juliasoloveva
    • funkylen