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

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,289 +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
- <label>Active Floor</label>
58
- <!-- <input type="number" value-as-number="{{target.activeIndex::change}}" min="0" max="100" step="1" numberonly="true" on-change="changeActive" />
59
- -->
60
- <things-editor-stack activeIndex="{{target.activeIndex::change}}"
61
- stack="{{target.stack}}">
62
-
63
- </things-editor-stack>
64
-
65
- <div>
66
- <div>
67
- <span id='add-floor' on-click="addFloor">+</span>
68
- </div>
69
-
70
- <template is="dom-repeat" items="[[floors]]">
71
- <div>
72
- <span>[[item.name]]</span>
73
- <span>-</span>
74
- </div>
75
- </template>
76
- </div>
77
-
78
- </fieldset>
79
- </things-scene-properties>
80
-
81
- </template>
82
-
83
- <script>
84
- window.addEventListener('WebComponentsReady', function(e) {
85
- var app = document.querySelector('#app')
86
-
87
- app.model = {
88
- width:1000,
89
- height: 1000,
90
- components: [{
91
- type: 'indoor-map',
92
- left: 100,
93
- top: 100,
94
- width: 600,
95
- height: 400,
96
- fontSize: 80,
97
- fontColor: '#000000',
98
- lineWidth: 10,
99
- // layoutConfig : {
100
- // activeIndex: 0
101
- // },
102
- components: [{
103
- type: 'floor',
104
- name: 'floor A',
105
- fillStyle: 'orange',
106
- width: 100,
107
- height: 100,
108
- depth: 100,
109
- components: [{
110
- type: 'rack',
111
- left: 100,
112
- top: 220,
113
- sheaf: 1,
114
- width: 100,
115
- height: 100,
116
- depth: 100,
117
- fillStyle: 'red',
118
- lineWidth: 4,
119
- strokeStyle: 'black',
120
- }, {
121
- type: 'rack',
122
- left: 300,
123
- top: 320,
124
- sheaf: 1,
125
- width: 100,
126
- height: 100,
127
- depth: 100,
128
- fillStyle: 'navy',
129
- lineWidth: 1,
130
- strokeStyle: 'black',
131
- }, {
132
- type: 'rack',
133
- left: 100,
134
- top: 220,
135
- sheaf: 1,
136
- width: 100,
137
- height: 100,
138
- depth: 100,
139
- fillStyle: 'blue',
140
- lineWidth: 4
141
- }]
142
- }, {
143
- type: 'floor',
144
- name: 'floor B',
145
- fillStyle: 'navy',
146
- width: 100,
147
- height: 100,
148
- depth: 100,
149
- components: [{
150
- type: 'rack',
151
- left: 100,
152
- top: 220,
153
- sheaf: 1,
154
- width: 100,
155
- height: 100,
156
- depth: 100,
157
- fillStyle: 'red',
158
- lineWidth: 4
159
- }, {
160
- type: 'rack',
161
- left: 300,
162
- top: 320,
163
- sheaf: 1,
164
- width: 100,
165
- height: 100,
166
- depth: 100,
167
- fillStyle: 'navy',
168
- lineWidth: 4
169
- }, {
170
- type: 'rack',
171
- left: 100,
172
- top: 220,
173
- sheaf: 1,
174
- width: 100,
175
- height: 100,
176
- depth: 100,
177
- fillStyle: 'blue',
178
- lineWidth: 4
179
- }]
180
- }, {
181
- type: 'floor',
182
- name: 'floor C',
183
- fillStyle: 'black',
184
- width: 100,
185
- height: 100,
186
- depth: 100,
187
- components: [{
188
- type: 'rack',
189
- left: 100,
190
- top: 220,
191
- sheaf: 1,
192
- width: 100,
193
- height: 100,
194
- depth: 100,
195
- fillStyle: 'red',
196
- lineWidth: 4
197
- }, {
198
- type: 'rack',
199
- left: 300,
200
- top: 320,
201
- sheaf: 1,
202
- width: 100,
203
- height: 100,
204
- depth: 100,
205
- fillStyle: 'navy',
206
- lineWidth: 4
207
- }, {
208
- type: 'rack',
209
- left: 100,
210
- top: 220,
211
- sheaf: 1,
212
- width: 100,
213
- height: 100,
214
- depth: 100,
215
- fillStyle: 'blue',
216
- lineWidth: 4
217
- }]
218
- }, {
219
- type: 'floor',
220
- name: 'floor D',
221
- fillStyle: 'green',
222
- layout: 'table',
223
- layoutConfig : {
224
- columns: 4
225
- },
226
- width: 100,
227
- height: 100,
228
- depth: 100,
229
- components: [{
230
- type: 'rack',
231
- left: 100,
232
- top: 220,
233
- sheaf: 1,
234
- width: 100,
235
- height: 100,
236
- depth: 100,
237
- fillStyle: 'red',
238
- lineWidth: 4
239
- }, {
240
- type: 'rack',
241
- left: 300,
242
- top: 320,
243
- sheaf: 1,
244
- width: 100,
245
- height: 100,
246
- depth: 100,
247
- fillStyle: 'navy',
248
- lineWidth: 4
249
- }, {
250
- type: 'rack',
251
- left: 100,
252
- top: 220,
253
- sheaf: 1,
254
- width: 100,
255
- height: 100,
256
- depth: 100,
257
- fillStyle: 'blue',
258
- lineWidth: 4
259
- }]
260
- }]
261
- }]
262
- }
263
- });
264
-
265
- app.changeActive = function(e) {
266
- var indoorMap = app.scene.findAll('indoor-map')[0]
267
- indoorMap.activeIndex = e.target.valueAsNumber
268
- }
269
-
270
- app.addFloor = function(e) {
271
- var indoorMap = app.scene.findAll('indoor-map')[0]
272
-
273
- app.scene.add({
274
- type: 'floor',
275
- fillStyle: 'gray',
276
- top: 0,
277
- left: 0,
278
- width: 100,
279
- height: 100
280
- }, {}, indoorMap)
281
- }
282
-
283
- setInterval(function() {
284
- app.floors = app.scene.findAll('floor')
285
- }, 1000)
286
-
287
- </script>
288
- </body>
289
- </html>
@@ -1,76 +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-rack-properties 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-viewer/things-scene-layer.html">
15
- <link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
16
-
17
- <link rel="import" href="../../things-designer-elements/things-editor-properties.html">
18
- <link rel="import" href="../../things-designer-elements/things-editor-property.html">
19
-
20
- <link rel="import" href="./things-scene-indoor-map.html">
21
-
22
- </head>
23
- <body unresolved>
24
-
25
- <template is="dom-bind" id="app">
26
- <style is="custom-style">
27
- textarea {
28
- width: 600px;
29
- height: 300px;
30
- }
31
-
32
- #target {
33
- width: 300px;
34
- height: 300px;
35
- background: var(--theme-color, red);
36
- }
37
- </style>
38
-
39
- <p>An example of <code>&lt;things-scene-rack-properties&gt;</code>:</p>
40
- <div>
41
- <textarea spellcheck="false">[[propertyValueText]]</textarea>
42
- </div>
43
-
44
- <things-editor-properties id="properties"
45
- target="{{value}}"
46
- props="{{props}}">
47
- </things-editor-properties>
48
-
49
- </template>
50
-
51
- <script>
52
- window.addEventListener('WebComponentsReady', function(e) {
53
- var app = document.querySelector('#app')
54
-
55
- app.props = scene.Component.register('rack').nature.props
56
-
57
- app.value = {
58
- depth: 100,
59
- shelves: 4
60
- }
61
-
62
- app.$.properties.addEventListener('change', function(e) {
63
- app.propertyValueText = JSON.stringify(app.value, "null", "\t");
64
- })
65
-
66
- app.$.properties.fire('change');
67
-
68
- setInterval(function() {
69
- app.set("value.depth", app.value.depth + 1);
70
- app.propertyValueText = JSON.stringify(app.value, "null", "\t");
71
- }, 1000)
72
- })
73
- </script>
74
-
75
- </body>
76
- </html>