@operato/scene-clock 8.0.0-beta.1 → 8.0.0

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.
package/demo/index.html DELETED
@@ -1,163 +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-clock 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-color.html">
18
- <link rel="import" href="../../things-designer-elements/things-editor-color-stops.html">
19
- <link rel="import" href="../../things-designer-elements/things-editor-properties.html">
20
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
21
-
22
- <link rel="import" href="./things-scene-clock.html">
23
-
24
- <style is="custom-style">
25
-
26
- @font-face {
27
- font-family: "Bitstream Vera Serif Bold";
28
- src: url("fonts/VeraSeBd.ttf");
29
- }
30
-
31
- things-scene-viewer {
32
- display: block;
33
- width: 900px;
34
- height: 600px;
35
- }
36
- </style>
37
- </head>
38
- <body unresolved>
39
-
40
- <template is="dom-bind" id="app">
41
- <p>An example of <code>&lt;things-scene-clock&gt;</code>:</p>
42
-
43
-
44
- <things-scene-viewer id='scene'
45
- scene='{{scene}}'
46
- selected='{{selected}}'
47
- model='[[model]]'
48
- mode="1">
49
- <things-scene-layer type="selection-layer"></things-scene-layer>
50
- <things-scene-layer type="modeling-layer"></things-scene-layer>
51
- <things-scene-handler type="text-editor"></things-scene-handler>
52
- <things-scene-handler type="move-handler"></things-scene-handler>
53
- </things-scene-viewer>
54
-
55
- <fieldset class="same-width">
56
- <legend>Clock style</legend>
57
- <things-scene-properties scene="[[scene]]"
58
- selected="[[selected]]"
59
- model="{{target}}"
60
- bounds="{{bounds}}">
61
- <things-editor-properties id="properties"
62
- target="{{target}}"
63
- props="{{props}}">
64
- </things-editor-properties>
65
- </things-scene-properties>
66
- </fieldset>
67
-
68
- <button id="change">Change Value</button>
69
-
70
- </template>
71
-
72
- <script>
73
- window.addEventListener('WebComponentsReady', function(e) {
74
- var app = document.querySelector('#app')
75
-
76
- app.$.change.addEventListener('click', function() {
77
- var viewer = app.$.scene
78
- viewer.findAll('clock-analog')[0].set('value', 0 + Math.round(Math.random() * 240))
79
- viewer.findAll('clock-analog')[0].set('colorStops',[
80
- { position:40,
81
- color: '#00ff00'},
82
- { position: 70,
83
- color: '#ffff00'},
84
- { position: 170,
85
- color: '#ff0000'}])
86
- })
87
-
88
- app.model = {
89
- width: 1500,
90
- height: 1500,
91
- components: [{
92
- type: 'clock-analog',
93
- cx: 300,
94
- cy: 300,
95
- rx: 100,
96
- ry: 100,
97
- hourWidth: 3,
98
- minuteWidth: 2,
99
- fillStyle: '',
100
- strokeStyle: '#FF0000',
101
- fontColor: '#0000FF',
102
- lineWidth: 5,
103
- innerCircleSize: 20,
104
- innerCircleColor: '#00FF00',
105
- // }, {
106
- // type: 'clock-text',
107
- // top: 300,
108
- // left: 800,
109
- // width: 100,
110
- // height: 50,
111
- // fillStyle: '#ff00ff',
112
- // fontColor: '#FF0000',
113
- // lineWidth: 5,
114
- // localTime: true,
115
- // utc : 10
116
- }]
117
- }
118
-
119
- app.props = [{
120
- type: 'number',
121
- label: 'hourwidth',
122
- name: 'hourWidth',
123
- property: 'hourWidth'
124
- },{
125
- type: 'number',
126
- label: 'minute-width',
127
- name: 'minuteWidth',
128
- property: 'minuteWidth'
129
- },{
130
- type: 'number',
131
- label: 'second-width',
132
- name: 'secondWidth',
133
- property: 'secondWidth'
134
- },{
135
- type: 'checkbox',
136
- label: 'needle-round',
137
- name: 'needleRound',
138
- property: 'needleRound'
139
- },{
140
- type: 'checkbox',
141
- label: 'show-second',
142
- name: 'showSecond',
143
- property: 'showSecond'
144
- },{
145
- type: 'checkbox',
146
- label: 'show-number',
147
- name: 'showNumber',
148
- property: 'showNumber'
149
- },{
150
- type: 'number',
151
- label: 'inner-circle-size',
152
- name: 'innerCircleSize',
153
- property: 'innerCircleSize'
154
- },{
155
- type: 'color',
156
- label: 'inner-circle-color',
157
- name: 'innerCircleColor',
158
- property: 'innerCircleColor'
159
- }]
160
- });
161
- </script>
162
- </body>
163
- </html>
@@ -1,6 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © HatioLab Inc. All rights reserved.
4
- -->
5
- <script src="../../moment/moment.js"></script>
6
- <script src="../things-scene-clock.js"></script>