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

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

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