Changeset 29895 for main/trunk/model-sites-dev

Timestamp:

2015-05-18T23:08:07+12:00 (9 years ago)

Author:

davidb

Message:

Development of Piano-hero element. 90 degree turn and scale based on interface name. Starting improvment on musicbrainz metadata

Location:

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled

Files:

• etc/collectionConfig.xml (modified) (1 diff)
• js/game-on.js (modified) (9 diffs)
• style/media-player.css (modified) (1 diff)
• transform/pages/document.xsl (modified) (7 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml

@@ -295 +295 @@
     <gsf:link src="{$httpCollection}/style/jtab-helper.css"/>
     <gsf:script src="{$httpCollection}/js/raphael.js"/>
+    <gsf:script src="{$httpCollection}/js/raphael.group.js"/>
     <gsf:script src="{$httpCollection}/js/jtab.js"/>
 <!--

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js

@@ -4 +4 @@
 
 var goPaper = null;
+var go_top_level_group = null;;
 
 var go_paper_x_dim = 920;
@@ -13 +14 @@
 var num_midi_pitches = 128;
 
+var group_x_scale;
+var group_y_scale;
+var group_rotate;
+var group_x_trans;
+var group_y_trans;
 
 function updateGameOnCurrentTimeline()
 {
     gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_x_dim;
+
+    var gameOnCurrentTimeYPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_y_dim;
     //console.log("*** x pos = " + gameOnCurrentTimeXPos);
 
     gameOnCurrentTimelineRect.attr({x: gameOnCurrentTimeXPos});
+
+    if (gs.xsltParams.interface_name == "respooled") {
+    go_top_level_group.translate(group_x_scale*go_paper_y_dim, go_paper_y_dim+(gameOnCurrentTimeYPos * group_x_scale * Math.abs(group_y_scale)));
+    }
+
 }
 
@@ -149 +162 @@
 
     goPaper.clear();
+    
+    // Clear takes out any previous group element, so need to be regenerated
+    go_top_level_group = new goPaper.group("gameOnPaper",[]);
 
     if (hasLocalStorage) {
@@ -174 +190 @@
 
         var midi_stats = computeMidiStats(track);
+        console.log("*** midi stats = " + JSON.stringify(midi_stats));
 
         if (midi_stats.min_midi_pitch < min_midi_pitch) {
@@ -206 +223 @@
     //console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
     
-    var raw_midi_range = max_midi_pitch - min_midi_pitch;
+    var raw_midi_range = max_midi_pitch - min_midi_pitch + 1;
     var midi_range = Math.max(4,raw_midi_range); 
     
+    console.log("*** midi_range = " + midi_range);
+
     var midi_y_dim_spacing = go_paper_y_dim / midi_range;
+
 
     for (var i=0; i<atl.length; i++) {
@@ -230 +250 @@
             var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
             var rx_org = startPercTime * go_paper_x_dim;
-            var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing);
+            var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
             
             var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
             var ry_dim = midi_y_dim_spacing;
             
-            var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim);
-            rect.attr({stroke:"black",fill:"#2E52A4"});
+            var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim-0.2);
+            //rect.attr({stroke:"none", strokeWidth:0.2, fill:"#2E52A4"});
+            //rect.attr({stroke:"black",fill:"#2E52A4"});
+            rect.attr({"stroke":"black","stroke-width":0.25, "fill":"#2E52A4"});
+            go_top_level_group.push(rect);
             }
         }
@@ -245 +268 @@
     gameOnCurrentTimelineRect = goPaper.rect(-2,0,1,go_paper_y_dim);
     gameOnCurrentTimelineRect.attr({fill: "red", stroke: "red"});
+    go_top_level_group.push(gameOnCurrentTimelineRect);
+
+    go_top_level_group.scale(group_x_scale,group_y_scale);
+    go_top_level_group.rotate(group_rotate,0,0);
+    //go_top_level_group.translate(group_x_scale*go_paper_y_dim,go_paper_y_dim);
+    go_top_level_group.translate(group_x_trans,group_y_trans);
 }
 
@@ -250 +279 @@
 {
     console.log("initGameOn()");
+
+    if (gs.xsltParams.interface_name == "respooled") {
+    group_x_scale = 2.0;
+    group_y_scale = -5.0;
+    group_rotate  = 90.0;
+
+    group_x_trans = group_x_scale * go_paper_y_dim;
+    group_y_trans = go_paper_y_dim;
+    }
+    else {
+    group_x_scale = 1.0;
+    group_y_scale = 1.0;
+    group_rotate  = 0.0;
+
+    group_x_trans = 0.0;
+    group_y_trans = 0.0;
+    }
 
     goDocStorage = getDocStorage(gs.cgiParams.d);
@@ -263 +309 @@
     goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
     goPaper.canvas.style.backgroundColor = '#FFFFFF';
+
 
     console.log("Browser supports LocalStorage: " + hasLocalStorage);

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css

@@ -82 +82 @@
     border: 0;
 */
+/*
     border: 2px solid black;
+*/
     padding: 2px;
     padding-left: 4px;
     padding-right: 4px;
+
 
 }

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

@@ -219 +219 @@
         <td><gsf:metadata name="dc.Creator"/></td>
       </tr>
+
+      <tr>
+        <td>Released</td>
+        <td><gsf:metadata name="dc.Coverage"/></td>
+      </tr>
       
+<!--
       <tr valign="top">
         <td>Artist Summary</td>
@@ -235 +241 @@
         </td>
       </tr>
+-->
+
       
 <!--
@@ -308 +316 @@
           </td>
           <td>
-            <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
+            <a href="https://musicbrainz.org/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
               <xsl:copy-of select="$musicbrainzartistid"/>
             </a>
           </td>
         </tr>
+<!--
         <tr>
           <td>
@@ -326 +335 @@
           </td>
         </tr>
+-->
+
         <tr>
           <td colspan="2">        
@@ -1318 +1329 @@
   <div id='media-player' style="width: 96%">
 
+    <xsl:if test="$interface_name='dlfm'">
+      <style>
+    .openclose a:visited {
+        color: #ffffff;
+    }
+    .openclose a:link {
+        color: #ffffff;
+    }
+    .openclose a:hover { 
+      color: #000000; 
+    }
+
+      </style>
+    </xsl:if>
+
     <div class="about-bar">
       <div id="about-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
-    About: <xsl:call-template name="choose-title"/>
+
+    <xsl:choose>
+          <xsl:when test="$interface_name='dlfm'">
+        Linked Data: <xsl:call-template name="choose-title"/>
+      </xsl:when>
+      <xsl:otherwise>
+        About: <xsl:call-template name="choose-title"/>
+      </xsl:otherwise>
+    </xsl:choose>
       </div>
 
@@ -1371 +1405 @@
     <input id="progress-bar" type="range" 
            min='0' max='100' step='0.01' value='0' 
+           class="ui-state-default ui-corner-all"
            style="width: 98%"/> <!-- used to be 100% -->
 
@@ -1916 +1951 @@
         $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
 
+        console.log("!!!! forced background colour for F major in Guitar Tab area!!!")
+        $('#builder_6').css("background-color","rgba(46,82,164,0.50)");
       });
     </gsf:script>