Changeset 29877 for main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages

Timestamp:

2015-05-14T13:56:53+12:00 (9 years ago)

Author:

davidb

Message:

Work developing a guitar to play, and recording notes on piano when played (with the radio button set to record)

File:

• main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl (modified) (13 diffs)

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

@@ -1381 +1381 @@
     <div class="playlist-bar">
       <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
-    Controls
+    Layer Controls: Create, Edit, View
       </div>
 
@@ -1398 +1398 @@
     </div>
 -->
+
+         <div id="save-recording-popup" title="Save Recording">
+       <p>Do you want to name and save this recording?</p>
+ 
+       <form>
+         <fieldset>
+           <label for="name">Name</label>
+           <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/>
+           
+           <!-- Allow form submission with keyboard without duplicating the dialog button -->
+           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
+         </fieldset>
+       </form>
+     </div>
+
           <div style="color: white;">
 
-        <form style="width:99%;">
+        <form id="mpmForm" style="width:99%;">
           <fieldset>
         <legend id="mpm-legend">Video Player Mode</legend>
@@ -1408 +1423 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-record" name="mpm-radio" />
+              <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
             </span>
             <label for="mpm-record" class="radio-label">
@@ -1419 +1434 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/>
+              <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
             </span>
             <label for="mpm-neutral" class="radio-label">
@@ -1430 +1445 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-game-on" name="mpm-radio" />
+              <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
             </span>
             <label for="mpm-game-on" class="radio-label">
@@ -1443 +1458 @@
         </form>
 
-        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black">
+        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
           <fieldset>
         <legend id="mpm-legend">Popup Layers</legend>
@@ -1452 +1467 @@
         
         <div style="padding: 8px;">
-          <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+          <button id="mpm-merge-overlay" 
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
             Merge Selected
           </button>
-          <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+          <button id="mpm-split-overlay" 
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
             Split Selected
           </button>
-          <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
+          <button id="mpm-edit-overlay"  
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
           Edit Selected
           </button>
@@ -1561 +1582 @@
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
-        font-size: 150%;
+        font-size: 110%;
         color: #888888;
         pointer-events: onone;
@@ -1571 +1592 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="202" height="204"
+          <img style="position: relative;" width="148" height="148"
                src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
           <div class="drumcontainer" style="color: #555555">
@@ -1580 +1601 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="197" height="192" 
-              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
+          <img style="position: relative;" width="148" height="144" 
+              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
           <div class="drumcontainer" >
             &lt;Shift-B&gt;
@@ -1589 +1610 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;"  width="197" height="192" 
-               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
+          <img style="position: relative;"  width="167" height="163" 
+               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
           <div class="drumcontainer" >
             &lt;Shift-N&gt;
@@ -1605 +1626 @@
         </div>
           </div>
-          <br />
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="240" height="234" 
+          <img style="position: relative;" width="216" height="211" 
                src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
           <div class="drumcontainer" >
@@ -1623 +1643 @@
     <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
           <div style="color: white;">
-        Guitar area
+        <div id="jamWrapper">
+          <div id="jamStage">
+        <xsl:comment><!--jamStage--></xsl:comment>
+          </div>
+          <div id="jamPlate">
+        <xsl:comment><!--jamPlate--></xsl:comment>
+          </div>
+          <canvas id="jamStrings" width="750px" height="200px">
+        Your browser does not support the Canvas element
+          </canvas>
+        </div>
       </div>
     </div>