Changeset 30093

Show
Ignore:
Timestamp:
04.08.2015 13:50:35 (4 years ago)
Author:
davidb
Message:

Development work done in at JCDL

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

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>