Trajectoires.html 18.1 KB
Newer Older
Jérémie Garcia's avatar
Jérémie Garcia committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<string name="app_name">Trajectoires</string>

<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height = device-height" />
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.range.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
Jérémie Garcia's avatar
Jérémie Garcia committed
15
16

    <!-- External Scripts -->
Jérémie Garcia's avatar
Jérémie Garcia committed
17
18
19
20
21
22
23
24
    <script type="text/javascript" src='interface.js'></script>
    <script type="text/javascript" src="libs/fastclick.min.js"></script>
    <script type="text/javascript" src="libs/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src='libs/jquery.range.js'></script>
    <script type="text/javascript" src='libs/simplify.js'></script>
    <script type="text/javascript" src="libs/hammer.js"></script>

Jérémie Garcia's avatar
Jérémie Garcia committed
25
26
27
28
29
30
31
32
33
34
35
    <!-- Internal Scripts -->
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/osc.js"></script>
    <script type="text/javascript" src="js/timedCurve.js"></script>
    <script type="text/javascript" src="js/player.js"></script>
    <script type="text/javascript" src="js/view.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/session.js"></script>
    <script type="text/javascript" src="js/manager.js"></script>
    <script type="text/javascript" src="js/events.js"></script>

Jérémie Garcia's avatar
Jérémie Garcia committed
36
37
38
39
    <title>Trajectoires</title>

</head>

Jérémie Garcia's avatar
Jérémie Garcia committed
40
<body onresize="javascript:Traj.View.initCanvas()">
Jérémie Garcia's avatar
Jérémie Garcia committed
41
42
43
44
45
46
47
48
49
50
51

    <!-- Start of first page -->
    <div id="main-page" data-role="page" data-theme="a">

        <div data-role="panel" id="settings-panel" data-theme="b" data-position="right" data-display="overlay">


            <h1>Settings</h1>

            <label> Undo: </label>
            <div>
Jérémie Garcia's avatar
Jérémie Garcia committed
52
                <a onClick="javascript:Traj.State.undo();" data-role="button" data-theme="a" data-icon="back" data-inline="true"></a> 
Jérémie Garcia's avatar
Jérémie Garcia committed
53
54
55
            </div>

            <label>Speakers Pos: </label>
Jérémie Garcia's avatar
Jérémie Garcia committed
56
            <input type="number" id="speaker_dist" name="distHP" value="1" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
Jérémie Garcia's avatar
Jérémie Garcia committed
57
58
59
60


            <form>
                <label for="flip-curvesinback">Draw Curves in Background:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
61
                <select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
Jérémie Garcia's avatar
Jérémie Garcia committed
62
63
64
65
66
67
68
                    <option value="off">No</option>
                    <option value="on" selected="selected">Yes</option>
                </select>
            </form>

            <form>
                <label for="flip-loop">Loop Mode:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
69
                <select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" onchange="javascript:Traj.Player.updateLoopMode()">
Jérémie Garcia's avatar
Jérémie Garcia committed
70
71
72
73
74
75
                    <option value="off" selected="selected">Off</option>
                    <option value="on">On</option>
                </select>
            </form>
            <form>
                <label for="flip-orientation">Stream Orientation:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
76
                <select name="flip-orientation" id="flip-orientation" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateOrientationMode()">
Jérémie Garcia's avatar
Jérémie Garcia committed
77
78
79
80
81
82
83
                    <option value="off" selected="selected">Off</option>
                    <option value="on">On</option>
                </select>
            </form>

            <form>
                <label for="flip-timeSlider">Show Time Slider:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
84
                <select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateTimeSliderMode()">
Jérémie Garcia's avatar
Jérémie Garcia committed
85
86
87
88
89
90
                    <option value="off">Off</option>
                    <option value="on" selected="selected">On</option>
                </select>
            </form>

            <form>
91
                <label for="flip-zSlider">Show Z Slider:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
92
                <select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateZSliderMode()">
