Changeset 29885

Show
Ignore:
Timestamp:
16.05.2015 10:45:00 (4 years ago)
Author:
davidb
Message:

Notes played stored in LocalStorage?. Game On view area shows the events for a hard-wired track name

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

Legend:

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

    r29883 r29885  
    354354                <gsf:script src="{$httpCollection}/js/jam-guitar.js"/> 
    355355 
     356                <gsf:script src="{$httpCollection}/js/game-on.js"/> 
     357 
    356358 
    357359                                <!-- MIDI.js library --> 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29883 r29885  
    390390 
    391391        mediaPlayedNotes[String(mediaStartPlayTime)].push(  
    392         { 'midiPitch'   : playedMidiPitch,  
    393           'midiNoteOn'  : relativePlayedNoteStartTime, 
    394           'midiNoteOff' : relativePlayedNoteEndTime, 
     392        { 'midiPitch'    : playedMidiPitch,  
     393          'midiNoteOn'   : relativePlayedNoteStartTime, 
     394          'midiNoteOff'  : relativePlayedNoteEndTime, 
    395395          'startCurrentTime' : playedNoteStartCurrentTime, 
    396           'duration    ': playedDuration, 
    397           'humanReadble': playedNotePitch } 
     396          'duration'     : playedDuration, 
     397          'startPercTime': playedNoteStartCurrentTime/mediaPlayer.duration, 
     398          'humanReadble' : playedNotePitch } 
    398399        ); 
    399400 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

    r29883 r29885  
    6565    tinnyEffectNode.connect(audioCtx.destination); 
    6666 
     67    initGameOn(); 
     68 
    6769    console.log("onLoadMetadata done"); 
    6870    }); 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29883 r29885  
    2626 
    2727var recordedNotesArray = null; 
     28 
     29var hasLocalStorage = (typeof(Storage) !== "undefined"); 
    2830 
    2931function initialiseMediaPlayer() { 
     
    150152    var formattedTime = convertSecsToTimeStr(currentTime); 
    151153    $('#mediaPlayerCurrentTime').html(formattedTime); 
     154 
     155    updateGameOnCurrentTimeline(); 
    152156} 
    153157 
     
    304308    } 
    305309    else { 
    306     console.log("**** Saving under name '" + save_name +"': " + JSON.stringify(recordedNotesArray)); 
     310 
     311    if (hasLocalStorage) { 
     312        var docOID = gs.cgiParams.d; 
     313 
     314        var docStorageStr = localStorage.getItem(docOID); 
     315        var docStorage = (docStorageStr != null) ? eval("("+docStorageStr+")") : {palTracks:{}, popTracks:{}}; 
     316 
     317        var palTracks = docStorage.palTracks; 
     318         
     319        // Make timing information relative to ba base value 
     320        var num_rec_notes = recordedNotesArray.length; 
     321 
     322        var base_time_sct  = recordedNotesArray[0].startCurrentTime; 
     323        var base_time_mnon = recordedNotesArray[0].midiNoteOn; 
     324        var base_time_moff = recordedNotesArray[0].midiNoteOff; 
     325        var base_time_spt  = recordedNotesArray[0].startPercTime; 
     326 
     327        for (var i=0; i<num_rec_notes; i++) { 
     328        recordedNotesArray[i].startCurrentTime -= base_time_sct; 
     329        recordedNotesArray[i].midiNoteOn       -= base_time_mnon; 
     330        recordedNotesArray[i].midiNoteOff      -= base_time_moff; 
     331        recordedNotesArray[i].startPercTime    -= base_time_spt; 
     332        } 
     333 
     334        palTracks[save_name] = [ { name: save_name + " 1", baseCTime: base_time_sct, events: recordedNotesArray } ] 
     335 
     336        console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'"); 
     337        console.log("**** saved: " + JSON.stringify(palTracks[save_name])); 
     338 
     339        localStorage.setItem(docOID, JSON.stringify(docStorage)); 
     340    } 
     341    else { 
     342        console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage"); 
     343    } 
     344 
    307345 
    308346    var $dialog = $('#save-recording-popup'); 
    309  
    310347    $dialog.dialog( "close" ); 
    311348    } 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29883 r29885  
    13881388         <fieldset> 
    13891389           <label for="name">Name</label> 
    1390            <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/> 
    1391             
     1390           <input type="text"  
     1391              name="save-recording-name" id="save-recording-name" value="My Recording"  
     1392              class="text ui-widget-content ui-corner-all"/>            
     1393         </fieldset> 
     1394 
    13921395           <!-- Allow form submission with keyboard without duplicating the dialog button --> 
    13931396           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/> 
    1394          </fieldset> 
     1397 
    13951398       </form> 
    13961399     </div> 
    13971400 
    13981401          <div style="color: white;"> 
    1399  
    1400         <form id="mpmForm" style="width:99%;"> 
    1401           <fieldset> 
    1402         <legend id="mpm-legend">Video Player Mode</legend> 
    1403          
    1404         <div id="mpm-div" class="radio-div"> 
    1405  
    1406           <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    1407             <span> 
    1408               <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/> 
    1409             </span> 
    1410             <label for="mpm-record" class="radio-label"> 
    1411               <span style="color: red;"> 
    1412             Lay down new track (record) 
    1413               </span> 
    1414             </label> 
    1415           </div> 
    1416  
    1417           <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    1418             <span> 
    1419               <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/> 
    1420             </span> 
    1421             <label for="mpm-neutral" class="radio-label"> 
    1422               <span style="color: orange;"> 
    1423             Put into Neutral 
    1424               </span> 
    1425             </label> 
    1426           </div> 
    1427  
    1428           <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    1429             <span> 
    1430               <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/> 
    1431             </span> 
    1432             <label for="mpm-game-on" class="radio-label"> 
    1433               <span style="color: green;"> 
    1434             Game on! 
    1435               </span> 
    1436             </label> 
    1437           </div> 
    1438  
    1439         </div> 
    1440           </fieldset> 
    1441         </form> 
    14421402 
    14431403        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;"> 
     
    14501410         
    14511411        <div style="padding: 8px;"> 
     1412          <button id="mpm-new-overlay"  
     1413              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
     1414              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
     1415            New Layer 
     1416          </button> 
    14521417          <button id="mpm-merge-overlay"  
    14531418              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1454               style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1419              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14551420            Merge Selected 
    14561421          </button> 
    14571422          <button id="mpm-split-overlay"  
    14581423              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1459               style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1424              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14601425            Split Selected 
    14611426          </button> 
    14621427          <button id="mpm-edit-overlay"   
    14631428              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1464               style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1429              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14651430          Edit Selected 
    14661431          </button> 
    14671432          <button id="mpm-delete-overlay"   
    14681433              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1469               style="background-color:#2E52A4; color:white; width:24%; text-align: center;"> 
     1434              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"> 
    14701435          Delete Selected 
    14711436          </button> 
     
    14741439        </form> 
    14751440 
    1476         <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; "> 
     1441        <form id="mpmForm" style="width:99%;"> 
    14771442          <fieldset> 
    1478         <legend id="pam-legend">Play Along Layers</legend> 
     1443        <legend id="mpm-legend">Video Player Mode</legend> 
     1444         
     1445        <div id="mpm-div" class="radio-div"> 
     1446 
     1447          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
     1448            <span> 
     1449              <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/> 
     1450            </span> 
     1451            <label for="mpm-record" class="radio-label"> 
     1452              <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer"> 
     1453            Lay down new track 
     1454              </span> 
     1455            </label> 
     1456          </div> 
     1457 
     1458          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
     1459            <span> 
     1460              <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/> 
     1461            </span> 
     1462            <label for="mpm-neutral" class="radio-label"> 
     1463              <span style="color: orange;" title="Sit back and relax listening to the video"> 
     1464            Put into Neutral 
     1465              </span> 
     1466            </label> 
     1467          </div> 
     1468 
     1469          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
     1470            <span> 
     1471              <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/> 
     1472            </span> 
     1473            <label for="mpm-game-on" class="radio-label"> 
     1474              <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"> 
     1475            Game on! 
     1476              </span> 
     1477            </label> 
     1478          </div> 
     1479 
     1480        </div> 
     1481          </fieldset> 
     1482        </form> 
     1483 
     1484 
     1485        <form id="pamForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; "> 
     1486          <fieldset> 
     1487        <legend id="pam-legend">Play Along Layers: Game On!</legend> 
    14791488        <input type="checkbox" name="PianoHero" value="PianoHero" />Piano Hero<br /> 
    14801489        <input type="checkbox" name="DrumHero"  value="DrumHero" />Drum-beat Hero<br /> 
    14811490         
    14821491        <div style="padding: 8px;"> 
    1483           <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1492          <button id="pam-display-overlay" style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
     1493            Display Selected 
     1494          </button> 
     1495          <button id="pam-merge-overlay"   style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14841496            Merge Selected 
    14851497          </button> 
    1486           <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1498          <button id="pam-split-overlay"   style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14871499            Split Selected 
    14881500          </button> 
    1489           <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
     1501          <button id="pam-edit-overlay"    style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;"> 
    14901502          Edit Selected 
    14911503          </button> 
    1492           <button id="pam-delete-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center;"> 
     1504          <button id="pam-delete-overlay"   
     1505              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;" 
     1506              onclick="return pamDelete()"> 
    14931507          Delete Selected 
    14941508          </button> 
     
    15081522    <div class="analysis-bar"> 
    15091523      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 
    1510     Game On 
    1511       </div> 
    1512  
    1513  
    1514     <div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 
    1515           <div style="color: white; width:100%; height: 400px;"> 
     1524      Game On 
     1525      </div> 
     1526 
     1527      <div id="analysis-area" class="documenttext"  
     1528       style="display: none; position: absolute: left: 0px; top: 0px;"> 
     1529    <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white"> 
     1530      <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div> 
     1531<!-- 
     1532      <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1" 
     1533           width="100%" height="445" 
     1534           XXviewBox="0 0 100 100" XXpreserveAspectRatio="xMidYMid slice" 
     1535           XXstyle="width:100%; height:100%;" styleXX="position:absolute; top:0; left:0; z-index:-1;"> 
     1536 
     1537        <rect x="0" y="0" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> 
    15161538        <xsl:comment>filler</xsl:comment> 
    1517       </div> 
     1539      </svg> 
     1540--> 
     1541    </div> 
    15181542       
    1519     </div> 
     1543      </div> 
    15201544    </div> 
    15211545