Trajectoires.html 10.5 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
<!DOCTYPE html>
<html>
<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
13
14

    <!-- External Scripts -->
Jérémie Garcia's avatar
Jérémie Garcia committed
15
16
17
18
19
20
    <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>
21
    <script type="text/javascript" src="libs/hammer.min.js"></script>
Jérémie Garcia's avatar
Jérémie Garcia committed
22

Jérémie Garcia's avatar
Jérémie Garcia committed
23
24
25
26
27
28
29
30
31
32
33
    <!-- 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
34
35
36
37
    <title>Trajectoires</title>

</head>

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

    <!-- 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
50
                <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
51
52
53
            </div>

            <label>Speakers Pos: </label>
Jérémie Garcia's avatar
Jérémie Garcia committed
54
            <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
55
56
57
58


            <form>
                <label for="flip-curvesinback">Draw Curves in Background:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
59
                <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
60
61
62
63
64
65
66
                    <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
67
                <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
68
                    <option value="off" selected="selected">Off</option>
Jérémie Garcia's avatar
bug fix    
Jérémie Garcia committed
69
                    <option value="on">On</option>
Jérémie Garcia's avatar
Jérémie Garcia committed
70
71
72
73
                </select>
            </form>
            <form>
                <label for="flip-orientation">Stream Orientation:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
74
                <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
75
76
77
78
79
80
81
                    <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
82
                <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
83
84
85
86
87
88
                    <option value="off">Off</option>
                    <option value="on" selected="selected">On</option>
                </select>
            </form>

            <form>
89
                <label for="flip-zSlider">Show Z Slider:</label>
Jérémie Garcia's avatar
Jérémie Garcia committed
90
                <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
91
92
93
94
                    <option value="off" selected="selected">Off</option>
                    <option value="on">On</option>
                </select>
            </form>
95
        </div>
Jérémie Garcia's avatar
Jérémie Garcia committed
96

97
        <div id="TopMenu" >
Jérémie Garcia's avatar
Jérémie Garcia committed
98
99
            <div data-role = "controlgroup" class="left" data-mini="true" data-type="horizontal">
                <a href="#" onClick="javascript:Traj.Manager.selectPreviousCurve();" data-role="button" data-iconpos="notext" data-inline="true" data-icon="arrow-l">Previous</a>
100
101
102
                <a id="lbl_current_curve" data-role="button"  data-inline="true" style="background: rgba(255, 255, 255, 0.7);" data-inline="true">0</a>
                <a href="#" onClick="javascript:Traj.Manager.selectNextCurve();" data-role="button" data-iconpos="notext" data-icon="arrow-r" data-inline="true">Next</a>
                <a href="#" onClick="javascript:Traj.Manager.deleteCurrentCurve();" data-role="button" data-iconpos="notext" data-icon="delete" data-inline="true">Remove</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
103
                <a href="#" onClick="javascript:Traj.Manager.deleteAllCurves();" data-role="button" data-iconpos="notext" data-icon="refresh" data-inline="true">Refresh</a>
104
            </div>
Jérémie Garcia's avatar
Jérémie Garcia committed
105

106
107
108
            <div class="top-right">
                <a href="#settings-panel" data-icon="gear" data-role="button" data-iconpos="right" data-inline="true">Settings</a>
            </div>
Jérémie Garcia's avatar
Jérémie Garcia committed
109
110
111
112
113
114
115
116
117
        </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>

Jérémie Garcia's avatar
Jérémie Garcia committed
118
119
120
121
122
123
124
125
126
127
        <div id="sourceSelectDiv">
            <button class='sourceButton' id='s1' data-role="none">1</button><br/>
            <button class='sourceButton' id='s2' data-role="none">2</button><br/>
            <button class='sourceButton' id='s3' data-role="none">3</button><br/>
            <button class='sourceButton' id='s4' data-role="none">4</button><br/>
            <button class='sourceButton' id='s5' data-role="none">5</button><br/>
            <button class='sourceButton' id='s6' data-role="none">6</button><br/>
            <button class='sourceButton' id='s7' data-role="none">7</button><br/>
            <button class='sourceButton' id='s8' data-role="none">8</button><br/>
        </div>
Jérémie Garcia's avatar
Jérémie Garcia committed
128
129

        <div id='drawZone' data-role="none">
Jérémie Garcia's avatar
Jérémie Garcia committed
130
            <div style="margin-top: 40px" unselectable="on" class="unselectable" >Hold to draw a new curve</div>
Jérémie Garcia's avatar
Jérémie Garcia committed
131
132
133
134
        </div>

        <div class="canvas-left-overlay" id="playDiv">
            <div data-role="controlgroup" data-type="horizontal" >
135
136
                <a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> - </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.7);"> + </a>
Jérémie Garcia's avatar
Jérémie Garcia committed
137
138
            </div>
            <div data-role="controlgroup" data-type="vertical">
139
140
                <a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.7); 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.7);padding: 5px; width:50px;height:30px; line-height: 30px;">Multi</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
141
142
143
144
145
146
147
            </div>
        </div>

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

Jérémie Garcia's avatar
Jérémie Garcia committed
148
        <div id="contextMenu">
149
150
            <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
151
152
        </div>

Jérémie Garcia's avatar
Jérémie Garcia committed
153
154
        <div id="longTouchMenu">
            <a href="#" onClick="javascript:Traj.Manager.SelectandRedrawEdit(); Traj.Events.hideLongTouchMenu();" data-mini="true" data-role="button" data-icon="edit">Redraw</a>
155
            <a href="#" onClick="javascript:Traj.Manager.duplicateCurrentCurve(); Traj.Events.hideLongTouchMenu();" data-mini="true" data-role="button">Duplicate</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
156
157
            <a href="#" onClick="javascript:Traj.Manager.simplifyCurrentCurve(0.01); Traj.Events.hideLongTouchMenu();" data-mini="true" data-role="button">Simplify (Soft)</a>
            <a href="#" onClick="javascript:Traj.Manager.simplifyCurrentCurve(0.1); Traj.Events.hideLongTouchMenu();" data-mini="true" data-role="button">Simplify (Hard)</a>
Jérémie Garcia's avatar
Jérémie Garcia committed
158
159
160
161
162
163
        </div>

        <div class="canvas-bot-overlay" id="slider-div" style: "position: absolute, bottom:40">
            <input type="hidden" class="timeSlider" value="0" />
        </div>

Jérémie Garcia's avatar
Jérémie Garcia committed
164
165
166
167
168
169
170
171
172
        <div id="sessionDiv">
            <a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
            <div id="sessionDivOverCanvas">
                <a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
                <a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
                <a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
                <a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true"  data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
            </div>
        </div>
Jérémie Garcia's avatar
Jérémie Garcia committed
173
174
175

        <div id=footer data-role="footer">
            <div class="right" id="options-div">
Jérémie Garcia's avatar
Jérémie Garcia committed
176
                <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
177
178
179
180
181
182
183
184
185
            </div>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->


    <script type="text/javascript">
        $(document).ready(function() {
Jérémie Garcia's avatar
Jérémie Garcia committed
186
            //Traj.Session.clearTrajSessions();
Jérémie Garcia's avatar
Jérémie Garcia committed
187
            Traj.initialize();
Jérémie Garcia's avatar
Jérémie Garcia committed
188
189
190
191
192
            $.mobile.loading().hide();
        });
    </script>
</body>
</html>