Changeset 28593 for main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl
- Timestamp:
- 2013-11-02T23:05:23+13:00 (10 years ago)
- 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 77 77 <xsl:template name="javascript-dsp-header"> 78 78 <gsf:script src="ext/js-dsp/dsp-custom.js"/> 79 <gsf:script src="ext/js-dsp/dsp.js"/> 79 80 <gsf:script src="ext/js-dsp/chroma-transform.js"/> 80 81 <gsf:script src="ext/js-dsp/frequency-plotter.js"/> … … 99 100 height: 100%; 100 101 position: absolute; 101 z-index: 10 ;102 z-index: 10000; 102 103 left: 0px; 103 104 top: 0px; … … 168 169 169 170 </xsl:template> 171 172 170 173 171 174 <xsl:template name="fingerprintMetadataBlock"> … … 218 221 <tr valign="top"> 219 222 <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","<br />")); 229 230 </gsf:script> 231 </i> 232 </td> 221 233 </tr> 222 234 … … 265 277 --> 266 278 267 <table >279 <table style="width: 100%;"> 268 280 <tr> 269 <td >281 <td style="width: 200px;"> 270 282 MusicBrainz song id: 271 283 </td> 272 284 <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"> 274 286 <xsl:copy-of select="$musicbrainzsongid"/> 275 287 </a> … … 282 294 </td> 283 295 <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"> 285 297 <xsl:copy-of select="$musicbrainzalbumid"/> 286 298 </a> … … 293 305 </td> 294 306 <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"> 296 308 <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"/>304 309 </a> 305 310 </td> … … 310 315 </td> 311 316 <td> 312 <a href="{$echonestsongid}" target="#echonestsongid"> 317 <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&format=xml&id={$echonestsongid}" target="#echonestsongid" class="external"> 318 319 320 313 321 <xsl:copy-of select="$echonestsongid"/> 314 322 </a> 315 323 </td> 316 324 </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> 317 334 </table> 318 335 … … 330 347 <!-- * Audio Player --> 331 348 <!-- *** --> 332 333 349 334 350 <xsl:template name="js-mad-header"> … … 379 395 380 396 397 381 398 <xsl:template name="audio-icon-cache"> 382 399 <div style="display:none;"> … … 479 496 </div> 480 497 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"/> 483 500 484 501 <gsf:script> … … 611 628 <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;"> 612 629 613 <span class="vi x-heading">Max Values:</span>630 <span class="vis-heading">Max Values:</span> 614 631 <div style="padding-left: 8px"> 615 632 <style> … … 657 674 --> 658 675 676 677 659 678 <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)"/>> realtime 685 <span id="accProcStatus"></span> 686 </div> 687 662 688 </form> 689 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div> 690 663 691 <hr/> 664 692 665 693 </div> 666 694 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 = " " + 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 668 1006 669 1007 <!-- *** --> … … 677 1015 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 678 1016 </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 --> 679 1040 680 1041 <div id="settings-turnstyle" style="margin: 6px;"> … … 826 1187 </script> 827 1188 1189 </div><!-- wrapped div to force display to none --> 1190 828 1191 </xsl:template> 829 1192 … … 865 1228 </gsf:script> 866 1229 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"/> 867 1239 868 1240 <div id="original-turnstyle" style="margin: 6px;"> … … 875 1247 <div> 876 1248 <audio style="width: 100%;" id="original-audio" controls="controls" > 1249 <!-- 877 1250 <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}" /> 880 1254 </audio> 881 1255 </div> … … 891 1265 892 1266 893 </xsl:template> 1267 1268 </xsl:template> 1269 894 1270 895 1271 </xsl:stylesheet>
Note:
See TracChangeset
for help on using the changeset viewer.