source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js@ 29895

Last change on this file since 29895 was 29895, checked in by davidb, 9 years ago

Development of Piano-hero element. 90 degree turn and scale based on interface name. Starting improvment on musicbrainz metadata

  • Property svn:executable set to *
File size: 10.9 KB
Line 
1"use strict";
2
3var goDocStorage = null;
4
5var goPaper = null;
6var go_top_level_group = null;;
7
8var go_paper_x_dim = 920;
9var go_paper_y_dim = 445;
10
11var gameOnCurrentTimeXPos = 0;
12var gameOnCurrentTimelineRect = null;
13
14var num_midi_pitches = 128;
15
16var group_x_scale;
17var group_y_scale;
18var group_rotate;
19var group_x_trans;
20var group_y_trans;
21
22function updateGameOnCurrentTimeline()
23{
24 gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) * go_paper_x_dim;
25
26 var gameOnCurrentTimeYPos = (mediaPlayer.currentTime / mediaPlayer.duration) * go_paper_y_dim;
27 //console.log("*** x pos = " + gameOnCurrentTimeXPos);
28
29 gameOnCurrentTimelineRect.attr({x: gameOnCurrentTimeXPos});
30
31 if (gs.xsltParams.interface_name == "respooled") {
32 go_top_level_group.translate(group_x_scale*go_paper_y_dim, go_paper_y_dim+(gameOnCurrentTimeYPos * group_x_scale * Math.abs(group_y_scale)));
33 }
34
35}
36
37function getDocStorage(docOID)
38{
39 var docStorage = null;
40
41 if (hasLocalStorage) {
42
43 if (goDocStorage == null) {
44 var docStorageStr = localStorage.getItem(docOID);
45 //console.log("***docStorageStr = " + docStorageStr);
46
47 //var docStorage = (docStorageStr != null) ? eval("("+docStorageStr+")") : {palTracks:{}, popTracks:{}};
48 docStorage = eval("("+docStorageStr+")") || {palTracks:{}, popTracks:{}};
49 goDocStorage = docStorage;
50 }
51 else {
52 docStorage = goDocStorage;
53 }
54 }
55
56 return docStorage;
57}
58
59function getActiveTrackLayers(opt_field)
60{
61 var field = opt_field || "name";
62
63 var palActiveLayers = [];
64 $('#palForm input:checked').each(function() {
65 palActiveLayers.push(this[field]);
66 });
67
68 return palActiveLayers;
69}
70
71function populatePalList(docStorage)
72{
73 // populate pal List
74 if (hasLocalStorage) {
75
76 var palTracks = docStorage.palTracks || {};
77
78 //console.log("*** palTracks = " + JSON.stringify(palTracks));
79 var palListKeys = Object.keys(palTracks).sort();
80
81 for (var i=0; i<palListKeys.length; i++) {
82 var key = palListKeys[i];
83 var track = palTracks[key];
84 var name = key;
85 var cb_name = name.replace(/[ -]/g,"");
86 var cb_value = name;
87
88 var opt_checked = (i==0) ? ' checked="checked"' : "";
89
90 $('#palList').append('<div id="pal'+cb_name+'"><input type="checkbox" '
91 + '" name="'+cb_name+'" value="' + cb_value + '"'
92 + opt_checked + '>'
93 + name + '</div>');
94 }
95 }
96 else {
97 // Put in some fake data for now
98 $('#palList').append('<input type="checkbox" id="palPianoHero" name="PianoHero" value="Piano Hero" checked="checked"/>Piano Hero<br />');
99 $('#palList').append('<input type="checkbox" id="palDrumbeatHero" name="DrumbeatHero" value="Drum-beat Hero" />Drum-beat Hero<br />');
100 }
101}
102
103
104function computeMidiStats(track)
105{
106 var min_midi_pitch = num_midi_pitches-1;
107 var max_midi_pitch = 0;
108
109 var track_chromatic_durations = [];
110 for (var i=0; i<12; i++) {
111 track_chromatic_durations[i] = 0;
112 }
113
114 // Process each block within the track
115 for (var b=0; b<track.length; b++) {
116 var track_block = track[b];
117 //var base_ctime = track_block.baseCTime;
118 var block_events = track_block.events;
119
120 var block_chromatic_durations = [];
121 for (var i=0; i<12; i++) {
122 block_chromatic_durations[i] = 0;
123 }
124
125 for (var ne=0; ne<block_events.length; ne++) {
126 var midi_pitch = block_events[ne].midiPitch;
127
128 if (midi_pitch < min_midi_pitch) {
129 min_midi_pitch = midi_pitch;
130 }
131 if (midi_pitch > max_midi_pitch) {
132 max_midi_pitch = midi_pitch;
133 }
134
135 var chromatic_pitch = midi_pitch % 12;
136 var chromatic_duration = block_events[ne].duration;
137 block_chromatic_durations[chromatic_pitch] += chromatic_duration;
138
139 track_chromatic_durations[chromatic_pitch] += chromatic_duration;
140 }
141
142 if (!("_computedKey" in track_block)) {
143 var strongest_profile = khKeyDetection(block_chromatic_durations);
144 track_block._computedKey = strongest_profile;
145 console.log("***### key prediction: " + strongest_profile);
146 }
147
148 }
149
150 if (!("_computedKey" in track)) {
151 var strongest_profile = khKeyDetection(track_chromatic_durations);
152 track._computedKey = strongest_profile;
153 }
154
155 return { "max_midi_pitch": max_midi_pitch, "min_midi_pitch": min_midi_pitch};
156}
157
158
159function displayActiveTrackLayers(docStorage)
160{
161 console.log("displayActiveTrackLayers()");
162
163 goPaper.clear();
164
165 // Clear takes out any previous group element, so need to be regenerated
166 go_top_level_group = new goPaper.group("gameOnPaper",[]);
167
168 if (hasLocalStorage) {
169
170 // 'palTracks' have the form:
171 // palTracks[save_name] = [ { name: "my recording 1", baseCTime: 123.3, events: [ .... ] } ]
172
173 var palTracks = docStorage.palTracks || {};
174
175 var total_duration = mediaPlayer.duration;
176 //console.log("*** total duration = " + total_duration);
177
178 var atl = getActiveTrackLayers("value");
179 //console.log("*** atl = " + JSON.stringify(atl));
180
181 var min_midi_pitch = num_midi_pitches-1;
182 var max_midi_pitch = 0;
183
184 for (var i=0; i<atl.length; i++) {
185 var storage_name = atl[i];
186 var track = palTracks[storage_name];
187
188 if (track != null) {
189
190
191 var midi_stats = computeMidiStats(track);
192 console.log("*** midi stats = " + JSON.stringify(midi_stats));
193
194 if (midi_stats.min_midi_pitch < min_midi_pitch) {
195 min_midi_pitch = midi_stats.min_midi_pitch;
196 }
197 if (midi_stats.max_midi_pitch > max_midi_pitch) {
198 max_midi_pitch = midi_stats.max_midi_pitch;
199 }
200
201
202 // calculate range of midi pitches present
203/*
204 for (var b=0; b<track.length; b++) {
205 var track_block = track[b];
206 var base_ctime = track_block.baseCTime;
207 var block_events = track_block.events;
208
209 for (var ne=0; ne<block_events.length; ne++) {
210 var midi_pitch = block_events[ne].midiPitch;
211 if (midi_pitch < min_midi_pitch) {
212 min_midi_pitch = midi_pitch;
213 }
214 if (midi_pitch > max_midi_pitch) {
215 max_midi_pitch = midi_pitch;
216 }
217 }
218 }
219*/
220
221 }
222 }
223 //console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
224
225 var raw_midi_range = max_midi_pitch - min_midi_pitch + 1;
226 var midi_range = Math.max(4,raw_midi_range);
227
228 console.log("*** midi_range = " + midi_range);
229
230 var midi_y_dim_spacing = go_paper_y_dim / midi_range;
231
232
233 for (var i=0; i<atl.length; i++) {
234 var storage_name = atl[i];
235 var track = palTracks[storage_name];
236
237 if (track != null) {
238
239 for (var b=0; b<track.length; b++) {
240
241 var track_block = track[b];
242 var base_ctime = track_block.baseCTime;
243
244 var block_events = track_block.events;
245
246 for (var ne=0; ne<block_events.length; ne++) {
247
248 var note_event = block_events[ne];
249
250 var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
251 var rx_org = startPercTime * go_paper_x_dim;
252 var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
253
254 var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
255 var ry_dim = midi_y_dim_spacing;
256
257 var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim-0.2);
258 //rect.attr({stroke:"none", strokeWidth:0.2, fill:"#2E52A4"});
259 //rect.attr({stroke:"black",fill:"#2E52A4"});
260 rect.attr({"stroke":"black","stroke-width":0.25, "fill":"#2E52A4"});
261 go_top_level_group.push(rect);
262 }
263 }
264 }
265 }
266 }
267
268 gameOnCurrentTimelineRect = goPaper.rect(-2,0,1,go_paper_y_dim);
269 gameOnCurrentTimelineRect.attr({fill: "red", stroke: "red"});
270 go_top_level_group.push(gameOnCurrentTimelineRect);
271
272 go_top_level_group.scale(group_x_scale,group_y_scale);
273 go_top_level_group.rotate(group_rotate,0,0);
274 //go_top_level_group.translate(group_x_scale*go_paper_y_dim,go_paper_y_dim);
275 go_top_level_group.translate(group_x_trans,group_y_trans);
276}
277
278function initGameOn()
279{
280 console.log("initGameOn()");
281
282 if (gs.xsltParams.interface_name == "respooled") {
283 group_x_scale = 2.0;
284 group_y_scale = -5.0;
285 group_rotate = 90.0;
286
287 group_x_trans = group_x_scale * go_paper_y_dim;
288 group_y_trans = go_paper_y_dim;
289 }
290 else {
291 group_x_scale = 1.0;
292 group_y_scale = 1.0;
293 group_rotate = 0.0;
294
295 group_x_trans = 0.0;
296 group_y_trans = 0.0;
297 }
298
299 goDocStorage = getDocStorage(gs.cgiParams.d);
300
301 //var gmp_x_dim = $('#gameOnPaper').width();
302 //var gmp_y_dim = $('#gameOnPaper').height();
303
304 //console.log("*** gmp_x_dim = " + gmp_x_dim);
305 //console.log("*** gmp_y_dim = " + gmp_y_dim);
306
307
308 //var goPaper = Raphael("gameOnPaper",gmp_x_dim,gmp_y_dim);
309 goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
310 goPaper.canvas.style.backgroundColor = '#FFFFFF';
311
312
313 console.log("Browser supports LocalStorage: " + hasLocalStorage);
314
315 populatePalList(goDocStorage);
316 displayActiveTrackLayers(goDocStorage);
317}
318
319
320function palDeleteConfirmed()
321{
322 //var palActiveLayers = $('input[type=checkbox]:checked', '#palForm');
323
324 var palActiveLayersID = getActiveTrackLayers("name");
325 var palActiveLayersValue = getActiveTrackLayers("value");
326
327 var palTracks = goDocStorage.palTracks || {};
328
329 for (var i=0; i<palActiveLayersID.length; i++) {
330 var id = palActiveLayersID[i];
331 $('#pal'+id).remove();
332
333 var value = palActiveLayersValue[i];
334 delete palTracks[value];
335 }
336}
337
338
339function palDelete()
340{
341 $('#delete-recording-popup').dialog('open');
342
343 return false; // no need to process the event any further
344}
345
346function palDisplay()
347{
348 displayActiveTrackLayers(goDocStorage);
349
350 return false; // no need to process the event any further
351}
352
353function palSave()
354{
355 var palTracks = goDocStorage.palTracks || {};
356
357 var json_edit_str = trackEditor.getSession().getValue();
358 console.log("**** json edit str = " + json_edit_str);
359
360 var json_edit = eval("("+json_edit_str+")");
361
362 for (var key in json_edit){
363 if (json_edit.hasOwnProperty(key)) {
364 //console.log("*** key = " + key);
365 var val = json_edit[key];
366 console.log("**** Saving under key[ " + key + "]: " + JSON.stringify(val));
367 palTracks[key] = val;
368 }
369 }
370
371 if (hasLocalStorage) {
372 var docOID = gs.cgiParams.d;
373 console.log("Saving in Browser localStorage track data for '" + docOID + "'");
374 localStorage.setItem(docOID,JSON.stringify(goDocStorage));
375 }
376}
377
378function palEdit()
379{
380 var palTracks = goDocStorage.palTracks || {};
381
382 var palActiveLayers = getActiveTrackLayers("value");
383
384 var edit_json = {};
385
386 for (var i=0; i<palActiveLayers.length; i++) {
387 var track_name = palActiveLayers[i];
388 edit_json[track_name] = palTracks[track_name];
389 }
390
391 trackEditor.setValue(JSON.stringify(edit_json,null,'\t'));
392 trackEditor.clearSelection();
393
394 $('#edit-recording-popup').dialog('open');
395
396 return false; // no need to process the event any further
397}
398
Note: See TracBrowser for help on using the repository browser.