hart-estate-widget

2.5.50 • Public • Published

HART Estate Widget Component

Prerequisites

node: 16.13.1

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 that are described below in "Parameters"
    ...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

  1. npm install sass@1.62.1
  2. npm install parcel@2.8.3
  3. npm install @parcel/transformer-sass@2.8.3

Add files

  1. add index.html to the ~/src/index.html using the above described content for HTML
  2. add index.js to the ~/src/js/index.js using the above described content for JS
  3. add logo.png to the ~/src/assets/img/logo.png (if the logo is not png then replace all paths to the logo)
  4. 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

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

Parameters:

Here you can see list of accessable options and example of using. There are accessable values of each option below in the block "Types of elements"

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

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

  // localization
  // accessable languages are in "Types of elements"
  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: '', // 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)
  enableCamerRotationBetweenPanoramas: true, // enable / disable camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
  instructionVisible: true, // enable / disable modal of instruction in 3D tour
  autoRotate: false, // enable / disable auto rotation in 3D tour
  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
  },

  // copyRight: all text in widget
  dictionaryOverrides: {
    "create-points": "Create a point", // text for create point
    "delete-points": "Remove point", // text for delete point
    "research-plan": "Research plan", // text for research plan
    "rotate-plan": "Rotate plan", // text for rotate plan
    "ok": "Ok", // button text
    "made-by-link": "https://getfloorplan.com/", // watermark link
    "made-by-text": "getfloorplan.com", // watermark text
    "instructions-hint-text": "", // additional text on the bottom of instruction modal
    "floor": "$0 floor" // floor text
  },

  API_URL: '', // api url

  // branding
  branding: {
    company_url: '', // link opened when logo is clicked (more priority than logoUrl)
    company_name: '', // watermark text (more priority than dictionaryOverrides['made-by-text'])
    widget_language: 'en', // ISO 639 language code
    logo_path: '', // path to logo
    
  // panorama icons
  panoramaIcons: {
    spot: 'URL', // icon for camera points in one room
    door: 'URL' // icon for door
  },

  // scales
  scales: ['x05', 'x1'],
}

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
  'es', // Spanish language
  'de', // German language
  'ja', // Japanese language
],
scales: [
  'x1',
  'x2',
  'x05'
],

Widget object from the REST API

name: "", // CRM plan id (only for CRM API)
original_plan_img: "", // deprecated, path to the original plan image
original_plans_img: [ // array of paths to the original plan images
  ""
], 
styled_plan_img: "", // path to the styled plan image
top_view_img: "", // path to the top view image
json: { // json with data for 3D tour
  type: "furniture", // type of json (furniture, neural)
  value: "" // path to json
},
panorama: { // type of panorama and paths to 360° images
  type: "sphere", // 360° panorama or 'cube' for 6 images
  items: {
    [
      camera_id: "" // camera id for panorama
      room_id: "" // room id for panorama  
      images: [ // array of paths to 360° sphere and sides of the cube if type is cube
        sphere: "",
        front: null,
        back: null,
        left: null,
        right: null,
        top: null,
        bottom: null,
        scene_depth: "", // path to exr file for depth map if available
      ]
    }
  ]
},
rotate: { // type of images and paths to circular view images
  type: "top_down", // full model or model with cut in the middle ('middle_cut')
  items: [ // array of paths to circular view images
    ""
  ]
}

Readme

Keywords

Package Sidebar

Install

npm i hart-estate-widget

Weekly Downloads

340

Version

2.5.50

License

none

Unpacked Size

2.7 MB

Total Files

6

Last publish

Collaborators

  • ibragimovai
  • juliasoloveva
  • funkylen
  • emilya_g
  • touchscale