Jérémie Garcia's avatar
Jérémie Garcia committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
                    <option value="off" selected="selected">Off</option>
                    <option value="on">On</option>
                </select>
            </form>



        </div>

        <div id="header" data-role="header" class="ui-bar-a ui-header">
            <a id="curveMenuButton" data-role="button" data-icon="gear" data-mini="true" data-inline="true" data-inline="true">Curve</a>
            <a href="#settings-panel" data-icon="gear" class="ui-btn-right">Settings</a>
            <h1 class="ui-title">Trajectoires</h1>
            <!-- /header <a href="#settings-panel" data-icon="gear" class="ui-btn-right">OSC</a>-->
        </div>
        <!-- /header -->

Jérémie Garcia's avatar
Jérémie Garcia committed
110
111
        <div id="sourceSelectDiv">
            <button class='sourceButton' id='s1' data-role="none">1</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
112
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
113
            <button class='sourceButton' id='s2' data-role="none">2</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
114
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
115
            <button class='sourceButton' id='s3' data-role="none">3</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
116
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
117
            <button class='sourceButton' id='s4' data-role="none">4</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
118
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
119
            <button class='sourceButton' id='s5' data-role="none">5</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
120
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
121
            <button class='sourceButton' id='s6' data-role="none">6</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
122
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
123
            <button class='sourceButton' id='s7' data-role="none">7</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
124
            <br/>
Jérémie Garcia's avatar
Jérémie Garcia committed
125
            <button class='sourceButton' id='s8' data-role="none">8</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
126
127
128
129
130
131
132
133
134
135
136
137
            <br/>
        </div>

        <div class="canvas-container">
            <canvas id="bg-canvas" class="drawing-canvas"></canvas>
            <canvas id="traj-canvas" class="drawing-canvas"></canvas>
            <canvas id="dyn-canvas" class="drawing-canvas"></canvas>
            <canvas id="current-canvas" class="drawing-canvas"></canvas>
        </div>


        <div id='drawZone' data-role="none">
138
            <svg id="drawzoneSVG" width="100" height="160" xmlns="http://www.w3.org/2000/svg">
Jérémie Garcia's avatar
Jérémie Garcia committed
139
140
141
142
143
144
145
146
147
148
149
                <g>
                    <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
                    <ellipse id='drawZoneEl' ry="90" rx="61" id="svg_8" cy="86" cx="25" fill-opacity='0.6' fill="#ccf2a7" />
                </g>
            </svg>
            <img id='drawZoneImg' src="libs/crayon.jpg" alt="image crayon" />
        </div>



        <div id="divCurveMenu" class="left">
Jérémie Garcia's avatar
Jérémie Garcia committed
150
            <a href="#" onClick="javascript:Traj.Manager.selectPreviousCurve();" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-l" data-inline="true">Previous</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
151
            <a id="lbl_current_curve" data-role="button" data-mini="true" data-inline="true" style="background: rgba(255, 255, 255, 0.7);" data-inline="true">0</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
152
            <a href="#" onClick="javascript:Traj.Manager.selectNextCurve();" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-r" data-inline="true">Next</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
153
154
155
156
157
158
159
160
            <div id="divCurveOptions" class="ui-bar ui-bar-a">
                <div class="curveMenuButtonDiv">
                    <a id='action' class="curveMenuButton" data-mini="true" data-role="none">Actions</a>
                    <a id='prop' class="curveMenuButton" data-mini="true" data-role="none">Transform</a>
                    <a id='multi' class="curveMenuButton" data-mini="true" data-role="none">Multiplay</a>
                </div>

                <div id="divCurveAction" class="ui-bar ui-bar-a">
Jérémie Garcia's avatar
Jérémie Garcia committed
161
162
163
164
165
                    <a href="#" onClick="javascript:Traj.manager.deleteCurrentCurve();" data-mini="true" data-role="button" data-icon="delete">Remove</a>
                    <a href="#" onClick="javascript:Traj.Manager.updateModeSelectEdit();" data-mini="true" data-role="button" data-icon="edit">Select and redraw</a>
                    <a href="#" onClick="javascript:Traj.manager.duplicateCurrentCurve();" data-mini="true" data-role="button">Duplicate</a>
                    <a href="#" onClick="javascript:Traj.manager.copyCurrentCurve();" data-mini="true" data-role="button">Copy</a>
                    <a href="#" onClick="javascript:Traj.manager.pasteInCurrentCurve();" data-mini="true" data-role="button">Paste</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
