Ignore:
Timestamp:
2015-08-04T13:50:35+12:00 (9 years ago)
Author:
davidb
Message:

Development work done in at JCDL

Location:
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl

    r29875 r30093  
    6363<div style="width: 800px; margin-left: auto; margin-right: auto;">
    6464
     65  <xsl:if test="$interface_name='dlfm'">
     66    <style>
     67      .popbanner {
     68        background-color: #DEEDF7;
     69    color: #000;
     70      }
     71    </style>
     72  </xsl:if>
    6573
     74 
    6675  <div class="popbanner">
    6776    <div class="poptitle">
    68       Pop-Up Videos Respooled
     77      Popup Videos Respooled
    6978    </div>
    7079    <div class="popbannersubtext">
    … …  
    7887
    7988
    80 <!--
    81 <div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;">
    82 <table>
     89<xsl:choose>
     90  <xsl:when test="$interface_name='dlfm'">
     91    <p class="about">
     92      Welcome to the Digitial Library for Musicology version of the
     93      <i>Popup Videos Respooled</i> website.  This is a project that
     94      repurposes the <a
     95      href="/greenstone3/respooled-library/collection/popup-video-respooled/page/about">original
     96      Respooled project</a> (designed for a bit of fun), and recasts
     97      it with an interface and functionality more suitable for
     98      supporting musicological study.
     99    </p>
     100  </xsl:when>
     101  <xsl:otherwise>
     102    <p class="about">
     103      Welcome to <i>Popup Videos Respooled</i>, a project that rekindles the
     104      ideas present in the popular music video TV show <i>Pop Up Videos</i>,
     105      a Music TV format devised in the late 1990s that embellishes the shown
     106      content with <i>info nuggets</i> that popup as bubbles and then
     107      disappear, as a music video plays.  Through this website we have
     108      updated and extended the concept, using the open source <a
     109      href="http://www.greenstone.org/greenstone3">Greenstone 3 Digital
     110      Library Software</a> system as a way to organize the set of videos
     111      contained in the site.  The popup information is collated and
     112      displayed as metadata.  We have also introduced a gamification element
     113      to the site, where users can play along with a song using a range of
     114      virtual musical instruments: piano, drum-kit and guitar.
     115    </p>
     116  </xsl:otherwise>
     117</xsl:choose>
    83118
    84   <tr>
    85     <td>
    86        <img src="{$httpPath}/images/firefox-128.png" />
    87     </td>
    88     <td>
    89     <p class="about">
    90       <i><font size="+2">
    91         An experiment with Firefox's Advanced
    92         Audio Processing Extension ...
    93       </font></i>
    94     </p>
     119<p class="about">
     120  Use the search box above to search for content in the digital library, or else
     121  click on the Titles, Artists, or Albums tabs to browser the collection
     122</p>
    95123
    96     <p class="about">
    97       <i><font size="+2">
    98 ... featuring a mash-up of
    99 <a class="mashup" href="http://www.greenstone.org" target="_blank">Greenstone</a>,
    100 <a class="mashup" href="http://www.omras2.org/audioDB" target="_blank">AudioDB</a>, and
    101 <a class="mashup" href="http://seasr.org/meandre/" target="_blank">Meandre</a>.
    102       </font></i>
    103     </p>
     124<xsl:if test="$interface_name='respooled'">
     125  <p class="about">
     126    You might also be interested in the <a
     127    href="/greenstone3/dlfm-library/collection/popup-video-respooled/page/about">alternative
     128    interface</a> to this content, developed for
     129    supporting musicological study.
     130  </p>
     131</xsl:if>
    104132
    105133
    106           <div id="bd-version" style="display:none;" class="about">
    107         <p>
    108           <img src="{$httpPath}/images/warning-icon.png" />
    109             Version of Firefox detected:
    110               <script type="text/javascript">
    111                 document.write(BrowserDetect.version);
    112               </script>
    113         </p>
    114         <p>
    115             You need to upgrade to a more recent version of Firefox
    116             (v4.0 or greater) to access all the audio features of
    117             this demonstration.
    118         </p>
    119           </div>
    120 
    121           <div id="bd-browser" style="display:none;" class="about">
    122 
    123         <p>
    124           <img src="{$httpPath}/images/warning-icon.png" />
    125 Browser detected:
    126           <script type="text/javascript">
    127             document.write(BrowserDetect.browser);
    128           </script>
    129         </p>
    130             <p>You need to access this web-site using Firefox
    131             (v4.0 or greater) to access all the audio features provided.
    132         </p>
    133           </div>
    134 
    135 
    136 
    137 
    138   <script>
    139     <xsl:text disable-output-escaping="yes">
    140 
    141 if (BrowserDetect.browser == "Firefox") {
    142   if (BrowserDetect.version &lt; 4) {
    143     document.getElementById("bd-version").style.display="block";
    144 
    145   }
    146 }
    147 else {
    148   document.getElementById("bd-browser").style.display="block";
    149 
    150 }
    151       </xsl:text>
    152     </script>
    153 
    154 
    155 
    156 
    157     </td>
    158   </tr>
    159 </table>
    160 </div>
    161 -->
    162 
    163 <p class="about">A music DL collection that explores what is possible with only client-side processing.
    164 
    165 
    166 <style>
    167   li { padding-bottom: 10px; }
    168 
    169 </style>
    170 
    171 
    172 <ol>
    173 
    174   <li>
    175     <i>Client-side workflows:</i> the client-side Javascript
    176     processing code is refactored to follow the same methodology as
    177     Meandre components.
    178   </li>
    179 
    180   <li>
    181     <i>Visualization:</i> the
    182     Pre-computed self-similarity heat-maps are dropped from the
    183     collection building process in preference for the same information
    184     being computed through Javascript running in the user's web
    185     browser.
    186   </li>
    187 
    188 
    189   <li>
    190     <i>Annotation:</i> ...
    191 
    192   </li>
    193 </ol>
    194 
    195 </p>
    196 
    197 
     134<xsl:choose>
     135  <xsl:when test="/page/pageRequest/userInformation/@username">
     136      <p class="about">
     137    To incorpoate new videos into the collection, you need to
     138    have the <a href="/greenstone3/Popup_Videos_Respooled.user.js">RespoolMe!</a> User Script installed in your browser
     139      </p>
     140   
     141  </xsl:when>
     142</xsl:choose>
     143 
    198144</div>
    199145

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

    r29980 r30093  
    210210        </td>
    211211      </tr>
     212
    212213     
    213       <tr>
    214         <td>Album Title</td>
    215         <td><gsf:metadata name="dc.Title.albumtitle"/></td>
    216       </tr>
     214          <gsf:switch>
     215            <gsf:metadata name='dc.Title.albumtitle'/>
     216            <gsf:when test='exists'>
     217              <tr>
     218                <td>Album Title</td>
     219                <td><gsf:metadata name="dc.Title.albumtitle"/></td>
     220              </tr>
     221            </gsf:when>
     222          </gsf:switch>
    217223     
    218224      <tr>
    … …  
    221227      </tr>
    222228
    223       <tr>
    224         <td>Released</td>
    225         <td><gsf:metadata name="dc.Coverage"/></td>
    226       </tr>
     229      <gsf:switch>
     230            <gsf:metadata name='dc.Coverage'/>
     231            <gsf:when test='exists'>
     232              <tr>
     233                <td>Released</td>
     234                <td><gsf:metadata name="dc.Coverage"/></td>
     235              </tr>
     236            </gsf:when>
     237          </gsf:switch>
     238
    227239     
    228240<!--
    … …  
    810822                     slide: function() { changeMaxFreq(grapheqR,"R") } };
    811823
    812         var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     824        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
    813825                     slide: function() { changeBandsPerOctave(grapheqL,"L")} };
    814         var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
     826        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5,
    815827                     slide: function() { changeBandsPerOctave(grapheqR,"R")} };
    816828
    … …  
    852864
    853865        var numSliders = grapheq.filters.length;
     866        if (numSliders<8) {
     867           numSliders=8; // Window can't go any smaller than this, due to length of text in title-bar
     868        }
     869       
    854870            var offset = (35 * numSliders) + 12;
    855871        if (side == "L") {
    … …  
    981997      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
    982998   
    983       <table class="inner-control">
     999      <table class="inner-control" style="float: right;">
    9841000    <tr id="bandSlidersL">
    9851001    </tr>
    … …  
    14071423        Your browser does not support the video tag.
    14081424          </video>
     1425          <gsf:div id="trackBank"/>
    14091426
    14101427        </div>
    … …  
    15021519
    15031520
     1521         <div id="create-info-popup" title="Create Overlay">
     1522       <p>Do you want create a new named overlay?</p>
     1523 
     1524       <form>
     1525         <fieldset>
     1526           <label for="name">Name</label>
     1527           <input type="text"
     1528              name="save-info-name" id="create-info-name" value="My Overlay"
     1529              class="text ui-widget-content ui-corner-all"/>           
     1530         </fieldset>
     1531
     1532           <!-- Allow form submission with keyboard without duplicating the dialog button -->
     1533           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
     1534
     1535       </form>
     1536     </div>
     1537
     1538         <div id="delete-info-popup" title="Delete Overlay">
     1539       <p>Are you sure you want to delete the selected overlays?</p>
     1540     </div>
     1541
     1542     <div id="edit-info-popup" title="Edit Overlays">
     1543       <style>
     1544         #infoEditor {
     1545           position: absolute;
     1546           top: 0; right: 0; bottom: 0; left: 0;
     1547         }
     1548       </style>
     1549       <div id="infoEditor"><xsl:comment>Overlay Editor Area</xsl:comment></div>
     1550     </div>
     1551
     1552
    15041553          <div style="color: white;">
    15051554
    1506         <form id="bubForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
     1555        <form id="popForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
    15071556          <fieldset>
    15081557        <legend id="mpm-legend">Popup Layers</legend>
    1509         <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
     1558        <div id="popList"><xsl:comment>pop (popup overlay) list</xsl:comment></div>
     1559
     1560
     1561<!--
     1562        <input type="checkbox" name="PopupTrivia" value="Popup Trivia" />Popup Trivia<br />
    15101563        <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
    15111564        <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
    15121565        <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
     1566        -->
    15131567       
     1568
     1569        <xsl:choose>
     1570          <xsl:when test="/page/pageRequest/userInformation/@username">
     1571
    15141572        <div style="padding: 8px;">
    15151573          <button id="mpm-new-overlay"
    15161574              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1517               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1575              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1576              onclick="return popCreate()">
    15181577            New Layer
    15191578          </button>
    15201579          <button id="mpm-merge-overlay"
    15211580              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1522               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1581              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1582              onclick="return false;">
    15231583            Merge Selected
    15241584          </button>
    15251585          <button id="mpm-split-overlay"
    15261586              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1527               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1587              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1588              onclick="return false;">
    15281589            Split Selected
    15291590          </button>
    15301591          <button id="mpm-edit-overlay" 
    15311592              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1532               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
     1593              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1594              onclick="return popEdit()">
    15331595          Edit Selected
    15341596          </button>
    15351597          <button id="mpm-delete-overlay" 
    15361598              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    1537               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;">
     1599              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
     1600              onclick="return popDelete()">
    15381601          Delete Selected
    15391602          </button>
    15401603        </div>
     1604
     1605          </xsl:when>
     1606        </xsl:choose>
     1607       
    15411608          </fieldset>
    15421609        </form>
    … …  
    15481615        <div id="mpm-div" class="radio-div">
    15491616
     1617          <xsl:choose>
     1618            <xsl:when test="/page/pageRequest/userInformation/@username">
     1619                   
    15501620          <div class="radio-label-combo" style="display:inline-block; width: 32%">
    15511621            <span>
    … …  
    15541624            <label for="mpm-record" class="radio-label">
    15551625              <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
    1556             Lay down new track
     1626            <xsl:choose>
     1627              <xsl:when test="$interface_name='dlfm'">
     1628                Record
     1629              </xsl:when>
     1630              <xsl:otherwise>
     1631                Lay down new track
     1632              </xsl:otherwise>
     1633            </xsl:choose>
    15571634              </span>
    15581635            </label>
    15591636          </div>
    1560 
     1637            </xsl:when>
     1638          </xsl:choose>
     1639         
    15611640          <div class="radio-label-combo" style="display:inline-block; width: 32%">
    15621641            <span>
    … …  
    15651644            <label for="mpm-neutral" class="radio-label">
    15661645              <span style="color: orange;" title="Sit back and relax listening to the video">
    1567             Put into Neutral
     1646            <xsl:choose>
     1647              <xsl:when test="$interface_name='dlfm'">
     1648                Inactive
     1649              </xsl:when>
     1650              <xsl:otherwise>
     1651                Put into Neutral
     1652              </xsl:otherwise>
     1653            </xsl:choose>
    15681654              </span>
    15691655            </label>
    … …  
    15761662            <label for="mpm-game-on" class="radio-label">
    15771663              <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display.  Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
    1578             Game on!
     1664
     1665            <xsl:choose>
     1666              <xsl:when test="$interface_name='dlfm'">
     1667                Play along
     1668              </xsl:when>
     1669              <xsl:otherwise>
     1670                Game on!
     1671              </xsl:otherwise>
     1672            </xsl:choose>
    15791673              </span>
    15801674            </label>
    … …  
    15861680
    15871681
     1682       
    15881683        <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
    15891684          <fieldset>
    15901685        <legend id="pal-legend">Play Along Layers: Game On!</legend>
    15911686        <div id="palList"><xsl:comment>play along list</xsl:comment></div>
     1687
     1688
    15921689       
    15931690        <div style="padding: 8px;">
    … …  
    15971694            Display Selected
    15981695          </button>
    1599           <button id="pal-merge-overlay"   
    1600               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
    1601             Merge Selected
    1602           </button>
    1603           <button id="pal-split-overlay"   
    1604               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
    1605             Split Selected
    1606           </button>
    1607           <button id="pal-edit-overlay"   
    1608               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
    1609               onclick="return palEdit()">
    1610           Edit Selected
    1611           </button>
    1612           <button id="pal-delete-overlay" 
    1613               style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
    1614               onclick="return palDelete()">
    1615           Delete Selected
    1616           </button>
     1696          <xsl:choose>
     1697            <xsl:when test="/page/pageRequest/userInformation/@username">
     1698
     1699              <button id="pal-merge-overlay"   
     1700                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1701                  onclick="return false;">
     1702            Merge Selected
     1703              </button>
     1704              <button id="pal-split-overlay"   
     1705                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1706                  onclick="return false;">
     1707            Split Selected
     1708              </button>
     1709              <button id="pal-edit-overlay"   
     1710                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
     1711                  onclick="return palEdit()">
     1712            Edit Selected
     1713              </button>
     1714              <button id="pal-delete-overlay" 
     1715                  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
     1716                  onclick="return palDelete()">
     1717            Delete Selected
     1718              </button>
     1719            </xsl:when>
     1720          </xsl:choose>
     1721         
    16171722        </div>
     1723
     1724
    16181725          </fieldset>
    16191726        </form>
    16201727
    1621 
     1728       
    16221729      </div>
    16231730
    … …  
    16291736
    16301737    <div class="analysis-bar">
    1631       <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
     1738      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;  z-index: 4; position: relative;">
    16321739
    16331740    <xsl:choose>
    … …  
    16421749
    16431750      <div id="analysis-area" class="documenttext"
    1644        style="display: none; position: absolute: left: 0px; top: 0px;">
     1751       styleXX="display: none; position: absolute: left: 0px; top: 0px;"
     1752       style="display: none; left: 0px; top: 0px; position: relative; z-index: 1;">
    16451753    <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
    1646       <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
     1754      <div id="gameOnPaper" width="100%" height="445" style="position: absolute; top: 50px; "><xsl:comment>filler</xsl:comment></div>
    16471755<!--
    16481756      <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
    … …  
    16561764-->
    16571765    </div>
    1658      
     1766
     1767    <xsl:if test="$interface_name='dlfm'">
     1768
     1769      <div style="padding: 15px; padding-top: 0px;">
     1770        <button class="zoom-in">Zoom In</button>
     1771        <button class="zoom-out">Zoom Out</button>
     1772        <input type="range" class="zoom-range" />
     1773        <button class="reset">Reset</button>
     1774      </div>
     1775    </xsl:if>
     1776   
    16591777      </div>
    16601778    </div>
    … …  
    16961814          <option value="19">Church Organ</option>
    16971815          <option value="24">Acoustic Guitar Nylon</option>
     1816          <!--
    16981817          <option value="30">Distortion Guitar</option>
     1818          -->
    16991819        </select>
    17001820          </div>
Note: See TracChangeset for help on using the changeset viewer.