Changeset 29942 for main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js

Timestamp:

2015-06-01T09:59:31+12:00 (9 years ago)

Author:

davidb

Message:

Hitting drum image annimated with CSS3. Guitar now has a custom chord section and the strings on the jam-guitar tied to play the selected chord.

File:

• main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js (modified) (6 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js

@@ +1 @@
+"use strict";
+
 // Script derived from Chrome Jam
 
@@ -236 +238 @@
     this._strumForce = 5;
     this._strumDuration = 100;
-    MIDI.noteOn(0, this._midiPitch, 40);
-    console.log("*** Setting Jam guitar strumForce = 5");
-
+    if (this._midiPitch>=0) {
+      MIDI.noteOn(0, this._midiPitch, 40);
+      console.log("*** Setting Jam guitar strumForce = 5");
+    }
 };
 
@@ -260 +263 @@
     else if (this._strumDuration == 0) {
     this._strumDuration = -1;
-    console.log("*** setting strumDuration = 0");
-    MIDI.noteOff(0, this._midiPitch, 0);
+    if (this._midiPitch>=0) {
+        console.log("*** setting strumDuration = 0");
+        MIDI.noteOff(0, this._midiPitch, 0);
+    }
     }
 };
@@ -283 +288 @@
 
 //var jamMidiStringPitches = [ 60, 64, 67, 72, 76, 79 ];
-var jamMidiStringPitches = [ 48, 52, 55, 60, 64, 67 ];
+//var jamMidiStringPitches = [ 48, 52, 55, 60, 64, 67 ];
+// E   A   D   G   B   E
+// 52, 57, 62, 67, 71, 76
+var jamMidiStringPitches = [ 52, 57, 62, 67, 71, 76 ];
 
 StringInstrument.prototype.create = function() {
@@ -295 +303 @@
 };
 
+StringInstrument.prototype.setStringFret = function(spos,fbase, fpos) {
+
+    var s = this.strings[spos];
+    if (fpos>=0) {
+      s._midiPitch = jamMidiStringPitches[spos] + fbase + fpos;
+    }
+    else {
+      s._midiPitch = -1;
+    }
+
+};
+
+
+
 var lastTime = 0;
 
@@ -318 +340 @@
 };
 
+var guitar = null;
 $(document).ready(function() {
-    var guitar = new StringInstrument("jamStage", "jamStrings", 6);
+    console.log("**** creating guitar");
+    guitar = new StringInstrument("jamStage", "jamStrings", 6);
 });
+
+var jamLineupLen = 17;
+
+var jam_chords = { 'maj': [ 'C', 'C#' ,'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab',' A', 'A#', 'Bb', 'B'],
+           'min': [ 'Cm','C#m','Dbm','Dm','D#m','Ebm','Em','Fm','F#m','Gbm','Gm','G#m','Abm','Am','A#m','Bbm','Bm'],
+           'cus': [ 'Dsus4' ],
+           'cus-skip': {"1":true,"4":true,"8":true,"11":true,"14":true}
+         };
+
+var cgc_mode = null; // cgc => 'current guitar chord'
+var cgc_id = null;
+
+
+function whitespaceTidyUp(str)
+{
+    if (str) {
+    str = str.replace(/^\s+/,"").replace(/\s+$/,"");
+    }
+
+    return str;
+}
+
+
+function chordChange(bid) {
+        
+    console.log("chordChange(" +bid + ")");
+    if (cgc_id != null) {
+    $('#offscreen-jtab-chord-'+cgc_id).css("background-color","#FFFFFF");
+    }
+    cgc_id = bid;
+    $('#offscreen-jtab-chord-'+cgc_id).css("background-color","rgba(46,82,164,0.50)");
+    
+    var cgc_code = whitespaceTidyUp($('#offscreen-jtab-chord-'+cgc_id+'>div>svg>text>tspan').html());
+    console.log("*** clicked on guitar chord = " + cgc_code);
+    
+    var cgc_data = jtab.Chords[cgc_code][0];
+    var cgc_base_fret = cgc_data[0];
+    //var cgc_string_frets = [];
+    for (var i=1; i<=6; i++) {
+    var cgc_string_fret_pos = cgc_data[i][0]; // pick out the fret position
+    //cgc_string_frets.push(cgc_string_fret_pos); // pick out the fret position
+    guitar.setStringFret(i-1,cgc_base_fret,cgc_string_fret_pos);
+    }
+    
+    //console.log("*** strings = " + JSON.stringify(cgc_string_frets));
+}
+
+
+
+function scaleJTab(pos)
+{
+
+    // ... and scale the newly rendered element down
+    var $tab_svg = $('#offscreen-jtab-chord-'+pos+'>div>svg');
+    $tab_svg.attr("width", "58"); // go thinner than 'natural' width of 69 (for a height of 59)
+    $tab_svg.attr("height","59");
+    // True box is 0 0 138 118, but shaving off values so not so much white-space
+    $tab_svg[0].setAttribute("viewBox","20 0 90 118"); // W3C DOM way to avoid jquery lower-casing 'viewBox' into 'viewbox'
+    $tab_svg.parent().css("height","59px");
+
+}
+
+function setChordLineupMode(mode) {
+    cgc_mode = mode;
+
+    if (mode == "cus") {
+    $('#addCustomChord').show({effect: "fade", duration: 400});
+    }
+    else {
+    $('#addCustomChord').hide({effect: "fade", duration: 300});
+    }
+
+    var lineup = jam_chords[mode];
+    var lineup_len = lineup.length;
+
+    var lineup_skip = jam_chords[mode+"-skip"];
+
+
+    for (var i=0; i<jamLineupLen; i++) {
+
+    var active_div_id = '#offscreen-jtab-chord-'+i;
+    
+    if ((i<lineup_len) && 
+        (!lineup_skip || (lineup_skip && !lineup_skip[""+i]))) {
+        console.log("*** lineup_skip = " + lineup_skip);
+        if (lineup_skip) {
+        console.log("*** lineup_skip lookup = " + lineup_skip[""+i]);
+        }
+        jtab.render($(active_div_id),lineup[i]);
+
+        scaleJTab(i);
+    }
+    else {
+        // make empty
+        jtab.render($(active_div_id).empty());
+    }
+
+    }
+
+    if (cgc_id != null) {
+    chordChange(cgc_id);
+    }
+}
+
+
+
+function addCustomChord() {
+
+
+    var custom_lineup = jam_chords['cus'];
+    var custom_lineup_len = custom_lineup.length;
+
+    var custom_lineup_skip = jam_chords['cus-skip'];
+
+
+    var chord_text = whitespaceTidyUp($('#addCustomChordText').val());
+
+    if (chord_text) {   
+    // check the chord exists ...
+    if (jtab.Chords[chord_text]) {
+        // check there is space to add the chord ...
+
+        var custom_pos = null;
+        if (custom_lineup_len < jamLineupLen) {
+        // append (determin append pos) ...
+
+        custom_pos = custom_lineup_len;
+
+        // ... but need to increment one higher, if in a skip position
+        if (custom_lineup_skip["" + custom_pos]) {
+            custom_pos++;
+        }
+
+        custom_lineup[custom_pos] = chord_text;
+
+        }
+        else {
+        //replace the one that is currently highlighted
+        custom_pos = cgc_id;
+        custom_lineup[custom_pos] = chord_text;
+        }
+        
+        jtab.render($('#offscreen-jtab-chord-'+custom_pos),chord_text);
+        scaleJTab(custom_pos);
+
+        // update local storage under this doc-id
+    }
+
+
+    }
+
+
+}