166
167
168
                    <div class="ui-bar ui-bar-a">
                        <label>Simplify Curve</label>
                        <fieldset data-role="controlgroup" data-type="horizontal">
Jérémie Garcia's avatar
Jérémie Garcia committed
169
170
                            <a onclick="javascript:Traj.Manager.simplifyCurrentCurve(0.01)" data-inline="true" data-mini="true" data-role="button"> Soft </a>
                            <a onclick="javascript:Traj.Manager.simplifyCurrentCurve(0.1)" data-inline="true" data-mini="true" data-role="button"> Hard </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
                        </fieldset>
                    </div>
                </div>

                <div id="divCurveProp" class="ui-bar ui-bar-a">
                    <div id="spaceStretchDiv" class="ui-bar ui-bar-a" style="float:left">
                        <label>Space stretch</label>
                        <div data-inline="true" style="float:left">
                            <fieldset data-role="controlgroup" data-type="vertical">
                                <a class="content" data-role="none">x </a>
                                <a onClick="javascript:changeScale('x',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
                                <a onClick="javascript:changeScale('x',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
                                <a onClick="javascript:mirror('x');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
                            </fieldset>
                        </div>
                        <div data-inline="true" style="float:left">
                            <fieldset data-role="controlgroup" data-type="vertical">
                                <a class="content" data-role="none">y </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
189
190
                                <a onClick="javascript:Traj.Manager.changeScale('y',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
                                <a onClick="javascript:Traj.Manager.changeScale('y',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
191
192
193
194
195
196
                                <a onClick="javascript:mirror('y');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
                            </fieldset>
                        </div>
                        <div data-inline="true" style="float:left">
                            <fieldset data-role="controlgroup" data-type="vertical">
                                <a class="content" data-role="none">z </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
197
198
199
                                <a onClick="javascript:Traj.Manager.changeScale('z',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
                                <a onClick="javascript:Traj.Manager.changeScale('z',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
                                <a onClick="javascript:Traj.Manager.mirror('z');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
200
201
202
203
204
205
206
207
208
209
210
211
212
                            </fieldset>
                        </div>
                        <div data-inline="true" style="float:left">
                            <fieldset data-role="controlgroup" data-type="vertical">
                                <a class="content" data-role="none" style="padding-left:4px!important">rotate </a>
                                <a id="rotateLeft" class="miniButton" data-role="button" data-theme="a" data-icon="back"> </a>
                                <a id="rotateRight" class="miniButton" data-role="button" data-theme="a" data-icon="forward"> </a>
                            </fieldset>
                        </div>
                    </div>
                    <div id="timeStretchDiv" class="ui-bar ui-bar-a" style="float:left">
                        <label>Time stretch</label>
                        <input type="number" data-role='none' id="timeStretch" data-inline="true" value="1" onchange="javascript:changeTime()" style="width:80px;" /> ms
Jérémie Garcia's avatar
Jérémie Garcia committed
213
                        <a onClick="javascript:Traj.Manager.mirror('t');" data-inline="true" class="miniButtonText" data-role="button" data-theme="a"> Reverse </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
214
215
216
                    </div>
                    <div id="positionDiv" class="ui-bar ui-bar-a" style="float:left">
                        <label>First point position</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
217
218
219
                        <input data-role='none' type="number" id="xOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />x
                        <input data-role='none' type="number" id="yOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />y
                        <input data-role='none' type="number" id="zOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />z
Jérémie Garcia's avatar
Jérémie Garcia committed
220
221
222
223
224
225
226
                    </div>

                </div>

                <div id="divCurveMulti" class="ui-bar ui-bar-a">
                    <div class="ui-bar ui-bar-a">
                        <label>Source controled</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
227
                        <input data-role='none' type="number" id="sourceControled" value="1" onchange="javascript:Traj.Manager.changeSourceControled()" />
Jérémie Garcia's avatar
Jérémie Garcia committed
228
229
                    </div>
                    <label>
Jérémie Garcia's avatar
Jérémie Garcia committed
230
                        <input type="checkbox" id="checkPlay" onchange="javascript:Traj.Manager.activeMultiPlay()"> Active
