hart-estate-widget 2.7.7 → 2.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE.md +674 -0
  2. package/README.md +99 -44
  3. package/build/widget.bundle.js +1 -1
  4. package/build/widget.bundle.js.LICENSE.txt +10 -0
  5. package/build/widget.module.js +1 -1
  6. package/build/widget.module.js.LICENSE.txt +10 -0
  7. package/package.json +4 -2
package/README.md CHANGED
@@ -1,16 +1,65 @@
1
- # HART Estate Widget Component
1
+ # HART Estate Widget
2
2
 
3
- ## Prerequisites
3
+ The package is designed to present 2D and 3D floor plans generated by the AI service [getfloorplan.com](https://getfloorplan.com).
4
4
 
5
- ![node: ^18.0.0](https://img.shields.io/badge/nodeJS-^18.0.0-blue)
5
+ # Table of Contents
6
+ - [Quick Start](#quick-start)
7
+ - - [Example index.html](#html)
8
+ - - [Example index.js](#javascript)
9
+ - - [Example index.sass](#sass)
10
+ - [Docs](#docs)
11
+ - - [Parameters](#parameters)
12
+ - - [Types of Elements](#types-of-elements)
13
+ - - [REST API Object](#widget-object-from-the-rest-api)
14
+ - [Versioning](#versioning)
15
+ - [Copyright and License](#copyright-and-license)
16
+
17
+ # Quick Start
6
18
 
7
- ## Installation using NPM:
19
+ As a result, you will receive a website that can display various floor plans.
8
20
 
9
- `npm install hart-estate-widget --save`
21
+ ![node: ^18.0.0](https://img.shields.io/badge/nodeJS-^18.0.0-blue)
10
22
 
11
- ## Usage example:
23
+ - Download NodeJS 18+;
24
+ - Create a new project;
25
+ - Download the required packages
26
+ ```
27
+ npm install hart-estate-widget@2.7.5
28
+ npm install sass@1.62.1
29
+ npm install parcel@2.8.3
30
+ npm install @parcel/transformer-sass@2.8.3
31
+ ```
32
+ - Example structure of project:
33
+ ```
34
+ .
35
+ ├── package-lock.json
36
+ ├── package.json
37
+ ├── src
38
+ │ ├── assets
39
+ │ │ ├── img
40
+ │ │ │ ├── logo.png
41
+ │ │ └── sass
42
+ │ │ └── index.sass
43
+ │ ├── index.html
44
+ │ └── js
45
+ └ └── index.js
46
+ ```
47
+ - Copy-paste sample assets from below.
48
+ - Run with `rm -rf dist && npx parcel ./src/index.html`
49
+ - Open browser at:
50
+ http://localhost:1234/?id=228ba1dd-64d3-4d33-bcd7-b4c670bed40e
51
+
52
+ > The query `id` parameter accepts the UUID4 received from [getfloorplan.com](https://getfloorplan.com)
53
+ > You can use these UUID4 for test purposes:
54
+ > - Scandy style: `228ba1dd-64d3-4d33-bcd7-b4c670bed40e`
55
+ > - Boho style: `f9032373-bb2c-416e-b0ab-20b8fd24d482`
56
+ > - England style: `b21871a2-2d5b-4beb-817b-ed750eebab9a`
57
+ > - Neutral style: `e8553134-0457-488c-8d3e-611b0e2be4d4`
58
+ > - Modern style: `73b833c3-072a-4ac2-9f5d-7f7ac3d1fc9c`
59
+
60
+ ## HTML
61
+ Insert the example into a file `src/index.html`
12
62
 
13
- ### HTML
14
63
  ```html
15
64
  <html lang="en">
16
65
  <head>
@@ -29,7 +78,9 @@
29
78
  </html>
30
79
  ```
31
80
 
32
- ### JS
81
+ ## JavaScript
82
+ Insert the example into a file `src/js/index.js`
83
+
33
84
  ```js
34
85
  import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
35
86
  import '../assets/sass/index.sass'; // style
@@ -60,18 +111,9 @@ const createWidget = async (logoUrl) => {
60
111
  createWidget('https://yoursite/'); // create a widget
61
112
  ```
62
113
 
63
- ## Functionality check:
114
+ ## SASS
115
+ Insert the example into a file `src/sass/index.sass`
64
116
 
65
- ### Instalization
66
- 1. `npm install sass@1.62.1`
67
- 2. `npm install parcel@2.8.3`
68
- 3. `npm install @parcel/transformer-sass@2.8.3`
69
-
70
- ### Add files
71
- 4. add index.html to the ~/src/index.html using the above described content for HTML
72
- 5. add index.js to the ~/src/js/index.js using the above described content for JS
73
- 6. add logo.png to the ~/src/assets/img/logo.png (if the logo is not png then replace all paths to the logo)
74
- 7. add index.sass to the ~/src/assets/sass/index.sass using:
75
117
  ```sass
76
118
  *, *:before, *:after
77
119
  -webkit-font-smoothing: antialiased
@@ -100,24 +142,21 @@ body
100
142
  ```
101
143
 
102
144
 
103
- ### Run
104
- 8. `rm -rf dist && npx parcel ./src/index.html`
105
- 9. open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
106
-
107
-
145
+ # Docs
108
146
  ## Parameters:
109
- 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"
147
+ Here you can see a list of accessible options and examples of usage. There are accessible values for each option below in the block "Types of Elements".
148
+
110
149
  ```js
111
150
  {
112
151
  // elements
113
152
  tabs: ['rotation', 'panorama'], // included elements
114
153
 
115
154
  // logo
116
- logo: '', // path/link to logo
155
+ logo: '', // path/link to the logo
117
156
  logoUrl: '', // link opened when logo is clicked
118
157
 
119
158
  // localization
120
- // accessable languages are in "Types of elements"
159
+ // accessible languages are in "Types of Elements"
121
160
  locale: 'en', // ISO 639 language code
122
161
 
123
162
  // width/height
@@ -130,11 +169,11 @@ Here you can see list of accessable options and example of using. There are acce
130
169
  panoramaFov: 75, // camera field of view angle for panoramic tour
131
170
  preloadPerPanoramaCount: 3, // the number of panoramas loaded next to the current one to optimize transitions
132
171
  forcePreloadNonCached: true, // give preloading a higher priority for unloaded panoramas than by distance from the current one
133
- enableCameraTransitionBetweenPanoramas: true, // enable / disable camera rotation transition between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
134
- enableCamerRotationBetweenPanoramas: true, // enable / disable camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
135
- instructionVisible: true, // enable / disable modal of instruction in 3D tour
136
- autoRotate: false, // enable / disable auto rotation in 3D tour
137
- primaryCameraPointId: null, // primary camera point id for panorama tour
172
+ enableCameraTransitionBetweenPanoramas: true, // enable/disable camera rotation transition between panoramas (if CameraPoint.Rotation.Yaw is defined in JSON)
173
+ enableCameraRotationBetweenPanoramas: true, // enable/disable camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in JSON)
174
+ instructionVisible: true, // enable/disable modal of instruction in 3D tour
175
+ autoRotate: false, // enable/disable auto rotation in 3D tour
176
+ primaryCameraPointId: null, // primary camera point ID for panorama tour
138
177
  floors: [ // array of floors, contains 360° images and panoramic tour data
139
178
  {
140
179
  original_plan_img: '', // path to the original plan image (required for panoramic tour)
@@ -164,12 +203,12 @@ Here you can see list of accessable options and example of using. There are acce
164
203
  "floor": "$0 floor" // floor text
165
204
  },
166
205
 
167
- API_URL: '', // api url
206
+ API_URL: '', // API URL
168
207
 
169
- // branding
208
+ // branding.
170
209
  branding: {
171
- company_url: '', // link opened when logo is clicked (more priority than logoUrl)
172
- company_name: '', // watermark text (more priority than dictionaryOverrides['made-by-text'])
210
+ company_url: '', // link opened when logo is clicked (higher priority than logoUrl)
211
+ company_name: '', // watermark text (higher priority than dictionaryOverrides['made-by-text'])
173
212
  widget_language: 'en', // ISO 639 language code
174
213
  logo_path: '', // path to logo
175
214
 
@@ -217,25 +256,28 @@ scales: [
217
256
  ],
218
257
  ```
219
258
 
220
- ### Widget object from the REST API
259
+ ## Widget object from the REST API
260
+
261
+ JSON object returned from backend
262
+
221
263
  ```js
222
- name: "", // CRM plan id (only for CRM API)
264
+ name: "", // CRM plan ID (only for CRM API)
223
265
  original_plan_img: "", // deprecated, path to the original plan image
224
266
  original_plans_img: [ // array of paths to the original plan images
225
267
  ""
226
268
  ],
227
269
  styled_plan_img: "", // path to the styled plan image
228
270
  top_view_img: "", // path to the top view image
229
- json: { // json with data for 3D tour
230
- type: "furniture", // type of json (furniture, neural)
231
- value: "" // path to json
271
+ json: { // JSON with data for 3D tour
272
+ type: "furniture", // type of JSON (furniture, neural)
273
+ value: "" // path to JSON
232
274
  },
233
275
  panorama: { // type of panorama and paths to 360° images
234
276
  type: "sphere", // 360° panorama or 'cube' for 6 images
235
277
  items: {
236
278
  [
237
- camera_id: "" // camera id for panorama
238
- room_id: "" // room id for panorama
279
+ camera_id: "" // camera ID for panorama
280
+ room_id: "" // room ID for panorama
239
281
  images: [ // array of paths to 360° sphere and sides of the cube if type is cube
240
282
  sphere: "",
241
283
  front: null,
@@ -244,7 +286,7 @@ panorama: { // type of panorama and paths to 360° images
244
286
  right: null,
245
287
  top: null,
246
288
  bottom: null,
247
- scene_depth: "", // path to exr file for depth map if available
289
+ scene_depth: "", // path to EXR file for depth map if available
248
290
  ]
249
291
  }
250
292
  ]
@@ -256,3 +298,16 @@ rotate: { // type of images and paths to circular view images
256
298
  ]
257
299
  }
258
300
  ```
301
+
302
+ # Versioning
303
+ For the latest stable version refer to the latest up-to-date version in [Quick Start](#quick-start)
304
+
305
+ This project is maintained under the [Semantic Versioning guidelines](https://semver.org).
306
+
307
+ However, some versions are being developed for specific clients. **We do not recommend using them**, as changes in these versions are not documented and may affect your functionality.
308
+
309
+ # Copyright and license
310
+ The project code is licensed under the [GPLv3 license](https://www.gnu.org/licenses/gpl-3.0-standalone.html).
311
+
312
+ Project code and documentation copyright [hart-digital.com](https://hart-digital.com).
313
+ All renders of floor plans copyright [getfloorplan.com](https://getfloorplan.com).