-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
230 lines (202 loc) · 8.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<head>
<!-- Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import materialize.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
<link rel="icon" href="./favicon.ico"/>
<title>Lightshow Editor</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app">
<div id="help-container"></div>
<!-- TOOLBAR -->
<div id="toolbar-container">
<!-- OPEN REMOTE PROJECT -->
<a class="waves-effect waves-light btn modal-trigger REMOTE" href="#modal-open-remote" id="btn-open-remote-modal">
<i class="material-icons left">folder_open</i> OPEN
</a>
<!-- SAVE BUTTON -->
<a class="waves-effect waves-light btn REMOTE" id="btn-save-remote">
<i class="material-icons left">save</i> SAVE
</a>
<!-- NEW BUTTON -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal-new" id="btn-new">
<i class="material-icons left">create_new_folder</i> NEW
</a>
<!-- IMPORT BUTTON -->
<a class="waves-effect waves-light tooltipped btn modal-trigger" href="#modal-import" id="btn-import-modal" data-tooltip="Import a local project file">
<i class="material-icons left">open_in_browser</i> IMPORT
</a>
<!-- EXPORT BUTTON -->
<a class="waves-effect waves-light tooltipped btn modal-trigger" id="btn-export" data-tooltip="Export (download) your project file">
<i class="material-icons left">file_download</i> DOWNLOAD
</a>
<!-- EXPORT SHOW BUTTON -->
<a class="waves-effect waves-light tooltipped btn" id="btn-export-show" data-tooltip="Export a file that can be played on the show server (Pi)">
<i class="material-icons left">import_export</i> EXPORT SHOW
</a>
<!-- CHANGE AUDIO BUTTON -->
<a class="waves-effect waves-light tooltipped btn LOCAL" href="#modal-audio" id="btn-audio-modal" data-tooltip="Select a different audio file">
<i class="material-icons left">music_note</i> SELECT MUSIC
</a>
<!-- SETTINGS BUTTON -->
<!--
<a class="btn-floating btn-large waves-effect waves-light grey darken-2" id="btn-settings" href="#modal-settings">
<i class="material-icons" id="icon-stop">settings</i>
</a>
-->
<!-- INFO BUTTON -->
<a class="btn-floating btn-large waves-effect waves-light grey darken-2" id="btn-info" href="#modal-info" style"float: right; right: 0px">
<i class="material-icons" id="icon-stop">info_outline</i>
</a>
</div>
<!-- MEDIA BUTTONS -->
<div id="mediacontrols-container">
<!-- PLAY BUTTON -->
<a class="btn btn-floating btn-large waves-effect waves-light blue pulse" id="btn-play">
<i class="small material-icons" id="icon-play">play_arrow</i>
</a>
<!-- STOP BUTTON -->
<a class="btn-floating btn-large waves-effect waves-light blue" id="btn-stop">
<i class="large material-icons" id="icon-stop">stop</i>
</a>
<!-- SPEED DROPDOWN -->
<div class="input-field white-text" style="display: inline-block">
<select id="select-rate">
<option value="1" selected>1.0x (Normal)</option>
<option value="0.5">0.5x</option>
<option value="0.25">0.25x</option>
</select>
<label>Playback Speed</label>
</div>
<!-- ALIGN BUTTON -->
<a class="btn-floating btn tooltipped waves-effect waves-light pink" data-tooltip="Align Selected Keyframes" id="btn-align">
<i class="material-icons rotate-90">vertical_align_center</i>
</a>
<!-- EQUAL SPACE BUTTON -->
<a class="btn-floating btn tooltipped waves-effect waves-light pink" data-tooltip="Equally Space Selected Keyframes" id="btn-equal">
<i class="material-icons rotate-90">reorder</i>
</a>
<!-- REMOVE DUPS BUTTON -->
<a class="btn-floating btn tooltipped waves-effect waves-light pink" data-tooltip="Remove Duplicate Keyframes" id="btn-remove-dups">
<i class="material-icons">flip_to_front</i>
</a>
<!-- INVERT BUTTON -->
<a class="btn-floating btn tooltipped waves-effect waves-light pink" data-tooltip="Toggle Keyframe Values" id="btn-set-on">
<i class="material-icons">lightbulb_outline</i>
</a>
</div>
<div id="waveform-container"></div>
<div id="timeline-container"></div>
</div>
<!-- PROJECT IMPORT MODAL -->
<div id="modal-import" class="modal">
<div class="modal-content">
<h4>Import Local Project File</h4>
<div class="file-field input-field">
<div class="btn">
<span>SELECT FILE</span>
<input type="file" id="input-project-upload">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="modal-footer" id="modal-import-footer">
<a href="#!" class="modal-action modal-close waves-effect red darken-2 waves-red btn"><i class="material-icons left">close</i>Cancel</a>
<a class="waves-effect waves-light btn" id="btn-upload-file"><i class="material-icons left">check</i>Upload</a>
</div>
</div>
<!-- PROJECT OPEN REMOTE MODAL -->
<div id="modal-open-remote" class="modal" style="height: 50%">
<div class="modal-content">
<h4>Open Project from Server</h4>
<div class="input-field">
<select id="select-remote-projects">
<option value="" disabled selected>Choose your option</option>
</select>
</div>
</div>
<div class="modal-footer" id="modal-open-remote-footer">
<a href="#!" class="modal-action modal-close waves-effect red darken-2 waves-red btn"><i class="material-icons left">close</i>Cancel</a>
<a class="waves-effect waves-light btn" id="btn-open-remote-project"><i class="material-icons left">check</i>Open</a>
<!--a href="#!" class="modal-action modal-close waves-effect red waves-red btn">Upload</a-->
</div>
</div>
<!-- NEW PROJECT MODAL -->
<div id="modal-new" class="modal">
<div class="modal-content">
<h4>New Project</h4>
<div class="input-field">
<input id="input-new-project-name" type="text" class="validate">
<label for="input-new-project-name">Project Name</label>
</div>
<div class="input-field">
<input id="input-num-channels" type="number" value="8" class="validate">
<label for="input-num-channels">Number of Channels</label>
</div>
<div class="file-field input-field">
<div class="btn">
<span>SELECT SONG</span>
<input type="file" id="input-audio-upload">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="audio/*">
</div>
</div>
</div>
<div class="modal-footer" id="modal-new-footer">
<a href="#!" class="modal-action modal-close waves-effect red darken-2 waves-red btn"><i class="material-icons left">close</i>Cancel</a>
<a class="waves-effect waves-light btn" id="btn-new-project"><i class="material-icons left">check</i>Create</a>
</div>
</div>
<!-- INFO MODAL -->
<div id="modal-info" class="modal">
<div class="modal-content">
<h4>About</h4>
<p>Created by Greg Brisebois</p>
<p>See help cards for information on editing.</p>
<p>Libraries used: JQuery, Materialize, Wavesurfer.js, and Trevor Norris' CBuffer. Timeline rendered using canvas.</p>
</div>
</div>
<!-- MUSIC UPLOAD MODAL -->
<div id="modal-audio" class="modal">
<div class="modal-content">
<h4>Change Music File</h4>
<div class="file-field input-field">
<div class="btn">
<span>Open File</span>
<input type="file" id="input-music-upload" accept="audio/*">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="modal-footer" id="modal-audio-footer">
<a href="#!" class="modal-action modal-close waves-effect red darken-2 waves-red btn"><i class="material-icons left">close</i>Cancel</a>
<a class="waves-effect waves-light btn" id="btn-music-upload"><i class="material-icons left">check</i>Upload</a>
</div>
</div>
<!-- LIBRARIES -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<!--script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script-->
<script src="lib/wavesurfer/wavesurfer.js"></script>
<script src="lib/cbuffer.js"></script>
<!-- SCRIPTS -->
<script src="src/constants.js"></script>
<script src="src/default.js"></script>
<script src="src/help.js"></script>
<script src="src/objects.js"></script>
<script src="src/file.js"></script>
<script src="src/timeline.js"></script>
<script src="src/startgui.js"></script>
</body>
</html>