Ignore:
Timestamp:
2013-11-02T23:05:23+13:00 (10 years ago)
Author:
davidb
Message:

Changes after testing in preparation for SMAM keynote

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl

    r28433 r28593  
    7777  <xsl:template name="javascript-dsp-header">
    7878    <gsf:script src="ext/js-dsp/dsp-custom.js"/>
     79    <gsf:script src="ext/js-dsp/dsp.js"/>
    7980    <gsf:script src="ext/js-dsp/chroma-transform.js"/>
    8081    <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
    … …  
    99100      height: 100%;
    100101      position: absolute;
    101       z-index: 10;
     102      z-index: 10000;
    102103      left: 0px;
    103104      top: 0px;
    … …  
    168169   
    169170  </xsl:template>
     171
     172
    170173
    171174  <xsl:template name="fingerprintMetadataBlock">
    … …  
    218221      <tr valign="top">
    219222        <td>Artist Summary</td>
    220         <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td>
     223        <td>
     224          <i>
     225        <gsf:script>
     226          var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"];
     227         
     228          document.write(summary.replace("\n","&lt;br /&gt;"));
     229
     230        </gsf:script>
     231          </i>
     232        </td>
    221233      </tr>
    222234     
    … …  
    265277          -->
    266278
    267           <table>
     279          <table style="width: 100%;">
    268280        <tr>
    269           <td>
     281          <td style="width: 200px;">
    270282            MusicBrainz song id:
    271283          </td>
    272284          <td>
    273             <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz">
     285            <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
    274286              <xsl:copy-of select="$musicbrainzsongid"/>
    275287            </a>
    … …  
    282294          </td>
    283295          <td>
    284             <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz">
     296            <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
    285297              <xsl:copy-of select="$musicbrainzalbumid"/>
    286298            </a>
    … …  
    293305          </td>
    294306          <td>
    295             <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz">
     307            <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
    296308              <xsl:copy-of select="$musicbrainzartistid"/>
    297             </a>
    298           </td>
    299         </tr>
    300         <tr>
    301           <td colspan="2">       
    302             <a href="{$lastfmtrackurl}" target="#lastfm">
    303               <xsl:copy-of select="$lastfmtrackurl"/>
    304309            </a>
    305310          </td>
    … …  
    310315          </td>
    311316          <td>
    312             <a href="{$echonestsongid}" target="#echonestsongid">
     317            <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&amp;format=xml&amp;id={$echonestsongid}" target="#echonestsongid" class="external">
     318
     319
     320
    313321              <xsl:copy-of select="$echonestsongid"/>
    314322            </a>
    315323          </td>
    316324        </tr>
     325        <tr>
     326          <td colspan="2">       
     327            <i>
     328              <a href="{$lastfmtrackurl}" target="#lastfm" class="external">
     329            <xsl:copy-of select="$lastfmtrackurl"/>
     330              </a>
     331            </i>
     332          </td>
     333        </tr>
    317334          </table>
    318335
    … …  
    330347  <!-- * Audio Player -->
    331348  <!-- *** -->
    332 
    333349
    334350  <xsl:template name="js-mad-header">
    … …  
    379395
    380396
     397
    381398  <xsl:template name="audio-icon-cache">
    382399    <div style="display:none;">
    … …  
    479496    </div>
    480497
    481     <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
    482     <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
     498    <gsf:script src="{$httpCollection}/script2/meandre-workflow/chromagram.js"/>
     499    <gsf:script src="{$httpCollection}/script2/meandre-workflow/js-dynamic-mix.js"/>
    483500   
    484501    <gsf:script>
    … …  
    611628    <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
    612629
    613       <span class="vix-heading">Max Values:</span>
     630      <span class="vis-heading">Max Values:</span>
    614631      <div style="padding-left: 8px">
    615632    <style>
    … …  
    657674-->
    658675
     676
     677
    659678    <form style="padding-left: 8px; padding-bottom: 0px;">
    660       <span class="vis-heading">On Pause:</span>
    661       <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
     679      <div style="float: left;">
     680        <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
     681      </div>
     682      <div style="float: left; padding-left: 140px;">
     683        <span class="vis-heading">Accelerated  Processing:</span>
     684        <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>&gt; realtime
     685        <span id="accProcStatus"></span>
     686      </div>
     687
    662688    </form>
     689    <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
     690
    663691    <hr/>
    664692
    665693    </div>
    666694   
    667   </xsl:template>
     695    <xsl:call-template name="graphic-equalizers"/>
     696  </xsl:template>
     697
     698
     699  <xsl:template name="graphic-equalizers">
     700
     701
     702    <gsf:style >
     703      .control {
     704        padding: 5px;
     705        border: 1px solid #CCC;
     706        background-color: #EEE;
     707        float: left;
     708        margin-right: 5px;
     709
     710      }
     711
     712      .inner-control {
     713        background-color: #DDD;
     714      }
     715
     716      .control div {
     717    max-width: 400px;
     718      }
     719
     720      .control table td {
     721        padding: 5px;
     722        width: 25px;
     723        color: #999;
     724        font-size: 12px;
     725      }
     726      .control h3 {
     727        margin: 0;
     728        padding:0;
     729        font-size: 12px;
     730        margin-bottom: 10px;
     731      }
     732      .control #debug {
     733        border: 1px inset #ccc;
     734        background-color: #FFF;
     735        font-size: 12px;
     736        width: 300px;
     737        padding: 10px;
     738      }
     739      .slider {
     740        margin-bottom: 16px;
     741        width: 8px;
     742      }
     743/*
     744      .geq-bar {
     745        width: 34px;
     746      }
     747*/
     748
     749/*
     750      .ui-button {
     751        font-size: xx-small;
     752      }
     753*/
     754      .ui-slider .ui-slider-handle {
     755        width: 8px;
     756        margin-left: 3px;
     757      }
     758    </gsf:style>
     759
     760
     761
     762   <gsf:script>
     763      <![CDATA[
     764
     765        var grapheqL;
     766        var grapheqR;
     767
     768      $(function() {
     769        var geqSampleRate = 44100;
     770        console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
     771
     772        grapheqL = new GraphicalEq(geqSampleRate);
     773        grapheqR = new GraphicalEq(geqSampleRate);
     774        grapheqL.recalculateFilters();
     775        grapheqR.recalculateFilters();
     776
     777        var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
     778                     slide: function() { changeMinFreq(grapheqL,"L")} };
     779        var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
     780                     slide: function() { changeMinFreq(grapheqR,"R")} };
     781
     782    var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
     783                     slide: function() { changeMaxFreq(grapheqL,"L") } };
     784    var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
     785                     slide: function() { changeMaxFreq(grapheqR,"R") } };
     786
     787        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     788                     slide: function() { changeBandsPerOctave(grapheqL,"L")} };
     789        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     790                     slide: function() { changeBandsPerOctave(grapheqR,"R")} };
     791
     792        $('#minFreqL').slider(minPropL);
     793        $('#maxFreqL').slider(maxPropL);
     794        $('#minFreqR').slider(minPropR);
     795        $('#maxFreqR').slider(maxPropR);
     796
     797        $('#bandsPerOctaveL').slider(bpoPropL);
     798        $('#bandsPerOctaveR').slider(bpoPropR);
     799
     800    //$('#input').attr('volume', 0);
     801
     802    createSliders(grapheqL,"L");
     803    createSliders(grapheqR,"R");
     804      });
     805
     806
     807
     808      var changeMinFreq = function(grapheq,side) {
     809         grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
     810         //plotCoeffs();
     811     createSliders(grapheq,side);
     812      }
     813
     814      var changeMaxFreq = function(grapheq,side) {
     815         grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
     816         //plotCoeffs();
     817     createSliders(grapheq,side);
     818      }
     819
     820      var changeBandsPerOctave = function(grapheq,side) {
     821         grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
     822         //plotCoeffs();
     823     createSliders(grapheq,side);
     824      }
     825
     826    function positionGrapheqControl(grapheq,side) {
     827
     828        var numSliders = grapheq.filters.length;
     829            var offset = (35 * numSliders) + 12;
     830        if (side == "L") {
     831            $('#grapheqControlL').css("left","-" + offset + "px");
     832        }
     833        else if (side == "R") {
     834            offset += 5; // fudge factor
     835            $('#grapheqControlR').css("right","-" + offset + "px");
     836        }
     837        else {
     838            console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
     839        }
     840    }
     841
     842      var createSliders = function(grapheq,side) {
     843    $('#bandSliders'+side).empty();
     844    positionGrapheqControl(grapheq,side);
     845    for (var i=0; i<grapheq.filters.length; i++) {
     846   
     847      var freq = grapheq.filters[i].f0;
     848      var units = "Hz";
     849      if (freq>=1000000) {
     850        freq = (freq/1000000).toFixed(2);
     851        units = " MHz";
     852      }
     853      else if (freq>=1000) {
     854        freq = (freq/1000).toFixed(2);
     855        units = " KHz";
     856      }
     857      else if (freq>=100) {
     858        freq = freq.toFixed(0);
     859      }
     860      else {
     861        freq = freq.toFixed(0);
     862        freq = "&nbsp;" + freq;
     863      }
     864
     865      $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
     866          +freq + ' ' + units + '</td>');
     867
     868      $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0,
     869                                     slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
     870    }
     871      }
     872     
     873      var changeBandGain = function(event, ui, grapheq) {
     874    grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
     875        //plotCoeffs();
     876      }
     877/*
     878      var plotCoeffs = function() {
     879    freqz = new Float32Array(grapheq.freqzs[0].length);
     880
     881    for (var i=0; i<freqz.length; i++) {
     882      for (var j=0; j<grapheq.freqzs.length; j++) {
     883        freqz[i] += grapheq.freqzs[j][i];
     884      }
     885    }
     886      }
     887*/
     888
     889/*
     890      function audioWritten(event) {
     891        signal = event.mozFrameBuffer;
     892
     893        // Apply the filter to the signal
     894        signal = grapheq.processStereo(signal);
     895
     896        output.mozWriteAudio([]); // flush
     897        output.mozWriteAudio(signal);
     898        writeCount++;
     899      }
     900*/
     901
     902        //plotCoeffs();
     903
     904
     905      ]]>
     906    </gsf:script>
     907
     908
     909      <gsf:script>
     910    function minimizeTurnstyle(suffix) {
     911      $('#turnstyleMaximizeButton'+suffix).show();
     912      $('#turnstyleMinimizeButton'+suffix).hide();
     913      $('#turnstyleContentsArea'+suffix).slideUp('fast');
     914       }
     915
     916    function maximizeTurnstyle(suffix) {
     917      $('#turnstyleMaximizeButton'+suffix).hide();
     918      $('#turnstyleMinimizeButton'+suffix).show();
     919      $('#turnstyleContentsArea'+suffix).slideDown('fast');
     920       }
     921
     922      </gsf:script>
     923
     924<!--   
     925    <div class="control" style="float: left; height: 200px">
     926-->
     927
     928
     929    <div id="grapheqControlL" class="control" style="position: absolute; top: 0px; left: -132px; heightXX: 200px">
     930
     931      <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
     932      <div style="float: right;">
     933    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
     934    <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
     935      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
     936    </a>
     937    <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
     938      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
     939    </a>
     940      </div>
     941
     942      <hr style="clear: both;"/>
     943
     944      <div id="turnstyleContentsAreaL" style="display: none; float: right;">
     945
     946    <table class="inner-control" style="margin-bottom: 5px;">
     947      <tr>
     948        <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
     949        <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
     950        <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
     951      </tr>
     952    </table>
     953      </div>
     954
     955      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
     956   
     957      <table class="inner-control">
     958    <tr id="bandSlidersL">
     959    </tr>
     960      </table>
     961
     962
     963
     964    </div>
     965
     966<!--
     967    <div class="control" style="float: right; height: 200px">
     968-->
     969
     970    <div id="grapheqControlR" class="control" style="position: absolute; top: 0px; right: -330px; heightXX: 200px">
     971      <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
     972
     973      <div style="float: right;">
     974    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
     975    <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
     976      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
     977    </a>
     978    <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
     979      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
     980    </a>
     981      </div>
     982
     983      <hr style="clear: both;"/>
     984
     985      <div id="turnstyleContentsAreaR" style="display: none; float: left;">
     986    <table class="inner-control" style="margin-bottom: 5px;">
     987      <tr>
     988        <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
     989        <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
     990        <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
     991      </tr>
     992    </table>
     993      </div>
     994
     995      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
     996
     997      <table class="inner-control">
     998    <tr id="bandSlidersR">
     999    </tr>
     1000      </table>
     1001
     1002    </div>
     1003   
     1004  </xsl:template>
     1005
    6681006
    6691007  <!-- *** -->
    … …  
    6771015      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
    6781016    </xsl:variable>
     1017
     1018<!--
     1019    <gsf:variable-array name="overlayNote2">
     1020      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
     1021    </gsf:variable-array>
     1022
     1023    <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
     1024      New Annotation 2
     1025    </span>   
     1026
     1027    <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
     1028    </div>
     1029
     1030    <gsf:script>
     1031      $(window).load(function(){
     1032           var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
     1033       $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
     1034       });
     1035
     1036    </gsf:script>
     1037-->
     1038
     1039    <div style="display: none;"><!-- wrapped div to force display to none -->
    6791040
    6801041    <div id="settings-turnstyle" style="margin: 6px;">
    … …  
    8261187    </script>
    8271188
     1189    </div><!-- wrapped div to force display to none -->
     1190
    8281191  </xsl:template>
    8291192
    … …  
    8651228    </gsf:script>
    8661229
     1230  </xsl:template>
     1231
     1232
     1233
     1234  <xsl:template name="original-audio">
     1235    <xsl:param name="httpCollection"/>
     1236    <xsl:param name="assocFilePath"/>
     1237    <xsl:param name="Audio"/>
     1238    <xsl:param name="streamableaudio"/>
    8671239
    8681240    <div id="original-turnstyle" style="margin: 6px;">
    … …  
    8751247    <div>
    8761248      <audio style="width: 100%;" id="original-audio" controls="controls" >
     1249<!--
    8771250        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
    878         <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.mp3" />
    879         <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav" />
     1251-->
     1252        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
     1253        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
    8801254      </audio>
    8811255    </div>
    … …  
    8911265
    8921266
    893   </xsl:template>
     1267
     1268  </xsl:template>
     1269
    8941270
    8951271</xsl:stylesheet>
Note: See TracChangeset for help on using the changeset viewer.