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

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

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