source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl@ 30093

Last change on this file since 30093 was 30093, checked in by davidb, 9 years ago

Development work done in at JCDL

  • Property svn:mime-type set to text/plain
File size: 80.1 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
79 <gsf:script src="ext/js-dsp/dsp-custom.js"/>
80 <gsf:script src="ext/js-dsp/dsp.js"/>
81 <gsf:script src="ext/js-dsp/chroma-transform.js"/>
82 <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
83 <gsf:script src="ext/js-dsp/frequency-player.js"/>
84
85
86 <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
87 <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
88 <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
89 <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
90 <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
91 <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
92 <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
93
94 </xsl:template>
95
96 <xsl:template name="processingPopup">
97 <div>
98 <style type="text/css">
99 #processing {
100 width: 100%;
101 height: 100%;
102 position: absolute;
103 z-index: 10000;
104 left: 0px;
105 top: 0px;
106 background-color: rgba(255,255,255,0.75);
107 opacity: 1;
108 display: none;
109 }
110
111 #processingMessage {
112 position: absolute;
113 padding: 10px;
114 border-radius: 10px;
115 margin-left: 50%;
116 width: 380px;
117 height: 105px;
118 left: -250px; top: 200px;
119 background-color: rgba(255,255,255,1);
120 box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
121 }
122
123 #processingMessage p {
124 font-size: 18px;
125 text-align: center;
126 font-family:
127 sans-serif;
128 font-weight: bold;
129 color: #666;
130 }
131 </style>
132
133 <div id="processing">
134 <div id="processingMessage">
135 <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
136 Heading
137 </h2>
138 <p id="processingText">text</p>
139 </div>
140 </div>
141 </div>
142
143 </xsl:template>
144
145 <!-- *** -->
146 <!-- * Discovery -->
147 <!-- *** -->
148
149 <xsl:template name="discovery-block">
150
151 <div id="fingerprint-turnstyle">
152
153 <div style="background-image: none; background-color: #2E52A4;">
154 Discovery: <xsl:call-template name="choose-title"/>
155 </div>
156
157 <div class="documenttext" style="display: none;">
158 <xsl:call-template name="fingerprintMetadataBlock" />
159 </div>
160
161 </div>
162
163 <script>
164 <xsl:text disable-output-escaping="yes">
165 $(function(){
166 transformToTurnstyleBlock("fingerprint");
167 });
168 </xsl:text>
169 </script>
170
171 </xsl:template>
172
173
174
175 <xsl:template name="fingerprintMetadataBlock">
176
177 <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
178 <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
179
180
181 <xsl:variable name="musicbrainzsongid">
182 <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
183 </xsl:variable>
184
185 <xsl:variable name="musicbrainzalbumid">
186 <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
187 </xsl:variable>
188
189 <xsl:variable name="musicbrainzartistid">
190 <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
191 </xsl:variable>
192
193 <xsl:variable name="lastfmtrackurl">
194 <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
195 </xsl:variable>
196
197 <xsl:variable name="echonestsongid">
198 <gsf:metadata name="dc.Identifier.echonestsongid"/>
199 </xsl:variable>
200
201 <center>
202 <table class="metadata-stripes" style="min-width: 400px;">
203 <tbody>
204 <tr>
205 <td>
206 Title
207 </td>
208 <td>
209 <gsf:metadata name="dc.Title"/>
210 </td>
211 </tr>
212
213
214 <gsf:switch>
215 <gsf:metadata name='dc.Title.albumtitle'/>
216 <gsf:when test='exists'>
217 <tr>
218 <td>Album Title</td>
219 <td><gsf:metadata name="dc.Title.albumtitle"/></td>
220 </tr>
221 </gsf:when>
222 </gsf:switch>
223
224 <tr>
225 <td>Artist</td>
226 <td><gsf:metadata name="dc.Creator"/></td>
227 </tr>
228
229 <gsf:switch>
230 <gsf:metadata name='dc.Coverage'/>
231 <gsf:when test='exists'>
232 <tr>
233 <td>Released</td>
234 <td><gsf:metadata name="dc.Coverage"/></td>
235 </tr>
236 </gsf:when>
237 </gsf:switch>
238
239
240<!--
241 <tr valign="top">
242 <td>Artist Summary</td>
243 <td>
244 <i>
245 <gsf:script>
246 var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"];
247
248 if (summary) {
249 document.write(summary.replace("\n","&lt;br /&gt;"));
250 }
251
252 </gsf:script>
253 </i>
254 </td>
255 </tr>
256-->
257
258
259<!--
260dc.Identifier.echonestsongid
261dc.Identifier.echonestartistid
262
263dc.Identifier.lastfmtrackurl
264dc.Identifier.lastfmalbumurl
265dc.Identifier.lastfmartisturl
266
267//dc.Identifier
268dc.Identifier.musicbrainzalbumid
269dc.Identifier.musicbrainzartistid
270dc.Identifier.musicbrainzsongid
271dc.Identifier.playmeartistid
272
273-->
274
275 <tr>
276 <td colspan="2">
277
278 <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
279 <xsl:if test="position() &lt;= 6">
280 <a target="_blank">
281 <xsl:attribute name='href'>
282 <xsl:value-of disable-output-escaping="yes" select="."/>
283 </xsl:attribute>
284
285 <img width="150">
286 <xsl:attribute name='src'>
287 <xsl:value-of disable-output-escaping="yes" select="."/>
288 </xsl:attribute>
289 </img>
290 </a>
291 </xsl:if>
292 </xsl:for-each>
293 </td>
294 </tr>
295
296 <xsl:if test="$interface_name='dlfm'">
297 <tr>
298 <td>Linked Data</td>
299 <td>
300 <!--
301 <gsf:metadata name="dc.Identifier"/><br />
302 -->
303
304 <table style="width: 100%;">
305 <tr>
306 <td style="width: 200px;">
307 MusicBrainz song id:
308 </td>
309 <td>
310 <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
311 <xsl:copy-of select="$musicbrainzsongid"/>
312 </a>
313 </td>
314 </tr>
315
316 <tr>
317 <td>
318 MusicBrainz album id:
319 </td>
320 <td>
321 <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
322 <xsl:copy-of select="$musicbrainzalbumid"/>
323 </a>
324 </td>
325 </tr>
326
327 <tr>
328 <td>
329 MusicBrainz artist id:
330 </td>
331 <td>
332 <a href="https://musicbrainz.org/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
333 <xsl:copy-of select="$musicbrainzartistid"/>
334 </a>
335 </td>
336 </tr>
337<!--
338 <tr>
339 <td>
340 EchoNest song id:
341 </td>
342 <td>
343 <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&amp;format=xml&amp;id={$echonestsongid}" target="#echonestsongid" class="external">
344
345
346
347 <xsl:copy-of select="$echonestsongid"/>
348 </a>
349 </td>
350 </tr>
351-->
352
353 <tr>
354 <td colspan="2">
355 <i>
356 <a href="{$lastfmtrackurl}" target="#lastfm" class="external">
357 <xsl:copy-of select="$lastfmtrackurl"/>
358 </a>
359 </i>
360 </td>
361 </tr>
362 </table>
363
364 </td>
365 </tr>
366 </xsl:if>
367
368 </tbody>
369 </table>
370 </center>
371 </xsl:template>
372
373
374
375 <!-- *** -->
376 <!-- * Audio Player -->
377 <!-- *** -->
378
379 <xsl:template name="js-mad-header">
380
381 <gsf:script src="ext/js-mad/script/mad.js"/>
382 <gsf:script src="ext/js-mad/script/rq_table.js"/>
383 <gsf:script src="ext/js-mad/script/imdct_s.js"/>
384 <gsf:script src="ext/js-mad/script/huffman.js"/>
385 <gsf:script src="ext/js-mad/script/bit.js"/>
386 <gsf:script src="ext/js-mad/script/stream.js"/>
387 <gsf:script src="ext/js-mad/script/layer3.js"/>
388 <gsf:script src="ext/js-mad/script/frame.js"/>
389 <gsf:script src="ext/js-mad/script/synth.js"/>
390
391 <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
392 <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
393 <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
394 <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
395 <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
396
397 <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
398 <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
399 <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
400 <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
401 <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
402
403 <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
404 <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
405 <gsf:script src="ext/js-mad/script/mp3file.js"/>
406
407<!--
408 <gsf:script src="ext/js-mad/script/player.js"/>
409-->
410
411 <gsf:script src="ext/js-mad/script/sink.min.js"/>
412
413<!--
414 <gsf:script src="ext/js-mad/script/require.js"/>
415-->
416<!--
417 <gsf:script src="ext/js-mad/script/sink-light.js"/>
418-->
419
420 <gsf:script src="ext/js-mad/script/browser-detect.js"/>
421 <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
422
423 </xsl:template>
424
425
426
427 <xsl:template name="audio-icon-cache">
428 <div style="display:none;">
429 <!-- pre-load various play/pause images to help with speed of interface update -->
430 <img src="ext/diy-audio-player/images/play32Highlight.png" />
431 <img src="ext/diy-audio-player/images/pause32.png" />
432 <img src="ext/diy-audio-player/images/pause32Highlight.png" />
433 <img src="ext/diy-audio-player/images/play20Highlight.png" />
434 <img src="ext/diy-audio-player/images/stop32.png" />
435 <img src="ext/diy-audio-player/images/stop32Highlight.png" />
436 <img src="ext/diy-audio-player/images/search20Highlight.png" />
437 </div>
438 </xsl:template>
439
440
441 <!-- *** -->
442 <!-- * Workflow control -->
443 <!-- *** -->
444
445 <xsl:template name="workflow-block">
446 <xsl:variable name="httpCollection">
447 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
448 </xsl:variable>
449
450 <div id="workflow-turnstyle">
451
452 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
453 Workflow
454 </div>
455
456 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
457
458<!--
459 <form style="padding-left: 8px;">
460 <span class="vis-heading">Input Selection:</span>
461 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
462 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
463 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
464 <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
465 </form>
466 <hr/>
467-->
468
469 <form style="padding-left: 8px; height: 48px;">
470 <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
471
472 <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
473 <option value="0" selected="selected">Chromagram</option>
474 <option value="1" >Dynamic Javascript Mixer</option>
475 </select>
476
477 <div style="float: right;" id="meandre-buttons">
478
479 <button type="button" id="meandre-run-button"
480 onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
481 <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
482 width="32"
483 height="32"
484 XXonmouseover="playHighlightOn(this)"
485 XXonmouseout="playHighlightOff(this)"
486 XXonclick="runThisMeandreFlow(this)"
487 style="vertical-align: middle;"/>
488 Run
489 </button>
490
491 <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
492 <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
493 width="32"
494 height="32"
495 XXonmouseover="stopHighlightOn(this)"
496 XXonmouseout="stopHighlightOff(this)"
497 XXonclick="stopThisMeandreFlow(this)"
498 style="vertical-align: middle;"/>
499 Stop
500 </button>
501
502<!--
503 <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
504 <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
505-->
506
507 </div>
508
509 </form>
510
511 <style>
512 #meandre-buttons button:hover:enabled {
513 background-color: #CCCC33;
514 color: #FFFFFF;
515 }
516 </style>
517
518
519 <div style="position: relative;">
520 <iframe id="workbenchFrame"
521 style="width: 100%; height: 400px;" >
522 If you see this, then your browser does not support the iframe element.
523 </iframe>
524
525 </div>
526
527 <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
528 <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
529
530 <gsf:script>
531 var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
532 var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
533
534 var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
535
536 var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
537 var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
538
539 selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
540
541 function loadSelectedWorkflow(elem) {
542 selectedMeandreWorkflowPos = elem.value;
543 selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
544
545 if (selectedMeandreWorkflowPos==1) {
546 $('#jsdynamic-turnstyle').show();
547 }
548 else {
549 $('#jsdynamic-turnstyle').hide();
550 }
551
552 console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");
553 selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
554
555 }
556 </gsf:script>
557
558
559
560
561 <div id="jsdynamic-turnstyle" style="display:none">
562
563 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
564 Dynamic Javascript Meandre Component
565 </div>
566
567 <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
568
569 <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
570 <xsl:text disable-output-escaping="yes">
571
572
573var arrayBinding = new JavaImporter(java.lang.reflect.Array);
574
575var JSDynamicComponent = function() {
576 this.frameCount = 0;
577}
578
579JSDynamicComponent.prototype.executeCallBack = function(cc) {
580
581 with(arrayBinding) {
582
583 if ((this.frameCount % 1000)==0) {
584 print("JSDynamicComponent: " + this.frameCount + "\n");
585 }
586
587 var inputObject = cc.getDataComponentFromInput("input");
588 var rawInput1DArray = inputObject;
589
590 var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
591
592 for (var i=1; i&lt;rawOutput1DArray.length; i++) {
593 var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
594 Array.setDouble(rawOutput1DArray,i,diff);
595 }
596
597 cc.pushDataComponentToOutput("output", rawOutput1DArray);
598
599 this.frameCount++;
600 }
601
602}
603
604var jsDynamicComponent = new JSDynamicComponent();
605
606 </xsl:text>
607 </textarea>
608 </div> <!-- end of Dynamic JS turnstyle block -->
609 </div>
610
611 </div>
612
613 </div>
614
615 <script>
616 <xsl:text disable-output-escaping="yes">
617 $(function(){
618 transformToTurnstyleBlock("workflow");
619 transformToTurnstyleBlock("jsdynamic");
620 });
621 </xsl:text>
622 </script>
623 </xsl:template>
624
625
626 <!-- *** -->
627 <!-- * Structured audio player -->
628 <!-- *** -->
629
630 <xsl:template name="structuredAudioPlayerBlock">
631
632 <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
633
634 <div style="background-color: rgb(40%,40%,20%)">
635 <svg xmlns="http://www.w3.org/2000/svg"
636 xmlns:xlink="http://www.w3.org/1999/xlink"
637 version="1.1"
638 id="svgGroundTruthSegments"
639 width="100%" height="24"
640 onLoadXX="svgGTStructuredInit()">
641 </svg>
642 </div>
643
644 <div style="background-color: rgb(40%,40%,20%)">
645 <svg xmlns="http://www.w3.org/2000/svg"
646 xmlns:xlink="http://www.w3.org/1999/xlink"
647 version="1.1"
648 id="svgContentAnalysisSegments"
649 width="100%" height="24"
650 onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
651 </svg>
652 </div>
653 </xsl:template>
654
655 <xsl:template name="visualization-mode-block">
656
657 <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
658
659 <span class="vis-heading">Max Values:</span>
660 <div style="padding-left: 8px">
661 <style>
662 span.mv-fixed { display: inline-block; width: 30pt; }
663 </style>
664 <table width="100%">
665 <tr>
666 <td><span class="mv-fixed" id="freqSpectrumMax" >0.000</span>(Freq Spectrum) </td>
667 <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
668 <td><span class="mv-fixed" id="filterBankMax" >0.000</span>(Filter Bank) </td>
669 <td><span class="mv-fixed" id="chromaFeaturesMax" >0.000</span>(Chroma Features) </td>
670 </tr>
671 </table>
672 </div>
673 <hr/>
674
675 <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
676 <div style="float: left;">
677 <span class="vis-heading">Visualization:</span>
678<!--
679 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
680 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
681-->
682
683 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
684 <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
685 </div>
686
687 <div style="float: left; padding-left: 140px;">
688 <span class="vis-heading">Colour Mapping:</span>
689 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
690 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
691 </div>
692 </form>
693
694 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
695
696<!--
697 <form style="padding-left: 8px;">
698 <span class="vis-heading">Colour Mapping:</span>
699 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
700 <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
701 </form>
702 <hr/>
703-->
704
705
706
707 <form style="padding-left: 8px; padding-bottom: 0px;">
708 <div style="float: left;">
709 <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
710 </div>
711 <div style="float: left; padding-left: 140px;">
712 <span class="vis-heading">Accelerated Processing:</span>
713 <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>&gt; realtime
714 <span id="accProcStatus"></span>
715 </div>
716
717 </form>
718 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
719
720 <hr/>
721
722 </div>
723
724 <xsl:call-template name="graphic-equalizers"/>
725 </xsl:template>
726
727
728 <xsl:template name="graphic-equalizers">
729
730
731 <gsf:style >
732 #grapheqControlL {
733 display: none;
734 }
735
736 #grapheqControlR {
737 display: none;
738 }
739
740 .control {
741 padding: 5px;
742 border: 1px solid #CCC;
743 background-color: #EEE;
744 float: left;
745 margin-right: 5px;
746
747 }
748
749 .inner-control {
750 background-color: #DDD;
751 }
752
753 .control div {
754 max-width: 400px;
755 }
756
757 .control table td {
758 padding: 5px;
759 width: 25px;
760 color: #999;
761 font-size: 12px;
762 }
763 .control h3 {
764 margin: 0;
765 padding:0;
766 font-size: 12px;
767 margin-bottom: 10px;
768 }
769 .control #debug {
770 border: 1px inset #ccc;
771 background-color: #FFF;
772 font-size: 12px;
773 width: 300px;
774 padding: 10px;
775 }
776 .slider {
777 margin-bottom: 16px;
778 width: 8px;
779 }
780/*
781 .geq-bar {
782 width: 34px;
783 }
784*/
785
786/*
787 .ui-button {
788 font-size: xx-small;
789 }
790*/
791 .ui-slider .ui-slider-handle {
792 width: 8px;
793 margin-left: 3px;
794 }
795 </gsf:style>
796
797
798
799 <gsf:script>
800 <![CDATA[
801
802 var grapheqL;
803 var grapheqR;
804
805 $(function() {
806 var geqSampleRate = 44100;
807 console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
808
809 grapheqL = new GraphicalEq(geqSampleRate);
810 grapheqR = new GraphicalEq(geqSampleRate);
811 grapheqL.recalculateFilters();
812 grapheqR.recalculateFilters();
813
814 var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
815 slide: function() { changeMinFreq(grapheqL,"L")} };
816 var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
817 slide: function() { changeMinFreq(grapheqR,"R")} };
818
819 var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
820 slide: function() { changeMaxFreq(grapheqL,"L") } };
821 var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
822 slide: function() { changeMaxFreq(grapheqR,"R") } };
823
824 var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
825 slide: function() { changeBandsPerOctave(grapheqL,"L")} };
826 var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
827 slide: function() { changeBandsPerOctave(grapheqR,"R")} };
828
829 $('#minFreqL').slider(minPropL);
830 $('#maxFreqL').slider(maxPropL);
831 $('#minFreqR').slider(minPropR);
832 $('#maxFreqR').slider(maxPropR);
833
834 $('#bandsPerOctaveL').slider(bpoPropL);
835 $('#bandsPerOctaveR').slider(bpoPropR);
836
837 //$('#input').attr('volume', 0);
838
839 createSliders(grapheqL,"L");
840 createSliders(grapheqR,"R");
841 });
842
843
844
845 var changeMinFreq = function(grapheq,side) {
846 grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
847 //plotCoeffs();
848 createSliders(grapheq,side);
849 }
850
851 var changeMaxFreq = function(grapheq,side) {
852 grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
853 //plotCoeffs();
854 createSliders(grapheq,side);
855 }
856
857 var changeBandsPerOctave = function(grapheq,side) {
858 grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
859 //plotCoeffs();
860 createSliders(grapheq,side);
861 }
862
863 function positionGrapheqControl(grapheq,side) {
864
865 var numSliders = grapheq.filters.length;
866 if (numSliders<8) {
867 numSliders=8; // Window can't go any smaller than this, due to length of text in title-bar
868 }
869
870 var offset = (35 * numSliders) + 12;
871 if (side == "L") {
872 offset += 30; // fudge factor
873 $('#grapheqControlL').css("left","-" + offset + "px");
874 }
875 else if (side == "R") {
876 offset += 35; // fudge factor, used to be 5
877 $('#grapheqControlR').css("right","-" + offset + "px");
878 }
879 else {
880 console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
881 }
882 }
883
884 var createSliders = function(grapheq,side) {
885 $('#bandSliders'+side).empty();
886 positionGrapheqControl(grapheq,side);
887 for (var i=0; i<grapheq.filters.length; i++) {
888
889 var freq = grapheq.filters[i].f0;
890 var units = "Hz";
891 if (freq>=1000000) {
892 freq = (freq/1000000).toFixed(2);
893 units = " MHz";
894 }
895 else if (freq>=1000) {
896 freq = (freq/1000).toFixed(2);
897 units = " KHz";
898 }
899 else if (freq>=100) {
900 freq = freq.toFixed(0);
901 }
902 else {
903 freq = freq.toFixed(0);
904 freq = "&nbsp;" + freq;
905 }
906
907 $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
908 +freq + ' ' + units + '</td>');
909
910 $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0,
911 slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
912 }
913 }
914
915 var changeBandGain = function(event, ui, grapheq) {
916 grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
917 //plotCoeffs();
918 }
919/*
920 var plotCoeffs = function() {
921 freqz = new Float32Array(grapheq.freqzs[0].length);
922
923 for (var i=0; i<freqz.length; i++) {
924 for (var j=0; j<grapheq.freqzs.length; j++) {
925 freqz[i] += grapheq.freqzs[j][i];
926 }
927 }
928 }
929*/
930
931/*
932 function audioWritten(event) {
933 signal = event.mozFrameBuffer;
934
935 // Apply the filter to the signal
936 signal = grapheq.processStereo(signal);
937
938 output.mozWriteAudio([]); // flush
939 output.mozWriteAudio(signal);
940 writeCount++;
941 }
942*/
943
944 //plotCoeffs();
945
946
947 ]]>
948 </gsf:script>
949
950
951 <gsf:script>
952 function minimizeTurnstyle(suffix) {
953 $('#turnstyleMaximizeButton'+suffix).show();
954 $('#turnstyleMinimizeButton'+suffix).hide();
955 $('#turnstyleContentsArea'+suffix).slideUp('fast');
956 }
957
958 function maximizeTurnstyle(suffix) {
959 $('#turnstyleMaximizeButton'+suffix).hide();
960 $('#turnstyleMinimizeButton'+suffix).show();
961 $('#turnstyleContentsArea'+suffix).slideDown('fast');
962 }
963
964 </gsf:script>
965
966<!--
967 <div class="control" style="float: left; height: 200px">
968-->
969
970
971 <div id="grapheqControlL" class="control" style="position: absolute; top: 280px; left: -132px; heightXX: 200px">
972
973 <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
974 <div style="float: right;">
975 <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
976 <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
977 <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
978 </a>
979 <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
980 <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
981 </a>
982 </div>
983
984 <hr style="clear: both;"/>
985
986 <div id="turnstyleContentsAreaL" style="display: none; float: right;">
987
988 <table class="inner-control" style="margin-bottom: 5px;">
989 <tr>
990 <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
991 <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
992 <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
993 </tr>
994 </table>
995 </div>
996
997 <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
998
999 <table class="inner-control" style="float: right;">
1000 <tr id="bandSlidersL">
1001 </tr>
1002 </table>
1003
1004
1005
1006 </div>
1007
1008<!--
1009 <div class="control" style="float: right; height: 200px">
1010-->
1011
1012 <div id="grapheqControlR" class="control" style="position: absolute; top: 280px; right: -330px; heightXX: 200px">
1013 <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
1014
1015 <div style="float: right;">
1016 <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
1017 <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
1018 <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
1019 </a>
1020 <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
1021 <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
1022 </a>
1023 </div>
1024
1025 <hr style="clear: both;"/>
1026
1027 <div id="turnstyleContentsAreaR" style="display: none; float: left;">
1028 <table class="inner-control" style="margin-bottom: 5px;">
1029 <tr>
1030 <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
1031 <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
1032 <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
1033 </tr>
1034 </table>
1035 </div>
1036
1037 <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
1038
1039 <table class="inner-control">
1040 <tr id="bandSlidersR">
1041 </tr>
1042 </table>
1043
1044 </div>
1045
1046 </xsl:template>
1047
1048
1049 <!-- *** -->
1050 <!-- * Settings form -->
1051 <!-- *** -->
1052
1053 <xsl:template name="settings-form">
1054 <xsl:param name="cgiargYScaleSimImg"/>
1055
1056 <xsl:variable name="httpCollection">
1057 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1058 </xsl:variable>
1059
1060<!--
1061 <gsf:variable-array name="overlayNote2">
1062 <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
1063 </gsf:variable-array>
1064
1065 <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
1066 New Annotation 2
1067 </span>
1068
1069 <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
1070 </div>
1071
1072 <gsf:script>
1073 $(window).load(function(){
1074 var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
1075 $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
1076 });
1077
1078 </gsf:script>
1079-->
1080
1081 <div style="display: none;"><!-- wrapped div to force display to none -->
1082
1083 <div id="settings-turnstyle" style="margin: 6px;">
1084 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1085 Audio Content Search
1086 </div>
1087 <div class="documenttext" style="display: none;">
1088
1089
1090 <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
1091 <input type="hidden" name="a" value="q"/>
1092 <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
1093 <input type="hidden" name="rt" value="rd"/>
1094
1095 <input type="hidden" name="s" value="AudioQuery"/>
1096 <input type="hidden" name="c" value="{$collName}"/>
1097 <xsl:if test="not(paramList/param[@name='startPage'])">
1098 <input type="hidden" name="startPage" value="1"/>
1099 </xsl:if>
1100 <xsl:choose>
1101 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
1102 <input type="hidden" name="s1.maxDocs">
1103 <xsl:attribute name="value">
1104 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
1105 </xsl:attribute>
1106 </input>
1107 </xsl:when>
1108 <xsl:otherwise>
1109 <input type="hidden" name="s1.maxDocs" value="100"/>
1110 </xsl:otherwise>
1111 </xsl:choose>
1112 <xsl:choose>
1113 <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
1114 <input type="hidden" name="s1.hitsPerPage">
1115 <xsl:attribute name="value">
1116 <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
1117 </xsl:attribute>
1118 </input>
1119 </xsl:when>
1120 <xsl:otherwise>
1121 <input type="hidden" name="s1.hitsPerPage" value="20"/>
1122 </xsl:otherwise>
1123 </xsl:choose>
1124
1125 <input type="hidden" name="q">
1126 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1127 </input>
1128
1129
1130 <input type="hidden" name="s1.query">
1131<!--
1132 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1133-->
1134 <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
1135 </input>
1136
1137 <input type="hidden" name="s1.offset" value="0" />
1138 <input type="hidden" name="s1.length" value="200" />
1139
1140 <div style="font-style: italics;">Start new query @ offset
1141 <span id="mysongCurrentPos">0 secs</span>,
1142 with excerpt lasting
1143
1144 <input type="text" name="mysongWindowDuration" size="4" value="6" />
1145 <!--
1146 <span id="mysongWindowDuration" class="editable-offset"
1147 style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
1148 -->
1149 secs:
1150
1151 <input type="submit" value="Search" onclick="preSubmit(this.form);" />
1152 </div>
1153
1154
1155 <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
1156 <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
1157 <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
1158 <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
1159 <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>
1160 <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
1161 </ul>
1162
1163 </form>
1164
1165 <hr/>
1166
1167<!--
1168 <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
1169 <div style="font-style: italics;">
1170 Make the scale factor for the y-dimension of the self-similarity
1171 image be
1172 <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
1173 size="3" /> then
1174 <input type="button" name="ResizeImage" value="Resize Image"
1175 onclick="javascript:rescaleImage()" />
1176
1177 </div>
1178 </form>
1179
1180 <hr/>
1181-->
1182
1183 <!-- **** currently not displayed -->
1184
1185 <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
1186 <div style="font-style: italics;">
1187
1188 Show the song structure automatically computed by analyzing
1189 the audio data using algorithm
1190
1191 <select id="caaMenu" name="caAlgorithm">
1192 <option value="1">BV1</option>
1193 <option value="2">BV2</option>
1194 <option value="3">GP7</option>
1195 <option value="4">MHRAG2</option>
1196 <option value="5">MND1</option>
1197 <option value="6">WB1</option>
1198
1199<!--
1200 <option value="-1">or hide</option>
1201-->
1202
1203 </select>:
1204
1205 <input type="button" name="Reload" value="Reload"
1206 onclick="updateCAAlgorithm()" />
1207
1208 </div>
1209 </form>
1210
1211 <script>
1212 <xsl:text disable-output-escaping="yes">
1213 if (hasStructuredAudio) {
1214 var caaMenu = document.getElementById("caaMenu");
1215 caaMenu.options[caAlgorithm-1].selected = 1;
1216 }
1217 </xsl:text>
1218 </script>
1219
1220
1221 </div>
1222 </div>
1223 <script>
1224 <xsl:text disable-output-escaping="yes">
1225 $(function(){
1226 transformToTurnstyleBlock("settings");
1227 });
1228 </xsl:text>
1229 </script>
1230
1231 </div><!-- wrapped div to force display to none -->
1232
1233 </xsl:template>
1234
1235
1236 <!-- *** -->
1237 <!-- * Computed Data -->
1238 <!-- *** -->
1239
1240
1241 <xsl:template name="computed-data">
1242 <xsl:param name="httpCollection"/>
1243 <xsl:param name="assocFilePath"/>
1244
1245 <div id="computed-turnstyle" style="margin: 6px;">
1246 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1247 Computed Data
1248 </div>
1249
1250 <div class="documenttext" style="display: none;">
1251 <table class="metadata-stripes" style="width: 100%">
1252 <tbody>
1253 <tr>
1254 <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
1255 </tr>
1256
1257 <tr>
1258 <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
1259 </tr>
1260
1261 </tbody>
1262 </table>
1263 </div>
1264 </div>
1265
1266 <gsf:script>
1267 $(function(){
1268 transformToTurnstyleBlock("computed");
1269 });
1270 </gsf:script>
1271
1272 </xsl:template>
1273
1274
1275
1276 <xsl:template name="original-audio">
1277 <xsl:param name="httpCollection"/>
1278 <xsl:param name="assocFilePath"/>
1279 <xsl:param name="Audio"/>
1280 <xsl:param name="streamableaudio"/>
1281
1282 <div id="original-turnstyle" style="margin: 6px;">
1283 <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1284 The Original Audio
1285 </div>
1286
1287 <div style="display: none;">
1288
1289 <div>
1290 <audio style="width: 100%;" id="original-audio" controls="controls" >
1291<!--
1292 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1293-->
1294 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
1295 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
1296 </audio>
1297 </div>
1298
1299 </div>
1300 </div>
1301
1302 <gsf:script>
1303 $(function(){
1304 transformToTurnstyleBlock("original");
1305 });
1306 </gsf:script>
1307
1308
1309
1310 </xsl:template>
1311
1312
1313 <xsl:template name="documentContent">
1314<!--
1315<xsl:call-template name="init-document-xsl-vars"/>
1316-->
1317<!--
1318declare $httpCollection = $httpPath (for better consistency with other places in Greenstone XSL files)
1319-->
1320
1321 <xsl:variable name="httpCollection">
1322 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1323 </xsl:variable>
1324 <xsl:variable name="assocFilePath">
1325 <gsf:metadata name="assocfilepath" select="root"/>
1326 </xsl:variable>
1327 <xsl:variable name="Source">
1328 <gsf:metadata name="Source" select="root"/>
1329 </xsl:variable>
1330 <xsl:variable name="Audio">
1331 <gsf:switch>
1332 <gsf:metadata name="Audio" select="root"/>
1333 <gsf:when test="exists">
1334 <gsf:metadata name="Audio" select="root"/>
1335 </gsf:when>
1336 <gsf:otherwise>doc.ogg</gsf:otherwise>
1337 </gsf:switch>
1338 </xsl:variable>
1339 <xsl:variable name="streamableaudio">
1340 <gsf:switch>
1341 <gsf:metadata name="streamableaudio" select="root"/>
1342 <gsf:when test="exists">
1343 <gsf:metadata name="streamableaudio" select="root"/>
1344 </gsf:when>
1345 <gsf:otherwise>doc.mp3</gsf:otherwise>
1346 </gsf:switch>
1347 </xsl:variable>
1348
1349 <xsl:variable name="streamablevideo">
1350 <gsf:metadata name="SourceFile"/>
1351 </xsl:variable>
1352
1353 <div class="documenttext" id="gs-document">
1354
1355<div>
1356
1357
1358 <div id='media-player' style="width: 96%">
1359
1360 <xsl:if test="$interface_name='dlfm'">
1361 <style>
1362 .openclose a:visited {
1363 color: #ffffff;
1364 }
1365 .openclose a:link {
1366 color: #ffffff;
1367 }
1368 .openclose a:hover {
1369 color: #000000;
1370 }
1371
1372 </style>
1373 </xsl:if>
1374
1375 <div class="about-bar">
1376 <div id="about-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
1377
1378 <xsl:choose>
1379 <xsl:when test="$interface_name='dlfm'">
1380 Linked Data: <xsl:call-template name="choose-title"/>
1381 </xsl:when>
1382 <xsl:otherwise>
1383 About: <xsl:call-template name="choose-title"/>
1384 </xsl:otherwise>
1385 </xsl:choose>
1386 </div>
1387
1388 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1389
1390 <div id="about-area" class="documenttext"
1391 style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
1392 <xsl:call-template name="fingerprintMetadataBlock" />
1393 </div>
1394 </div>
1395
1396 <div class="video-player-bar">
1397 <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
1398 Video Display
1399 </div>
1400
1401 <div id="video-area" class="documenttext"
1402 style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
1403 <center>
1404
1405
1406 <style>
1407 #video_box {position:relative; z-index: 1;}
1408 #overlay {position: absolute; t: 0; left: 0; z-index: 2;}
1409 #video_container {z-index: 1;}
1410
1411 #XXXvideo_container {position:absolute;top: 0px;left: 0px;}
1412 </style>
1413
1414
1415 <div id="video_box">
1416 <div id="overlay"><xsl:comment>filler</xsl:comment></div>
1417 <div id="video_container">
1418
1419 <video id="video" width="60%" controls="false">
1420 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
1421 <track id="bubbles" label="Metadata" kind="metadata"
1422 srclang="en" src="{$httpCollection}/tracks/land-down-under-metadata-en.vtt" default="default" />
1423 Your browser does not support the video tag.
1424 </video>
1425 <gsf:div id="trackBank"/>
1426
1427 </div>
1428 </div>
1429 </center>
1430 </div>
1431 </div>
1432
1433 <div id='media-controls'>
1434 <div>
1435 <input id="progress-bar" type="range"
1436 min='0' max='100' step='0.01' value='0'
1437 class="ui-state-default ui-corner-all"
1438 style="width: 98%"/> <!-- used to be 100% -->
1439
1440 </div>
1441 <div style="width: 100%;">
1442 <div style="float:left; padding: 8px; ">
1443 <button id='replay-button' class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>
1444 <button id='play-pause-button' class='buttonx2 play' title='play/pause (or press space-bar on keyboard)' onclick='togglePlayPause();'>Play</button>
1445 <button id='stop-button' class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
1446 </div>
1447 <div style="float:right; padding: 8px; ">
1448 <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white">
1449 <span id="mediaPlayerCurrentTime">0:00.0</span>/
1450 <span id="mediaPlayerTotalTime">0:00.0</span>
1451 </div>
1452 <button id="eq-button" class="button" title="Show/Hide graphics equalilzer" onclick="return toggleGraphicEQ()">EQ</button>
1453 <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
1454 <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
1455 <button id='mute-button' class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>
1456 </div>
1457 </div>
1458 </div>
1459
1460
1461 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1462
1463 <xsl:call-template name="graphic-equalizers"/>
1464
1465 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1466
1467 <div class="playlist-bar">
1468 <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1469 Layer Controls: Create, Edit, View
1470 </div>
1471
1472 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1473
1474 <div id="playlist-area" class="documenttext"
1475 style="display: none; position: absolute: left: 0px; top: 0px;">
1476<!--
1477 <div id='media-play-list'>
1478 <h2>Play list</h2>
1479 <ul id='play-list'>
1480 <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
1481 <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
1482 <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
1483 </ul>
1484 </div>
1485-->
1486
1487 <div id="save-recording-popup" title="Save Recording">
1488 <p>Do you want to name and save this recording?</p>
1489
1490 <form>
1491 <fieldset>
1492 <label for="name">Name</label>
1493 <input type="text"
1494 name="save-recording-name" id="save-recording-name" value="My Recording"
1495 class="text ui-widget-content ui-corner-all"/>
1496 </fieldset>
1497
1498 <!-- Allow form submission with keyboard without duplicating the dialog button -->
1499 <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
1500
1501 </form>
1502 </div>
1503
1504 <div id="delete-recording-popup" title="Delete Tracks">
1505 <p>Are you sure you want to delete the selected tracks?</p>
1506 </div>
1507
1508
1509 <div id="edit-recording-popup" title="Edit Tracks">
1510 <style>
1511 #trackEditor {
1512 position: absolute;
1513 top: 0; right: 0; bottom: 0; left: 0;
1514 }
1515 </style>
1516 <div id="trackEditor"><xsl:comment>Track Editor Area</xsl:comment></div>
1517 </div>
1518
1519
1520
1521 <div id="create-info-popup" title="Create Overlay">
1522 <p>Do you want create a new named overlay?</p>
1523
1524 <form>
1525 <fieldset>
1526 <label for="name">Name</label>
1527 <input type="text"
1528 name="save-info-name" id="create-info-name" value="My Overlay"
1529 class="text ui-widget-content ui-corner-all"/>
1530 </fieldset>
1531
1532 <!-- Allow form submission with keyboard without duplicating the dialog button -->
1533 <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
1534
1535 </form>
1536 </div>
1537
1538 <div id="delete-info-popup" title="Delete Overlay">
1539 <p>Are you sure you want to delete the selected overlays?</p>
1540 </div>
1541
1542 <div id="edit-info-popup" title="Edit Overlays">
1543 <style>
1544 #infoEditor {
1545 position: absolute;
1546 top: 0; right: 0; bottom: 0; left: 0;
1547 }
1548 </style>
1549 <div id="infoEditor"><xsl:comment>Overlay Editor Area</xsl:comment></div>
1550 </div>
1551
1552
1553 <div style="color: white;">
1554
1555 <form id="popForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
1556 <fieldset>
1557 <legend id="mpm-legend">Popup Layers</legend>
1558 <div id="popList"><xsl:comment>pop (popup overlay) list</xsl:comment></div>
1559
1560
1561<!--
1562 <input type="checkbox" name="PopupTrivia" value="Popup Trivia" />Popup Trivia<br />
1563 <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
1564 <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
1565 <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
1566 -->
1567
1568
1569 <xsl:choose>
1570 <xsl:when test="/page/pageRequest/userInformation/@username">
1571
1572 <div style="padding: 8px;">
1573 <button id="mpm-new-overlay"
1574 classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1575 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1576 onclick="return popCreate()">
1577 New Layer
1578 </button>
1579 <button id="mpm-merge-overlay"
1580 classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1581 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1582 onclick="return false;">
1583 Merge Selected
1584 </button>
1585 <button id="mpm-split-overlay"
1586 classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1587 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1588 onclick="return false;">
1589 Split Selected
1590 </button>
1591 <button id="mpm-edit-overlay"
1592 classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1593 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1594 onclick="return popEdit()">
1595 Edit Selected
1596 </button>
1597 <button id="mpm-delete-overlay"
1598 classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1599 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
1600 onclick="return popDelete()">
1601 Delete Selected
1602 </button>
1603 </div>
1604
1605 </xsl:when>
1606 </xsl:choose>
1607
1608 </fieldset>
1609 </form>
1610
1611 <form id="mpmForm" style="width:99%;">
1612 <fieldset>
1613 <legend id="mpm-legend">Video Player Mode</legend>
1614
1615 <div id="mpm-div" class="radio-div">
1616
1617 <xsl:choose>
1618 <xsl:when test="/page/pageRequest/userInformation/@username">
1619
1620 <div class="radio-label-combo" style="display:inline-block; width: 32%">
1621 <span>
1622 <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
1623 </span>
1624 <label for="mpm-record" class="radio-label">
1625 <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
1626 <xsl:choose>
1627 <xsl:when test="$interface_name='dlfm'">
1628 Record
1629 </xsl:when>
1630 <xsl:otherwise>
1631 Lay down new track
1632 </xsl:otherwise>
1633 </xsl:choose>
1634 </span>
1635 </label>
1636 </div>
1637 </xsl:when>
1638 </xsl:choose>
1639
1640 <div class="radio-label-combo" style="display:inline-block; width: 32%">
1641 <span>
1642 <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
1643 </span>
1644 <label for="mpm-neutral" class="radio-label">
1645 <span style="color: orange;" title="Sit back and relax listening to the video">
1646 <xsl:choose>
1647 <xsl:when test="$interface_name='dlfm'">
1648 Inactive
1649 </xsl:when>
1650 <xsl:otherwise>
1651 Put into Neutral
1652 </xsl:otherwise>
1653 </xsl:choose>
1654 </span>
1655 </label>
1656 </div>
1657
1658 <div class="radio-label-combo" style="display:inline-block; width: 32%">
1659 <span>
1660 <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
1661 </span>
1662 <label for="mpm-game-on" class="radio-label">
1663 <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display. Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
1664
1665 <xsl:choose>
1666 <xsl:when test="$interface_name='dlfm'">
1667 Play along
1668 </xsl:when>
1669 <xsl:otherwise>
1670 Game on!
1671 </xsl:otherwise>
1672 </xsl:choose>
1673 </span>
1674 </label>
1675 </div>
1676
1677 </div>
1678 </fieldset>
1679 </form>
1680
1681
1682
1683 <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
1684 <fieldset>
1685 <legend id="pal-legend">Play Along Layers: Game On!</legend>
1686 <div id="palList"><xsl:comment>play along list</xsl:comment></div>
1687
1688
1689
1690 <div style="padding: 8px;">
1691 <button id="pal-display-overlay"
1692 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1693 onclick="return palDisplay()">
1694 Display Selected
1695 </button>
1696 <xsl:choose>
1697 <xsl:when test="/page/pageRequest/userInformation/@username">
1698
1699 <button id="pal-merge-overlay"
1700 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1701 onclick="return false;">
1702 Merge Selected
1703 </button>
1704 <button id="pal-split-overlay"
1705 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1706 onclick="return false;">
1707 Split Selected
1708 </button>
1709 <button id="pal-edit-overlay"
1710 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1711 onclick="return palEdit()">
1712 Edit Selected
1713 </button>
1714 <button id="pal-delete-overlay"
1715 style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
1716 onclick="return palDelete()">
1717 Delete Selected
1718 </button>
1719 </xsl:when>
1720 </xsl:choose>
1721
1722 </div>
1723
1724
1725 </fieldset>
1726 </form>
1727
1728
1729 </div>
1730
1731 </div>
1732 </div>
1733
1734
1735 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1736
1737 <div class="analysis-bar">
1738 <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
1739
1740 <xsl:choose>
1741 <xsl:when test="$interface_name='dlfm'">
1742 Music Notes Visualizer
1743 </xsl:when>
1744 <xsl:otherwise>
1745 Game On
1746 </xsl:otherwise>
1747 </xsl:choose>
1748 </div>
1749
1750 <div id="analysis-area" class="documenttext"
1751 styleXX="display: none; position: absolute: left: 0px; top: 0px;"
1752 style="display: none; left: 0px; top: 0px; position: relative; z-index: 1;">
1753 <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
1754 <div id="gameOnPaper" width="100%" height="445" style="position: absolute; top: 50px; "><xsl:comment>filler</xsl:comment></div>
1755<!--
1756 <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
1757 width="100%" height="445"
1758 XXviewBox="0 0 100 100" XXpreserveAspectRatio="xMidYMid slice"
1759 XXstyle="width:100%; height:100%;" styleXX="position:absolute; top:0; left:0; z-index:-1;">
1760
1761 <rect x="0" y="0" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
1762 <xsl:comment>filler</xsl:comment>
1763 </svg>
1764-->
1765 </div>
1766
1767 <xsl:if test="$interface_name='dlfm'">
1768
1769 <div style="padding: 15px; padding-top: 0px;">
1770 <button class="zoom-in">Zoom In</button>
1771 <button class="zoom-out">Zoom Out</button>
1772 <input type="range" class="zoom-range" />
1773 <button class="reset">Reset</button>
1774 </div>
1775 </xsl:if>
1776
1777 </div>
1778 </div>
1779
1780
1781 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1782
1783 <div class="turnstyle-bar">
1784
1785 <div id="piano-titlebar"
1786 style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1787 Piano
1788 </div>
1789
1790 <div id="drumkit-titlebar"
1791 style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1792 Drums
1793 </div>
1794
1795 <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
1796 Guitar
1797 </div>
1798
1799
1800 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1801
1802 <div style="position: relative;">
1803
1804 <div id="piano-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1805 <div id='jquery-piano'>
1806 <div ID="keyboard" class="keyboard-holder"><xsl:comment>div for piano keyboard</xsl:comment></div>
1807
1808 <div class="keyboard-options" style="color: white">
1809
1810 <div style="float: left;">
1811 General Midi:
1812 <select ID="midi-sound" onchange="changeGMInstrument(this[selectedIndex].value)">
1813 <option value="0" selected="selected">Acoustic Grand Piano</option>
1814 <option value="19">Church Organ</option>
1815 <option value="24">Acoustic Guitar Nylon</option>
1816 <!--
1817 <option value="30">Distortion Guitar</option>
1818 -->
1819 </select>
1820 </div>
1821
1822 <div style="float: left;">
1823 Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
1824 <input type="button" ID="-_OCTAVE" value="-" />
1825 <input type="button" ID="+_OCTAVE" value="+" /><br />
1826 <i>(Use left/right arrows to adjust with keyboard)</i>
1827 </div>
1828
1829 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1830
1831<!--
1832 Sound
1833 <select ID="sound">
1834 <option value="0" selected="selected">Keyboard</option>
1835 <option value="1" selected="selected">Organ</option>
1836 <option value="2">Acoustic Guitar</option>
1837 <option value="3">EDM, bro!</option>
1838 </select>
1839-->
1840 </div>
1841
1842
1843 </div>
1844
1845 </div>
1846
1847 <style>
1848 .drumcontainer {
1849 position: absolute;
1850 top: 50%;
1851 left: 50%;
1852 transform: translateX(-50%) translateY(-50%);
1853 -webkit-transform: translateX(-50%) translateY(-50%);
1854 font-size: 100%;
1855 color: #888888;
1856 pointer-events: none;
1857 }
1858
1859.drum.hit {
1860 animation: drumHit .15s linear infinite;
1861 -webkit-animation: drumHit .15s linear infinite;
1862 -moz-animation: drumHit .15s linear infinite;
1863 -ms-animation: drumHit .15s linear infinite;
1864 -o-animation: drumHit .15s linear infinite;
1865}
1866
1867@keyframes: drumHit; {
1868 0% { background-size: 100%;}
1869 10% { background-size: 95%; }
1870 30% { background-size: 97%; }
1871 50% { background-size: 100%;}
1872 60% { background-size: 98%; }
1873 70% { background-size: 100%;}
1874 80% { background-size: 99%; }
1875 100% { background-size: 100%;}
1876}
1877
1878@-webkit-keyframes drumHit {
1879 0% { background-size: 100%;}
1880 10% { background-size: 95%; }
1881 30% { background-size: 97%; }
1882 50% { background-size: 100%;}
1883 60% { background-size: 98%; }
1884 70% { background-size: 100%;}
1885 80% { background-size: 99%; }
1886 100% { background-size: 100%;}
1887}
1888
1889@-moz-keyframes drumHit {
1890 0% { background-size: 100%;}
1891 10% { background-size: 95%; }
1892 30% { background-size: 97%; }
1893 50% { background-size: 100%;}
1894 60% { background-size: 98%; }
1895 70% { background-size: 100%;}
1896 80% { background-size: 99%; }
1897 100% { background-size: 100%;}
1898}
1899
1900@-o-keyframes drumHit {
1901 0% { background-size: 100%;}
1902 10% { background-size: 95%; }
1903 30% { background-size: 97%; }
1904 50% { background-size: 100%;}
1905 60% { background-size: 98%; }
1906 70% { background-size: 100%;}
1907 80% { background-size: 99%; }
1908 100% { background-size: 100%;}
1909}
1910
1911@-ms-keyframes drumHit {
1912 0% { background-size: 100%;}
1913 10% { background-size: 95%; }
1914 30% { background-size: 97%; }
1915 50% { background-size: 100%;}
1916 60% { background-size: 98%; }
1917 70% { background-size: 100%;}
1918 80% { background-size: 99%; }
1919 100% { background-size: 100%;}
1920}
1921
1922
1923
1924 </style>
1925 <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1926 <div id='jquery-drums' style="padding: 8px;">
1927 <center>
1928 <div style="display:inline-block;">
1929 <div style="position: relative;">
1930<!--
1931 <img style="position: relative;" width="148" height="148"
1932 src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
1933-->
1934 <div style="position: relative; width: 148px; height: 148px; background-image: url({$httpCollection}/images/cymbal-overview.png); background-repeat: no-repeat; background-size: 148px 148px" class="drum" id="drum1" border="0" ><xsl:comment>drum background</xsl:comment></div>
1935 <div class="drumcontainer" style="color: #555555">
1936 <span style="white-space: nowrap;">&lt;Shift-C&gt;</span>
1937 </div>
1938 </div>
1939 </div>
1940 <div style="display:inline-block;">
1941 <div style="position: relative;">
1942<!--
1943 <img style="position: relative;" width="148" height="144"
1944 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
1945-->
1946 <div style="position: relative; width: 148px; height: 144px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 148px 144px" class="drum" id="drum3" border="0" ><xsl:comment>drum background</xsl:comment></div>
1947 <div class="drumcontainer" >
1948 <span style="white-space: nowrap;">&lt;Shift-V&gt;</span>
1949 </div>
1950 </div>
1951 </div>
1952 <div style="display:inline-block;">
1953 <div style="position: relative;">
1954<!--
1955 <img style="position: relative;" width="167" height="163"
1956 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
1957-->
1958 <div style="position: relative; width: 167px; height: 163px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 167px 163px" class="drum" id="drum2" border="0" ><xsl:comment>drum background</xsl:comment></div>
1959 <div class="drumcontainer" >
1960 <span style="white-space: nowrap;">&lt;Shift-B&gt;</span>
1961 </div>
1962 </div>
1963 </div>
1964 <div style="display:inline-block;">
1965 <div style="position: relative;">
1966<!--
1967 <img style="position: relative;" width="197" height="192"
1968 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
1969-->
1970 <div style="position: relative; width: 197px; height: 192px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 197px 192px" class="drum" id="drum4" border="0" ><xsl:comment>drum background</xsl:comment></div>
1971 <div class="drumcontainer" >
1972 <span style="white-space: nowrap;">&lt;Shift-N&gt;</span>
1973 </div>
1974 </div>
1975 </div>
1976 <div style="display:inline-block;">
1977 <div style="position: relative;">
1978<!--
1979 <img style="position: relative;" width="216" height="211"
1980 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
1981-->
1982 <div style="position: relative; width: 216px; height: 211px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 216px 211px" class="drum" id="drum5" border="0" ><xsl:comment>drum background</xsl:comment></div>
1983 <div class="drumcontainer" >
1984 <span style="white-space: nowrap;"> &lt;Shift-M&gt;</span>
1985 </div>
1986 </div>
1987 </div>
1988 </center>
1989 </div>
1990
1991 </div>
1992
1993
1994 <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1995 <div style="color: white;">
1996 <div id="jamWrapper">
1997 <div id="jamStage">
1998 <xsl:comment><!--jamStage--></xsl:comment>
1999 </div>
2000 <div id="jamPlate">
2001 <xsl:comment><!--jamPlate--></xsl:comment>
2002 </div>
2003 <canvas id="jamStrings" width="750px" height="200px">
2004 Your browser does not support the Canvas element
2005 </canvas>
2006 </div>
2007 </div>
2008
2009
2010 <div style="position: relative; background-color: white;">
2011 <div style="display:inline-block; width: 150px; height: 130px;">
2012 <form style="position: absolute; top: 10px; leftXX: 10px;">
2013
2014 <fieldset>
2015 <legend id="clm-legend">Show Chords</legend>
2016
2017 <div id="clm-div" class="radio-div">
2018
2019 <div class="radio-label-combo">
2020 <span>
2021 <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode('maj')" value="Maj"
2022 checked="checked"/>
2023 </span>
2024 <label for="clm-maj" class="radio-label">
2025 <span>
2026 Major
2027 </span>
2028 </label>
2029 </div>
2030
2031 <div class="radio-label-combo">
2032 <span>
2033 <input type="radio" id="clm-min" name="clm-radio" onchange="setChordLineupMode('min')" value="Min"/>
2034 </span>
2035 <label for="clm-min" class="radio-label">
2036 <span>
2037 Minor
2038 </span>
2039 </label>
2040 </div>
2041
2042 <div class="radio-label-combo">
2043 <span>
2044 <input type="radio" id="clm-cus" name="clm-radio" onchange="setChordLineupMode('cus')" value="Cus"/>
2045 </span>
2046 <label for="clm-cus" class="radio-label">
2047 <span>
2048 Custom
2049 </span>
2050 </label>
2051 </div>
2052
2053 </div>
2054 </fieldset>
2055 </form>
2056 </div>
2057
2058<!--
2059 <div id="mytab" style="display:inline-block; height: 160px; width: 780px;">
2060 <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
2061 <g id="scaled-mytab-group" transform="scale(0.45,0.55)">
2062 <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject>
2063 </g>
2064 </svg>
2065 </div>
2066-->
2067
2068
2069 <gsf:div id="mytab" style="display:inline-block; heightXX: 130px; width: 780px;">
2070 <gsf:div id="scaled-mytab" widthXX="2000px" heightXX="300px"/>
2071 <gsf:div style="font-style:italic">
2072 <p style="font-size:85%;">
2073 Keyboard shortcuts: Alt + Q-U. Changes selected chord, matched to be the same as the piano shortcuts.
2074 </p>
2075<!--
2076 <p>
2077 C=Alt-Q, D=Alt-W, ... B=Alt-U; C#/Db=Alt-2, D#/Eb=Alt-3, ...
2078 </p>
2079-->
2080
2081 </gsf:div>
2082 <gsf:div id="addCustomChord" style="display:none;">
2083 <input id="addCustomChordText" type="text" size="10"/>
2084 <input type="button" value="add custom chord" onclick="addCustomChord()"/>
2085 </gsf:div>
2086
2087 </gsf:div>
2088
2089 </div>
2090
2091
2092 </div>
2093
2094 </div>
2095
2096 <div style="position: absolute; top: -300px; background-color: white;">
2097 <style>
2098 .chordLineupXX {
2099 -webkit-transform-style: preserve-3d;
2100 -moz-transform-style: preserve-3d;
2101 transform-style: preserve-3d;
2102 }
2103
2104 .chordLineupBlock {
2105 display: inline-block;
2106 }
2107
2108 .chordLineupBlockVerticalCenterXX {
2109 position: relative;
2110 top: 50%;
2111 transform: translataeY(-50%);
2112 -webkit-transform: translataeY(-50%);
2113 -ms-transform: translataeY(-50%);
2114 }
2115
2116 </style>
2117
2118
2119 <div id="offscreen-jtab-chord-lineup">
2120
2121 <gsf:div id="offscreen-jtab-chord-0" class="chordLineupBlock"/>
2122
2123 <div class="chordLineupBlock">
2124 <gsf:div id="offscreen-jtab-chord-1"/>
2125 <gsf:div id="offscreen-jtab-chord-2"/>
2126 </div>
2127
2128 <gsf:div id="offscreen-jtab-chord-3" class="chordLineupBlock"/>
2129
2130 <div class="chordLineupBlock">
2131 <gsf:div id="offscreen-jtab-chord-4"/>
2132 <gsf:div id="offscreen-jtab-chord-5"/>
2133 </div>
2134
2135 <gsf:div id="offscreen-jtab-chord-6" class="chordLineupBlock"/>
2136 <gsf:div id="offscreen-jtab-chord-7" class="chordLineupBlock"/>
2137
2138 <div class="chordLineupBlock">
2139 <gsf:div id="offscreen-jtab-chord-8"/>
2140 <gsf:div id="offscreen-jtab-chord-9"/>
2141 </div>
2142
2143 <gsf:div id="offscreen-jtab-chord-10" class="chordLineupBlock"/>
2144
2145 <div class="chordLineupBlock">
2146 <gsf:div id="offscreen-jtab-chord-11"/>
2147 <gsf:div id="offscreen-jtab-chord-12"/>
2148 </div>
2149
2150 <gsf:div id="offscreen-jtab-chord-13" class="chordLineupBlock"/>
2151
2152 <div class="chordLineupBlock">
2153 <gsf:div id="offscreen-jtab-chord-14"/>
2154 <gsf:div id="offscreen-jtab-chord-15"/>
2155 </div>
2156
2157 <gsf:div id="offscreen-jtab-chord-16" class="chordLineupBlock"/>
2158
2159 </div>
2160
2161
2162
2163 <gsf:script>
2164 <![CDATA[
2165
2166 $(document).ready(function() {
2167
2168
2169 setChordLineupMode("maj");
2170 chordChange("0");
2171
2172 var lineup = jam_chords["maj"];
2173
2174 // add click handler and scale down in size: one-time operation
2175
2176 for (var i=0; i<lineup.length; i++) {
2177 $('#offscreen-jtab-chord-'+i).click(function(ii) { return function(e) { chordChange(ii) } }(i) );
2178
2179 var $tab_svg = $('#offscreen-jtab-chord-'+i+'>div>svg');
2180 $tab_svg.attr("width", "58"); // go thinner than 'natural' width of 69 (for a height of 59)
2181 $tab_svg.attr("height","59");
2182 // True box is 0 0 138 118, but shaving off values so not so much white-space
2183 $tab_svg[0].setAttribute("viewBox","20 0 90 118"); // W3C DOM way to avoid jquery lower-casing 'viewBox' into 'viewbox'
2184 $tab_svg.parent().css("height","59px");
2185 //$tab_svg.parent().attr("height","59");
2186 //$tab_svg.parent().parent().attr("width","60");
2187 //$tab_svg.parent().parent().attr("height","59");
2188
2189 }
2190
2191
2192 $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
2193
2194
2195 });
2196 ]]>
2197 </gsf:script>
2198 </div>
2199
2200 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
2201
2202 </div>
2203
2204
2205
2206
2207 <script>
2208 <xsl:text disable-output-escaping="yes">
2209 $(function(){
2210 transformToTurnstyleBlock("about");
2211
2212 transformToTurnstyleBlock("video");
2213 transformToTurnstyleBlock("playlist");
2214
2215 transformToTurnstyleBlock("piano");
2216 transformToTurnstyleBlock("drumkit");
2217 transformToTurnstyleBlock("guitar");
2218
2219 transformToTurnstyleBlock("analysis");
2220
2221 $('#video-openclose').trigger("click");
2222
2223 });
2224 var piano_keyboard = new AudioSynthView();
2225 piano_keyboard.draw();
2226 </xsl:text>
2227 </script>
2228
2229 </div>
2230
2231 <div style="color: white">
2232 <!--
2233 Sound
2234 -->
2235 x
2236 </div>
2237
2238</div>
2239
2240 <xsl:call-template name="audio-icon-cache"/>
2241
2242 <hr/>
2243
2244 </div>
2245 </xsl:template>
2246
2247
2248
2249<xsl:template name="song-ul">
2250
2251 <xsl:variable name="httpCollection">
2252 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
2253 </xsl:variable>
2254 <xsl:variable name="assocFilePath">
2255 <gsf:metadata name="assocfilepath" select="root"/>
2256 </xsl:variable>
2257 <xsl:variable name="Source">
2258 <gsf:metadata name="Source" select="root"/>
2259 </xsl:variable>
2260 <xsl:variable name="Audio">
2261 <gsf:switch>
2262 <gsf:metadata name="Audio" select="root"/>
2263 <gsf:when test="exists">
2264 <gsf:metadata name="Audio" select="root"/>
2265 </gsf:when>
2266 <gsf:otherwise>doc.ogg</gsf:otherwise>
2267 </gsf:switch>
2268 </xsl:variable>
2269 <xsl:variable name="streamableaudio">
2270 <gsf:switch>
2271 <gsf:metadata name="streamableaudio" select="root"/>
2272 <gsf:when test="exists">
2273 <gsf:metadata name="streamableaudio" select="root"/>
2274 </gsf:when>
2275 <gsf:otherwise>doc.mp3</gsf:otherwise>
2276 </gsf:switch>
2277 </xsl:variable>
2278
2279 <xsl:variable name="streamablevideo">
2280 <gsf:metadata name="Source"/>
2281 </xsl:variable>
2282
2283 <gsf:variable name="cgiargFrameOffset">
2284 <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
2285 </gsf:variable>
2286 <gsf:variable name="cgiargFrameLength">
2287 <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
2288 </gsf:variable>
2289 <xsl:variable name="cgiargYScaleSimImg">
2290 <xsl:choose>
2291 <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''">
2292 <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/>
2293 </xsl:when>
2294 <xsl:otherwise>0.5</xsl:otherwise>
2295 </xsl:choose>
2296 </xsl:variable>
2297
2298 <!--
2299 CAA = Content Analysis Algorithm
2300 -->
2301 <xsl:variable name="cgiargCAAlgorithm">
2302 <xsl:choose>
2303 <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''">
2304 <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/>
2305 </xsl:when>
2306 <xsl:otherwise>1</xsl:otherwise>
2307 </xsl:choose>
2308 </xsl:variable>
2309
2310
2311<!--
2312***
2313-->
2314<!--
2315Main Audio Player
2316-->
2317<!--
2318***
2319-->
2320 <ul class="playlist">
2321 <li class="rounded">
2322 <gsf:script src="{$httpCollection}/script/hybrid-audio-player.js"/>
2323 <a href="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" id="mysong" onclick="togglePlayVisual(document.getElementById('mainPlayButton'))" style="padding-bottom: 2px;">
2324 <span><img height="32" id="mainPlayButton" onclick="var event = arguments[0] || window.event; togglePlay(event,this)" onmouseout="playHighlightOff(this)" onmouseover="playHighlightOn(this)" src="ext/diy-audio-player/images/play32.png" style="vertical-align: middle;" width="32"/>Play/Pause<span id="extraPlayText"/></span>
2325 </a>
2326 <gsf:script src="ext/diy-audio-player/script/audioDB-play.js"/>
2327 <xsl:choose>
2328 <xsl:when test="($cgiargFrameOffset != '-1') and ($cgiargFrameOffset != '')">
2329 <div style="background-color: rgb(40%,40%,20%)">
2330 <script type="text/javascript">
2331 <xsl:text disable-output-escaping="yes">var frameOffsetStr=gs.variables.cgiargFrameOffset;
2332 var frameLength=gs.variables.cgiargFrameLength;</xsl:text>
2333 </script>
2334 <svg height="24" id="svgAudioDBSegments" onLoadXX="svgAudioDBInit()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
2335 </svg> </div>
2336 </xsl:when>
2337 </xsl:choose>
2338 <xsl:call-template name="structuredAudioPlayerBlock"/>
2339 <xsl:call-template name="processingPopup"/>
2340 <div id="doublePlay" style="width: 100%; display: none;">
2341 <script type="text/javascript">
2342 <xsl:text disable-output-escaping="yes">// At time of writing this code, this needs to be an OGG file to work in Firefox
2343 var source = "</xsl:text>
2344 <gsf:metadata name="Audio" select="root"/>
2345 <xsl:text disable-output-escaping="yes">";
2346
2347 var self_sim_png = source.replace(/\.(ogg|mp3|wav)$/,".png");
2348 var collect = "</xsl:text>
2349 <xsl:value-of select="/page/pageResponse/collection/@name"/>
2350 <xsl:text disable-output-escaping="yes">";
2351 var site = "</xsl:text>
2352 <xsl:value-of select="$site_name"/>
2353 <xsl:text disable-output-escaping="yes">";</xsl:text>
2354 </script>
2355 <gsf:script src="ext/diy-audio-player/script/similarity-matrix-play.js"/>
2356 <audio controls="controls" id="leftsong" style="width: 49%;">
2357 <!--
2358 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
2359 -->
2360 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2361 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2362 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2363 </audio>
2364 <audio controls="controls" id="rightsong" style="width: 49%;">
2365 <!--
2366 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
2367 -->
2368 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2369 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2370 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2371 </audio>
2372 </div>
2373 <!--
2374 Real Time Analysis (RTA) audio
2375 -->
2376 <div style="width: 100%;">
2377 <audio id="rta-audio-element" style="width: 100%;">
2378 <!--
2379 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg"/>
2380 -->
2381 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2382 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2383 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2384 </audio>
2385 </div>
2386 <!--
2387 <xsl:call-template name="workflow-block"/>
2388-->
2389 <div id="controlMarker">
2390 <xsl:comment> filler</xsl:comment>
2391 </div>
2392 <span class="ui-state-default ui-corner-top" id="overlayNewNotes" style="font-size:90%; padding: 3px; cursor:pointer;">New Annotation</span>
2393 <div id="svg-canvas-overlay" style="position: relative">
2394 <!--
2395 drawing canvas
2396 -->
2397 <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
2398 <div style="position: relative">
2399 <div>
2400 <!--
2401 **** better if 100% width, but issue with JS reading these values ???
2402 -->
2403 <canvas height="494" id="freq-plot" style="background-color: #cccccc;" width="941"/>
2404 </div>
2405 </div>
2406 </div>
2407 <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
2408 <div style="position: relative">
2409 <div>
2410 <!--
2411 **** better if 100% width, but issue with JS reading these values ???
2412 -->
2413 <canvas height="494" id="freq-plot-labels" style="background-color: transparent" width="941"/>
2414 </div>
2415 </div>
2416 </div>
2417 <div style="width: 100%; position: absolute; left: 0px; top: 0px; display: none;">
2418 <div style="position: relative">
2419 <div>
2420 <!--
2421 **** better if 100% width, but issue with JS reading these values ???
2422 -->
2423 <canvas height="494" id="selfsim-plot" style="background-color: #0000cc;" width="941"/>
2424 </div>
2425 </div>
2426 </div>
2427 <!--
2428 left/right-mix circle cursor
2429 -->
2430 <div style="background-color: transparent; position: relative; left: 0px; top: 0px;">
2431 <svg id="svgSimilarityPlay" onLoad="svgInitSimilarityPlay()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2432 <g id="simPlayLineGroup" transform="scale(1.0,{$cgiargYScaleSimImg})">
2433 <!--
2434 image loaded here, with yScaleSimImg applied to group
2435 -->
2436 </g> <g id="playtracker" onclick="dualPlay(evt)" onmousemove="playTrackerMove(evt)" onmouseout="playTrackerOff(evt)" style="visibility: hidden" transform="translate(0,0)">
2437 <circle cx="0" cy="0" fill="rgba(100%,100%,50%,0.7)" r="20" stroke="black" stroke-width="1"/>
2438 <circle cx="0" cy="0" fill="black" r="1" stroke="black" stroke-width="1"/>
2439 <g style="visibility: hidden;" transform="translate(-15,-15)">
2440 <image height="30" id="playtrackerBusy" width="30" xlink:href="ext/diy-audio-player/images/wait30trans.gif"/>
2441 </g>
2442 <g>
2443 <g transform="rotate(-90)">
2444 <g transform="translate(-20,-25)">
2445 <text id="rightTime" style="font-size: 80%;">L: secs</text>
2446 </g>
2447 </g>
2448 <g transform="translate(-20,30)">
2449 <text id="leftTime" style="font-size: 80%;">R: secs</text>
2450 </g>
2451 </g>
2452 </g>
2453 </svg>
2454 </div>
2455 <gsf:variable-array name="salami.overlayNote">
2456 <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
2457 </gsf:variable-array>
2458 <!--
2459 onclick="var event = arguments[0] || window.event; dualPlay(event)"
2460 onmousemove="var event = arguments[0] || window.event; playTrackerMove(event)"
2461 onmouseout="var event = arguments[0] || window.event; playTrackerOff(event)"
2462 -->
2463 <div id="noteOverlay" style="width: 100%; height: 494px; position: absolute; left: 0px; top: 0px; background-color: transparent;"> </div> <gsf:script>$(window).load(function(){
2464 // **** currently supressed for respooled!!!!
2465 //var overlayNotes = new OverlayNotes("noteOverlay","salami.overlayNote");
2466 //$('#overlayNewNotes').click(function() {overlayNotes.AddNote()});
2467 //addStatusBar();
2468 });</gsf:script>
2469 </div>
2470 <!--
2471 end of svg-canvas-overly
2472 -->
2473 <xsl:call-template name="visualization-mode-block"/>
2474 </li>
2475 </ul>
2476
2477</xsl:template>
2478
2479</xsl:stylesheet>
Note: See TracBrowser for help on using the repository browser.