hart-estate-widget 2.5.51 → 2.6.1

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 (6) hide show
  1. package/README.md +256 -255
  2. package/build/widget.bundle.js +1 -1
  3. package/build/widget.bundle.js.LICENSE.txt +0 -10
  4. package/build/widget.module.js +1 -1
  5. package/build/widget.module.js.LICENSE.txt +0 -10
  6. package/package.json +67 -67
package/README.md CHANGED
@@ -1,255 +1,256 @@
1
- # HART Estate Widget Component
2
-
3
- ## Prerequisites
4
-
5
- ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
6
-
7
- ## Installation using NPM:
8
-
9
- `npm install hart-estate-widget --save`
10
-
11
- ## Usage example:
12
-
13
- ### HTML
14
- ```html
15
- <html lang="en">
16
- <head>
17
- <meta charset="utf-8">
18
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
19
- <title>katmosfera</title>
20
- <link rel="icon" href="./assets/img/logo.png">
21
- <script src="./js/index.js" type="module"></script>
22
- </head>
23
-
24
- <body>
25
- <section class="widget-section">
26
- <div class="widget" id="widget"></div> <!--must match the first attribute in 'new Widget('#widget', options);' -->
27
- </section>
28
- </body>
29
- </html>
30
- ```
31
-
32
- ### JS
33
- ```js
34
- import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
35
- import '../assets/sass/index.sass'; // style
36
- import logo from '../assets/img/logo.png'; // logo
37
-
38
- const WIDGET_API_URL = 'https://backend.estate.hart-digital.com';
39
-
40
- const createWidget = async (logoUrl) => {
41
- const widgetApiHandler = new ApiStore(WIDGET_API_URL)
42
-
43
- const { searchParams } = new URL(document.location);
44
- const planId = searchParams.get("id");
45
-
46
- const planData = await widgetApiHandler.loadWidgetData(planId);
47
- const options = { // the parameters you need that are described below in "Parameters"
48
- ...planData.parsed,
49
- API_URL: WIDGET_API_URL,
50
- rotationMode: rotationModes.DEFAULT,
51
- tabs: ['panorama', 'rotation'],
52
- locale: 'en',
53
- logoUrl,
54
- logo,
55
- }
56
-
57
- new Widget('#widget', options); // must match the element id
58
- }
59
-
60
- createWidget('https://yoursite/'); // create a widget
61
- ```
62
-
63
- ## Functionality check:
64
-
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
- ```sass
76
- *, *:before, *:after
77
- -webkit-font-smoothing: antialiased
78
- -moz-osx-font-smoothing: grayscale
79
- font-family: 'Proxima Nova'
80
- text-decoration: none
81
- font-weight: 400
82
- color: #fff
83
- outline: none
84
- padding: 0
85
- margin: 0
86
- box-sizing: border-box
87
- -webkit-box-sizing: border-box
88
-
89
- body
90
- width: 100%
91
- height: 100%
92
- overflow: hidden
93
-
94
- .widget-section
95
- width: 100%
96
- height: 100%
97
- .widget
98
- width: 100%
99
- height: 100%
100
- ```
101
-
102
-
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
-
108
- ## 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"
110
- ```js
111
- {
112
- // elements
113
- tabs: ['rotation', 'panorama'], // included elements
114
-
115
- // logo
116
- logo: '', // path/link to logo
117
- logoUrl: '', // link opened when logo is clicked
118
-
119
- // localization
120
- // accessable languages are in "Types of elements"
121
- locale: 'en', // ISO 639 language code
122
-
123
- // width/height
124
- width: 1920,
125
- height: 1080,
126
- resizable: true, // automatically resize the widget to the size of the container when the window is resized
127
-
128
- // values
129
- rotationMode: '', // mode of operation for plan images
130
- panoramaFov: 75, // camera field of view angle for panoramic tour
131
- enableCameraTransitionBetweenPanoramas: true, // enable / disable camera rotation transition between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
132
- instructionVisible: true, // enable / disable modal of instruction in 3D tour
133
- autoRotate: false, // enable / disable auto rotation in 3D tour
134
- primaryCameraPointId: null, // primary camera point id for panorama tour
135
- floors: [ // array of floors, contains 360° images and panoramic tour data
136
- {
137
- original_plan_img: '', // path to the original plan image (required for panoramic tour)
138
- styled_plan_img: '', // path to the styled plan image (required for panoramic tour)
139
- top_view_img: '', // path to the top view image
140
- panorama: '', // type of panorama and paths to 360° images
141
- rotate: '', // type of images and paths to circular view images (order is mandatory)
142
- }
143
- ],
144
-
145
- // colors
146
- colors: {
147
- main: '#HEX', // main color of buttons, elements
148
- mainText: '#HEX', // text color for buttons, elements contrasting with the main color
149
- },
150
-
151
- // copyRight: all text in widget
152
- dictionaryOverrides: {
153
- "create-points": "Create a point", // text for create point
154
- "delete-points": "Remove point", // text for delete point
155
- "research-plan": "Research plan", // text for research plan
156
- "rotate-plan": "Rotate plan", // text for rotate plan
157
- "ok": "Ok", // button text
158
- "made-by-link": "https://getfloorplan.com/", // watermark link
159
- "made-by-text": "getfloorplan.com", // watermark text
160
- "instructions-hint-text": "", // additional text on the bottom of instruction modal
161
- "floor": "$0 floor" // floor text
162
- },
163
-
164
- API_URL: '', // api url
165
-
166
- // branding
167
- branding: {
168
- company_url: '', // link opened when logo is clicked (more priority than logoUrl)
169
- company_name: '', // watermark text (more priority than dictionaryOverrides['made-by-text'])
170
- widget_language: 'en', // ISO 639 language code
171
- logo_path: '', // path to logo
172
-
173
- // panorama icons
174
- panoramaIcons: {
175
- spot: 'URL', // icon for camera points in one room
176
- door: 'URL' // icon for door
177
- },
178
-
179
- // scales
180
- scales: ['x05', 'x1'],
181
- }
182
-
183
- ```
184
-
185
- ## Types of elements
186
- ```js
187
- tabs: [
188
- 'rotation', // circular view images (order is mandatory)
189
- 'panorama', // 360° images
190
- ],
191
- rotationMode: [
192
- rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
193
- rotationModes.THREESIXTY, // image scrolling mode for circular view
194
- ],
195
- floors[0].rotate.type: [
196
- 'top_down', // full model
197
- 'middle_cut', // model with cut in the middle
198
- ],
199
- floors[0].panorama.type: [
200
- 'sphere', // 360° panorama
201
- 'cube', // panorama with 6 images (top, down, left, right, front, back)
202
- ],
203
- locale: [
204
- 'ru', // Russian language
205
- 'en', // English language
206
- 'es', // Spanish language
207
- 'de', // German language
208
- 'ja', // Japanese language
209
- ],
210
- scales: [
211
- 'x1',
212
- 'x2',
213
- 'x05'
214
- ],
215
- ```
216
-
217
- ### Widget object from the REST API
218
- ```js
219
- name: "", // CRM plan id (only for CRM API)
220
- original_plan_img: "", // deprecated, path to the original plan image
221
- original_plans_img: [ // array of paths to the original plan images
222
- ""
223
- ],
224
- styled_plan_img: "", // path to the styled plan image
225
- top_view_img: "", // path to the top view image
226
- json: { // json with data for 3D tour
227
- type: "furniture", // type of json (furniture, neural)
228
- value: "" // path to json
229
- },
230
- panorama: { // type of panorama and paths to 360° images
231
- type: "sphere", // 360° panorama or 'cube' for 6 images
232
- items: {
233
- [
234
- camera_id: "" // camera id for panorama
235
- room_id: "" // room id for panorama
236
- images: [ // array of paths to 360° sphere and sides of the cube if type is cube
237
- sphere: "",
238
- front: null,
239
- back: null,
240
- left: null,
241
- right: null,
242
- top: null,
243
- bottom: null,
244
- scene_depth: "", // path to exr file for depth map if available
245
- ]
246
- }
247
- ]
248
- },
249
- rotate: { // type of images and paths to circular view images
250
- type: "top_down", // full model or model with cut in the middle ('middle_cut')
251
- items: [ // array of paths to circular view images
252
- ""
253
- ]
254
- }
255
- ```
1
+ # HART Estate Widget Component
2
+
3
+ ## Prerequisites
4
+
5
+ ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
6
+
7
+ ## Installation using NPM:
8
+
9
+ `npm install hart-estate-widget --save`
10
+
11
+ ## Usage example:
12
+
13
+ ### HTML
14
+ ```html
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="utf-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
19
+ <title>katmosfera</title>
20
+ <link rel="icon" href="./assets/img/logo.png">
21
+ <script src="./js/index.js" type="module"></script>
22
+ </head>
23
+
24
+ <body>
25
+ <section class="widget-section">
26
+ <div class="widget" id="widget"></div> <!--must match the first attribute in 'new Widget('#widget', options);' -->
27
+ </section>
28
+ </body>
29
+ </html>
30
+ ```
31
+
32
+ ### JS
33
+ ```js
34
+ import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
35
+ import '../assets/sass/index.sass'; // style
36
+ import logo from '../assets/img/logo.png'; // logo
37
+
38
+ const WIDGET_API_URL = 'https://backend.estate.hart-digital.com';
39
+
40
+ const createWidget = async (logoUrl) => {
41
+ const widgetApiHandler = new ApiStore(WIDGET_API_URL)
42
+
43
+ const { searchParams } = new URL(document.location);
44
+ const planId = searchParams.get("id");
45
+
46
+ const planData = await widgetApiHandler.loadWidgetData(planId);
47
+ const options = { // the parameters you need that are described below in "Parameters"
48
+ ...planData.parsed,
49
+ API_URL: WIDGET_API_URL,
50
+ rotationMode: rotationModes.DEFAULT,
51
+ tabs: ['panorama', 'rotation'],
52
+ locale: 'en',
53
+ logoUrl,
54
+ logo,
55
+ }
56
+
57
+ new Widget('#widget', options); // must match the element id
58
+ }
59
+
60
+ createWidget('https://yoursite/'); // create a widget
61
+ ```
62
+
63
+ ## Functionality check:
64
+
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
+ ```sass
76
+ *, *:before, *:after
77
+ -webkit-font-smoothing: antialiased
78
+ -moz-osx-font-smoothing: grayscale
79
+ font-family: 'Proxima Nova'
80
+ text-decoration: none
81
+ font-weight: 400
82
+ color: #fff
83
+ outline: none
84
+ padding: 0
85
+ margin: 0
86
+ box-sizing: border-box
87
+ -webkit-box-sizing: border-box
88
+
89
+ body
90
+ width: 100%
91
+ height: 100%
92
+ overflow: hidden
93
+
94
+ .widget-section
95
+ width: 100%
96
+ height: 100%
97
+ .widget
98
+ width: 100%
99
+ height: 100%
100
+ ```
101
+
102
+
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
+
108
+ ## 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"
110
+ ```js
111
+ {
112
+ // elements
113
+ tabs: ['rotation', 'panorama'], // included elements
114
+
115
+ // logo
116
+ logo: '', // path/link to logo
117
+ logoUrl: '', // link opened when logo is clicked
118
+
119
+ // localization
120
+ // accessable languages are in "Types of elements"
121
+ locale: 'en', // ISO 639 language code
122
+
123
+ // width/height
124
+ width: 1920,
125
+ height: 1080,
126
+ resizable: true, // automatically resize the widget to the size of the container when the window is resized
127
+
128
+ // values
129
+ rotationMode: '', // mode of operation for plan images
130
+ panoramaFov: 75, // camera field of view angle for panoramic tour
131
+ enableCameraTransitionBetweenPanoramas: true, // enable / disable camera rotation transition between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
132
+ enableCamerRotationBetweenPanoramas: true, // enable / disable camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in json)
133
+ instructionVisible: true, // enable / disable modal of instruction in 3D tour
134
+ autoRotate: false, // enable / disable auto rotation in 3D tour
135
+ primaryCameraPointId: null, // primary camera point id for panorama tour
136
+ floors: [ // array of floors, contains 360° images and panoramic tour data
137
+ {
138
+ original_plan_img: '', // path to the original plan image (required for panoramic tour)
139
+ styled_plan_img: '', // path to the styled plan image (required for panoramic tour)
140
+ top_view_img: '', // path to the top view image
141
+ panorama: '', // type of panorama and paths to 360° images
142
+ rotate: '', // type of images and paths to circular view images (order is mandatory)
143
+ }
144
+ ],
145
+
146
+ // colors
147
+ colors: {
148
+ main: '#HEX', // main color of buttons, elements
149
+ mainText: '#HEX', // text color for buttons, elements contrasting with the main color
150
+ },
151
+
152
+ // copyRight: all text in widget
153
+ dictionaryOverrides: {
154
+ "create-points": "Create a point", // text for create point
155
+ "delete-points": "Remove point", // text for delete point
156
+ "research-plan": "Research plan", // text for research plan
157
+ "rotate-plan": "Rotate plan", // text for rotate plan
158
+ "ok": "Ok", // button text
159
+ "made-by-link": "https://getfloorplan.com/", // watermark link
160
+ "made-by-text": "getfloorplan.com", // watermark text
161
+ "instructions-hint-text": "", // additional text on the bottom of instruction modal
162
+ "floor": "$0 floor" // floor text
163
+ },
164
+
165
+ API_URL: '', // api url
166
+
167
+ // branding
168
+ branding: {
169
+ company_url: '', // link opened when logo is clicked (more priority than logoUrl)
170
+ company_name: '', // watermark text (more priority than dictionaryOverrides['made-by-text'])
171
+ widget_language: 'en', // ISO 639 language code
172
+ logo_path: '', // path to logo
173
+
174
+ // panorama icons
175
+ panoramaIcons: {
176
+ spot: 'URL', // icon for camera points in one room
177
+ door: 'URL' // icon for door
178
+ },
179
+
180
+ // scales
181
+ scales: ['x05', 'x1'],
182
+ }
183
+
184
+ ```
185
+
186
+ ## Types of elements
187
+ ```js
188
+ tabs: [
189
+ 'rotation', // circular view images (order is mandatory)
190
+ 'panorama', // 360° images
191
+ ],
192
+ rotationMode: [
193
+ rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
194
+ rotationModes.THREESIXTY, // image scrolling mode for circular view
195
+ ],
196
+ floors[0].rotate.type: [
197
+ 'top_down', // full model
198
+ 'middle_cut', // model with cut in the middle
199
+ ],
200
+ floors[0].panorama.type: [
201
+ 'sphere', // 360° panorama
202
+ 'cube', // panorama with 6 images (top, down, left, right, front, back)
203
+ ],
204
+ locale: [
205
+ 'ru', // Russian language
206
+ 'en', // English language
207
+ 'es', // Spanish language
208
+ 'de', // German language
209
+ 'ja', // Japanese language
210
+ ],
211
+ scales: [
212
+ 'x1',
213
+ 'x2',
214
+ 'x05'
215
+ ],
216
+ ```
217
+
218
+ ### Widget object from the REST API
219
+ ```js
220
+ name: "", // CRM plan id (only for CRM API)
221
+ original_plan_img: "", // deprecated, path to the original plan image
222
+ original_plans_img: [ // array of paths to the original plan images
223
+ ""
224
+ ],
225
+ styled_plan_img: "", // path to the styled plan image
226
+ top_view_img: "", // path to the top view image
227
+ json: { // json with data for 3D tour
228
+ type: "furniture", // type of json (furniture, neural)
229
+ value: "" // path to json
230
+ },
231
+ panorama: { // type of panorama and paths to 360° images
232
+ type: "sphere", // 360° panorama or 'cube' for 6 images
233
+ items: {
234
+ [
235
+ camera_id: "" // camera id for panorama
236
+ room_id: "" // room id for panorama
237
+ images: [ // array of paths to 360° sphere and sides of the cube if type is cube
238
+ sphere: "",
239
+ front: null,
240
+ back: null,
241
+ left: null,
242
+ right: null,
243
+ top: null,
244
+ bottom: null,
245
+ scene_depth: "", // path to exr file for depth map if available
246
+ ]
247
+ }
248
+ ]
249
+ },
250
+ rotate: { // type of images and paths to circular view images
251
+ type: "top_down", // full model or model with cut in the middle ('middle_cut')
252
+ items: [ // array of paths to circular view images
253
+ ""
254
+ ]
255
+ }
256
+ ```