@operato/scene-indoor-map 8.0.0-beta.0 → 8.0.0-beta.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. package/package.json +4 -4
  2. package/CHANGELOG.md +0 -821
  3. package/demo/imu-mqtt-node/imu-publisher.js +0 -66
  4. package/demo/imu-mqtt-node/package.json +0 -16
  5. package/demo/index-camera.html +0 -108
  6. package/demo/index-gaussian.html +0 -184
  7. package/demo/index-indoor-map-property.html +0 -96
  8. package/demo/index-indoor-map.html +0 -289
  9. package/demo/index-rack-property.html +0 -76
  10. package/demo/index.html +0 -365
  11. package/demo/things-scene-indoor-map.html +0 -6
  12. package/src/beacon.ts +0 -75
  13. package/src/camera.ts +0 -196
  14. package/src/floor.ts +0 -385
  15. package/src/index.ts +0 -9
  16. package/src/indoor-map.ts +0 -213
  17. package/src/quaternion.ts +0 -129
  18. package/src/rack.ts +0 -100
  19. package/src/templates/beacon.ts +0 -16
  20. package/src/templates/camera.ts +0 -21
  21. package/src/templates/index.ts +0 -4
  22. package/src/templates/indoor-map.ts +0 -17
  23. package/src/templates/rack.ts +0 -23
  24. package/test/basic-test.html +0 -67
  25. package/test/index.html +0 -22
  26. package/tsconfig.json +0 -23
  27. package/tsconfig.tsbuildinfo +0 -1
