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

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

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