Ignore:
Timestamp:
2015-05-16T10:45:00+12:00 (9 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 edited

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
Note: See TracChangeset for help on using the changeset viewer.