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

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