source: main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl@ 28593

Last change on this file since 28593 was 28593, checked in by davidb, 10 years ago

Changes after testing in preparation for SMAM keynote
  • Property svn:executable set to *
  • Property svn:mime-type set to application/xml
File size: 39.6 KB
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0"
3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4 xmlns:java="http://xml.apache.org/xslt/java"
5 xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
6 xmlns:gslib="http://www.greenstone.org/skinning"
7 xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
8 xmlns:xlink="http://www.w3.org/1999/xlink"
9 extension-element-prefixes="java util"
10 exclude-result-prefixes="java util gsf">
11
12
13 <!-- *** -->
14 <!-- Document header -->
15 <!-- *** -->
16
17 <xsl:template name="soundmanager2-header">
18
19 <!-- soundManager2 API -->
20 <gsf:style src="ext/sound-manager2/css/flashblock.css" />
21 <gsf:script src="ext/sound-manager2/script/soundmanager2-nodebug.js"/>
22
23 <!-- The Page player (variant of SoundManger) main script -->
24 <gsf:script src="ext/sound-manager2/script/page-player.js"/>
25 <gsf:style src="ext/sound-manager2/css/page-player.css" />
26
27 <!-- optional: annotations/sub-tracks/notes, and alternate themes -->
28 <gsf:style src="ext/sound-manager2/css/optional-annotations.css" />
29 <gsf:style src="ext/sound-manager2/css/optional-themes.css" />
30
31 <!-- optional: Metadata UI prototype (not needed unless you want the bottom-most demo bits) -->
32 <gsf:script src="ext/sound-manager2/script/optional-page-player-metadata.js"/>
33
34 <gsf:style>
35 ul.playlist li .comment {font-size:0.65em;opacity:0.5}
36 </gsf:style>
37
38 <!-- Customization of page-player for this collection -->
39
40 <gsf:script>
41
42 soundManager.flashVersion = 9;
43 soundManager.preferFlash = true; /* for visualization effects */
44 soundManager.useHighPerformance = true; /* keep flash on screen, boost performance */
45 soundManager.wmode = "transparent"; /* transparent SWF, if possible */
46 soundManager.useFastPolling = true; /* increased JS callback frequency */
47 soundManager.url = "ext/sound-manager2/swf/";
48
49 /* custom page player configuration */
50
51 var PP_CONFIG = {
52 autoStart: false, /* begin playing first sound when page loads */
53 playNext: false, /* stop after one sound, or play through list until end */
54 useThrottling: false, /* try to rate-limit potentially-expensive calls (eg. dragging position around) */
55 usePeakData: true, /* [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU */
56 useWaveformData: false, /* [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY */
57 useEQData: false, /* [Flash 9 only] show EQ (frequency spectrum) data */
58 useFavIcon: false, /* try to apply peakData to address bar (Firefox + Opera) - performance note: appears to make Firefox 3 do some temporary, heavy disk access/swapping/garbage collection at first(?) - may be too heavy on CPU */
59 useMovieStar: true /* Flash 9.0r115+ only: Support for a subset of MPEG4 formats. */
60 }
61 </gsf:script>
62 </xsl:template>
63
64
65 <!-- CAA = Content Analysis Algorithm -->
66 <xsl:variable name="cgiargCAAlgorithm">
67 <xsl:choose>
68 <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''"><xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/></xsl:when>
69 <xsl:otherwise>1</xsl:otherwise>
70 </xsl:choose>
71 </xsl:variable>
72
73 <!-- *** -->
74 <!-- The Javascript DSP files for computing chroma features in the browser -->
75 <!-- *** -->
76
77 <xsl:template name="javascript-dsp-header">
78 <gsf:script src="ext/js-dsp/dsp-custom.js"/>
79 <gsf:script src="ext/js-dsp/dsp.js"/>
80 <gsf:script src="ext/js-dsp/chroma-transform.js"/>
81 <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
82 <gsf:script src="ext/js-dsp/frequency-player.js"/>
83
84
85 <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
86 <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
87 <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
88 <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
89 <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
90 <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
91 <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
92
93 </xsl:template>
94
95 <xsl:template name="processingPopup">
96 <div>
97 <style type="text/css">
98 #processing {
99 width: 100%;
100 height: 100%;
101 position: absolute;
102 z-index: 10000;
103 left: 0px;
104 top: 0px;
105 background-color: rgba(255,255,255,0.75);
106 opacity: 1;
107 display: none;
108 }
109
110 #processingMessage {
111 position: absolute;
112 padding: 10px;
113 border-radius: 10px;
114 margin-left: 50%;
115 width: 380px;
116 height: 105px;
117 left: -250px; top: 200px;
118 background-color: rgba(255,255,255,1);
119 box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
120 }
121
122 #processingMessage p {
123 font-size: 18px;
124 text-align: center;
125 font-family:
126 sans-serif;
127 font-weight: bold;
128 color: #666;
129 }
130 </style>
131
132 <div id="processing">
133 <div id="processingMessage">
134 <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
135 Heading
136 </h2>
137 <p id="processingText">text</p>
138 </div>
139 </div>
140 </div>
141
142 </xsl:template>
143
144 <!-- *** -->
145 <!-- * Discovery -->
146 <!-- *** -->
147
148 <xsl:template name="discovery-block">
149
150 <div id="fingerprint-turnstyle">
151
152 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
153 Discovery: <xsl:call-template name="choose-title"/>
154 </div>
155
156 <div class="documenttext" style="display: none;">
157 <xsl:call-template name="fingerprintMetadataBlock" />
158 </div>
159
160 </div>
161
162 <script>
163 <xsl:text disable-output-escaping="yes">
164 $(function(){
165 transformToTurnstyleBlock("fingerprint");
166 });
167 </xsl:text>
168 </script>
169
170 </xsl:template>
171
172
173
174 <xsl:template name="fingerprintMetadataBlock">
175
176 <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
177 <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
178
179
180 <xsl:variable name="musicbrainzsongid">
181 <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
182 </xsl:variable>
183
184 <xsl:variable name="musicbrainzalbumid">
185 <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
186 </xsl:variable>
187
188 <xsl:variable name="musicbrainzartistid">
189 <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
190 </xsl:variable>
191
192 <xsl:variable name="lastfmtrackurl">
193 <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
194 </xsl:variable>
195
196 <xsl:variable name="echonestsongid">
197 <gsf:metadata name="dc.Identifier.echonestsongid"/>
198 </xsl:variable>
199
200 <table class="metadata-stripes">
201 <tbody>
202 <tr>
203 <td>
204 Title
205 </td>
206 <td>
207 <gsf:metadata name="dc.Title"/>
208 </td>
209 </tr>
210
211 <tr>
212 <td>Album Title</td>
213 <td><gsf:metadata name="dc.Title.albumtitle"/></td>
214 </tr>
215
216 <tr>
217 <td>Artist</td>
218 <td><gsf:metadata name="dc.Creator"/></td>
219 </tr>
220
221 <tr valign="top">
222 <td>Artist Summary</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>
233 </tr>
234
235<!--
236dc.Identifier.echonestsongid
237dc.Identifier.echonestartistid
238
239dc.Identifier.lastfmtrackurl
240dc.Identifier.lastfmalbumurl
241dc.Identifier.lastfmartisturl
242
243//dc.Identifier
244dc.Identifier.musicbrainzalbumid
245dc.Identifier.musicbrainzartistid
246dc.Identifier.musicbrainzsongid
247dc.Identifier.playmeartistid
248
249-->
250
251 <tr>
252 <td colspan="2">
253
254 <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
255 <xsl:if test="position() &lt;= 6">
256 <a target="_blank">
257 <xsl:attribute name='href'>
258 <xsl:value-of disable-output-escaping="yes" select="."/>
259 </xsl:attribute>
260
261 <img width="150">
262 <xsl:attribute name='src'>
263 <xsl:value-of disable-output-escaping="yes" select="."/>
264 </xsl:attribute>
265 </img>
266 </a>
267 </xsl:if>
268 </xsl:for-each>
269 </td>
270 </tr>
271
272 <tr>
273 <td>Linked Data</td>
274 <td>
275 <!--
276 <gsf:metadata name="dc.Identifier"/><br />
277 -->
278
279 <table style="width: 100%;">
280 <tr>
281 <td style="width: 200px;">
282 MusicBrainz song id:
283 </td>
284 <td>
285 <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
286 <xsl:copy-of select="$musicbrainzsongid"/>
287 </a>
288 </td>
289 </tr>
290
291 <tr>
292 <td>
293 MusicBrainz album id:
294 </td>
295 <td>
296 <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
297 <xsl:copy-of select="$musicbrainzalbumid"/>
298 </a>
299 </td>
300 </tr>
301
302 <tr>
303 <td>
304 MusicBrainz artist id:
305 </td>
306 <td>
307 <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
308 <xsl:copy-of select="$musicbrainzartistid"/>
309 </a>
310 </td>
311 </tr>
312 <tr>
313 <td>
314 EchoNest song id:
315 </td>
316 <td>
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
321 <xsl:copy-of select="$echonestsongid"/>
322 </a>
323 </td>
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>
334 </table>
335
336 </td>
337 </tr>
338
339
340 </tbody>
341 </table>
342 </xsl:template>
343
344
345
346 <!-- *** -->
347 <!-- * Audio Player -->
348 <!-- *** -->
349
350 <xsl:template name="js-mad-header">
351
352 <gsf:script src="ext/js-mad/script/mad.js"/>
353 <gsf:script src="ext/js-mad/script/rq_table.js"/>
354 <gsf:script src="ext/js-mad/script/imdct_s.js"/>
355 <gsf:script src="ext/js-mad/script/huffman.js"/>
356 <gsf:script src="ext/js-mad/script/bit.js"/>
357 <gsf:script src="ext/js-mad/script/stream.js"/>
358 <gsf:script src="ext/js-mad/script/layer3.js"/>
359 <gsf:script src="ext/js-mad/script/frame.js"/>
360 <gsf:script src="ext/js-mad/script/synth.js"/>
361
362 <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
363 <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
364 <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
365 <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
366 <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
367
368 <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
369 <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
370 <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
371 <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
372 <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
373
374 <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
375 <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
376 <gsf:script src="ext/js-mad/script/mp3file.js"/>
377
378<!--
379 <gsf:script src="ext/js-mad/script/player.js"/>
380-->
381
382 <gsf:script src="ext/js-mad/script/sink.min.js"/>
383
384<!--
385 <gsf:script src="ext/js-mad/script/require.js"/>
386-->
387<!--
388 <gsf:script src="ext/js-mad/script/sink-light.js"/>
389-->
390
391 <gsf:script src="ext/js-mad/script/browser-detect.js"/>
392 <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
393
394 </xsl:template>
395
396
397
398 <xsl:template name="audio-icon-cache">
399 <div style="display:none;">
400 <!-- pre-load various play/pause images to help with speed of interface update -->
401 <img src="ext/diy-audio-player/images/play32Highlight.png" />
402 <img src="ext/diy-audio-player/images/pause32.png" />
403 <img src="ext/diy-audio-player/images/pause32Highlight.png" />
404 <img src="ext/diy-audio-player/images/play20Highlight.png" />
405 <img src="ext/diy-audio-player/images/stop32.png" />
406 <img src="ext/diy-audio-player/images/stop32Highlight.png" />
407 <img src="ext/diy-audio-player/images/search20Highlight.png" />
408 </div>
409 </xsl:template>
410
411
412 <!-- *** -->
413 <!-- * Workflow control -->
414 <!-- *** -->
415
416 <xsl:template name="workflow-block">
417 <xsl:variable name="httpCollection">
418 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
419 </xsl:variable>
420
421 <div id="workflow-turnstyle">
422
423 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
424 Workflow
425 </div>
426
427 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
428
429<!--
430 <form style="padding-left: 8px;">
431 <span class="vis-heading">Input Selection:</span>
432 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
433 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
434 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
435 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
436 </form>
437 <hr/>
438-->
439
440 <form style="padding-left: 8px; height: 48px;">
441 <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
442
443 <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
444 <option value="0" selected="selected">Chromagram</option>
445 <option value="1" >Dynamic Javascript Mixer</option>
446 </select>
447
448 <div style="float: right;" id="meandre-buttons">
449
450 <button type="button" id="meandre-run-button"
451 onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
452 <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
453 width="32"
454 height="32"
455 XXonmouseover="playHighlightOn(this)"
456 XXonmouseout="playHighlightOff(this)"
457 XXonclick="runThisMeandreFlow(this)"
458 style="vertical-align: middle;"/>
459 Run
460 </button>
461
462 <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
463 <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
464 width="32"
465 height="32"
466 XXonmouseover="stopHighlightOn(this)"
467 XXonmouseout="stopHighlightOff(this)"
468 XXonclick="stopThisMeandreFlow(this)"
469 style="vertical-align: middle;"/>
470 Stop
471 </button>
472
473<!--
474 <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
475 <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
476-->
477
478 </div>
479
480 </form>
481
482 <style>
483 #meandre-buttons button:hover:enabled {
484 background-color: #CCCC33;
485 color: #FFFFFF;
486 }
487 </style>
488
489
490 <div style="position: relative;">
491 <iframe id="workbenchFrame"
492 style="width: 100%; height: 400px;" >
493 If you see this, then your browser does not support the iframe element.
494 </iframe>
495
496 </div>
497
498 <gsf:script src="{$httpCollection}/script2/meandre-workflow/chromagram.js"/>
499 <gsf:script src="{$httpCollection}/script2/meandre-workflow/js-dynamic-mix.js"/>
500
501 <gsf:script>
502 var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
503 var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
504
505 var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
506
507 var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
508 var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
509
510 selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
511
512 function loadSelectedWorkflow(elem) {
513 selectedMeandreWorkflowPos = elem.value;
514 selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
515
516 if (selectedMeandreWorkflowPos==1) {
517 $('#jsdynamic-turnstyle').show();
518 }
519 else {
520 $('#jsdynamic-turnstyle').hide();
521 }
522
523 console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");
524 selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
525
526 }
527 </gsf:script>
528
529
530
531
532 <div id="jsdynamic-turnstyle" style="display:none">
533
534 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
535 Dynamic Javascript Meandre Component
536 </div>
537
538 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
539
540 <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
541 <xsl:text disable-output-escaping="yes">
542
543
544var arrayBinding = new JavaImporter(java.lang.reflect.Array);
545
546var JSDynamicComponent = function() {
547 this.frameCount = 0;
548}
549
550JSDynamicComponent.prototype.executeCallBack = function(cc) {
551
552 with(arrayBinding) {
553
554 if ((this.frameCount % 1000)==0) {
555 print("JSDynamicComponent: " + this.frameCount + "\n");
556 }
557
558 var inputObject = cc.getDataComponentFromInput("input");
559 var rawInput1DArray = inputObject;
560
561 var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
562
563 for (var i=1; i&lt;rawOutput1DArray.length; i++) {
564 var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
565 Array.setDouble(rawOutput1DArray,i,diff);
566 }
567
568 cc.pushDataComponentToOutput("output", rawOutput1DArray);
569
570 this.frameCount++;
571 }
572
573}
574
575var jsDynamicComponent = new JSDynamicComponent();
576
577 </xsl:text>
578 </textarea>
579 </div> <!-- end of Dynamic JS turnstyle block -->
580 </div>
581
582 </div>
583
584 </div>
585
586 <script>
587 <xsl:text disable-output-escaping="yes">
588 $(function(){
589 transformToTurnstyleBlock("workflow");
590 transformToTurnstyleBlock("jsdynamic");
591 });
592 </xsl:text>
593 </script>
594 </xsl:template>
595
596
597 <!-- *** -->
598 <!-- * Structured audio player -->
599 <!-- *** -->
600
601 <xsl:template name="structuredAudioPlayerBlock">
602
603 <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
604
605 <div style="background-color: rgb(40%,40%,20%)">
606 <svg xmlns="http://www.w3.org/2000/svg"
607 xmlns:xlink="http://www.w3.org/1999/xlink"
608 version="1.1"
609 id="svgGroundTruthSegments"
610 width="100%" height="24"
611 onLoadXX="svgGTStructuredInit()">
612 </svg>
613 </div>
614
615 <div style="background-color: rgb(40%,40%,20%)">
616 <svg xmlns="http://www.w3.org/2000/svg"
617 xmlns:xlink="http://www.w3.org/1999/xlink"
618 version="1.1"
619 id="svgContentAnalysisSegments"
620 width="100%" height="24"
621 onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
622 </svg>
623 </div>
624 </xsl:template>
625
626 <xsl:template name="visualization-mode-block">
627
628 <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
629
630 <span class="vis-heading">Max Values:</span>
631 <div style="padding-left: 8px">
632 <style>
633 span.mv-fixed { display: inline-block; width: 30pt; }
634 </style>
635 <table width="100%">
636 <tr>
637 <td><span class="mv-fixed" id="freqSpectrumMax" >0.000</span>(Freq Spectrum) </td>
638 <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
639 <td><span class="mv-fixed" id="filterBankMax" >0.000</span>(Filter Bank) </td>
640 <td><span class="mv-fixed" id="chromaFeaturesMax" >0.000</span>(Chroma Features) </td>
641 </tr>
642 </table>
643 </div>
644 <hr/>
645
646 <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
647 <div style="float: left;">
648 <span class="vis-heading">Visualization:</span>
649<!--
650 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
651 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
652-->
653
654 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
655 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
656 </div>
657
658 <div style="float: left; padding-left: 140px;">
659 <span class="vis-heading">Colour Mapping:</span>
660 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
661 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
662 </div>
663 </form>
664
665 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
666
667<!--
668 <form style="padding-left: 8px;">
669 <span class="vis-heading">Colour Mapping:</span>
670 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
671 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
672 </form>
673 <hr/>
674-->
675
676
677
678 <form style="padding-left: 8px; padding-bottom: 0px;">
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
688 </form>
689 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
690
691 <hr/>
692
693 </div>
694
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
1006
1007 <!-- *** -->
1008 <!-- * Settings form -->
1009 <!-- *** -->
1010
1011 <xsl:template name="settings-form">
1012 <xsl:param name="cgiargYScaleSimImg"/>
1013
1014 <xsl:variable name="httpCollection">
1015 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
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 -->
1040
1041 <div id="settings-turnstyle" style="margin: 6px;">
1042 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1043 Audio Content Search
1044 </div>
1045 <div class="documenttext" style="display: none;">
1046
1047
1048 <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
1049 <input type="hidden" name="a" value="q"/>
1050 <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
1051 <input type="hidden" name="rt" value="rd"/>
1052
1053 <input type="hidden" name="s" value="AudioQuery"/>
1054 <input type="hidden" name="c" value="{$collName}"/>
1055 <xsl:if test="not(paramList/param[@name='startPage'])">
1056 <input type="hidden" name="startPage" value="1"/>
1057 </xsl:if>
1058 <xsl:choose>
1059 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
1060 <input type="hidden" name="s1.maxDocs">
1061 <xsl:attribute name="value">
1062 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
1063 </xsl:attribute>
1064 </input>
1065 </xsl:when>
1066 <xsl:otherwise>
1067 <input type="hidden" name="s1.maxDocs" value="100"/>
1068 </xsl:otherwise>
1069 </xsl:choose>
1070 <xsl:choose>
1071 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
1072 <input type="hidden" name="s1.hitsPerPage">
1073 <xsl:attribute name="value">
1074 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
1075 </xsl:attribute>
1076 </input>
1077 </xsl:when>
1078 <xsl:otherwise>
1079 <input type="hidden" name="s1.hitsPerPage" value="20"/>
1080 </xsl:otherwise>
1081 </xsl:choose>
1082
1083 <input type="hidden" name="q">
1084 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1085 </input>
1086
1087
1088 <input type="hidden" name="s1.query">
1089<!--
1090 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1091-->
1092 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
1093 </input>
1094
1095 <input type="hidden" name="s1.offset" value="0" />
1096 <input type="hidden" name="s1.length" value="200" />
1097
1098 <div style="font-style: italics;">Start new query @ offset
1099 <span id="mysongCurrentPos">0 secs</span>,
1100 with excerpt lasting
1101
1102 <input type="text" name="mysongWindowDuration" size="4" value="6" />
1103 <!--
1104 <span id="mysongWindowDuration" class="editable-offset"
1105 style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
1106 -->
1107 secs:
1108
1109 <input type="submit" value="Search" onclick="preSubmit(this.form);" />
1110 </div>
1111
1112
1113 <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
1114 <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
1115 <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
1116 <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
1117 <li>Optionally click on the <b>excerpt lasting</b> value and edit, if you want to change the length of excerpt used in the match.</li>
1118 <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
1119 </ul>
1120
1121 </form>
1122
1123 <hr/>
1124
1125<!--
1126 <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
1127 <div style="font-style: italics;">
1128 Make the scale factor for the y-dimension of the self-similarity
1129 image be
1130 <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
1131 size="3" /> then
1132 <input type="button" name="ResizeImage" value="Resize Image"
1133 onclick="javascript:rescaleImage()" />
1134
1135 </div>
1136 </form>
1137
1138 <hr/>
1139-->
1140
1141 <!-- **** currently not displayed -->
1142
1143 <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
1144 <div style="font-style: italics;">
1145
1146 Show the song structure automatically computed by analyzing
1147 the audio data using algorithm
1148
1149 <select id="caaMenu" name="caAlgorithm">
1150 <option value="1">BV1</option>
1151 <option value="2">BV2</option>
1152 <option value="3">GP7</option>
1153 <option value="4">MHRAG2</option>
1154 <option value="5">MND1</option>
1155 <option value="6">WB1</option>
1156
1157<!--
1158 <option value="-1">or hide</option>
1159-->
1160
1161 </select>:
1162
1163 <input type="button" name="Reload" value="Reload"
1164 onclick="updateCAAlgorithm()" />
1165
1166 </div>
1167 </form>
1168
1169 <script>
1170 <xsl:text disable-output-escaping="yes">
1171 if (hasStructuredAudio) {
1172 var caaMenu = document.getElementById("caaMenu");
1173 caaMenu.options[caAlgorithm-1].selected = 1;
1174 }
1175 </xsl:text>
1176 </script>
1177
1178
1179 </div>
1180 </div>
1181 <script>
1182 <xsl:text disable-output-escaping="yes">
1183 $(function(){
1184 transformToTurnstyleBlock("settings");
1185 });
1186 </xsl:text>
1187 </script>
1188
1189 </div><!-- wrapped div to force display to none -->
1190
1191 </xsl:template>
1192
1193
1194 <!-- *** -->
1195 <!-- * Computed Data -->
1196 <!-- *** -->
1197
1198
1199 <xsl:template name="computed-data">
1200 <xsl:param name="httpCollection"/>
1201 <xsl:param name="assocFilePath"/>
1202
1203 <div id="computed-turnstyle" style="margin: 6px;">
1204 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1205 Computed Data
1206 </div>
1207
1208 <div class="documenttext" style="display: none;">
1209 <table class="metadata-stripes" style="width: 100%">
1210 <tbody>
1211 <tr>
1212 <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
1213 </tr>
1214
1215 <tr>
1216 <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
1217 </tr>
1218
1219 </tbody>
1220 </table>
1221 </div>
1222 </div>
1223
1224 <gsf:script>
1225 $(function(){
1226 transformToTurnstyleBlock("computed");
1227 });
1228 </gsf:script>
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"/>
1239
1240 <div id="original-turnstyle" style="margin: 6px;">
1241 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1242 The Original Audio
1243 </div>
1244
1245 <div style="display: none;">
1246
1247 <div>
1248 <audio style="width: 100%;" id="original-audio" controls="controls" >
1249<!--
1250 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1251-->
1252 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
1253 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
1254 </audio>
1255 </div>
1256
1257 </div>
1258 </div>
1259
1260 <gsf:script>
1261 $(function(){
1262 transformToTurnstyleBlock("original");
1263 });
1264 </gsf:script>
1265
1266
1267
1268 </xsl:template>
1269
1270
1271</xsl:stylesheet>
Note: See TracBrowser for help on using the repository browser.