npm install hart-estate-widget --save
<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>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 widgetnpm install sass@1.62.1npm install parcel@2.8.3npm install @parcel/transformer-sass@2.8.3
- 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%rm -rf dist && npx parcel ./src/index.html- open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
{
// 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
// значения
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)
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
},
}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
],