hart-estate-widget 1.0.2 → 1.1.4

package/README.md

@@ -1,7 +1,147 @@
-# Компонент HART Estate
+# HART Estate Widget Component
 
-## Список доступных команд
 
-### `npm start` - запуск приложения
+## Installation using NPM:
 
-### `npm run build` - билд приложения
+`npm install hart-estate-widget  --save`
+
+## Usage example:
+
+```js
+import React, { useEffect, useState } from 'react';
+import { Widget, rotationModes } from 'hart-estate-widget';
+// or
+import 'hart-estate-widget/build/widget.bundle.js'; // in this case, a global variable WidgetLibrary is created
+
+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;
+
+```
+
+
+## Parameters:
+
+```js
+{
+  // 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
+  planImage: '', // path to the plan image (required for panoramic tour)
+  topViewImage: '', // path to the top view image
+  rotationMode: 'default', // mode of operation for plan images
+  rotationData: {}, // type of images and paths to circular view images (order is mandatory)
+  panoramaData: {}, // type of panorama and paths to 360° images
+  panoramaFov: 75, // camera field of view angle for panoramic tour
+
+  // colors
+  colors: {
+    main: '#HEX', // main color of buttons, elements
+    mainText: '#HEX', // text color for buttons, elements contrasting with the main color
+  },
+}
+
+```
+
+## Types of elements
+```js
+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
+],
+rotationData.type: [
+  'top_down', // full model
+  'middle_cut', // model with cut in the middle
+],
+panoramaData.type: [
+  'sphere', // 360° panorama
+  'cube', // panorama with 6 images (top, down, left, right, front, back)
+],
+locale: [
+  'ru', // Russian language
+  'en', // English language
+],
+```
+
+
+## Publishing with Nexus Registry NPM:
+```js
+// in @hart-estate/widget package.json:
+"publishConfig": {
+  "registry": "https://nexus.myhart.ru/repository/npm/"
+},
+```
+`npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
+`npm install`
+`npm run build`
+`npm publish`
+
+
+## Installation using Nexus Registry NPM:
+
+`npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
+
+```js
+// when reinstalling (updating), delete node_modules and package-lock.json
+// add .npmrc in root:
+  @hart-estate/widget:registry=https://nexus.myhart.ru/repository/npm/
+  registry=https://registry.npmjs.org/
+```
+
+`npm config set @hart-estate:registry https://nexus.myhart.ru/repository/npm/`
+`npm install`