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

Revision 28747, 30.7 KB (checked in by davidb, 6 years ago)

Mime type change to help with future diffs. Could be some other changes, but until the svn property is set, hard to see what they might be

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