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

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

Changes after testing in preparation for SMAM keynote
  • Property svn:mime-type set to text/plain
File size: 30.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/chroma-transform.js"/>
80 <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
81 <gsf:script src="ext/js-dsp/frequency-player.js"/>
82
83
84 <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
85 <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
86 <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
87 <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
88 <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
89 <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
90 <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
91
92 </xsl:template>
93
94 <xsl:template name="processingPopup">
95 <div>
96 <style type="text/css">
97 #processing {
98 width: 100%;
99 height: 100%;
100 position: absolute;
101 z-index: 10;
102 left: 0px;
103 top: 0px;
104 background-color: rgba(255,255,255,0.75);
105 opacity: 1;
106 display: none;
107 }
108
109 #processingMessage {
110 position: absolute;
111 padding: 10px;
112 border-radius: 10px;
113 margin-left: 50%;
114 width: 380px;
115 height: 105px;
116 left: -250px; top: 200px;
117 background-color: rgba(255,255,255,1);
118 box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
119 }
120
121 #processingMessage p {
122 font-size: 18px;
123 text-align: center;
124 font-family:
125 sans-serif;
126 font-weight: bold;
127 color: #666;
128 }
129 </style>
130
131 <div id="processing">
132 <div id="processingMessage">
133 <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
134 Heading
135 </h2>
136 <p id="processingText">text</p>
137 </div>
138 </div>
139 </div>
140
141 </xsl:template>
142
143
144 <!-- *** -->
145 <!-- * Plain old manually assigned and embedded metadata -->
146 <!-- *** -->
147
148 <xsl:template name="metadata-block">
149
150 <div>
151 <div class="documenttext">
152 <center>
153 <xsl:call-template name="plainoldMetadataBlock" />
154 </center>
155 </div>
156
157 </div>
158
159 </xsl:template>
160
161
162
163 <xsl:template name="choose-music-title">
164
165 <gsf:choose-metadata>
166 <gsf:metadata name="dc.Title"/>
167 <gsf:metadata name="exp.Title"/>
168 <gsf:metadata name="ex.dc.Title"/>
169 <gsf:metadata name="ex.ID3.Title"/>
170 <gsf:metadata name="ex.Title"/>
171 <gsf:metadata name="Title"/>
172 <gsf:default>Untitled</gsf:default>
173 </gsf:choose-metadata>
174
175 <gsf:switch>
176 <gsf:metadata name='dc.Creator'/>
177 <gsf:when test='exists'>
178
179 <gsf:switch>
180 <gsf:metadata name="dc.Creator"/>
181 <gsf:when test="notEquals" test-value="Unknown">
182
183 by <i><gsf:metadata name='dc.Creator'/></i>
184 </gsf:when>
185 </gsf:switch>
186
187 </gsf:when>
188 </gsf:switch>
189 </xsl:template>
190
191
192 <xsl:template name="choose-music-artist">
193
194 <gsf:choose-metadata>
195 <gsf:metadata name="dc.Creator"/>
196 <gsf:metadata name="exp.Creator"/>
197 <gsf:metadata name="ex.dc.Creator"/>
198 <gsf:metadata name="ex.ID3.Artist"/>
199 <gsf:default>Unknown</gsf:default>
200 </gsf:choose-metadata>
201 </xsl:template>
202
203
204 <xsl:template name="plainoldMetadataBlock">
205
206 <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
207 <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
208
209 <style>
210 <xsl:text disable-output-escaping="yes">
211 a.external {
212 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVR42n3PgQkAIAhEUXdqJ3dqJ3e6IoTPUSQcgj4EQ5IlUiLE0Jil3PECXhcHGBhZ8kg4hwxAu3MZeCGeyFnAXp4hqNQPnt7QL0nADpD6wHccLvnAKksq8iiaAAAAAElFTkSuQmCC") no-repeat scroll right center rgba(0, 0, 0, 0);
213 padding-right: 13px;
214 }
215 </xsl:text>
216 </style>
217
218 <table class="metadata-stripes">
219 <tbody>
220 <tr>
221 <td>
222 Title:
223 </td>
224 <td>
225 <a class="external">
226 <xsl:attribute name="href">
227 http://musicbrainz.org/search?query=<xsl:call-template name="choose-music-title"/>&amp;type=recording&amp;limit=5&amp;method=indexed
228 </xsl:attribute>
229 <xsl:call-template name="choose-music-title"/>
230 </a>
231 </td>
232 </tr>
233
234 <gsf:switch>
235 <gsf:metadata name='ex.ID3.Album'/>
236 <gsf:when test='exists'>
237 <tr>
238 <td>Album:</td>
239 <td><gsf:metadata name="ex.ID3.Album"/></td>
240 </tr>
241 </gsf:when>
242 </gsf:switch>
243
244 <gsf:switch>
245 <gsf:metadata name='ex.ID3.Genre'/>
246 <gsf:when test='exists'>
247 <tr>
248 <td>Genre:</td>
249 <td><gsf:metadata name="ex.ID3.Genre"/></td>
250 </tr>
251 </gsf:when>
252 </gsf:switch>
253
254 <tr>
255 <td>Artist:</td>
256 <td>
257 <xsl:call-template name="choose-music-artist"/>
258 </td>
259 </tr>
260
261
262 </tbody>
263 </table>
264 </xsl:template>
265
266
267
268
269
270
271
272
273 <!-- *** -->
274 <!-- * Discovery -->
275 <!-- *** -->
276
277 <xsl:template name="discovery-block">
278
279 <div id="fingerprint-turnstyle">
280
281 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
282 Discovery: <xsl:call-template name="choose-title"/>
283 </div>
284
285 <div class="documenttext" style="display: none;">
286 <xsl:call-template name="fingerprintMetadataBlock" />
287 </div>
288
289 </div>
290
291 <script>
292 <xsl:text disable-output-escaping="yes">
293 $(function(){
294 transformToTurnstyleBlock("fingerprint");
295 });
296 </xsl:text>
297 </script>
298
299 </xsl:template>
300
301 <xsl:template name="fingerprintMetadataBlock">
302
303 <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
304 <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
305
306
307 <xsl:variable name="musicbrainzsongid">
308 <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
309 </xsl:variable>
310
311 <xsl:variable name="musicbrainzalbumid">
312 <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
313 </xsl:variable>
314
315 <xsl:variable name="musicbrainzartistid">
316 <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
317 </xsl:variable>
318
319 <xsl:variable name="lastfmtrackurl">
320 <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
321 </xsl:variable>
322
323 <xsl:variable name="echonestsongid">
324 <gsf:metadata name="dc.Identifier.echonestsongid"/>
325 </xsl:variable>
326
327 <table class="metadata-stripes">
328 <tbody>
329 <tr>
330 <td>
331 Title
332 </td>
333 <td>
334 <gsf:metadata name="dc.Title"/>
335 </td>
336 </tr>
337
338 <tr>
339 <td>Album Title</td>
340 <td><gsf:metadata name="dc.Title.albumtitle"/></td>
341 </tr>
342
343 <tr>
344 <td>Artist</td>
345 <td><gsf:metadata name="dc.Creator"/></td>
346 </tr>
347
348 <tr valign="top">
349 <td>Artist Summary</td>
350 <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td>
351 </tr>
352
353<!--
354dc.Identifier.echonestsongid
355dc.Identifier.echonestartistid
356
357dc.Identifier.lastfmtrackurl
358dc.Identifier.lastfmalbumurl
359dc.Identifier.lastfmartisturl
360
361//dc.Identifier
362dc.Identifier.musicbrainzalbumid
363dc.Identifier.musicbrainzartistid
364dc.Identifier.musicbrainzsongid
365dc.Identifier.playmeartistid
366
367-->
368
369 <tr>
370 <td colspan="2">
371
372 <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
373 <xsl:if test="position() &lt;= 6">
374 <a target="_blank">
375 <xsl:attribute name='href'>
376 <xsl:value-of disable-output-escaping="yes" select="."/>
377 </xsl:attribute>
378
379 <img width="150">
380 <xsl:attribute name='src'>
381 <xsl:value-of disable-output-escaping="yes" select="."/>
382 </xsl:attribute>
383 </img>
384 </a>
385 </xsl:if>
386 </xsl:for-each>
387 </td>
388 </tr>
389
390 <tr>
391 <td>Linked Data</td>
392 <td>
393 <!--
394 <gsf:metadata name="dc.Identifier"/><br />
395 -->
396
397 <table>
398 <tr>
399 <td>
400 MusicBrainz song id:
401 </td>
402 <td>
403 <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz">
404 <xsl:copy-of select="$musicbrainzsongid"/>
405 </a>
406 </td>
407 </tr>
408
409 <tr>
410 <td>
411 MusicBrainz album id:
412 </td>
413 <td>
414 <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz">
415 <xsl:copy-of select="$musicbrainzalbumid"/>
416 </a>
417 </td>
418 </tr>
419
420 <tr>
421 <td>
422 MusicBrainz artist id:
423 </td>
424 <td>
425 <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz">
426 <xsl:copy-of select="$musicbrainzartistid"/>
427 </a>
428 </td>
429 </tr>
430 <tr>
431 <td colspan="2">
432 <a href="{$lastfmtrackurl}" target="#lastfm">
433 <xsl:copy-of select="$lastfmtrackurl"/>
434 </a>
435 </td>
436 </tr>
437 <tr>
438 <td>
439 EchoNest song id:
440 </td>
441 <td>
442 <a href="{$echonestsongid}" target="#echonestsongid">
443 <xsl:copy-of select="$echonestsongid"/>
444 </a>
445 </td>
446 </tr>
447 </table>
448
449 </td>
450 </tr>
451
452
453 </tbody>
454 </table>
455 </xsl:template>
456
457
458
459 <!-- *** -->
460 <!-- * Audio Player -->
461 <!-- *** -->
462
463
464 <xsl:template name="js-mad-header">
465
466 <gsf:script src="ext/js-mad/script/mad.js"/>
467 <gsf:script src="ext/js-mad/script/rq_table.js"/>
468 <gsf:script src="ext/js-mad/script/imdct_s.js"/>
469 <gsf:script src="ext/js-mad/script/huffman.js"/>
470 <gsf:script src="ext/js-mad/script/bit.js"/>
471 <gsf:script src="ext/js-mad/script/stream.js"/>
472 <gsf:script src="ext/js-mad/script/layer3.js"/>
473 <gsf:script src="ext/js-mad/script/frame.js"/>
474 <gsf:script src="ext/js-mad/script/synth.js"/>
475
476 <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
477 <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
478 <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
479 <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
480 <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
481
482 <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
483 <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
484 <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
485 <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
486 <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
487
488 <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
489 <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
490 <gsf:script src="ext/js-mad/script/mp3file.js"/>
491
492<!--
493 <gsf:script src="ext/js-mad/script/player.js"/>
494-->
495
496 <gsf:script src="ext/js-mad/script/sink.min.js"/>
497
498<!--
499 <gsf:script src="ext/js-mad/script/require.js"/>
500-->
501<!--
502 <gsf:script src="ext/js-mad/script/sink-light.js"/>
503-->
504
505 <gsf:script src="ext/js-mad/script/browser-detect.js"/>
506 <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
507
508 </xsl:template>
509
510
511 <xsl:template name="audio-icon-cache">
512 <div style="display:none;">
513 <!-- pre-load various play/pause images to help with speed of interface update -->
514 <img src="ext/diy-audio-player/images/play32Highlight.png" />
515 <img src="ext/diy-audio-player/images/pause32.png" />
516 <img src="ext/diy-audio-player/images/pause32Highlight.png" />
517 <img src="ext/diy-audio-player/images/play20Highlight.png" />
518 <img src="ext/diy-audio-player/images/stop32.png" />
519 <img src="ext/diy-audio-player/images/stop32Highlight.png" />
520 <img src="ext/diy-audio-player/images/search20Highlight.png" />
521 </div>
522 </xsl:template>
523
524
525 <!-- *** -->
526 <!-- * Workflow control -->
527 <!-- *** -->
528
529 <xsl:template name="workflow-block">
530 <xsl:variable name="httpCollection">
531 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
532 </xsl:variable>
533
534 <div id="workflow-turnstyle">
535
536 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
537 Workflow
538 </div>
539
540 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
541
542<!--
543 <form style="padding-left: 8px;">
544 <span class="vis-heading">Input Selection:</span>
545 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
546 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
547 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
548 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
549 </form>
550 <hr/>
551-->
552
553 <form style="padding-left: 8px; height: 48px;">
554 <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
555
556 <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
557 <option value="0" selected="selected">Chromagram</option>
558 <option value="1" >Dynamic Javascript Mixer</option>
559 </select>
560
561 <div style="float: right;" id="meandre-buttons">
562
563 <button type="button" id="meandre-run-button"
564 onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
565 <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
566 width="32"
567 height="32"
568 XXonmouseover="playHighlightOn(this)"
569 XXonmouseout="playHighlightOff(this)"
570 XXonclick="runThisMeandreFlow(this)"
571 style="vertical-align: middle;"/>
572 Run
573 </button>
574
575 <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
576 <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
577 width="32"
578 height="32"
579 XXonmouseover="stopHighlightOn(this)"
580 XXonmouseout="stopHighlightOff(this)"
581 XXonclick="stopThisMeandreFlow(this)"
582 style="vertical-align: middle;"/>
583 Stop
584 </button>
585
586<!--
587 <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
588 <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
589-->
590
591 </div>
592
593 </form>
594
595 <style>
596 #meandre-buttons button:hover:enabled {
597 background-color: #CCCC33;
598 color: #FFFFFF;
599 }
600 </style>
601
602
603 <div style="position: relative;">
604 <iframe id="workbenchFrame"
605 style="width: 100%; height: 400px;" >
606 If you see this, then your browser does not support the iframe element.
607 </iframe>
608
609 </div>
610
611 <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
612 <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
613
614 <gsf:script>
615 var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
616 var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
617
618 var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
619
620 var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
621 var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
622
623 selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
624
625 function loadSelectedWorkflow(elem) {
626 selectedMeandreWorkflowPos = elem.value;
627 selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
628
629 if (selectedMeandreWorkflowPos==1) {
630 $('#jsdynamic-turnstyle').show();
631 }
632 else {
633 $('#jsdynamic-turnstyle').hide();
634 }
635
636 console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");
637 selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
638
639 }
640 </gsf:script>
641
642
643
644
645 <div id="jsdynamic-turnstyle" style="display:none">
646
647 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
648 Dynamic Javascript Meandre Component
649 </div>
650
651 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
652
653 <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
654 <xsl:text disable-output-escaping="yes">
655
656
657var arrayBinding = new JavaImporter(java.lang.reflect.Array);
658
659var JSDynamicComponent = function() {
660 this.frameCount = 0;
661}
662
663JSDynamicComponent.prototype.executeCallBack = function(cc) {
664
665 with(arrayBinding) {
666
667 if ((this.frameCount % 1000)==0) {
668 print("JSDynamicComponent: " + this.frameCount + "\n");
669 }
670
671 var inputObject = cc.getDataComponentFromInput("input");
672 var rawInput1DArray = inputObject;
673
674 var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
675
676 for (var i=1; i&lt;rawOutput1DArray.length; i++) {
677 var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
678 Array.setDouble(rawOutput1DArray,i,diff);
679 }
680
681 cc.pushDataComponentToOutput("output", rawOutput1DArray);
682
683 this.frameCount++;
684 }
685
686}
687
688var jsDynamicComponent = new JSDynamicComponent();
689
690 </xsl:text>
691 </textarea>
692 </div> <!-- end of Dynamic JS turnstyle block -->
693 </div>
694
695 </div>
696
697 </div>
698
699 <script>
700 <xsl:text disable-output-escaping="yes">
701 $(function(){
702 transformToTurnstyleBlock("workflow");
703 transformToTurnstyleBlock("jsdynamic");
704 });
705 </xsl:text>
706 </script>
707 </xsl:template>
708
709
710 <!-- *** -->
711 <!-- * Structured audio player -->
712 <!-- *** -->
713
714 <xsl:template name="structuredAudioPlayerBlock">
715
716 <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
717
718 <div style="background-color: rgb(40%,40%,20%)">
719 <svg xmlns="http://www.w3.org/2000/svg"
720 xmlns:xlink="http://www.w3.org/1999/xlink"
721 version="1.1"
722 id="svgGroundTruthSegments"
723 width="100%" height="24"
724 onLoadXX="svgGTStructuredInit()">
725 </svg>
726 </div>
727
728 <div style="background-color: rgb(40%,40%,20%)">
729 <svg xmlns="http://www.w3.org/2000/svg"
730 xmlns:xlink="http://www.w3.org/1999/xlink"
731 version="1.1"
732 id="svgContentAnalysisSegments"
733 width="100%" height="24"
734 onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
735 </svg>
736 </div>
737 </xsl:template>
738
739 <xsl:template name="visualization-mode-block">
740
741 <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
742
743 <span class="vix-heading">Max Values:</span>
744 <div style="padding-left: 8px">
745 <style>
746 span.mv-fixed { display: inline-block; width: 30pt; }
747 </style>
748 <table width="100%">
749 <tr>
750 <td><span class="mv-fixed" id="freqSpectrumMax" >0.000</span>(Freq Spectrum) </td>
751 <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
752 <td><span class="mv-fixed" id="filterBankMax" >0.000</span>(Filter Bank) </td>
753 <td><span class="mv-fixed" id="chromaFeaturesMax" >0.000</span>(Chroma Features) </td>
754 </tr>
755 </table>
756 </div>
757 <hr/>
758
759 <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
760 <div style="float: left;">
761 <span class="vis-heading">Visualization:</span>
762<!--
763 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
764 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
765-->
766
767 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
768 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
769 </div>
770
771 <div style="float: left; padding-left: 140px;">
772 <span class="vis-heading">Colour Mapping:</span>
773 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
774 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
775 </div>
776 </form>
777
778 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
779
780<!--
781 <form style="padding-left: 8px;">
782 <span class="vis-heading">Colour Mapping:</span>
783 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
784 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
785 </form>
786 <hr/>
787-->
788
789 <form style="padding-left: 8px; padding-bottom: 0px;">
790 <span class="vis-heading">On Pause:</span>
791 <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
792 </form>
793 <hr/>
794
795 </div>
796
797 </xsl:template>
798
799 <!-- *** -->
800 <!-- * Settings form -->
801 <!-- *** -->
802
803 <xsl:template name="settings-form">
804 <xsl:param name="cgiargYScaleSimImg"/>
805
806 <xsl:variable name="httpCollection">
807 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
808 </xsl:variable>
809
810 <div id="settings-turnstyle" style="margin: 6px;">
811 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
812 Audio Content Search
813 </div>
814 <div class="documenttext" style="display: none;">
815
816
817 <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
818 <input type="hidden" name="a" value="q"/>
819 <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
820 <input type="hidden" name="rt" value="rd"/>
821
822 <input type="hidden" name="s" value="AudioQuery"/>
823 <input type="hidden" name="c" value="{$collName}"/>
824 <xsl:if test="not(paramList/param[@name='startPage'])">
825 <input type="hidden" name="startPage" value="1"/>
826 </xsl:if>
827 <xsl:choose>
828 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
829 <input type="hidden" name="s1.maxDocs">
830 <xsl:attribute name="value">
831 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
832 </xsl:attribute>
833 </input>
834 </xsl:when>
835 <xsl:otherwise>
836 <input type="hidden" name="s1.maxDocs" value="100"/>
837 </xsl:otherwise>
838 </xsl:choose>
839 <xsl:choose>
840 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
841 <input type="hidden" name="s1.hitsPerPage">
842 <xsl:attribute name="value">
843 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
844 </xsl:attribute>
845 </input>
846 </xsl:when>
847 <xsl:otherwise>
848 <input type="hidden" name="s1.hitsPerPage" value="20"/>
849 </xsl:otherwise>
850 </xsl:choose>
851
852 <input type="hidden" name="q">
853 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
854 </input>
855
856
857 <input type="hidden" name="s1.query">
858<!--
859 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
860-->
861 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
862 </input>
863
864 <input type="hidden" name="s1.offset" value="0" />
865 <input type="hidden" name="s1.length" value="200" />
866
867 <div style="font-style: italics;">Start new query @ offset
868 <span id="mysongCurrentPos">0 secs</span>,
869 with excerpt lasting
870
871 <input type="text" name="mysongWindowDuration" size="4" value="6" />
872 <!--
873 <span id="mysongWindowDuration" class="editable-offset"
874 style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
875 -->
876 secs:
877
878 <input type="submit" value="Search" onclick="preSubmit(this.form);" />
879 </div>
880
881
882 <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
883 <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
884 <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
885 <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
886 <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>
887 <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
888 </ul>
889
890 </form>
891
892 <hr/>
893
894<!--
895 <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
896 <div style="font-style: italics;">
897 Make the scale factor for the y-dimension of the self-similarity
898 image be
899 <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
900 size="3" /> then
901 <input type="button" name="ResizeImage" value="Resize Image"
902 onclick="javascript:rescaleImage()" />
903
904 </div>
905 </form>
906
907 <hr/>
908-->
909
910 <!-- **** currently not displayed -->
911
912 <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
913 <div style="font-style: italics;">
914
915 Show the song structure automatically computed by analyzing
916 the audio data using algorithm
917
918 <select id="caaMenu" name="caAlgorithm">
919 <option value="1">BV1</option>
920 <option value="2">BV2</option>
921 <option value="3">GP7</option>
922 <option value="4">MHRAG2</option>
923 <option value="5">MND1</option>
924 <option value="6">WB1</option>
925
926<!--
927 <option value="-1">or hide</option>
928-->
929
930 </select>:
931
932 <input type="button" name="Reload" value="Reload"
933 onclick="updateCAAlgorithm()" />
934
935 </div>
936 </form>
937
938 <script>
939 <xsl:text disable-output-escaping="yes">
940 if (hasStructuredAudio) {
941 var caaMenu = document.getElementById("caaMenu");
942 caaMenu.options[caAlgorithm-1].selected = 1;
943 }
944 </xsl:text>
945 </script>
946
947
948 </div>
949 </div>
950 <script>
951 <xsl:text disable-output-escaping="yes">
952 $(function(){
953 transformToTurnstyleBlock("settings");
954 });
955 </xsl:text>
956 </script>
957
958 </xsl:template>
959
960
961 <!-- *** -->
962 <!-- * Computed Data -->
963 <!-- *** -->
964
965
966 <xsl:template name="original-audio">
967 <xsl:param name="httpCollection"/>
968 <xsl:param name="assocFilePath"/>
969
970 <div style="margin: 6px;">
971
972 <div style="display: block;">
973
974 <div>
975 <audio style="width: 100%;" id="original-audio" controls="controls" >
976 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
977 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.mp3" />
978 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav" />
979 </audio>
980 </div>
981
982 </div>
983 </div>
984
985 </xsl:template>
986
987</xsl:stylesheet>
Note: See TracBrowser for help on using the repository browser.