root/main/trunk/model-sites-dev/multimodal-mdl/collect/salami-ground-truth/transform/pages/document.xsl @ 28433

Revision 28433, 28.5 KB (checked in by davidb, 6 years ago)

Further collections to add to the set

  • Property svn:executable set to *
  • 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/chroma-transform.js"/>
80    <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
81    <gsf:script src="ext/js-dsp/frequency-player.js"/>
82
83
84    <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
85    <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
86    <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
87    <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
88    <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
89    <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
90    <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
91
92  </xsl:template>
93
94  <xsl:template name="processingPopup">
95    <div>
96      <style type="text/css">   
97    #processing {
98      width: 100%;
99      height: 100%;
100      position: absolute;
101      z-index: 10;
102      left: 0px;
103      top: 0px;
104      background-color: rgba(255,255,255,0.75);
105      opacity: 1;
106      display: none;
107    }
108
109    #processingMessage {
110      position: absolute;
111      padding: 10px;
112      border-radius: 10px;
113      margin-left: 50%;
114      width: 380px;
115      height: 105px;
116      left: -250px; top: 200px;
117      background-color: rgba(255,255,255,1);
118      box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
119    }
120
121    #processingMessage p {
122      font-size: 18px;
123      text-align: center;
124      font-family:
125      sans-serif;
126      font-weight: bold;
127      color: #666;
128    }
129      </style>
130     
131      <div id="processing">
132    <div id="processingMessage">
133      <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
134        Heading
135      </h2>
136      <p id="processingText">text</p>
137    </div>
138      </div>
139    </div>
140
141  </xsl:template>
142
143  <!-- *** -->
144  <!-- * Discovery -->
145  <!-- *** -->
146
147  <xsl:template name="discovery-block">
148   
149    <div id="fingerprint-turnstyle">
150
151      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
152    Discovery: <xsl:call-template name="choose-title"/>
153      </div>
154
155      <div class="documenttext" style="display: none;">
156    <xsl:call-template name="fingerprintMetadataBlock" />
157      </div>
158
159    </div>
160
161    <script>
162      <xsl:text disable-output-escaping="yes">
163    $(function(){
164    transformToTurnstyleBlock("fingerprint");
165    });
166      </xsl:text>
167    </script>
168   
169  </xsl:template>
170
171  <xsl:template name="fingerprintMetadataBlock">
172   
173    <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
174    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
175
176
177    <xsl:variable name="musicbrainzsongid">
178      <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
179    </xsl:variable>
180
181    <xsl:variable name="musicbrainzalbumid">
182      <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
183    </xsl:variable>
184
185    <xsl:variable name="musicbrainzartistid">
186      <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
187    </xsl:variable>
188   
189    <xsl:variable name="lastfmtrackurl">
190      <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
191    </xsl:variable>
192
193    <xsl:variable name="echonestsongid">
194      <gsf:metadata name="dc.Identifier.echonestsongid"/>
195    </xsl:variable>
196   
197      <table class="metadata-stripes">
198    <tbody>
199      <tr>
200        <td>
201          Title
202        </td>
203        <td>
204          <gsf:metadata name="dc.Title"/>
205        </td>
206      </tr>
207     
208      <tr>
209        <td>Album Title</td>
210        <td><gsf:metadata name="dc.Title.albumtitle"/></td>
211      </tr>
212     
213      <tr>
214        <td>Artist</td>
215        <td><gsf:metadata name="dc.Creator"/></td>
216      </tr>
217     
218      <tr valign="top">
219        <td>Artist Summary</td>
220        <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td>
221      </tr>
222     
223<!--
224dc.Identifier.echonestsongid
225dc.Identifier.echonestartistid
226
227dc.Identifier.lastfmtrackurl
228dc.Identifier.lastfmalbumurl
229dc.Identifier.lastfmartisturl
230
231//dc.Identifier
232dc.Identifier.musicbrainzalbumid
233dc.Identifier.musicbrainzartistid
234dc.Identifier.musicbrainzsongid
235dc.Identifier.playmeartistid
236
237-->
238
239      <tr>
240        <td colspan="2">
241
242          <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
243        <xsl:if test="position() &lt;= 6">
244          <a target="_blank">
245            <xsl:attribute name='href'>
246              <xsl:value-of disable-output-escaping="yes" select="."/>
247            </xsl:attribute>
248           
249            <img width="150">
250              <xsl:attribute name='src'>
251            <xsl:value-of disable-output-escaping="yes" select="."/>
252              </xsl:attribute>
253            </img>
254          </a>
255        </xsl:if>
256          </xsl:for-each>
257        </td>
258      </tr>
259
260      <tr>
261        <td>Linked Data</td>
262        <td>
263          <!--
264          <gsf:metadata name="dc.Identifier"/><br />
265          -->
266
267          <table>
268        <tr>
269          <td>
270            MusicBrainz song id:
271          </td>
272          <td>
273            <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz">
274              <xsl:copy-of select="$musicbrainzsongid"/>
275            </a>
276          </td>
277        </tr>
278
279        <tr>
280          <td>
281            MusicBrainz album id:
282          </td>
283          <td>
284            <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz">
285              <xsl:copy-of select="$musicbrainzalbumid"/>
286            </a>
287          </td>
288        </tr>
289
290        <tr>
291          <td>
292            MusicBrainz artist id:
293          </td>
294          <td>
295            <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz">
296              <xsl:copy-of select="$musicbrainzartistid"/>
297            </a>
298          </td>
299        </tr>
300        <tr>
301          <td colspan="2">       
302            <a href="{$lastfmtrackurl}" target="#lastfm">
303              <xsl:copy-of select="$lastfmtrackurl"/>
304            </a>
305          </td>
306        </tr>
307        <tr>
308          <td>
309            EchoNest song id:
310          </td>
311          <td>
312            <a href="{$echonestsongid}" target="#echonestsongid">
313              <xsl:copy-of select="$echonestsongid"/>
314            </a>
315          </td>
316        </tr>
317          </table>
318
319        </td>
320      </tr>
321     
322
323    </tbody>
324      </table>
325  </xsl:template>
326
327
328
329  <!-- *** -->
330  <!-- * Audio Player -->
331  <!-- *** -->
332
333
334  <xsl:template name="js-mad-header">
335
336        <gsf:script src="ext/js-mad/script/mad.js"/>
337        <gsf:script src="ext/js-mad/script/rq_table.js"/>
338        <gsf:script src="ext/js-mad/script/imdct_s.js"/>
339        <gsf:script src="ext/js-mad/script/huffman.js"/>
340        <gsf:script src="ext/js-mad/script/bit.js"/>
341        <gsf:script src="ext/js-mad/script/stream.js"/>
342        <gsf:script src="ext/js-mad/script/layer3.js"/>
343        <gsf:script src="ext/js-mad/script/frame.js"/>
344        <gsf:script src="ext/js-mad/script/synth.js"/>
345       
346        <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
347        <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
348        <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
349        <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
350        <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
351
352        <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
353        <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
354        <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
355        <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
356        <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
357
358        <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
359        <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
360        <gsf:script src="ext/js-mad/script/mp3file.js"/>
361       
362<!--
363        <gsf:script src="ext/js-mad/script/player.js"/>
364-->
365
366        <gsf:script src="ext/js-mad/script/sink.min.js"/>
367
368<!--
369        <gsf:script src="ext/js-mad/script/require.js"/>
370-->
371<!--
372        <gsf:script src="ext/js-mad/script/sink-light.js"/>
373-->
374
375        <gsf:script src="ext/js-mad/script/browser-detect.js"/>
376        <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
377
378  </xsl:template>
379
380
381  <xsl:template name="audio-icon-cache">
382    <div style="display:none;">
383      <!-- pre-load various play/pause images to help with speed of interface update -->
384      <img src="ext/diy-audio-player/images/play32Highlight.png" />
385      <img src="ext/diy-audio-player/images/pause32.png" />
386      <img src="ext/diy-audio-player/images/pause32Highlight.png" />
387      <img src="ext/diy-audio-player/images/play20Highlight.png" />
388      <img src="ext/diy-audio-player/images/stop32.png" />
389      <img src="ext/diy-audio-player/images/stop32Highlight.png" />
390      <img src="ext/diy-audio-player/images/search20Highlight.png" />   
391    </div>
392  </xsl:template>
393
394
395  <!-- *** -->
396  <!-- * Workflow control -->
397  <!-- *** -->
398
399  <xsl:template name="workflow-block">
400    <xsl:variable name="httpCollection">
401      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
402    </xsl:variable>
403
404    <div id="workflow-turnstyle">
405
406      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
407    Workflow
408      </div>
409
410      <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
411   
412<!--
413    <form style="padding-left: 8px;">
414      <span class="vis-heading">Input Selection:</span>
415      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
416      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
417      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
418      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
419    </form>
420    <hr/>
421-->
422
423    <form style="padding-left: 8px; height: 48px;">
424      <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
425
426      <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
427        <option value="0" selected="selected">Chromagram</option>
428        <option value="1" >Dynamic Javascript Mixer</option>
429      </select>
430
431      <div style="float: right;" id="meandre-buttons">
432     
433        <button type="button" id="meandre-run-button" 
434            onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
435          <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
436           width="32"
437           height="32" 
438           XXonmouseover="playHighlightOn(this)"
439           XXonmouseout="playHighlightOff(this)"
440           XXonclick="runThisMeandreFlow(this)"
441           style="vertical-align: middle;"/>
442          Run
443        </button>
444
445        <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
446          <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
447           width="32"
448           height="32" 
449           XXonmouseover="stopHighlightOn(this)"
450           XXonmouseout="stopHighlightOff(this)"
451           XXonclick="stopThisMeandreFlow(this)"
452           style="vertical-align: middle;"/>
453          Stop
454        </button>
455
456<!--
457        <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
458        <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
459-->
460
461      </div>
462
463    </form>
464
465    <style>
466      #meandre-buttons button:hover:enabled {
467        background-color: #CCCC33;
468        color: #FFFFFF;
469      }
470    </style>
471     
472
473    <div style="position: relative;">
474      <iframe id="workbenchFrame"
475          style="width: 100%; height: 400px;" >
476        If you see this, then your browser does not support the iframe element.
477      </iframe>
478
479    </div>
480
481    <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
482    <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
483   
484    <gsf:script>
485      var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
486      var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
487
488      var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
489
490      var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
491      var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
492
493      selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
494     
495      function loadSelectedWorkflow(elem) {           
496          selectedMeandreWorkflowPos = elem.value;
497          selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
498
499        if (selectedMeandreWorkflowPos==1) {
500          $('#jsdynamic-turnstyle').show();
501        }
502        else {
503          $('#jsdynamic-turnstyle').hide();
504        }
505
506        console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");     
507        selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
508
509      }
510    </gsf:script>
511   
512
513
514
515    <div id="jsdynamic-turnstyle" style="display:none">
516     
517      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
518        Dynamic Javascript Meandre Component
519      </div>
520
521      <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
522
523        <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
524          <xsl:text disable-output-escaping="yes">
525
526
527var arrayBinding = new JavaImporter(java.lang.reflect.Array);
528
529var JSDynamicComponent = function() {
530  this.frameCount = 0;
531}
532
533JSDynamicComponent.prototype.executeCallBack = function(cc) {
534
535  with(arrayBinding) {
536
537    if ((this.frameCount % 1000)==0) {
538      print("JSDynamicComponent: " + this.frameCount + "\n");
539    }
540
541    var inputObject = cc.getDataComponentFromInput("input");
542    var rawInput1DArray = inputObject;
543
544    var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
545
546    for (var i=1; i&lt;rawOutput1DArray.length; i++) {
547      var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
548      Array.setDouble(rawOutput1DArray,i,diff);
549    }
550
551    cc.pushDataComponentToOutput("output", rawOutput1DArray);
552
553    this.frameCount++;
554  }
555
556}
557
558var jsDynamicComponent = new JSDynamicComponent();
559
560          </xsl:text>
561        </textarea>
562      </div> <!-- end of Dynamic JS turnstyle block -->
563    </div>
564
565      </div>
566
567    </div>
568
569    <script>
570      <xsl:text disable-output-escaping="yes">
571    $(function(){
572        transformToTurnstyleBlock("workflow");
573        transformToTurnstyleBlock("jsdynamic");
574    });
575      </xsl:text>
576    </script>
577  </xsl:template>
578
579
580  <!-- *** -->
581  <!-- * Structured audio player -->
582  <!-- *** -->
583 
584  <xsl:template name="structuredAudioPlayerBlock">
585
586    <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
587   
588    <div style="background-color: rgb(40%,40%,20%)">
589      <svg xmlns="http://www.w3.org/2000/svg"
590           xmlns:xlink="http://www.w3.org/1999/xlink"
591       version="1.1"
592           id="svgGroundTruthSegments"
593       width="100%" height="24"
594           onLoadXX="svgGTStructuredInit()">
595      </svg>
596    </div>
597   
598    <div style="background-color: rgb(40%,40%,20%)">
599      <svg xmlns="http://www.w3.org/2000/svg"
600           xmlns:xlink="http://www.w3.org/1999/xlink"
601       version="1.1"
602           id="svgContentAnalysisSegments"
603       width="100%" height="24"
604           onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
605      </svg>
606    </div>
607  </xsl:template>
608 
609  <xsl:template name="visualization-mode-block">
610   
611    <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
612
613      <span class="vix-heading">Max Values:</span>
614      <div style="padding-left: 8px">
615    <style>
616      span.mv-fixed { display: inline-block; width: 30pt; }
617    </style>
618    <table width="100%">
619      <tr>
620        <td><span class="mv-fixed" id="freqSpectrumMax"     >0.000</span>(Freq Spectrum)       </td>
621        <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
622        <td><span class="mv-fixed" id="filterBankMax"       >0.000</span>(Filter Bank)         </td>
623        <td><span class="mv-fixed" id="chromaFeaturesMax"   >0.000</span>(Chroma Features)     </td>
624      </tr>
625    </table>
626      </div>
627      <hr/>
628 
629      <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
630    <div style="float: left;">
631      <span class="vis-heading">Visualization:</span>
632<!--
633    <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
634    <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
635-->
636   
637      <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
638      <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
639    </div>
640
641    <div style="float: left; padding-left: 140px;">
642      <span class="vis-heading">Colour Mapping:</span>
643      <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
644      <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
645    </div>
646      </form>
647     
648      <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
649
650<!--
651      <form style="padding-left: 8px;">
652    <span class="vis-heading">Colour Mapping:</span>
653    <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
654    <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
655      </form>
656      <hr/>
657-->
658
659    <form style="padding-left: 8px; padding-bottom: 0px;">
660      <span class="vis-heading">On Pause:</span>
661      <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
662    </form>
663    <hr/>
664
665    </div>
666   
667  </xsl:template>
668
669  <!-- *** -->
670  <!-- * Settings form -->
671  <!-- *** -->
672
673  <xsl:template name="settings-form">
674    <xsl:param name="cgiargYScaleSimImg"/>
675
676    <xsl:variable name="httpCollection">
677      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
678    </xsl:variable>
679
680    <div id="settings-turnstyle" style="margin: 6px;">
681      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
682    Audio Content Search
683      </div>
684      <div class="documenttext" style="display: none;">
685
686
687      <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
688    <input type="hidden" name="a" value="q"/>
689    <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
690    <input type="hidden" name="rt" value="rd"/>
691   
692    <input type="hidden" name="s" value="AudioQuery"/>
693    <input type="hidden" name="c" value="{$collName}"/>
694    <xsl:if test="not(paramList/param[@name='startPage'])">
695      <input type="hidden" name="startPage" value="1"/>
696    </xsl:if>
697    <xsl:choose>
698      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
699        <input type="hidden" name="s1.maxDocs">
700          <xsl:attribute name="value">
701        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
702          </xsl:attribute>
703        </input>
704      </xsl:when>
705      <xsl:otherwise>
706        <input type="hidden" name="s1.maxDocs" value="100"/>
707      </xsl:otherwise>
708    </xsl:choose>
709    <xsl:choose>
710      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
711        <input type="hidden" name="s1.hitsPerPage">
712          <xsl:attribute name="value">
713        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
714          </xsl:attribute>
715        </input>
716      </xsl:when>
717      <xsl:otherwise>
718        <input type="hidden" name="s1.hitsPerPage" value="20"/>
719      </xsl:otherwise>
720    </xsl:choose>
721   
722    <input type="hidden" name="q">
723      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
724    </input>
725   
726   
727    <input type="hidden" name="s1.query">
728<!--
729      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
730-->
731      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
732    </input>
733   
734    <input type="hidden" name="s1.offset" value="0" />
735    <input type="hidden" name="s1.length" value="200" />
736   
737    <div style="font-style: italics;">Start new query @ offset
738    <span id="mysongCurrentPos">0 secs</span>,
739    with excerpt lasting
740   
741    <input type="text" name="mysongWindowDuration" size="4" value="6" />
742    <!--
743        <span id="mysongWindowDuration" class="editable-offset"
744        style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
745    -->
746    secs:
747
748    <input type="submit" value="Search" onclick="preSubmit(this.form);" />
749    </div>
750
751   
752    <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
753      <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
754      <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
755      <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
756      <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>
757      <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
758    </ul>
759   
760      </form>
761
762      <hr/>
763     
764<!--
765      <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
766    <div style="font-style: italics;">
767      Make the scale factor for the y-dimension of the self-similarity
768      image be
769      <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
770             size="3" /> then
771      <input type="button" name="ResizeImage" value="Resize Image"
772             onclick="javascript:rescaleImage()" />
773     
774    </div>
775      </form>
776     
777      <hr/>
778-->
779
780      <!-- **** currently not displayed -->
781
782      <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
783    <div style="font-style: italics;">
784     
785      Show the song structure automatically computed by analyzing
786      the audio data using algorithm
787
788      <select id="caaMenu" name="caAlgorithm">
789        <option value="1">BV1</option>
790        <option value="2">BV2</option>
791        <option value="3">GP7</option>
792        <option value="4">MHRAG2</option>
793        <option value="5">MND1</option>
794        <option value="6">WB1</option>
795
796<!--
797        <option value="-1">or hide</option>
798-->
799
800      </select>:
801
802      <input type="button" name="Reload" value="Reload"
803             onclick="updateCAAlgorithm()" />
804
805    </div>
806      </form>
807
808    <script>
809      <xsl:text disable-output-escaping="yes">
810        if (hasStructuredAudio) {
811          var caaMenu = document.getElementById("caaMenu");
812               caaMenu.options[caAlgorithm-1].selected = 1;
813        }
814      </xsl:text>
815    </script>
816     
817
818      </div>
819    </div>
820    <script>
821      <xsl:text disable-output-escaping="yes">
822    $(function(){
823    transformToTurnstyleBlock("settings");
824    });
825      </xsl:text>
826    </script>
827
828  </xsl:template>
829
830
831  <!-- *** -->
832  <!-- * Computed Data -->
833  <!-- *** -->
834
835
836  <xsl:template name="computed-data">
837    <xsl:param name="httpCollection"/>
838    <xsl:param name="assocFilePath"/>
839
840    <div id="computed-turnstyle" style="margin: 6px;">
841      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
842    Computed Data
843      </div>
844
845      <div class="documenttext" style="display: none;">
846    <table class="metadata-stripes" style="width: 100%">
847      <tbody>
848        <tr>
849          <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
850        </tr>
851       
852        <tr>
853          <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
854        </tr>
855       
856      </tbody>
857    </table>
858      </div>
859    </div>
860
861    <gsf:script>
862    $(function(){
863      transformToTurnstyleBlock("computed");
864    });
865    </gsf:script>
866
867
868    <div id="original-turnstyle" style="margin: 6px;">
869      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
870    The Original Audio
871      </div>
872
873      <div style="display: none;">
874
875    <div>
876      <audio style="width: 100%;" id="original-audio" controls="controls" >
877        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
878        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.mp3" />
879        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav" />
880      </audio>
881    </div>
882
883      </div>
884    </div>
885
886    <gsf:script>
887    $(function(){
888      transformToTurnstyleBlock("original");
889    });
890    </gsf:script>
891
892
893  </xsl:template>
894
895</xsl:stylesheet>
Note: See TracBrowser for help on using the browser.