root/main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl @ 29863

Revision 29863, 55.8 KB (checked in by davidb, 4 years ago)

First cut at respooled site/collection

  • Property svn:mime-type set to application/xml
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="Source"/>
1311    </xsl:variable>
1312   
1313    <div class="documenttext" id="gs-document">
1314
1315<div>
1316  <div id='media-player' style="width: 96%">
1317    <video id="video" width="100%" controls="true">
1318      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
1319      Your browser does not support the video tag.
1320    </video>
1321
1322
1323    <div id='media-controls'>
1324      <div>
1325    <input id="progress-bar" type="range"
1326           min='0' max='100' step='0.01' value='0'
1327           style="width: 100%"/>
1328
1329      </div>
1330      <div style="padding: 8px">
1331    <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>   
1332    <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
1333    <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
1334    <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
1335    <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
1336    <button id='mute-button' class='mute' title='mute' onclick="toggleMute('true');">Mute</button> 
1337      </div>
1338    </div>
1339   
1340    <div class="turnstyle-bar">
1341
1342      <div id="piano-titlebar"
1343       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1344    Piano
1345      </div>
1346
1347      <div id="drumkit-titlebar"
1348       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1349    Drums
1350      </div>
1351
1352      <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
1353    Popup Layers
1354      </div>
1355
1356
1357      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1358
1359      <div style="position: relative;">
1360
1361    <div id="piano-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1362      <div id='jquery-piano'>
1363        <div ID="keyboard" class="keyboard-holder"><xsl:comment>div for piano keyboard</xsl:comment></div>
1364
1365        <div class="keyboard-options" style="color: white">
1366
1367          <div style="float: left;">
1368        General Midi:
1369        <select ID="midi-sound" onchange="changeGMInstrument(this[selectedIndex].value)">
1370          <option value="0" selected="selected">Acoustic Grand Piano</option>
1371          <option value="19">Church Organ</option>
1372          <option value="24">Acoustic Guitar Nylon</option>
1373          <option value="30">Distortion Guitar</option>
1374        </select>
1375          </div>
1376
1377          <div style="float: left;">
1378        Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
1379        <input type="button" ID="-_OCTAVE" value="-" />
1380        <input type="button" ID="+_OCTAVE" value="+" /><br />
1381        <i>(Use left/right arrows to adjust with keyboard)</i>
1382          </div>
1383
1384          <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1385
1386<!--       
1387        Sound
1388        <select ID="sound">
1389          <option value="0" selected="selected">Keyboard</option>
1390          <option value="1" selected="selected">Organ</option>
1391          <option value="2">Acoustic Guitar</option>
1392          <option value="3">EDM, bro!</option>
1393        </select>
1394-->
1395        </div>
1396
1397
1398      </div>
1399     
1400    </div>
1401
1402
1403    <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1404      <div id='jquery-drums'>
1405        <center>
1406          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum1" border="0" />
1407          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum2" border="0" />
1408          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum3" border="0" />
1409          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum4" border="0" />
1410          <br />
1411          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum5" border="0" />
1412          <img src="{$httpCollection}/images/drum.png" class="drum" id="drum6" border="0" />
1413          <br />
1414        </center>
1415      </div>
1416     
1417    </div>
1418
1419
1420    <div id="playlist-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1421<!--
1422    <div id='media-play-list'>
1423      <h2>Play list</h2>
1424      <ul id='play-list'>
1425        <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
1426        <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
1427        <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
1428      </ul>
1429    </div>
1430-->
1431          <div style="color: white;">
1432        <form style="padding: 20px;">
1433          <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
1434          <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
1435          <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
1436          <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
1437          <input type="checkbox" name="PianoHere" value="PianoHero" />Play-along Piano Hero<br />
1438        </form>
1439      </div>
1440     
1441    </div>
1442
1443      </div>
1444
1445    </div>
1446
1447    <script>
1448      <xsl:text disable-output-escaping="yes">
1449    $(function(){
1450      transformToTurnstyleBlock("piano");
1451      transformToTurnstyleBlock("playlist");
1452      transformToTurnstyleBlock("drumkit");
1453    });
1454    var piano_keyboard = new AudioSynthView();
1455    piano_keyboard.draw();     
1456      </xsl:text>
1457    </script>
1458   
1459  </div>
1460
1461  <div style="color: white">
1462    <!--
1463    Sound
1464    -->
1465    x
1466  </div>
1467   
1468</div>
1469
1470      <xsl:call-template name="audio-icon-cache"/>
1471   
1472      <hr/>
1473   
1474    </div>
1475  </xsl:template>
1476
1477
1478
1479<xsl:template name="song-ul">
1480
1481  <xsl:variable name="httpCollection">
1482    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1483  </xsl:variable>
1484  <xsl:variable name="assocFilePath">
1485    <gsf:metadata name="assocfilepath" select="root"/>
1486  </xsl:variable>
1487  <xsl:variable name="Source">
1488    <gsf:metadata name="Source" select="root"/>
1489  </xsl:variable>
1490  <xsl:variable name="Audio">
1491    <gsf:switch>
1492      <gsf:metadata name="Audio" select="root"/>
1493      <gsf:when test="exists">
1494    <gsf:metadata name="Audio" select="root"/>
1495      </gsf:when>
1496      <gsf:otherwise>doc.ogg</gsf:otherwise>
1497    </gsf:switch>
1498  </xsl:variable>
1499  <xsl:variable name="streamableaudio">
1500    <gsf:switch>
1501      <gsf:metadata name="streamableaudio" select="root"/>
1502      <gsf:when test="exists">
1503    <gsf:metadata name="streamableaudio" select="root"/>
1504      </gsf:when>
1505      <gsf:otherwise>doc.mp3</gsf:otherwise>
1506    </gsf:switch>
1507  </xsl:variable>
1508 
1509  <xsl:variable name="streamablevideo">
1510    <gsf:metadata name="Source"/>
1511  </xsl:variable>
1512 
1513  <gsf:variable name="cgiargFrameOffset">
1514    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
1515  </gsf:variable>
1516  <gsf:variable name="cgiargFrameLength">
1517    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
1518  </gsf:variable>
1519  <xsl:variable name="cgiargYScaleSimImg">
1520    <xsl:choose>
1521      <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''">
1522    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/>
1523      </xsl:when>
1524      <xsl:otherwise>0.5</xsl:otherwise>
1525    </xsl:choose>
1526  </xsl:variable>
1527
1528  <!--
1529      CAA = Content Analysis Algorithm
1530  -->
1531  <xsl:variable name="cgiargCAAlgorithm">
1532    <xsl:choose>
1533      <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''">
1534    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/>
1535                      </xsl:when>
1536                      <xsl:otherwise>1</xsl:otherwise>
1537    </xsl:choose>
1538  </xsl:variable>
1539 
1540 
1541<!--
1542***
1543-->
1544<!--
1545Main Audio Player
1546-->
1547<!--
1548***
1549-->
1550  <ul class="playlist">
1551    <li class="rounded">
1552      <gsf:script src="{$httpCollection}/script/hybrid-audio-player.js"/>
1553      <a href="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" id="mysong" onclick="togglePlayVisual(document.getElementById('mainPlayButton'))" style="padding-bottom: 2px;">
1554    <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>
1555      </a>
1556      <gsf:script src="ext/diy-audio-player/script/audioDB-play.js"/>
1557      <xsl:choose>
1558    <xsl:when test="($cgiargFrameOffset != '-1') and ($cgiargFrameOffset != '')">
1559      <div style="background-color: rgb(40%,40%,20%)">
1560        <script type="text/javascript">
1561          <xsl:text disable-output-escaping="yes">var frameOffsetStr=gs.variables.cgiargFrameOffset;
1562          var frameLength=gs.variables.cgiargFrameLength;</xsl:text>
1563        </script>
1564        <svg height="24" id="svgAudioDBSegments" onLoadXX="svgAudioDBInit()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
1565      </svg>                                    </div>
1566    </xsl:when>
1567      </xsl:choose>
1568      <xsl:call-template name="structuredAudioPlayerBlock"/>
1569      <xsl:call-template name="processingPopup"/>
1570      <div id="doublePlay" style="width: 100%; display: none;">
1571    <script type="text/javascript">
1572      <xsl:text disable-output-escaping="yes">// At time of writing this code, this needs to be an OGG file to work in Firefox
1573      var source = "</xsl:text>
1574      <gsf:metadata name="Audio" select="root"/>
1575      <xsl:text disable-output-escaping="yes">";
1576     
1577      var self_sim_png = source.replace(/\.(ogg|mp3|wav)$/,".png");
1578      var collect = "</xsl:text>
1579      <xsl:value-of select="/page/pageResponse/collection/@name"/>
1580      <xsl:text disable-output-escaping="yes">";
1581      var site = "</xsl:text>
1582      <xsl:value-of select="$site_name"/>
1583      <xsl:text disable-output-escaping="yes">";</xsl:text>
1584    </script>
1585    <gsf:script src="ext/diy-audio-player/script/similarity-matrix-play.js"/>
1586    <audio controls="controls" id="leftsong" style="width: 49%;">
1587      <!--
1588          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1589      -->
1590      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1591      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1592      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1593    </audio>
1594    <audio controls="controls" id="rightsong" style="width: 49%;">
1595      <!--
1596          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1597      -->
1598      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1599      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1600      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1601                                </audio>
1602      </div>
1603      <!--
1604      Real Time Analysis (RTA) audio
1605      -->
1606      <div style="width: 100%;">
1607    <audio id="rta-audio-element" style="width: 100%;">
1608      <!--
1609          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg"/>
1610      -->
1611      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1612      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1613      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1614    </audio>
1615      </div>
1616      <!--
1617      <xsl:call-template name="workflow-block"/>
1618-->
1619      <div id="controlMarker">
1620    <xsl:comment> filler</xsl:comment>
1621      </div>
1622      <span class="ui-state-default ui-corner-top" id="overlayNewNotes" style="font-size:90%; padding: 3px; cursor:pointer;">New Annotation</span>
1623      <div id="svg-canvas-overlay" style="position: relative">
1624    <!--
1625        drawing canvas
1626    -->
1627    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
1628      <div style="position: relative">
1629        <div>
1630          <!--
1631          **** better if 100% width, but issue with JS reading these values ???
1632          -->
1633          <canvas height="494" id="freq-plot" style="background-color: #cccccc;" width="941"/>
1634        </div>
1635      </div>
1636    </div>
1637    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
1638      <div style="position: relative">
1639        <div>
1640          <!--
1641          **** better if 100% width, but issue with JS reading these values ???
1642          -->
1643          <canvas height="494" id="freq-plot-labels" style="background-color: transparent" width="941"/>
1644        </div>
1645      </div>
1646    </div>
1647    <div style="width: 100%; position: absolute; left: 0px; top: 0px; display: none;">
1648      <div style="position: relative">
1649        <div>
1650          <!--
1651          **** better if 100% width, but issue with JS reading these values ???
1652          -->
1653          <canvas height="494" id="selfsim-plot" style="background-color: #0000cc;" width="941"/>
1654        </div>
1655      </div>
1656    </div>
1657    <!--
1658        left/right-mix circle cursor
1659    -->
1660    <div style="background-color: transparent; position: relative; left: 0px; top: 0px;">
1661      <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">
1662        <g id="simPlayLineGroup" transform="scale(1.0,{$cgiargYScaleSimImg})">
1663          <!--
1664          image loaded here, with yScaleSimImg applied to group
1665          -->
1666          </g>                                      <g id="playtracker" onclick="dualPlay(evt)" onmousemove="playTrackerMove(evt)" onmouseout="playTrackerOff(evt)" style="visibility: hidden" transform="translate(0,0)">
1667          <circle cx="0" cy="0" fill="rgba(100%,100%,50%,0.7)" r="20" stroke="black" stroke-width="1"/>
1668          <circle cx="0" cy="0" fill="black" r="1" stroke="black" stroke-width="1"/>
1669          <g style="visibility: hidden;" transform="translate(-15,-15)">
1670        <image height="30" id="playtrackerBusy" width="30" xlink:href="ext/diy-audio-player/images/wait30trans.gif"/>
1671          </g>
1672          <g>
1673        <g transform="rotate(-90)">
1674          <g transform="translate(-20,-25)">
1675            <text id="rightTime" style="font-size: 80%;">L: secs</text>
1676          </g>
1677        </g>
1678        <g transform="translate(-20,30)">
1679          <text id="leftTime" style="font-size: 80%;">R: secs</text>
1680        </g>
1681          </g>
1682        </g>
1683      </svg>
1684    </div>
1685    <gsf:variable-array name="salami.overlayNote">
1686      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
1687    </gsf:variable-array>
1688    <!--
1689        onclick="var event = arguments[0] || window.event; dualPlay(event)"
1690        onmousemove="var event = arguments[0] || window.event; playTrackerMove(event)"
1691        onmouseout="var event = arguments[0] || window.event; playTrackerOff(event)"
1692    -->
1693    <div id="noteOverlay" style="width: 100%; height: 494px; position: absolute; left: 0px; top: 0px; background-color: transparent;">                              </div>                              <gsf:script>$(window).load(function(){
1694    // **** currently supressed for respooled!!!!                               
1695    //var overlayNotes = new OverlayNotes("noteOverlay","salami.overlayNote");
1696    //$('#overlayNewNotes').click(function() {overlayNotes.AddNote()});
1697    //addStatusBar();
1698    });</gsf:script>
1699      </div>
1700      <!--
1701      end of svg-canvas-overly
1702      -->
1703      <xsl:call-template name="visualization-mode-block"/>
1704    </li>
1705  </ul>
1706 
1707</xsl:template>
1708
1709</xsl:stylesheet>
Note: See TracBrowser for help on using the browser.