package/demo/index.html DELETED
@@ -1,365 +0,0 @@
1
- <!doctype html>
2
- <!--
3
- @license
4
- Copyright © HatioLab Inc. All rights reserved.
5
- -->
6
- <html>
7
- <head>
8
- <meta charset="utf-8">
9
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10
- <title>things-scene-indoor-map Demo</title>
11
- <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
12
-
13
- <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
14
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
15
-
16
- <link rel="import" href="./things-scene-indoor-map.html">
17
-
18
- <style is="custom-style">
19
-
20
- @font-face {
21
- font-family: "Bitstream Vera Serif Bold";
22
- src: url("fonts/VeraSeBd.ttf");
23
- }
24
-
25
- things-scene-viewer {
26
- display: block;
27
- width: 100%;
28
- height: 560px;
29
- }
30
-
31
-
32
- </style>
33
- </head>
34
- <body unresolved>
35
-
36
- <template is="dom-bind" id="app">
37
- <p>An example of <code>&lt;things-scene-indoor-map&gt;</code>:</p>
38
-
39
- <things-scene-viewer id='scene'
40
- scene='{{scene}}'
41
- selected='{{selected}}'
42
- model='[[model]]'
43
- mode="1">
44
- <things-scene-layer type="selection-layer"></things-scene-layer>
45
- <things-scene-layer type="modeling-layer"></things-scene-layer>
46
- <things-scene-handler type="text-editor"></things-scene-handler>
47
- <things-scene-handler type="move-handler"></things-scene-handler>
48
- </things-scene-viewer>
49
-
50
- <things-scene-properties scene="[[scene]]"
51
- selected="[[selected]]"
52
- model="{{target}}"
53
- bounds="{{bounds}}">
54
- <fieldset class="same-width">
55
- <legend>Indoor Map Properties</legend>
56
-
57
- <div>
58
- <label>left</label>
59
- <input type="number" value-as-number="{{target.left::change}}"/>
60
- <label>top</label>
61
- <input type="number" value-as-number="{{target.top::change}}"/>
62
- <label>width</label>
63
- <input type="number" value-as-number="{{target.width::change}}"/>
64
- <label>height</label>
65
- <input type="number" value-as-number="{{target.height::change}}"/>
66
- </div>
67
-
68
- <label>Active Floor</label>
69
- <input type="number" value-as-number="{{target.activeIndex::change}}" min="0" max="100" step="1" numberonly="true" on-change="changeActive" />
70
-
71
- <div>
72
- <div>
73
- <span id='add-floor' on-click="addFloor">+</span>
74
- </div>
75
-
76
- <template is="dom-repeat" items="[[floors]]">
77
- <div>
78
- <span>[[item.name]]</span>
79
- <span>-</span>
80
- </div>
81
- </template>
82
- </div>
83
-
84
- </fieldset>
85
- </things-scene-properties>
86
-
87
- </template>
88
-
89
- <script>
90
- window.addEventListener('WebComponentsReady', function(e) {
91
- var app = document.querySelector('#app')
92
-
93
- app.model = {
94
- width:1000,
95
- height: 1000,
96
- components: [{
97
- type: 'indoor-map',
98
- left: 100,
99
- top: 100,
100
- width: 600,
101
- height: 400,
102
- fontSize: 80,
103
- fontColor: '#000000',
104
- lineWidth: 10,
105
- layoutConfig: {
106
- activeIndex: 0
107
- },
108
- components: [{
109
- type: 'floor',
110
- name : 'floor Test',
111
- fillStyle: 'green',
112
- text: '11111',
113
- width: 100,
114
- height: 100,
115
- depth: 100,
116
- components: [{
117
- type: 'beacon',
118
- left: 22,
119
- top: 286,
120
- zPos: 100,
121
- width: 100,
122
- height: 100
123
- }, {
124
- type: 'beacon',
125
- left: 440,
126
- top: 300,
127
- zPos: 100,
128
- width: 100,
129
- height: 100
130
- }, {
131
- type: 'beacon',
132
- left: 20,
133
- top: 20,
134
- zPos: 0,
135
- width: 100,
136
- height: 100
137
- }]
138
- }, {
139
- type: 'floor',
140
- name : 'floor A',
141
- fillStyle: 'green',
142
- text: '11111',
143
- // layout: 'table',
144
- layoutConfig : {
145
- columns: 4
146
- },
147
- padding : '30 50',
148
- width: 100,
149
- height: 100,
150
- depth: 100,
151
- components: [{
152
- type: 'rack',
153
- left: 100,
154
- top: 220,
155
- sheaf: 1,
156
- width: 100,
157
- height: 100,
158
- depth: 100,
159
- fillStyle: 'red',
160
- lineWidth: 4
161
- }, {
162
- type: 'rack',
163
- left: 300,
164
- top: 320,
165
- sheaf: 1,
166
- width: 100,
167
- height: 100,
168
- depth: 100,
169
- fillStyle: 'navy',
170
- lineWidth: 4
171
- }, {
172
- type: 'rack',
173
- left: 100,
174
- top: 220,
175
- sheaf: 1,
176
- width: 100,
177
- height: 100,
178
- depth: 100,
179
- fillStyle: 'blue',
180
- lineWidth: 4
181
- }, {
182
- type: 'ellipse',
183
- cx: 400,
184
- cy: 200,
185
- rx: 100,
186
- ry: 100,
187
- fillStyle: 'blue',
188
- lineWidth: 4
189
- }, {
190
- type: 'ellipse',
191
- cx: 400,
192
- cy: 200,
193
- rx: 100,
194
- ry: 100,
195
- fillStyle: 'violet',
196
- lineWidth: 4
197
- }, {
198
- type: 'ellipse',
199
- cx: 400,
200
- cy: 200,
201
- rx: 100,
202
- ry: 100,
203
- fillStyle: 'black',
204
- lineWidth: 4
205
- }]
206
- }, {
207
- type: 'floor',
208
- name: 'floor B',
209
- fillStyle: 'orange',
210
- width: 100,
211
- height: 100,
212
- depth: 100,
213
- components: [{
214
- type: 'rack',
215
- left: 100,
216
- top: 220,
217
- sheaf: 1,
218
- width: 100,
219
- height: 100,
220
- depth: 100,
221
- fillStyle: 'red',
222
- lineWidth: 4
223
- }, {
224
- type: 'rack',
225
- left: 300,
226
- top: 320,
227
- sheaf: 1,
228
- width: 100,
229
- height: 100,
230
- depth: 100,
231
- fillStyle: 'navy',
232
- lineWidth: 4
233
- }, {
234
- type: 'rack',
235
- left: 100,
236
- top: 220,
237
- sheaf: 1,
238
- width: 100,
239
- height: 100,
240
- depth: 100,
241
- fillStyle: 'blue',
242
- lineWidth: 4
243
- }]
244
- }, {
245
- type: 'floor',
246
- name: 'floor C',
247
- fillStyle: 'navy',
248
- width: 100,
249
- height: 100,
250
- depth: 100,
251
- layout: 'linear-horizontal',
252
- components: [{
253
- type: 'rack',
254
- left: 100,
255
- top: 220,
256
- hidden: true,
257
- sheaf: 1,
258
- width: 100,
259
- height: 100,
260
- depth: 100,
261
- fillStyle: 'red',
262
- lineWidth: 4
263
- }, {
264
- type: 'rack',
265
- left: 100,
266
- top: 220,
267
- sheaf: 1,
268
- width: 100,
269
- height: 100,
270
- depth: 100,
271
- fillStyle: 'red',
272
- lineWidth: 4
273
- }, {
274
- type: 'rack',
275
- left: 300,
276
- top: 320,
277
- sheaf: 1,
278
- width: 100,
279
- height: 100,
280
- depth: 100,
281
- fillStyle: 'navy',
282
- lineWidth: 4
283
- }, {
284
- type: 'rack',
285
- left: 100,
286
- top: 220,
287
- sheaf: 1,
288
- width: 100,
289
- height: 100,
290
- depth: 100,
291
- fillStyle: 'blue',
292
- lineWidth: 4
293
- }]
294
- }, {
295
- type: 'floor',
296
- name: 'floor D',
297
- fillStyle: 'green',
298
- // layout: 'table',
299
- layoutConfig : {
300
- columns: 4
301
- },
302
- width: 100,
303
- height: 100,
304
- depth: 100,
305
- components: [{
306
- type: 'rack',
307
- left: 100,
308
- top: 220,
309
- sheaf: 1,
310
- width: 100,
311
- height: 100,
312
- depth: 100,
313
- fillStyle: 'red',
314
- lineWidth: 4
315
- }, {
316
- type: 'rack',
317
- left: 300,
318
- top: 320,
319
- sheaf: 1,
320
- width: 100,
321
- height: 100,
322
- depth: 100,
323
- fillStyle: 'navy',
324
- lineWidth: 4
325
- }, {
326
- type: 'rack',
327
- left: 100,
328
- top: 220,
329
- sheaf: 1,
330
- width: 100,
331
- height: 100,
332
- depth: 100,
333
- fillStyle: 'blue',
334
- lineWidth: 4
335
- }]
336
- }]
337
- }]
338
- }
339
- });
340
-
341
- app.changeActive = function(e) {
342
- var indoorMap = app.scene.findAll('indoor-map')[0]
343
- indoorMap.activeIndex = e.target.valueAsNumber
344
- }
345
-
346
- app.addFloor = function(e) {
347
- var indoorMap = app.scene.findAll('indoor-map')[0]
348
-
349
- app.scene.add({
350
- type: 'floor',
351
- fillStyle: 'gray',
352
- top: 0,
353
- left: 0,
354
- width: 100,
355
- height: 100
356
- }, {}, indoorMap)
357
- }
358
-
359
- setInterval(function() {
360
- app.floors = app.scene.findAll('floor')
361
- }, 1000)
362
-
363
- </script>
364
- </body>
365
- </html>
package/demo/things-scene-indoor-map.html DELETED
@@ -1,6 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © HatioLab Inc. All rights reserved.
4
- -->
5
- <script src="../../gaussian/lib/gaussian.js"></script>
6
- <script src="../things-scene-indoor-map.js"></script>
package/src/beacon.ts DELETED
@@ -1,75 +0,0 @@
1
- /*
2
- * Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { Component, ComponentNature, RectPath } from '@hatiolab/things-scene'
5
-
6
- const NATURE: ComponentNature = {
7
- mutable: false,
8
- resizable: true,
9
- rotatable: true,
10
- properties: [
11
- {
12
- type: 'number',
13
- label: 'z-pos',
14
- name: 'zPos',
15
- property: 'zPos'
16
- },
17
- {
18
- type: 'string',
19
- label: 'mac-address',
20
- name: 'macAddr',
21
- property: 'macAddress'
22
- },
23
- {
24
- type: 'string',
25
- label: 'identifier',
26
- name: 'identifier',
27
- property: 'identifier'
28
- },
29
- {
30
- type: 'string',
31
- label: 'uuid',
32
- name: 'uuid',
33
- property: 'uuid'
34
- },
35
- {
36
- type: 'number',
37
- label: 'major',
38
- name: 'major',
39
- property: 'major'
40
- },
41
- {
42
- type: 'number',
43
- label: 'minor',
44
- name: 'minor',
45
- property: 'minor'
46
- }
47
- ]
48
- }
49
-
50
- export default class Beacon extends RectPath(Component) {
51
- render(context: CanvasRenderingContext2D) {
52
- this.model.fillStyle = {
53
- type: 'pattern',
54
- fitPattern: true,
55
- image:
56
- 'data:image/png;base64,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'
57
- }
58
-
59
- this.drawFill(context)
60
- }
61
-
62
- is3dish() {
63
- return true
64
- }
65
-
66
- get nature() {
67
- return NATURE
68
- }
69
-
70
- get controls() {
71
- return []
72
- }
73
- }
74
-
75
- Component.register('beacon', Beacon)
package/src/camera.ts DELETED
@@ -1,196 +0,0 @@
1
- import { Component, ComponentNature, POINT, Properties, RectPath } from '@hatiolab/things-scene'
2
-
3
- /*
4
- * Copyright © HatioLab Inc. All rights reserved.
5
- */
6
- import Quaternion from './quaternion'
7
-
8
- type VEC = { x: number; y: number; z: number }
9
-
10
- const NATURE: ComponentNature = {}
11
-
12
- const points = [
13
- { x: 0, y: 0, z: 0 },
14
- { x: -50, y: +100, z: -100 },
15
- { x: +50, y: +100, z: -100 },
16
- { x: +50, y: -100, z: -100 },
17
- { x: -50, y: -100, z: -100 },
18
- { x: 0, y: 0, z: -100 }, // 렌즈의 중심을 표현하는 좌표.
19
- { x: 0, y: +50, z: -100 } // 카메라의 위쪽을 표시하기위한 좌표.
20
- ]
21
-
22
- /* rotate_by_euler와 같이 동작하도록 순서를 맞춤. */
23
- function rotate_by_quaternion_axis(points: VEC[], pitch: number, roll: number, yaw: number) {
24
- var qx = Quaternion.fromAxis({ x: 1, y: 0, z: 0 }, pitch)
25
- var qy = Quaternion.fromAxis({ x: 0, y: 1, z: 0 }, roll)
26
- var qz = Quaternion.fromAxis({ x: 0, y: 0, z: 1 }, yaw)
27
-
28
- var q = qz.multiply(qy).multiply(qx)
29
-
30
- return points.map(point => {
31
- return q.multiVec(point)
32
- })
33
- }
34
-
35
- function rotate_by_euler(points: VEC[], pitch: number, roll: number, yaw: number) {
36
- var cosa = Math.cos(yaw)
37
- var sina = Math.sin(yaw)
38
-
39
- var cosb = Math.cos(roll)
40
- var sinb = Math.sin(roll)
41
-
42
- var cosc = Math.cos(pitch)
43
- var sinc = Math.sin(pitch)
44
-
45
- var Axx = cosa * cosb
46
- var Axy = cosa * sinb * sinc - sina * cosc
47
- var Axz = cosa * sinb * cosc + sina * sinc
48
-
49
- var Ayx = sina * cosb
50
- var Ayy = sina * sinb * sinc + cosa * cosc
51
- var Ayz = sina * sinb * cosc - cosa * sinc
52
-
53
- var Azx = -sinb
54
- var Azy = cosb * sinc
55
- var Azz = cosb * cosc
56
-
57
- return points.map(point => {
58
- let { x, y, z } = point
59
-
60
- return {
61
- x: Axx * x + Axy * y + Axz * z,
62
- y: Ayx * x + Ayy * y + Ayz * z,
63
- z: Azx * x + Azy * y + Azz * z
64
- }
65
- })
66
- }
67
-
68
- export default class Camera extends RectPath(Component) {
69
- render(context: CanvasRenderingContext2D) {
70
- var transformed = this.transformed
71
-
72
- if (this.transformed[5].z > 0) {
73
- this.__drawLines(context, transformed)
74
- this.__drawRect(context, transformed)
75
- } else {
76
- this.__drawRect(context, transformed)
77
- this.__drawLines(context, transformed)
78
- }
79
- }
80
-
81
- private _anim_alpha_yaw: number = 0
82
- private _anim_alpha_roll: number = 0
83
- private _anim_alpha_pitch: number = 0
84
-
85
- get transformed() {
86
- var { yaw, pitch, roll } = this.state
87
-
88
- yaw ||= 0
89
- pitch ||= 0
90
- roll ||= 0
91
-
92
- return rotate_by_quaternion_axis(
93
- points,
94
- pitch - (this._anim_alpha_pitch || 0),
95
- roll - (this._anim_alpha_roll || 0),
96
- yaw - (this._anim_alpha_yaw || 0)
97
- )
98
- }
99
-
100
- get nature() {
101
- return NATURE
102
- }
103
-
104
- __drawLines(context: CanvasRenderingContext2D, transformed: POINT[]) {
105
- var center = this.center
106
-
107
- context.beginPath()
108
-
109
- // 2D좌표에서 Y축이 반대방향이므로 center에서 빼준다.
110
- context.moveTo(center.x + transformed[0].x, center.y - transformed[0].y)
111
- context.lineTo(center.x + transformed[1].x, center.y - transformed[1].y)
112
- context.moveTo(center.x + transformed[0].x, center.y - transformed[0].y)
113
- context.lineTo(center.x + transformed[2].x, center.y - transformed[2].y)
114
- context.moveTo(center.x + transformed[0].x, center.y - transformed[0].y)
115
- context.lineTo(center.x + transformed[3].x, center.y - transformed[3].y)
116
- context.moveTo(center.x + transformed[0].x, center.y - transformed[0].y)
117
- context.lineTo(center.x + transformed[4].x, center.y - transformed[4].y)
118
-
119
- context.strokeStyle = this.state.strokeStyle
120
- context.stroke()
121
- context.closePath()
122
- }
123
-
124
- __drawRect(context: CanvasRenderingContext2D, transformed: POINT[]) {
125
- var center = this.center
126
-
127
- context.beginPath()
128
-
129
- // 2D좌표에서 Y축이 반대방향이므로 center에서 빼준다.
130
- context.moveTo(center.x + transformed[1].x, center.y - transformed[1].y)
131
- context.lineTo(center.x + transformed[2].x, center.y - transformed[2].y)
132
- context.lineTo(center.x + transformed[3].x, center.y - transformed[3].y)
133
- context.lineTo(center.x + transformed[4].x, center.y - transformed[4].y)
134
- context.lineTo(center.x + transformed[1].x, center.y - transformed[1].y)
135
-
136
- context.fillStyle = this.state.fillStyle
137
- context.strokeStyle = this.state.strokeStyle
138
- context.fill()
139
- context.stroke()
140
-
141
- context.beginPath()
142
- context.ellipse(center.x + transformed[6].x, center.y - transformed[6].y, 5, 5, 0, 0, Math.PI * 2)
143
- context.stroke()
144
- }
145
-
146
- /*
147
- * Performance 문제로 애니메이션 적용 보류
148
- * 만약, 적용하려면,
149
- * - 먼저, 아래 메쏘드의 이름을 수정한다. (_onchange ==> onchange)
150
- * - 그리고, 아래의 Component.memoize(Camera.prototype, 'transformed', false); 부분을 코멘트 처리한다.
151
- */
152
- onchange(after: Properties, before: Properties) {
153
- if (after.hasOwnProperty('data')) {
154
- let data = after.data
155
- if (!data.hasOwnProperty('yaw') && !data.hasOwnProperty('pitch') && !data.hasOwnProperty('roll')) return
156
-
157
- this.set({
158
- yaw: data.yaw,
159
- pitch: data.pitch,
160
- roll: data.roll
161
- })
162
- return
163
- }
164
-
165
- if (!after.hasOwnProperty('yaw') && !after.hasOwnProperty('pitch') && !after.hasOwnProperty('roll')) return
166
-
167
- var self = this
168
- var diff_yaw = after.yaw - before.yaw
169
- var diff_pitch = after.pitch - before.pitch
170
- var diff_roll = after.roll - before.roll
171
-
172
- this._anim_alpha_yaw = diff_yaw
173
- this._anim_alpha_pitch = diff_pitch
174
- this._anim_alpha_roll = diff_roll
175
-
176
- this.animate({
177
- step: function (delta: number) {
178
- self._anim_alpha_yaw = diff_yaw * (1 - delta)
179
- self._anim_alpha_pitch = diff_pitch * (1 - delta)
180
- self._anim_alpha_roll = diff_roll * (1 - delta)
181
-
182
- self.invalidate()
183
- },
184
- duration: 1000,
185
- delta: 'circ',
186
- options: {
187
- x: 1
188
- },
189
- ease: 'inout'
190
- }).start()
191
- }
192
- }
193
-
194
- // Component.memoize(Camera.prototype, 'transformed', false);
195
-
196
- Component.register('camera', Camera)