Jérémie Garcia's avatar
Jérémie Garcia committed
231
232
233
234
235
236
237
238
239
240
241
242
243
                    </label>
                    <label>
                        <a data-role="button" onclick="javascript:removeMultiPlay()">Remove all </a>
                    </label>

                </div>

            </div>
        </div>

        <div id="sessionDiv">
            <a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
            <div id="sessionDivOverCanvas">
Jérémie Garcia's avatar
Jérémie Garcia committed
244
245
246
247
                <a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
                <a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
                <a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-mini="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
                <a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-mini="true" data-role="button" data-icon="delete" data-iconpos="notext"> Delete </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
248
249
250
251
252
253
254
            </div>
        </div>



        <div class="canvas-left-overlay" id="playDiv">
            <div data-role="controlgroup" data-type="horizontal" >
Jérémie Garcia's avatar
Jérémie Garcia committed
255
256
                <a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.5);"> - </a>
                <a onClick="javascript:Traj.View.setCanvasZoom(1.2);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.5);"> + </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
257
258
259
260
261
262
263
264
265
266
267
268
269
            </div>
            <div data-role="controlgroup" data-type="vertical">
                <a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.5); padding: 5px; width:50px; height:30px; line-height: 30px;">Play</a>
                <a id="multiplayButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.5);padding: 5px; width:50px;height:30px; line-height: 30px;">Multi</a>
            </div>
        </div>

        <div id="ZSliderDiv" style: "position: absolute, bottom:40">
            <input type="hidden" class="ZSlider" value="0" />
        </div>


        <div id="contextMenu" style="position:absolute;top:100px;left 300px">
270
271
            <button id="circularButton" class="contextualButton" >Circular</button>
            <button id="concatButton" class="contextualButton" >Concat</button>
Jérémie Garcia's avatar
Jérémie Garcia committed
272
273
        </div>

274
275


Jérémie Garcia's avatar
Jérémie Garcia committed
276
        <div id="longTouchMenu" style="position:absolute;top:100px;left 300px">
Jérémie Garcia's avatar
Jérémie Garcia committed
277
278
279
280
281
            <a href="#" onClick="javascript:Traj.Manager.deleteCurrentCurve();" data-mini="true" data-role="button" data-icon="delete">Remove</a>
            <a href="#" onClick="javascript:Traj.Manager.modeSelectEdit();" data-mini="true" data-role="button" data-icon="edit">Select and redraw</a>
            <a href="#" onClick="javascript:Traj.Manager.duplicateCurrentCurve();" data-mini="true" data-role="button">Duplicate</a>
            <a href="#" onClick="javascript:Traj.Manager.copyCurrentCurve();" data-mini="true" data-role="button">Copy</a>
            <a href="#" onClick="javascript:Traj.Manager.pasteInCurrentCurve();" data-mini="true" data-role="button">Paste</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
        </div>



        <div class="canvas-bot-overlay" id="slider-div" style: "position: absolute, bottom:40">
            <input type="hidden" class="timeSlider" value="0" />
            <!--         <span id="timeValue"> 0 </span>
        <input data-role="none" type="range" class="timeSlider" id="timeSlider" value="0" min="0" max="100" step="1" >
        <input data-role="none" type="range" class="timeSlider" id="timeSliderEnd" value="0" min="0" max="100" step="1" >
        <span id="timeValueEnd"> 0 </span> -->
        </div>


        <div id=footer data-role="footer">
            <div class="right" id="options-div">
Jérémie Garcia's avatar
Jérémie Garcia committed
297
                <a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-mini="true" data-role="button">Export</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
298
299
300
301
302
303
304
305
306
307
308
                <!--<a href="#" onClick="javascript:exportCurrentCurveAsAntescofoNIM();" data-mini="true" data-role="button">AntescofoNIM</a>   -->
            </div>

        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->


    <script type="text/javascript">
        $(document).ready(function() {
Jérémie Garcia's avatar
Jérémie Garcia committed
309
            //Traj.Session.clearTrajSessions();
Jérémie Garcia's avatar
Jérémie Garcia committed
310
            Traj.initialize();
Jérémie Garcia's avatar
Jérémie Garcia committed
311
312
313
314
315
316
            $.mobile.loading().hide();
        });
    </script>
</body>

</html>