Hart-estate-widget NPM

HART Estate Widget Component

Prerequisites

Installation using NPM:

npm install hart-estate-widget --save

Usage example:

HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>katmosfera</title>
    <link rel="icon" href="./assets/img/logo.png">
    <script src="./js/index.js" type="module"></script>
  </head>

  <body>
    <section class="widget-section">
      <div class="widget" id="widget"></div> <!--must match the first attribute in 'new Widget('#widget', options);' --> 
    </section>
  </body>
</html>

JS

import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
import '../assets/sass/index.sass'; // style
import logo from '../assets/img/logo.png'; // logo

const WIDGET_API_URL = 'https://backend.estate.hart-digital.com';

const createWidget = async (logoUrl) => {
  const widgetApiHandler = new ApiStore(WIDGET_API_URL)

  const { searchParams } = new URL(document.location);
  const planId = searchParams.get("id");

  const planData = await widgetApiHandler.loadWidgetData(planId);
  const options = { // the parameters you need
    ...planData.parsed,
    API_URL: WIDGET_API_URL,
    rotationMode: rotationModes.DEFAULT,
    tabs: ['panorama', 'rotation'],
    locale: 'en',
    logoUrl,
    logo,
  }

  new Widget('#widget', options); // must match the element id
}

createWidget('https://yoursite/'); // create a widget

Functionality check:

Instalization

npm install sass@1.62.1
npm install parcel@2.8.3
npm install @parcel/transformer-sass@2.8.3

Add files

add index.html to the ~/src/index.html using the above described content for HTML
add index.js to the ~/src/js/index.js using the above described content for JS
add logo.png to the ~/src/assets/img/logo.png (if the logo is not png then replace all paths to the logo)
add index.sass to the ~/src/assets/sass/index.sass using:

*, *:before, *:after
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-family: 'Proxima Nova'
  text-decoration: none
  font-weight: 400
  color: #fff
  outline: none
  padding: 0
  margin: 0
  box-sizing: border-box
  -webkit-box-sizing: border-box

body
  width: 100%
  height: 100%
  overflow: hidden

.widget-section
  width: 100%
  height: 100%
  .widget
    width: 100%
    height: 100%

Run

rm -rf dist && npx parcel ./src/index.html
open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da

Parameters:

{
  // elements  
  tabs: ['rotation', 'panorama'], // included elements

  // logo
  logo: '', // path to logo
  logoUrl: '', // link opened when logo is clicked

  // localization
  locale: 'en', // ISO 639 language code

  // width/height
  width: 1920,
  height: 1080,
  resizable: true, // automatically resize the widget to the size of the container when the window is resized

  // values
  rotationMode: 'default', // mode of operation for plan images
  panoramaFov: 75, // camera field of view angle for panoramic tour
  enableCameraTransitionBetweenPanoramas: true, // enable / disable camera rotation transition between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
  primaryCameraPointId: null, // primary camera point id for panorama tour
  floors: [ // array of floors, contains 360° images and panoramic tour data
    {
      original_plan_img: '',  // path to the original plan image (required for panoramic tour)
      styled_plan_img: '',  // path to the styled plan image (required for panoramic tour)
      top_view_img: '',  // path to the top view image
      panorama: '',  // type of panorama and paths to 360° images
      rotate: '',  // type of images and paths to circular view images (order is mandatory)
    }
  ],

  // colors
  colors: {
    main: '#HEX', // main color of buttons, elements
    mainText: '#HEX', // text color for buttons, elements contrasting with the main color
  },

  // panorama icons
  panoramaIcons: {
    spot: 'URL', // icon for camera points in one room
    door: 'URL' // icon for door
  },
}

Types of elements

tabs: [
  'rotation', // circular view images (order is mandatory)
  'panorama', // 360° images
],
rotationMode: [
  rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
  rotationModes.THREESIXTY, // image scrolling mode for circular view
],
floors[0].rotate.type: [
  'top_down', // full model
  'middle_cut', // model with cut in the middle
],
floors[0].panorama.type: [
  'sphere', // 360° panorama
  'cube', // panorama with 6 images (top, down, left, right, front, back)
],
locale: [
  'ru', // Russian language
  'en', // English language
],

estate widget hart

@everything-registry/sub-chunk-1827 @infinitebrahmanuniverse/nolb-hart

17 hours ago

5 days ago

11 days ago

13 days ago

1 month ago