Changeset 30093


Ignore:
Timestamp:
2015-08-04T13:50:35+12:00 (6 years ago)
Author:
davidb
Message:

Development work done in at JCDL

Location:
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
Files:
12 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml

    r29937 r30093  
    338338    <gsf:script src="{$httpCollection}/js/qtip-popups.js"/>
    339339
     340    <gsf:script src="{$httpCollection}/js/jquery.panzoom.js"/>
     341   
    340342    <gsf:script src="{$httpCollection}/js/key-detection.js"/>
    341343
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29980 r30093  
    292292
    293293    var fnPlayKeyboard = function(e) {
    294     console.log("***### fnPlayKeyboard() e=" + e); //JSON.stringify(e));
     294    //console.log("***### fnPlayKeyboard() e=" + e); //JSON.stringify(e));
    295295
    296296    // check to see if any modal dialogs are open
     
    307307    }
    308308
    309     console.log("**** testing keyboard event key: '" + e.key + "' keycode = " + e.keyCode);
     309    //console.log("**** testing keyboard event key: '" + e.key + "' keycode = " + e.keyCode);
    310310
    311311    var $focused = $(':focus');
     
    321321    if (e.keyCode == 32) { // <space-bar>
    322322        togglePlayPause();
    323         //e.preventDefault();
     323        e.preventDefault();
    324324        return false;
    325325    }
     
    438438    }
    439439
     440    var drumKeyDown = { "C": false, "V": false, "B": false, "N": false, "M": false };
     441   
    440442    var fnRemoveKeyBinding = function(e) {
    441443   
    442     console.log("**** key up at: " + Date.now())
     444    //console.log("**** key up at: " + Date.now())
    443445    // console.log("*** event e = " + JSON.stringify(e));
    444446
     
    462464        keysPressed.splice(i, 1);
    463465        }
    464         }
    465    
    466     }
     466    }
     467
     468    // See if drum animation should be stopped
     469    if (e.keyCode == "C".charCodeAt(0)) {
     470        drumKeyDown["C"] = false;
     471        $('#drum1').trigger("mouseup");
     472    }
     473    else if (e.keyCode == "V".charCodeAt(0)) {
     474        drumKeyDown["V"] = false;
     475        $('#drum3').trigger("mouseup");
     476    }
     477    else if (e.keyCode == "B".charCodeAt(0)) {
     478        drumKeyDown["B"] = false;
     479        $('#drum2').trigger("mouseup");
     480    }
     481    else if (e.keyCode == "N".charCodeAt(0)) {
     482        drumKeyDown["N"] = false;
     483        $('#drum4').trigger("mouseup");
     484    }
     485    else if (e.keyCode == "M".charCodeAt(0)) {
     486        drumKeyDown["M"] = false;
     487        $('#drum5').trigger("mouseup");
     488    }
     489   
     490    }
    467491
    468492    var fnPlaySong = function(arr) {
     
    491515    console.log("*** drum pressed keyCode: " + e.keyCode);
    492516    if (e.keyCode == "C".charCodeAt(0)) {
     517        drumKeyDown["C"] = true;
    493518        $('#drum1').trigger("mousedown");
    494519    }
    495520    else if (e.keyCode == "V".charCodeAt(0)) {
     521        drumKeyDown["V"] = true;
     522        $('#drum3').trigger("mousedown");
     523    }
     524    else if (e.keyCode == "B".charCodeAt(0)) {
     525        drumKeyDown["B"] = true;
    496526        $('#drum2').trigger("mousedown");
    497527    }
    498     else if (e.keyCode == "B".charCodeAt(0)) {
    499         $('#drum3').trigger("mousedown");
    500     }
    501528    else if (e.keyCode == "N".charCodeAt(0)) {
     529        drumKeyDown["N"] = true;
    502530        $('#drum4').trigger("mousedown");
    503531    }
    504532    else if (e.keyCode == "M".charCodeAt(0)) {
     533        drumKeyDown["M"] = true;
    505534        $('#drum5').trigger("mousedown");
    506535    }
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js

    r29980 r30093  
    4040    var docStorage = null;
    4141
     42    var site_name  = gs.xsltParams.site_name;
     43    var collection = gs.cgiParams["c"];
     44
    4245    if (hasLocalStorage) {
    4346
     
    5558    }
    5659
     60    console.log("docStorage = " + docStorage);
     61    //console.log("docOID = " + docOID);
     62    //console.log("*** docOID in docStorage = " + (docOID in docStorage));
     63    console.log("*** palTracks = " + (JSON.stringify(docStorage.palTracks)));
     64    console.log("*** popTracks = " + (JSON.stringify(docStorage.popTracks)));
     65   
     66    //console.log("*** palTracks.length = " + (Object.keys(docStorage.palTracks).length));
     67
     68/*
     69   
     70    //if ((docStorage==null) || !(docOID in docStorage) || (docOID in Storage && !(docStorage[docOID].palTracks.length) )) {
     71    if ((docStorage==null) || !(docStorage.palTracks) || (docStorage.palTracks && (Object.keys(docStorage.palTracks).length==0))) {
     72   
     73
     74    console.log("**** Need to retrieve Respooled data from DL");
     75
     76    if (docStorage==null) {
     77        docStorage = {palTracks:{}, popTracks:{}};
     78    }
     79    gs.functions.getArchivesMetadata(collection, site_name, docOID,
     80                     "docStorage", 0,  function(metadata) {
     81                         var metaval_encoded_str = metadata.getValue();
     82                         var metaval_str = decodeURIComponent(metaval_encoded_str)
     83                         console.log("***!!! metadata = '" + metaval_str + "'");
     84                         if (metaval_str != "") {
     85                         var metaval = eval("("+metaval_str+")");
     86                         console.log("***!!! metadata JSON = " + JSON.stringify(metaval));
     87                         docStorage = metaval;
     88                         }
     89                         else {
     90                         docStorage = {palTracks:{}, popTracks:{}};
     91                         }
     92                         goDocStorage = docStorage;
     93                     }
     94                    );
     95   
     96    }
     97*/
     98   
     99    //console.log("*** returning docStorage.palTracks " + JSON.stringify(docStorage.palTracks));
     100   
    57101    return docStorage;
     102}
     103
     104
     105function saveDocStorage(log_prefix)
     106{
     107    var docOID = gs.cgiParams.d;
     108    var site_name = gs.xsltParams.site_name;
     109    var collection = gs.cgiParams["c"];
     110
     111    if (hasLocalStorage) {
     112    console.log(log_prefix + ": Saving in Browser localStorage track data for '" + docOID + "'");
     113    localStorage.setItem(docOID,JSON.stringify(goDocStorage));
     114    }
     115
     116    /*
     117    var goDocStorageStrEncoded = encodeURIComponent(JSON.stringify(goDocStorage));
     118
     119    console.log(log_prefix+": Away to save metadata to DL: " + goDocStorageStrEncoded);
     120
     121    gs.functions.setArchivesMetadata(collection, site_name, docOID,
     122                     "docStorage", null, goDocStorageStrEncoded, null, "override",
     123                     function(response){
     124                     console.log("**** saved Respooled metadata to the DL server")
     125                     console.log("*** response: " + JSON.stringify(response));
     126                     }
     127                    );
     128*/
    58129}
    59130
     
    70141}
    71142
     143function getActiveOverlayLayers(opt_field)
     144{
     145    var field = opt_field || "name";
     146
     147    var popActiveLayers = [];
     148    $('#popForm input:checked').each(function() {
     149        popActiveLayers.push(this[field]);
     150    });
     151
     152    return popActiveLayers;
     153}
     154
     155
     156function getPalTracks(docOID) {
     157
     158    if (!("palTracks" in goDocStorage)) {
     159    goDocStorage = {palTracks:{}, popTracks:{}};
     160    }
     161   
     162    return goDocStorage.palTracks;
     163   
     164}
     165
     166function getPopTracks(docOID) {
     167
     168    if (!("popTracks" in goDocStorage)) {
     169    goDocStorage = {palTracks:{}, popTracks:{}};
     170    }
     171   
     172    return goDocStorage.popTracks;
     173   
     174}
     175
    72176function populatePalList(docStorage)
    73177{
    74178    // populate pal List
     179    var docOID = gs.cgiParams.d;
     180
    75181    if (hasLocalStorage) {
    76182
    77     var palTracks = docStorage.palTracks || {};
     183    var palTracks = getPalTracks(docOID);
    78184
    79185    //console.log("*** palTracks = " + JSON.stringify(palTracks));
     
    103209
    104210
     211function populatePopList(docStorage)
     212{
     213    // populate pop List
     214    var docOID = gs.cgiParams.d;
     215    var hasPopTracks = false;
     216   
     217    if (hasLocalStorage) {
     218
     219    var popTracks = getPopTracks(docOID);
     220   
     221    //console.log("*** popTracks = " + JSON.stringify(popTracks));
     222    var popListKeys = Object.keys(popTracks).sort();
     223
     224    if (popListKeys.length>0) {
     225        hasPopTracks = true;
     226    }
     227    for (var i=0; i<popListKeys.length; i++) {
     228        var key = popListKeys[i];
     229        var track = popTracks[key];
     230        var name = key;
     231        var cb_name = name.replace(/[ -]/g,"");
     232        var cb_value = name;
     233
     234        var opt_checked = (i==0) ? ' checked="checked"' : "";
     235
     236        $('#popList').append('<div id="pop'+cb_name+'"><input type="checkbox" '
     237                 + '" name="'+cb_name+'" value="' + cb_value + '"'
     238                 + opt_checked + '>'
     239                 + name + '</div>');
     240    }
     241    }
     242
     243    if (!hasPopTracks) {
     244    // Put in some fake data for now
     245    console.log("**** adding baseline Popup Trivia item");
     246   
     247    $('#popList').append('<input type="checkbox" id="popPopupTrivia"    name="PopupTrivia" value="Popup Trivia" checked="checked"/>Popup Trivia<br />');
     248
     249    if (hasLocalStorage) {
     250        var popTracks = getPopTracks(docOID);
     251        popTracks["Popup Trivia"] = "";
     252    }
     253
     254   
     255    //$('#palList').append('<input type="checkbox" id="palDrumbeatHero" name="DrumbeatHero"  value="Drum-beat Hero" />Drum-beat Hero<br />');
     256    }
     257}
     258
     259
    105260function computeMidiStats(track)
    106261{
     
    168323    go_top_level_group = new goPaper.group("gameOnPaper",[]);
    169324
     325    var docOID = gs.cgiParams.d;
     326   
    170327    if (hasLocalStorage) {
    171328
     
    173330    //    palTracks[save_name] = [ { name: "my recording 1", baseCTime: 123.3, events: [ .... ] } ]
    174331
    175     var palTracks = docStorage.palTracks || {};
     332    var palTracks = getPalTracks(docOID);
    176333
    177334    var total_duration = mediaPlayer.duration;
     
    233390            var block_events_len = block_events.length;
    234391            for (var ne=0; ne<block_events_len; ne++) {
    235            
     392
    236393            var note_event = block_events[ne];
    237394            var midi_pitch = note_event.midiPitch;
    238 
     395           
    239396            var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
     397
    240398            var rx_org = startPercTime * go_paper_x_dim;
    241             var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
     399            var ry_org;
    242400           
    243             var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
    244             var ry_dim = midi_y_dim_spacing;
     401            var rx_dim;
     402            var ry_dim;
    245403           
     404            if (note_event.type && (note_event.type=="drum")) {
     405                ry_org = 0;
     406               
     407                rx_dim = 1;
     408                ry_dim = go_paper_y_dim;
     409            }
     410            else {
     411                var midi_pitch = note_event.midiPitch;
     412
     413                //var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
     414                //var rx_org = startPercTime * go_paper_x_dim;
     415                ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
     416               
     417                rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
     418                ry_dim = midi_y_dim_spacing;
     419            }
     420
    246421            var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim-0.2);
    247422            //rect.attr({stroke:"none", strokeWidth:0.2, fill:"#2E52A4"});
     
    251426            go_top_level_group.push(rect);
    252427
    253             if (midi_pitch < block_min_midi_pitch) {
    254                 block_min_midi_pitch = midi_pitch;
     428            if (midi_pitch) {
     429                if (midi_pitch < block_min_midi_pitch) {
     430                block_min_midi_pitch = midi_pitch;
     431                }
     432                if (midi_pitch > block_max_midi_pitch) {
     433                block_max_midi_pitch = midi_pitch;
     434                }
    255435            }
    256             if (midi_pitch > block_max_midi_pitch) {
    257                 block_max_midi_pitch = midi_pitch;
    258             }
     436
    259437            }
    260438
     
    343521    goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
    344522    goPaper.canvas.style.backgroundColor = '#FFFFFF';
     523   
     524    if (gs.xsltParams.interface_name == "dlfm") {
     525   
     526    $("#gameOnPaper>svg").panzoom({
     527        $zoomIn: $(".zoom-in"),
     528        $zoomOut: $(".zoom-out"),
     529        $zoomRange: $(".zoom-range"),
     530        $reset: $(".reset")
     531    });
     532
     533    $("#gameOnPaper>svg").panzoom("option", "contain", true );
     534
     535    }
    345536
    346537
     
    348539
    349540    populatePalList(goDocStorage);
     541    populatePopList(goDocStorage);
     542   
    350543    displayActiveTrackLayers(goDocStorage);
    351544}
    352545
     546// pal routines
    353547
    354548function palDeleteConfirmed()
     
    359553    var palActiveLayersValue = getActiveTrackLayers("value");
    360554
    361     var palTracks = goDocStorage.palTracks || {};
     555    var docOID = gs.cgiParams.d;
     556    var palTracks = getPalTracks(docOID);
    362557
    363558    for (var i=0; i<palActiveLayersID.length; i++) {
     
    368563    delete palTracks[value];
    369564    }
     565
     566    saveDocStorage("palDeleteConfirmed()");   
    370567}
    371568
     
    387584function palSave()
    388585{
    389     var palTracks = goDocStorage.palTracks || {};
     586    var docOID = gs.cgiParams.d;
     587    var palTracks = getPalTracks(docOID);
    390588
    391589    var json_edit_str = trackEditor.getSession().getValue();
    392     console.log("**** json edit str = " + json_edit_str);
     590    console.log("**** palSave() trackEditor.getSession value = " + json_edit_str);
    393591
    394592    var json_edit = eval("("+json_edit_str+")");
     
    398596        //console.log("*** key = " + key);
    399597        var val = json_edit[key];
    400         console.log("**** Saving under key[ " + key + "]: " + JSON.stringify(val));
     598        console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
    401599        palTracks[key] = val;       
    402600    }
    403601    }
    404602
    405     if (hasLocalStorage) {
    406     var docOID = gs.cgiParams.d;
    407     console.log("Saving in Browser localStorage track data for '" + docOID + "'");
    408     localStorage.setItem(docOID,JSON.stringify(goDocStorage));
    409     }
     603    saveDocStorage("palSave()");
     604   
    410605}
    411606
    412607function palEdit()
    413608{
    414     var palTracks = goDocStorage.palTracks || {};
     609    var docOID = gs.cgiParams.d;
     610    var palTracks = getPalTracks(docOID);
    415611
    416612    var palActiveLayers = getActiveTrackLayers("value");
     
    431627}
    432628
     629//
     630// Popup Info Overlay routines
     631//
     632
     633
     634function popCreate()
     635{
     636    $('#create-info-popup').dialog('open');
     637
     638    return false;  // no need to process the event any further
     639}
     640
     641function popDeleteConfirmed()
     642{
     643    //var popActiveLayers = $('input[type=checkbox]:checked', '#popForm');
     644
     645    var popActiveLayersID   = getActiveOverlayLayers("name");
     646    var popActiveLayersValue = getActiveOverlayLayers("value");
     647
     648    var docOID = gs.cgiParams.d;
     649    var popTracks = getPopTracks(docOID);
     650
     651    for (var i=0; i<popActiveLayersID.length; i++) {
     652    var id = popActiveLayersID[i];
     653    $('#pop'+id).remove();
     654
     655    var value = popActiveLayersValue[i];
     656    delete popTracks[value];
     657    }
     658
     659    //console.log("***### pop mode, skipping saving for now");
     660    saveDocStorage("popDeleteConfirmed()");
     661       
     662}
     663
     664
     665function popDelete()
     666{
     667    $('#delete-info-popup').dialog('open');
     668
     669    return false;  // no need to process the event any further
     670}
     671
     672function popSave()
     673{
     674    var docOID = gs.cgiParams.d;
     675    var popTracks = getPopTracks(docOID);
     676
     677    var text_edit_str = infoEditor.getSession().getValue();
     678    console.log("**** popSave() infoEditor.getSession value = " + text_edit_str);
     679
     680    var popActiveLayers = getActiveOverlayLayers();
     681    //var json_edit = eval("("+json_edit_str+")");
     682
     683    var key = popActiveLayers[0];
     684    //console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
     685    console.log("**** Saving under key[" + key + "]: " + text_edit_str);
     686    popTracks[key] = text_edit_str;
     687
     688    /*
     689    for (var key in json_edit){
     690    if (json_edit.hasOwnProperty(key)) {
     691        //console.log("*** key = " + key);
     692        var val = json_edit[key];
     693        console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
     694        popTracks[key] = val;       
     695    }
     696    }
     697    */
     698   
     699    //console.log("***### pop mode, skipping saving for now");
     700    saveDocStorage("popSave()");
     701   
     702}
     703
     704
     705function popEdit()
     706{
     707    var docOID = gs.cgiParams.d;
     708    var popTracks = getPopTracks(docOID);
     709
     710    var popActiveLayers = getActiveOverlayLayers("value");
     711
     712    //var edit_json = {};
     713    var edit_text = "";
     714 
     715    for (var i=0; i<popActiveLayers.length; i++) {
     716    var track_name = popActiveLayers[i];
     717    //edit_json[track_name] = popTracks[track_name];
     718    edit_text += popTracks[track_name];
     719    }
     720
     721    //infoEditor.setValue(JSON.stringify(edit_json,null,'\t'));
     722    infoEditor.setValue(edit_text);
     723    infoEditor.clearSelection();
     724
     725    $('#edit-info-popup').dialog('open');
     726
     727    return false;  // no need to process the event any further
     728}
     729
     730
     731
     732
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

    r29888 r30093  
    4242        var output = e.outputBuffer.getChannelData(c);
    4343       
    44        
     44/*     
    4545        for (var i = 0; i < bufferSize; i++) {
    4646            if ( ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record"))
     
    5555            prev_input[c] = input[i];
    5656        }
     57*/
     58       
     59        if ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record")) {
     60           
     61
     62            // Apply Graphics Equalizer, and then play the result
     63
     64       
     65            if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
     66            if (c==0) {
     67                // left
     68                output.set(grapheqL.process(input));
     69               
     70            }
     71            else {
     72            // right
     73                output.set(grapheqR.process(input));
     74            }
     75            }
     76        }
     77        else {
     78
     79            for (var i = 0; i < bufferSize; i++) {
     80            if (InTheGroove) {
     81                output[i] = input[i];
     82            }
     83            else {
     84                // Make sound 'tinny' through simple high-pass filter
     85                output[i] = input[i] - prev_input[c];
     86            }
     87           
     88            prev_input[c] = input[i];
     89            }           
     90        }
     91
    5792        }
     93       
    5894    }
    59        
     95
    6096    source.connect(tinnyEffectNode);
    6197    tinnyEffectNode.connect(audioCtx.destination);
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js

    r29942 r30093  
    239239    this._strumDuration = 100;
    240240    if (this._midiPitch>=0) {
    241       MIDI.noteOn(0, this._midiPitch, 40);
     241      MIDI.noteOn(guitar_midi_inst_num, this._midiPitch, 40);
    242242      console.log("*** Setting Jam guitar strumForce = 5");
    243243    }
     
    265265    if (this._midiPitch>=0) {
    266266        console.log("*** setting strumDuration = 0");
    267         MIDI.noteOff(0, this._midiPitch, 0);
     267        MIDI.noteOff(guitar_midi_inst_num, this._midiPitch, 0);
    268268    }
    269269    }
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js

    r29938 r30093  
    11// Based on:
    22//   http://www.theonlytutorials.com/jquery-drum-sets-html5-audio-tag-example/
     3
     4
     5var hitDrumStartCurrentTime = null;
     6var hitDrumEndCurrentTime;
     7var hitDrumMidiPitch;
     8var hitDrumMidiPitchReadable;
     9
     10function calcDrumMidiNoteInfo() {
     11    if (hitDrumStartCurrentTime != null) {
     12
     13    var hitDrumDuration = hitDrumEndCurrentTime - hitDrumStartCurrentTime;
     14   
     15    // console.log("**** " + playedNotePitch + " (midi pitch = " + playedMidiPitch+ ") startTime = ", relativePlayStartTime + ", duration = " + playedDuration);
     16
     17    if (mediaPlayedNotes[String(mediaStartPlayTime)]) {
     18       
     19        mediaPlayedNotes[String(mediaStartPlayTime)].push(
     20        { 'type'         : "drum",
     21          'midiPitch'    : hitDrumMidiPitch,
     22          //'midiNoteOn'   : relativePlayedNoteStartTime,
     23          //'midiNoteOff'  : relativePlayedNoteEndTime,
     24          'startCurrentTime' : hitDrumStartCurrentTime,
     25          'duration'     : hitDrumDuration,
     26          'startPercTime': hitDrumStartCurrentTime/mediaPlayer.duration,
     27          'humanReadble' : hitDrumMidiPitchReadable }
     28        );
     29    }
     30   
     31    }
     32}
    333
    434$(document).ready(function() {
     
    2656   
    2757    $('.drum').mousedown(function() {
     58
     59    hitDrumStartCurrentTime = mediaPlayer.currentTime;
     60    hitDrumMidiPitchReadable = $(this).attr('id');
     61    hitDrumMidiPitch = hitDrumMidiPitchReadable.replace(/^drum/,"");
    2862   
    2963    //find the drum hit and play the respective audio
     
    3165    drum = eval(drum);
    3266   
    33     if (drum.ended) {
     67    if (drum.ended) {       
    3468        $(this).addClass('hit');
    3569        drum.play();
     
    4074        console.log("Error thrown when playing drum sound: " + e);
    4175        }
     76
     77        // Force finish of previous drum hit
     78        hitDrumEndCurrentTime = mediaPlayer.currentTime;
     79        calcDrumMidiNoteInfo();
     80        hitDrumStartCurrentTime = mediaPlayer.currentTime;
     81        hitDrumEndCurrentTime = null;
     82
    4283        $(this).addClass('hit');
    4384            drum.play();
     
    4687
    4788    $('.drum').mouseup(function() {
     89    hitDrumEndCurrentTime = mediaPlayer.currentTime;
     90    calcDrumMidiNoteInfo();
     91    hitDrumStartCurrentTime = null;
     92   
    4893    $(this).removeClass('hit');
    4994    });
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29898 r30093  
    4747
    4848    // Hide the browser's default controls
    49     mediaPlayer.controls = false;
    50    
     49        mediaPlayer.controls = false;
     50
     51        // Make the default volume a little bit quiter, so instruments can be heard over it
     52        mediaPlayer.volume = 0.3
     53   
    5154    // Add a listener for the timeupdate event so we can update the progress bar
    5255    mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);
     
    343346        //console.log("*** set up docStorage: " + JSON.stringify(docStorage));
    344347
    345         var palTracks = docStorage.palTracks;
     348        var palTracks = getPalTracks(docOID);
    346349       
    347350        // Make timing information relative to ba base value
     
    362365        palTracks[save_name] = [ { name: save_name + " 1", baseCTime: base_time_sct, events: recordedNotesArray } ]
    363366
    364         console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
    365         console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
    366 
    367         localStorage.setItem(docOID, JSON.stringify(docStorage));
     367        //console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
     368        //console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
     369
     370        //localStorage.setItem(docOID, JSON.stringify(docStorage));
     371
    368372    }
    369373    else {
    370         console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
    371     }
    372 
     374        //console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
     375    }
     376
     377    saveDocStorage("saveRecording()");
     378         
    373379    var cb_name = save_name.replace(/[ -]/g,"");
    374380    var cb_value = save_name;
     
    386392    return valid;
    387393}
     394
     395
     396function saveNewOverlay()
     397{
     398    var valid = true;
     399
     400    var $save_name_input = $("#create-info-name");
     401    var save_name = $save_name_input.val();
     402   
     403    if (save_name.match(/^\s*$/)) {
     404    valid = false;
     405    $save_name_input.addClass( "ui-state-error" );
     406    }
     407    else {
     408
     409    if (hasLocalStorage) {
     410        var docOID = gs.cgiParams.d;
     411
     412
     413        // Force reset of what has been stored for this item
     414        //localStorage.setItem(docOID, JSON.stringify(null));
     415
     416        var docStorage = getDocStorage(docOID);
     417
     418        var popTracks = getPopTracks(docOID);
     419
     420        var template_webvtt;
     421        template_webvtt = "WEBVTT\n";
     422        template_webvtt += "\n";
     423        template_webvtt += "NOTE Example Popup Info Nugget\n";
     424        template_webvtt += "\n";
     425        template_webvtt += "CueId1\n";
     426        template_webvtt += "00:00.000 --> 00:2.000\n";
     427        template_webvtt += "{\n";
     428        template_webvtt += "\"title\": \"My First Title\",\n";
     429        template_webvtt += "\"text\": \"My first info nugget text\",\n";
     430        template_webvtt += "\"xpos\": \"10px\",\n";
     431        template_webvtt += "\"ypos\": \"30px\"\n";
     432        template_webvtt += "}\n";
     433        template_webvtt += "\n";
     434
     435        popTracks[save_name] = [ template_webvtt ]; // Set up new entry, with exemplar webVTT entry
     436
     437        //console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
     438        //console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
     439
     440        //localStorage.setItem(docOID, JSON.stringify(docStorage));
     441
     442    }
     443    else {
     444        //console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
     445    }
     446
     447    //console.log("***### pop mode, skipping saving for now");
     448    saveDocStorage("saveNewOverlay()");
     449         
     450    var cb_name = save_name.replace(/[ -]/g,"");
     451    var cb_value = save_name;
     452    var name     = save_name;
     453
     454    $('#popList').append('<div id="pop'+cb_name+'"><input type="checkbox" '
     455                 + '" name="'+cb_name+'" value="' + cb_value + '"'
     456                 + ' checked="checked">'
     457                 + name + '</div>');
     458
     459    var $dialog = $('#create-info-popup');
     460    $dialog.dialog( "close" );
     461    }
     462
     463    return valid;
     464}
     465
    388466
    389467
     
    417495    }
    418496    });
    419 
     497    dialog.parent().css("z-index",999);
     498   
    420499    var form = dialog.find( "form" ).on( "submit", function( event ) {
    421500    event.preventDefault();
     
    450529    }
    451530    });
    452 
     531    delete_dialog.parent().css("z-index",999);
    453532
    454533    var edit_dialog = $('#edit-recording-popup').dialog({
     
    479558    }
    480559    });
    481 
     560    edit_dialog.parent().css("z-index",999);
     561   
    482562    trackEditor = ace.edit("trackEditor");
    483563    trackEditor.getSession().setMode("ace/mode/json");
     
    486566    trackEditor.getSession().setUndoManager(new UndoManager());
    487567
     568    //
     569    // Pop layer overlays
     570    //
     571
     572    var new_info_dialog = $('#create-info-popup').dialog({
     573    width : 500,
     574    height: 350,
     575    autoOpen: false, // Do not open on page load
     576    modal: true,     // Freeze the background behind the overlay
     577
     578    show: {
     579            effect: "blind",
     580            duration: 800
     581    },
     582    hide: {
     583            effect: "blind",
     584            duration: 300
     585    },
     586
     587    buttons: {
     588            "Create Overlay": saveNewOverlay,
     589            Cancel: function() {
     590        $(this).dialog("close");
     591            }
     592    },
     593    close: function() {
     594            form[0].reset();
     595            $( "#create-info-name" ).removeClass( "ui-state-error" );
     596    }
     597    });
     598    new_info_dialog.parent().css("z-index",999);
     599
     600    var info_delete_dialog = $('#delete-info-popup').dialog({
     601    resizable: false,
     602    autoOpen: false,
     603    width: 500,
     604    height:200,
     605    modal: true,
     606
     607    show: {
     608            effect: "blind",
     609            duration: 800
     610    },
     611    hide: {
     612            effect: "blind",
     613            duration: 300
     614    },
     615
     616    buttons: {
     617            "Delete selected items": function() {
     618        // call delete
     619        popDeleteConfirmed();
     620        $( this ).dialog( "close" );
     621            },
     622            Cancel: function() {
     623        $( this ).dialog( "close" );
     624            }
     625    }
     626    });
     627    info_delete_dialog.parent().css("z-index",999);
     628
     629
     630    var info_edit_dialog = $('#edit-info-popup').dialog({
     631    resizable: true,
     632    autoOpen: false,
     633    width: 800,
     634    height:600,
     635    modal: true,
     636
     637    show: {
     638            effect: "blind",
     639            duration: 800
     640    },
     641    hide: {
     642            effect: "blind",
     643            duration: 300
     644    },
     645
     646    buttons: {
     647            "Save": function() {
     648        // call delete
     649        popSave();
     650        $( this ).dialog( "close" );
     651            },
     652            Cancel: function() {
     653        $( this ).dialog( "close" );
     654            }
     655    }
     656    });
     657    info_edit_dialog.parent().css("z-index",999);
     658   
     659    infoEditor = ace.edit("infoEditor");
     660    infoEditor.getSession().setMode("ace/mode/text");
     661    infoEditor.getSession().setUseSoftTabs(false);
     662    var InfoUndoManager = require("ace/undomanager").UndoManager;
     663    infoEditor.getSession().setUndoManager(new UndoManager());
     664
     665
     666
     667   
    488668
    489669});
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js

    r29891 r30093  
    66    var overlay= document.getElementById('overlay');
    77    var video= document.getElementById('video');
    8    
     8
    99    video.addEventListener('timeupdate', function() {
    1010
     11    //var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popForm').val() || "";
     12    var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popList').val() || "";
     13    //var trivia_layer_on = $('input:checked', '#popForm').val() || "";
     14
     15    console.log("*** trivia_layer_on = " + trivia_layer_on);
    1116   
    12     var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#bubForm').val() || "";
    13     if (trivia_layer_on != "PopupTrivia") {
     17    if (trivia_layer_on != "Popup Trivia") {
    1418        return;
    1519    }
     20
    1621    // Only get to here if asked for the popup trivia layer
    1722    //console.log("***#### trivia layer on = " + trivia_layer_on);
     23   
     24    //var popActiveLayersID   = getActiveOverlayLayers("name");
     25   
     26   
     27    vidTimeStamp = video.currentTime;
    1828
    19     vidTimeStamp = video.currentTime;
    20     var textTrack = document.getElementById('bubbles').track;
     29    //for (var i=0; i<popActiveLayersID.length; i++) {
     30        //var track_name = popActiveLayersID[i];
     31
     32        var textTrack = document.getElementById('bubbles').track;
    2133       
    22     // for each cue
    23     if (cueIdxOn>-1) {
    24         // there is a cue presently on
    25         // check if need to turn off cue
    26         if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
    27         // turn off
    28         hideBubble();
    29         console.log("turn off cue:"+cueIdxOn);
    30         cueIdxOn = -1;
    31         }
    32     }
    33    
    34     if (cueIdxOn==-1) {
    35        
    36         for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
    37        
    38         if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
    39             console.log("show cue:"+cueIdx);
    40             // turn on
    41             showBubble(cueIdx);
    42             cueIdxOn = cueIdx;
     34        // for each cue
     35        if (cueIdxOn>-1) {
     36        // there is a cue presently on
     37        // check if need to turn off cue
     38        if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
     39            // turn off
     40            hideBubble();
     41            console.log("turn off cue:"+cueIdxOn);
     42            cueIdxOn = -1;
    4343        }
    4444        }
    45     }
    46    
     45       
     46        if (cueIdxOn==-1) {
     47       
     48        for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
     49           
     50            if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
     51            console.log("show cue:"+cueIdx);
     52            // turn on
     53            showBubble(cueIdx);
     54            cueIdxOn = cueIdx;
     55            }
     56        }
     57        }
     58    //}
    4759   
    4860    }, false);
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js

    r29877 r30093  
    150150var GM_num_to_instrument_array = null;
    151151
     152//MIDI.programChange(0, MIDI.GeneralMIDI.byName["instrument_name"].number);
     153//MIDI.programChange(0, MIDI.GM.byName["instrument_name"].number);
     154
    152155//var instrument_name = "lead 1 (square)";
    153156//var instrument_name = "lead 2 (sawtooth)";
    154 //var instrument_name = "acoustic grand piano";
     157var instrument_name = "acoustic grand piano";
    155158//var instrument_name = "distortion guitar";
    156 var instrument_name = "overdriven guitar";
     159//var instrument_name = "overdriven guitar";
     160
     161////var instrument_names = ["acoustic grand piano" , "distortion guitar" ];
     162var instrument_names = ["acoustic_grand_piano" , "church_organ", "acoustic_guitar_nylon", "overdriven_guitar" ];
     163
     164
     165var guitar_midi_inst_num = 3;
    157166
    158167window.onload = function () {
    159168
    160169    MIDI.loadPlugin({
    161         //soundfontUrl: "./soundfont/",
    162         //soundfontUrl: "./FluidR3_GM/",
     170        //soundfontUrl: gs.variables.httpCollection + "/soundfont/",
     171        //soundfontUrl: gs.variables.httpCollection + "/FluidR3_GM/",
    163172            soundfontUrl: gs.variables.httpCollection + "/soundfont-fluidr3-gm/",
    164173
    165174        //instrument: "acoustic_grand_piano",
    166175        //instrument: "lead_1_square",
    167         instrument: instrument_name.replace(/ /g,"_").replace(/[()]/g,""),
     176        //instrument: instrument_name.replace(/ /g,"_").replace(/[()]/g,""),
     177        instruments: instrument_names,
    168178                //instrument: "acoustic_bass",
    169179                //instrument: "voice_oohs",
     
    189199    }
    190200
     201/* 
    191202        var channel = 0; // MIDI allows for 16 channels, 0-15
    192203        // the xylophone is represented as instrument 13 in General MIDI.
    193         var instrument_num = GM_instrument_to_num_map[instrument_name];
     204    var instrument_num = MIDI.GM.byName[instrument_names[2]].number;
     205        //var instrument_num = GM_instrument_to_num_map[instrument_name];
    194206    console.log("*** instrument name: " + instrument_name + ", instrument num = " + instrument_num);
    195207
    196208        // middle C (C4) according to General MIDI
    197         var note = 60;
    198         var velocity = 127; // how hard the note hits, from 0-127
    199         var delay = 1.5; // how long to hold the note, in seconds
     209        //var note = 60;
     210        //var velocity = 127; // how hard the note hits, from 0-127
     211        //var delay = 1.5; // how long to hold the note, in seconds
    200212
    201213        // play the note
    202         MIDI.programChange(0, instrument_num); // Load xylophone into Channel 0
    203         //MIDI.noteOn(0, note, velocity) // Play middle C on Channel 0
    204         //MIDI.noteOff(0, note, delay) // Release the middle C after 0.5 seconds
     214        MIDI.programChange(channel, instrument_num);
     215*/
     216   
     217    var i;
     218    for (i=0; i<instrument_names.length; i++) {
     219        var instrument_num = MIDI.GM.byName[instrument_names[i]].number;
     220        console.log("*** instrument name: " + instrument_names[i] + ", instrument num = " + instrument_num);
     221        MIDI.programChange(i, instrument_num); // channel, inst_num
     222    }
    205223    }
    206224       
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/tracks/land-down-under-metadata-en.vtt

    r29900 r30093  
    11WEBVTT FILE
    22
    3 Land Down Under
    4 00:00:40.000 --> 00:00:50.000
    5 {
    6 "title":"Land Down Under",
    7 "text":"Men at Work wrote this song about 'crass European culture being imposed over the natural beauty of Australia.",
    8 "xpos":"350px",
    9 "ypos":"250px"
    10 }
    11 
    12 
    13 Land Down Under
     3ZiggyID1
    14400:00:20.000 --> 00:00:30.000
    155{
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl

    r29875 r30093  
    6363<div style="width: 800px; margin-left: auto; margin-right: auto;">
    6464
     65  <xsl:if test="$interface_name='dlfm'">
     66    <style>
     67      .popbanner {
     68        background-color: #DEEDF7;
     69    color: #000;
     70      }
     71    </style>
     72  </xsl:if>
    6573
     74 
    6675  <div class="popbanner">
    6776    <div class="poptitle">
    68       Pop-Up Videos Respooled
     77      Popup Videos Respooled
    6978    </div>
    7079    <div class="popbannersubtext">
     
    7887
    7988
    80 <!--
    81 <div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;">
    82 <table>
     89<xsl:choose>
     90  <xsl:when test="$interface_name='dlfm'">
     91    <p class="about">
     92      Welcome to the Digitial Library for Musicology version of the
     93      <i>Popup Videos Respooled</i> website.  This is a project that
     94      repurposes the <a
     95      href="/greenstone3/respooled-library/collection/popup-video-respooled/page/about">original
     96      Respooled project</a> (designed for a bit of fun), and recasts
     97      it with an interface and functionality more suitable for
     98      supporting musicological study.
     99    </p>
     100  </xsl:when>
     101  <xsl:otherwise>
     102    <p class="about">
     103      Welcome to <i>Popup Videos Respooled</i>, a project that rekindles the
     104      ideas present in the popular music video TV show <i>Pop Up Videos</i>,
     105      a Music TV format devised in the late 1990s that embellishes the shown
     106      content with <i>info nuggets</i> that popup as bubbles and then
     107      disappear, as a music video plays.  Through this website we have
     108      updated and extended the concept, using the open source <a
     109      href="http://www.greenstone.org/greenstone3">Greenstone 3 Digital
     110      Library Software</a> system as a way to organize the set of videos
     111      contained in the site.  The popup information is collated and
     112      displayed as metadata.  We have also introduced a gamification element
     113      to the site, where users can play along with a song using a range of
     114      virtual musical instruments: piano, drum-kit and guitar.
     115    </p>
     116  </xsl:otherwise>
     117</xsl:choose>
    83118
    84   <tr>
    85     <td>
    86        <img src="{$httpPath}/images/firefox-128.png" />
    87     </td>
    88     <td>
    89     <p class="about">
    90       <i><font size="+2">
    91         An experiment with Firefox's Advanced
    92         Audio Processing Extension ...
    93       </font></i>
    94     </p>
     119<p class="about">
     120  Use the search box above to search for content in the digital library, or else
     121  click on the Titles, Artists, or Albums tabs to browser the collection
     122</p>
    95123
    96     <p class="about">
    97       <i><font size="+2">
    98 ... featuring a mash-up of
    99 <a class="mashup" href="http://www.greenstone.org" target="_blank">Greenstone</a>,
    100 <a class="mashup" href="http://www.omras2.org/audioDB" target="_blank">AudioDB</a>, and
    101 <a class="mashup" href="http://seasr.org/meandre/" target="_blank">Meandre</a>.
    102       </font></i>
    103     </p>
     124<xsl:if test="$interface_name='respooled'">
     125  <p class="about">
     126    You might also be interested in the <a
     127    href="/greenstone3/dlfm-library/collection/popup-video-respooled/page/about">alternative
     128    interface</a> to this content, developed for
     129    supporting musicological study.
     130  </p>
     131</xsl:if>
    104132
    105133
    106           <div id="bd-version" style="display:none;" class="about">
    107         <p>
    108           <img src="{$httpPath}/images/warning-icon.png" />
    109             Version of Firefox detected:
    110               <script type="text/javascript">
    111                 document.write(BrowserDetect.version);
    112               </script>
    113         </p>
    114         <p>
    115             You need to upgrade to a more recent version of Firefox
    116             (v4.0 or greater) to access all the audio features of
    117             this demonstration.
    118         </p>
    119           </div>
    120 
    121           <div id="bd-browser" style="display:none;" class="about">
    122 
    123         <p>
    124           <img src="{$httpPath}/images/warning-icon.png" />
    125 Browser detected:
    126           <script type="text/javascript">
    127             document.write(BrowserDetect.browser);
    128           </script>
    129         </p>
    130             <p>You need to access this web-site using Firefox
    131             (v4.0 or greater) to access all the audio features provided.
    132         </p>
    133           </div>
    134 
    135 
    136 
    137 
    138   <script>
    139     <xsl:text disable-output-escaping="yes">
    140 
    141 if (BrowserDetect.browser == "Firefox") {
    142   if (BrowserDetect.version &lt; 4) {
    143     document.getElementById("bd-version").style.display="block";
    144 
    145   }
    146 }
    147 else {
    148   document.getElementById("bd-browser").style.display="block";
    149 
    150 }
    151       </xsl:text>
    152     </script>
    153 
    154 
    155 
    156 
    157     </td>
    158   </tr>
    159 </table>
    160 </div>
    161 -->
    162 
    163 <p class="about">A music DL collection that explores what is possible with only client-side processing.
    164 
    165 
    166 <style>
    167   li { padding-bottom: 10px; }
    168 
    169 </style>
    170 
    171 
    172 <ol>
    173 
    174   <li>
    175     <i>Client-side workflows:</i> the client-side Javascript
    176     processing code is refactored to follow the same methodology as
    177     Meandre components.
    178   </li>
    179 
    180   <li>
    181     <i>Visualization:</i> the
    182     Pre-computed self-similarity heat-maps are dropped from the
    183     collection building process in preference for the same information
    184     being computed through Javascript running in the user's web
    185     browser.
    186   </li>
    187 
    188 
    189   <li>
    190     <i>Annotation:</i> ...
    191 
    192   </li>
    193 </ol>
    194 
    195 </p>
    196 
    197 
     134<xsl:choose>
     135  <xsl:when test="/page/pageRequest/userInformation/@username">
     136      <p class="about">
     137    To incorpoate new videos into the collection, you need to
     138    have the <a href="/greenstone3/Popup_Videos_Respooled.user.js">RespoolMe!</a> User Script installed in your browser
     139      </p>
     140   
     141  </xsl:when>
     142</xsl:choose>
     143 
    198144</div>
    199145
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29980 r30093  
    210210        </td>
    211211      </tr>
     212
    212213     
    213       <tr>
    214         <td>Album Title</td>
    215         <td><gsf:metadata name="dc.Title.albumtitle"/></td>
    216       </tr>
     214          <gsf:switch>
     215            <gsf:metadata name='dc.Title.albumtitle'/>
     216            <gsf:when test='exists'>
     217              <tr>
     218                <td>Album Title</td>
     219                <td><gsf:metadata name="dc.Title.albumtitle"/></td>
     220              </tr>
     221            </gsf:when>
     222          </gsf:switch>
    217223     
    218224      <tr>
     
    221227      </tr>
    222228
    223       <tr>
    224         <td>Released</td>
    225         <td><gsf:metadata name="dc.Coverage"/></td>
    226       </tr>
     229      <gsf:switch>
     230            <gsf:metadata name='dc.Coverage'/>
     231            <gsf:when test='exists'>
     232              <tr>
     233                <td>Released</td>
     234                <td><gsf:metadata name="dc.Coverage"/></td>
     235              </tr>
     236            </gsf:when>
     237          </gsf:switch>
     238
    227239     
    228240<!--
     
    810822                     slide: function() { changeMaxFreq(grapheqR,"R") } };
    811823
    812         var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     824        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
    813825                     slide: function() { changeBandsPerOctave(grapheqL,"L")} };
    814         var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     826        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
    815827                     slide: function() { changeBandsPerOctave(grapheqR,"R")} };
    816828
     
    852864
    853865        var numSliders = grapheq.filters.length;
     866        if (numSliders<8) {
     867           numSliders=8; // Window can't go any smaller than this, due to length of text in title-bar
     868        }
     869       
    854870            var offset = (35 * numSliders) + 12;
    855871        if (side == "L") {
     
    981997      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
    982998   
    983       <table class="inner-control">
     999      <table class="inner-control" style="float: right;">
    9841000    <tr id="bandSlidersL">
    9851001    </tr>
     
    14071423        Your browser does not support the video tag.
    14081424          </video>
     1425          <gsf:div id="trackBank"/>
    14091426
    14101427        </div>
     
    15021519
    15031520
     1521         <div id="create-info-popup" title="Create Overlay">
     1522       <p>Do you want create a new named overlay?</p>
     1523 
     1524       <form>
     1525         <fieldset>
     1526           <label for="name">Name</label>
     1527           <input type="text"
     1528              name="save-info-name" id="create-info-name" value="My Overlay"
     1529              class="text ui-widget-content ui-corner-all"/>           
     1530         </fieldset>
     1531
     1532           <!-- Allow form submission with keyboard without duplicating the dialog button -->
     1533           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
     1534
     1535       </form>
     1536     </div>
     1537
     1538         <div id="delete-info-popup" title="Delete Overlay">
     1539       <p>Are you sure you want to delete the selected overlays?</p>
     1540     </div>
     1541
     1542     <div id="edit-info-popup" title="Edit Overlays">
     1543       <style>
     1544         #infoEditor {
     1545           position: absolute;
     1546           top: 0; right: 0; bottom: 0; left: 0;
     1547         }
     1548       </style>
     1549       <div id="infoEditor"><xsl:comment>Overlay Editor Area</xsl:comment></div>
     1550     </div>
     1551
     1552
    15041553          <div style="color: white;">
    15051554
    1506         <form id="bubForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
     1555        <form id="popForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
    15071556          <fieldset>
    15081557        <legend id="mpm-legend">Popup Layers</legend>
    1509         <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
     1558        <div id="popList"><xsl:comment>pop (popup overlay) list</xsl:comment></div>
     1559
     1560
     1561<!--
     1562        <input type="checkbox" name="PopupTrivia" value="Popup Trivia" />Popup Trivia<br />
    15101563        <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
    15111564        <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
    15121565        <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
     1566        -->
    15131567       
     1568
     1569        <xsl:choose>
     1570          <xsl:when test="/page/pageRequest/userInformation/@username">
     1571
    15141572        <div style="padding: 8px;">
    15151573          <button id="mpm-new-overlay"
    15161574              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1517               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1575              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1576              onclick="return popCreate()">
    15181577            New Layer
    15191578          </button>
    15201579          <button id="mpm-merge-overlay"
    15211580              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1522               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1581              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1582              onclick="return false;">
    15231583            Merge Selected
    15241584          </button>
    15251585          <button id="mpm-split-overlay"
    15261586              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1527               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1587              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1588              onclick="return false;">
    15281589            Split Selected
    15291590          </button>
    15301591          <button id="mpm-edit-overlay" 
    15311592              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1532               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1593              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1594              onclick="return popEdit()">
    15331595          Edit Selected
    15341596          </button>
    15351597          <button id="mpm-delete-overlay" 
    15361598              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1537               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;">
     1599              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
     1600              onclick="return popDelete()">
    15381601          Delete Selected
    15391602          </button>
    15401603        </div>
     1604
     1605          </xsl:when>
     1606        </xsl:choose>
     1607       
    15411608          </fieldset>
    15421609        </form>
     
    15481615        <div id="mpm-div" class="radio-div">
    15491616
     1617          <xsl:choose>
     1618            <xsl:when test="/page/pageRequest/userInformation/@username">
     1619                   
    15501620          <div class="radio-label-combo" style="display:inline-block; width: 32%">
    15511621            <span>
     
    15541624            <label for="mpm-record" class="radio-label">
    15551625              <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
    1556             Lay down new track
     1626            <xsl:choose>
     1627              <xsl:when test="$interface_name='dlfm'">
     1628                Record
     1629              </xsl:when>
     1630              <xsl:otherwise>
     1631                Lay down new track
     1632              </xsl:otherwise>
     1633            </xsl:choose>
    15571634              </span>
    15581635            </label>
    15591636          </div>
    1560 
     1637            </xsl:when>
     1638          </xsl:choose>
     1639         
    15611640          <div class="radio-label-combo" style="display:inline-block; width: 32%">
    15621641            <span>
     
    15651644            <label for="mpm-neutral" class="radio-label">
    15661645              <span style="color: orange;" title="Sit back and relax listening to the video">
    1567             Put into Neutral
     1646            <xsl:choose>
     1647              <xsl:when test="$interface_name='dlfm'">
     1648                Inactive
     1649              </xsl:when>
     1650              <xsl:otherwise>
     1651                Put into Neutral
     1652              </xsl:otherwise>
     1653            </xsl:choose>
    15681654              </span>
    15691655            </label>
     
    15761662            <label for="mpm-game-on" class="radio-label">
    15771663              <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display.  Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
    1578             Game on!
     1664
     1665            <xsl:choose>
     1666              <xsl:when test="$interface_name='dlfm'">
     1667                Play along
     1668              </xsl:when>
     1669              <xsl:otherwise>
     1670                Game on!
     1671              </xsl:otherwise>
     1672            </xsl:choose>
    15791673              </span>
    15801674            </label>
     
    15861680
    15871681
     1682       
    15881683        <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
    15891684          <fieldset>
    15901685        <legend id="pal-legend">Play Along Layers: Game On!</legend>
    15911686        <div id="palList"><xsl:comment>play along list</xsl:comment></div>
     1687
     1688
    15921689       
    15931690        <div style="padding: 8px;">
     
    15971694            Display Selected
    15981695          </button>
    1599           <button id="pal-merge-overlay"   
    1600               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
    1601             Merge Selected
    1602           </button>
    1603           <button id="pal-split-overlay"   
    1604               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
    1605             Split Selected
    1606           </button>
    1607           <button id="pal-edit-overlay"   
    1608               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
    1609               onclick="return palEdit()">
    1610           Edit Selected
    1611           </button>
    1612           <button id="pal-delete-overlay" 
    1613               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
    1614               onclick="return palDelete()">
    1615           Delete Selected
    1616           </button>
     1696          <xsl:choose>
     1697            <xsl:when test="/page/pageRequest/userInformation/@username">
     1698
     1699              <button id="pal-merge-overlay"   
     1700                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1701                  onclick="return false;">
     1702            Merge Selected
     1703              </button>
     1704              <button id="pal-split-overlay"   
     1705                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1706                  onclick="return false;">
     1707            Split Selected
     1708              </button>
     1709              <button id="pal-edit-overlay"   
     1710                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1711                  onclick="return palEdit()">
     1712            Edit Selected
     1713              </button>
     1714              <button id="pal-delete-overlay" 
     1715                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
     1716                  onclick="return palDelete()">
     1717            Delete Selected
     1718              </button>
     1719            </xsl:when>
     1720          </xsl:choose>
     1721         
    16171722        </div>
     1723
     1724
    16181725          </fieldset>
    16191726        </form>
    16201727
    1621 
     1728       
    16221729      </div>
    16231730
     
    16291736
    16301737    <div class="analysis-bar">
    1631       <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
     1738      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;  z-index: 4; position: relative;">
    16321739
    16331740    <xsl:choose>
     
    16421749
    16431750      <div id="analysis-area" class="documenttext"
    1644        style="display: none; position: absolute: left: 0px; top: 0px;">
     1751       styleXX="display: none; position: absolute: left: 0px; top: 0px;"
     1752       style="display: none; left: 0px; top: 0px; position: relative; z-index: 1;">
    16451753    <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
    1646       <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
     1754      <div id="gameOnPaper" width="100%" height="445" style="position: absolute; top: 50px; "><xsl:comment>filler</xsl:comment></div>
    16471755<!--
    16481756      <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
     
    16561764-->
    16571765    </div>
    1658      
     1766
     1767    <xsl:if test="$interface_name='dlfm'">
     1768
     1769      <div style="padding: 15px; padding-top: 0px;">
     1770        <button class="zoom-in">Zoom In</button>
     1771        <button class="zoom-out">Zoom Out</button>
     1772        <input type="range" class="zoom-range" />
     1773        <button class="reset">Reset</button>
     1774      </div>
     1775    </xsl:if>
     1776   
    16591777      </div>
    16601778    </div>
     
    16961814          <option value="19">Church Organ</option>
    16971815          <option value="24">Acoustic Guitar Nylon</option>
     1816          <!--
    16981817          <option value="30">Distortion Guitar</option>
     1818          -->
    16991819        </select>
    17001820          </div>
Note: See TracChangeset for help on using the changeset viewer.