- Timestamp:
- 2015-06-01T09:59:31+12:00 (9 years ago)
- Location:
- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
- Files:
-
- 2 edited
-
js/jam-guitar.js (modified) (6 diffs)
-
transform/pages/document.xsl (modified) (12 diffs)
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js
r29878 r29942 1 "use strict"; 2 1 3 // Script derived from Chrome Jam 2 4 … … 236 238 this._strumForce = 5; 237 239 this._strumDuration = 100; 238 MIDI.noteOn(0, this._midiPitch, 40); 239 console.log("*** Setting Jam guitar strumForce = 5"); 240 240 if (this._midiPitch>=0) { 241 MIDI.noteOn(0, this._midiPitch, 40); 242 console.log("*** Setting Jam guitar strumForce = 5"); 243 } 241 244 }; 242 245 … … 260 263 else if (this._strumDuration == 0) { 261 264 this._strumDuration = -1; 262 console.log("*** setting strumDuration = 0"); 263 MIDI.noteOff(0, this._midiPitch, 0); 265 if (this._midiPitch>=0) { 266 console.log("*** setting strumDuration = 0"); 267 MIDI.noteOff(0, this._midiPitch, 0); 268 } 264 269 } 265 270 }; … … 283 288 284 289 //var jamMidiStringPitches = [ 60, 64, 67, 72, 76, 79 ]; 285 var jamMidiStringPitches = [ 48, 52, 55, 60, 64, 67 ]; 290 //var jamMidiStringPitches = [ 48, 52, 55, 60, 64, 67 ]; 291 // E A D G B E 292 // 52, 57, 62, 67, 71, 76 293 var jamMidiStringPitches = [ 52, 57, 62, 67, 71, 76 ]; 286 294 287 295 StringInstrument.prototype.create = function() { … … 295 303 }; 296 304 305 StringInstrument.prototype.setStringFret = function(spos,fbase, fpos) { 306 307 var s = this.strings[spos]; 308 if (fpos>=0) { 309 s._midiPitch = jamMidiStringPitches[spos] + fbase + fpos; 310 } 311 else { 312 s._midiPitch = -1; 313 } 314 315 }; 316 317 318 297 319 var lastTime = 0; 298 320 … … 318 340 }; 319 341 342 var guitar = null; 320 343 $(document).ready(function() { 321 var guitar = new StringInstrument("jamStage", "jamStrings", 6); 344 console.log("**** creating guitar"); 345 guitar = new StringInstrument("jamStage", "jamStrings", 6); 322 346 }); 347 348 var jamLineupLen = 17; 349 350 var jam_chords = { 'maj': [ 'C', 'C#' ,'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab',' A', 'A#', 'Bb', 'B'], 351 'min': [ 'Cm','C#m','Dbm','Dm','D#m','Ebm','Em','Fm','F#m','Gbm','Gm','G#m','Abm','Am','A#m','Bbm','Bm'], 352 'cus': [ 'Dsus4' ], 353 'cus-skip': {"1":true,"4":true,"8":true,"11":true,"14":true} 354 }; 355 356 var cgc_mode = null; // cgc => 'current guitar chord' 357 var cgc_id = null; 358 359 360 function whitespaceTidyUp(str) 361 { 362 if (str) { 363 str = str.replace(/^\s+/,"").replace(/\s+$/,""); 364 } 365 366 return str; 367 } 368 369 370 function chordChange(bid) { 371 372 console.log("chordChange(" +bid + ")"); 373 if (cgc_id != null) { 374 $('#offscreen-jtab-chord-'+cgc_id).css("background-color","#FFFFFF"); 375 } 376 cgc_id = bid; 377 $('#offscreen-jtab-chord-'+cgc_id).css("background-color","rgba(46,82,164,0.50)"); 378 379 var cgc_code = whitespaceTidyUp($('#offscreen-jtab-chord-'+cgc_id+'>div>svg>text>tspan').html()); 380 console.log("*** clicked on guitar chord = " + cgc_code); 381 382 var cgc_data = jtab.Chords[cgc_code][0]; 383 var cgc_base_fret = cgc_data[0]; 384 //var cgc_string_frets = []; 385 for (var i=1; i<=6; i++) { 386 var cgc_string_fret_pos = cgc_data[i][0]; // pick out the fret position 387 //cgc_string_frets.push(cgc_string_fret_pos); // pick out the fret position 388 guitar.setStringFret(i-1,cgc_base_fret,cgc_string_fret_pos); 389 } 390 391 //console.log("*** strings = " + JSON.stringify(cgc_string_frets)); 392 } 393 394 395 396 function scaleJTab(pos) 397 { 398 399 // ... and scale the newly rendered element down 400 var $tab_svg = $('#offscreen-jtab-chord-'+pos+'>div>svg'); 401 $tab_svg.attr("width", "58"); // go thinner than 'natural' width of 69 (for a height of 59) 402 $tab_svg.attr("height","59"); 403 // True box is 0 0 138 118, but shaving off values so not so much white-space 404 $tab_svg[0].setAttribute("viewBox","20 0 90 118"); // W3C DOM way to avoid jquery lower-casing 'viewBox' into 'viewbox' 405 $tab_svg.parent().css("height","59px"); 406 407 } 408 409 function setChordLineupMode(mode) { 410 cgc_mode = mode; 411 412 if (mode == "cus") { 413 $('#addCustomChord').show({effect: "fade", duration: 400}); 414 } 415 else { 416 $('#addCustomChord').hide({effect: "fade", duration: 300}); 417 } 418 419 var lineup = jam_chords[mode]; 420 var lineup_len = lineup.length; 421 422 var lineup_skip = jam_chords[mode+"-skip"]; 423 424 425 for (var i=0; i<jamLineupLen; i++) { 426 427 var active_div_id = '#offscreen-jtab-chord-'+i; 428 429 if ((i<lineup_len) && 430 (!lineup_skip || (lineup_skip && !lineup_skip[""+i]))) { 431 console.log("*** lineup_skip = " + lineup_skip); 432 if (lineup_skip) { 433 console.log("*** lineup_skip lookup = " + lineup_skip[""+i]); 434 } 435 jtab.render($(active_div_id),lineup[i]); 436 437 scaleJTab(i); 438 } 439 else { 440 // make empty 441 jtab.render($(active_div_id).empty()); 442 } 443 444 } 445 446 if (cgc_id != null) { 447 chordChange(cgc_id); 448 } 449 } 450 451 452 453 function addCustomChord() { 454 455 456 var custom_lineup = jam_chords['cus']; 457 var custom_lineup_len = custom_lineup.length; 458 459 var custom_lineup_skip = jam_chords['cus-skip']; 460 461 462 var chord_text = whitespaceTidyUp($('#addCustomChordText').val()); 463 464 if (chord_text) { 465 // check the chord exists ... 466 if (jtab.Chords[chord_text]) { 467 // check there is space to add the chord ... 468 469 var custom_pos = null; 470 if (custom_lineup_len < jamLineupLen) { 471 // append (determin append pos) ... 472 473 custom_pos = custom_lineup_len; 474 475 // ... but need to increment one higher, if in a skip position 476 if (custom_lineup_skip["" + custom_pos]) { 477 custom_pos++; 478 } 479 480 custom_lineup[custom_pos] = chord_text; 481 482 } 483 else { 484 //replace the one that is currently highlighted 485 custom_pos = cgc_id; 486 custom_lineup[custom_pos] = chord_text; 487 } 488 489 jtab.render($('#offscreen-jtab-chord-'+custom_pos),chord_text); 490 scaleJTab(custom_pos); 491 492 // update local storage under this doc-id 493 } 494 495 496 } 497 498 499 } -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl
r29940 r29942 1758 1758 @-webkit-keyframes drumHit { 1759 1759 0% { background-size: 100%;} 1760 10% { background-size: 105%; }1761 30% { background-size: 103%; }1760 10% { background-size: 95%; } 1761 30% { background-size: 97%; } 1762 1762 50% { background-size: 100%;} 1763 60% { background-size: 102%; }1763 60% { background-size: 98%; } 1764 1764 70% { background-size: 100%;} 1765 80% { background-size: 101%; }1765 80% { background-size: 99%; } 1766 1766 100% { background-size: 100%;} 1767 1767 } … … 1769 1769 @-moz-keyframes drumHit { 1770 1770 0% { background-size: 100%;} 1771 10% { background-size: 105%; }1772 30% { background-size: 103%; }1771 10% { background-size: 95%; } 1772 30% { background-size: 97%; } 1773 1773 50% { background-size: 100%;} 1774 60% { background-size: 102%; }1774 60% { background-size: 98%; } 1775 1775 70% { background-size: 100%;} 1776 80% { background-size: 101%; }1776 80% { background-size: 99%; } 1777 1777 100% { background-size: 100%;} 1778 1778 } … … 1780 1780 @-o-keyframes drumHit { 1781 1781 0% { background-size: 100%;} 1782 10% { background-size: 105%; }1783 30% { background-size: 103%; }1782 10% { background-size: 95%; } 1783 30% { background-size: 97%; } 1784 1784 50% { background-size: 100%;} 1785 60% { background-size: 102%; }1785 60% { background-size: 98%; } 1786 1786 70% { background-size: 100%;} 1787 80% { background-size: 101%; }1787 80% { background-size: 99%; } 1788 1788 100% { background-size: 100%;} 1789 1789 } … … 1791 1791 @-ms-keyframes drumHit { 1792 1792 0% { background-size: 100%;} 1793 10% { background-size: 105%; }1794 30% { background-size: 103%; }1793 10% { background-size: 95%; } 1794 30% { background-size: 97%; } 1795 1795 50% { background-size: 100%;} 1796 60% { background-size: 102%; }1796 60% { background-size: 98%; } 1797 1797 70% { background-size: 100%;} 1798 80% { background-size: 101%; }1798 80% { background-size: 99%; } 1799 1799 100% { background-size: 100%;} 1800 1800 } … … 1889 1889 1890 1890 <div style="position: relative; background-color: white;"> 1891 <div style="display:inline-block; width: 150px; height: 200px;">1892 <form style="position: absolute; top: 60px; left: 10px;">1891 <div style="display:inline-block; width: 150px; height: 130px;"> 1892 <form style="position: absolute; top: 10px; leftXX: 10px;"> 1893 1893 1894 1894 <fieldset> … … 1899 1899 <div class="radio-label-combo"> 1900 1900 <span> 1901 <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode( )" value="Maj"1901 <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode('maj')" value="Maj" 1902 1902 checked="checked"/> 1903 1903 </span> … … 1911 1911 <div class="radio-label-combo"> 1912 1912 <span> 1913 <input type="radio" id="clm-m aj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/>1913 <input type="radio" id="clm-min" name="clm-radio" onchange="setChordLineupMode('min')" value="Min"/> 1914 1914 </span> 1915 <label for="clm-m aj" class="radio-label">1915 <label for="clm-min" class="radio-label"> 1916 1916 <span> 1917 1917 Minor … … 1919 1919 </label> 1920 1920 </div> 1921 1922 <div class="radio-label-combo"> 1923 <span> 1924 <input type="radio" id="clm-cus" name="clm-radio" onchange="setChordLineupMode('cus')" value="Cus"/> 1925 </span> 1926 <label for="clm-cus" class="radio-label"> 1927 <span> 1928 Custom 1929 </span> 1930 </label> 1931 </div> 1932 1921 1933 </div> 1922 1934 </fieldset> … … 1924 1936 </div> 1925 1937 1938 <!-- 1926 1939 <div id="mytab" style="display:inline-block; height: 160px; width: 780px;"> 1927 1940 <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%"> 1928 <g id="scaled-mytab-group" transform="scale(0. 5,0.6)">1941 <g id="scaled-mytab-group" transform="scale(0.45,0.55)"> 1929 1942 <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject> 1930 1943 </g> 1931 1944 </svg> 1932 1945 </div> 1946 --> 1947 1948 1949 <gsf:div id="mytab" style="display:inline-block; heightXX: 130px; width: 780px;"> 1950 <gsf:div id="scaled-mytab" widthXX="2000px" heightXX="300px"> 1951 1952 1953 <!-- 1954 <gsf:div id="offscreen-jtab-chord-0" class="chordLineupBlock"/> 1955 1956 <div class="chordLineupBlock"> 1957 <gsf:div id="offscreen-jtab-chord-1"/> 1958 <gsf:div id="offscreen-jtab-chord-2"/> 1959 </div> 1960 1961 <gsf:div id="offscreen-jtab-chord-3" class="chordLineupBlock"/> 1962 1963 <div class="chordLineupBlock"> 1964 <gsf:div id="offscreen-jtab-chord-4"/> 1965 <gsf:div id="offscreen-jtab-chord-5"/> 1966 </div> 1967 1968 <gsf:div id="offscreen-jtab-chord-6" class="chordLineupBlock"/> 1969 <gsf:div id="offscreen-jtab-chord-7" class="chordLineupBlock"/> 1970 1971 <div class="chordLineupBlock"> 1972 <gsf:div id="offscreen-jtab-chord-8"/> 1973 <gsf:div id="offscreen-jtab-chord-9"/> 1974 </div> 1975 1976 <gsf:div id="offscreen-jtab-chord-10" class="chordLineupBlock"/> 1977 1978 <div class="chordLineupBlock"> 1979 <gsf:div id="offscreen-jtab-chord-11"/> 1980 <gsf:div id="offscreen-jtab-chord-12"/> 1981 </div> 1982 1983 <gsf:div id="offscreen-jtab-chord-13" class="chordLineupBlock"/> 1984 1985 <div class="chordLineupBlock"> 1986 <gsf:div id="offscreen-jtab-chord-14"/> 1987 <gsf:div id="offscreen-jtab-chord-15"/> 1988 </div> 1989 1990 <gsf:div id="offscreen-jtab-chord-16" class="chordLineupBlock"/> 1991 --> 1992 1993 </gsf:div> 1994 <gsf:div id="addCustomChord" style="display:none;"> 1995 <input id="addCustomChordText" type="text" size="10"/> 1996 <input type="button" value="add custom chord" onclick="addCustomChord()"/> 1997 </gsf:div> 1998 1999 </gsf:div> 2000 1933 2001 </div> 1934 2002 … … 1940 2008 <div style="position: absolute; top: -300px; background-color: white;"> 1941 2009 <style> 1942 .chordLineup {2010 .chordLineupXX { 1943 2011 -webkit-transform-style: preserve-3d; 1944 2012 -moz-transform-style: preserve-3d; … … 1950 2018 } 1951 2019 1952 .chordLineupBlockVerticalCenter {2020 .chordLineupBlockVerticalCenterXX { 1953 2021 position: relative; 1954 2022 top: 50%; … … 1959 2027 1960 2028 </style> 2029 2030 1961 2031 <div id="offscreen-jtab-chord-lineup"> 1962 1963 <div id="offscreen-jtab-chord-C" class="chordLineupBlock"> 1964 <xsl:comment>filler</xsl:comment> 1965 </div> 1966 2032 2033 <gsf:div id="offscreen-jtab-chord-0" class="chordLineupBlock"/> 2034 1967 2035 <div class="chordLineupBlock"> 1968 <div id="offscreen-jtab-chord-Db"> 1969 <xsl:comment>filler</xsl:comment> 1970 </div> 1971 <div id="offscreen-jtab-chord-Cs"> 1972 <xsl:comment>filler</xsl:comment> 1973 </div> 2036 <gsf:div id="offscreen-jtab-chord-1"/> 2037 <gsf:div id="offscreen-jtab-chord-2"/> 1974 2038 </div> 1975 2039 1976 <div id="offscreen-jtab-chord-D" class="chordLineupBlock"> 1977 <xsl:comment>filler</xsl:comment> 1978 </div> 1979 2040 <gsf:div id="offscreen-jtab-chord-3" class="chordLineupBlock"/> 2041 1980 2042 <div class="chordLineupBlock"> 1981 <div id="offscreen-jtab-chord-Eb"> 1982 <xsl:comment>filler</xsl:comment> 1983 </div> 1984 <div id="offscreen-jtab-chord-Ds"> 1985 <xsl:comment>filler</xsl:comment> 1986 </div> 2043 <gsf:div id="offscreen-jtab-chord-4"/> 2044 <gsf:div id="offscreen-jtab-chord-5"/> 1987 2045 </div> 1988 2046 1989 <div id="offscreen-jtab-chord-E" class="chordLineupBlock"> 1990 <xsl:comment>filler</xsl:comment> 2047 <gsf:div id="offscreen-jtab-chord-6" class="chordLineupBlock"/> 2048 <gsf:div id="offscreen-jtab-chord-7" class="chordLineupBlock"/> 2049 2050 <div class="chordLineupBlock"> 2051 <gsf:div id="offscreen-jtab-chord-8"/> 2052 <gsf:div id="offscreen-jtab-chord-9"/> 2053 </div> 2054 2055 <gsf:div id="offscreen-jtab-chord-10" class="chordLineupBlock"/> 2056 2057 <div class="chordLineupBlock"> 2058 <gsf:div id="offscreen-jtab-chord-11"/> 2059 <gsf:div id="offscreen-jtab-chord-12"/> 1991 2060 </div> 1992 2061 1993 <div id="offscreen-jtab-chord-F" class="chordLineupBlock"> 1994 <xsl:comment>filler</xsl:comment> 2062 <gsf:div id="offscreen-jtab-chord-13" class="chordLineupBlock"/> 2063 2064 <div class="chordLineupBlock"> 2065 <gsf:div id="offscreen-jtab-chord-14"/> 2066 <gsf:div id="offscreen-jtab-chord-15"/> 1995 2067 </div> 1996 2068 1997 <div class="chordLineupBlock"> 1998 <div id="offscreen-jtab-chord-Gb"> 1999 <xsl:comment>filler</xsl:comment> 2000 </div> 2001 <div id="offscreen-jtab-chord-Fs"> 2002 <xsl:comment>filler</xsl:comment> 2003 </div> 2004 </div> 2005 2006 <div id="offscreen-jtab-chord-G" class="chordLineupBlock"> 2007 <xsl:comment>filler</xsl:comment> 2008 </div> 2009 2010 <div class="chordLineupBlock"> 2011 <div id="offscreen-jtab-chord-Ab"> 2012 <xsl:comment>filler</xsl:comment> 2013 </div> 2014 <div id="offscreen-jtab-chord-Gs"> 2015 <xsl:comment>filler</xsl:comment> 2016 </div> 2017 </div> 2018 2019 <div id="offscreen-jtab-chord-A" class="chordLineupBlock"> 2020 <xsl:comment>filler</xsl:comment> 2021 </div> 2022 2023 <div class="chordLineupBlock"> 2024 <div id="offscreen-jtab-chord-Bb"> 2025 <xsl:comment>filler</xsl:comment> 2026 </div> 2027 <div id="offscreen-jtab-chord-As"> 2028 <xsl:comment>filler</xsl:comment> 2029 </div> 2030 </div> 2031 2032 <div id="offscreen-jtab-chord-B" class="chordLineupBlock"> 2033 <xsl:comment>filler</xsl:comment> 2034 </div> 2069 <gsf:div id="offscreen-jtab-chord-16" class="chordLineupBlock"/> 2035 2070 2036 2071 </div> 2037 2072 2073 2074 2038 2075 <gsf:script> 2076 <![CDATA[ 2077 2039 2078 $(document).ready(function() { 2040 2079 2041 jtab.render($('#offscreen-jtab-chord-C') ,'C'); 2042 jtab.render($('#offscreen-jtab-chord-Cs'),'C#'); 2043 jtab.render($('#offscreen-jtab-chord-Db'),'Db'); 2044 jtab.render($('#offscreen-jtab-chord-D') ,'D'); 2045 jtab.render($('#offscreen-jtab-chord-Ds'),'D#'); 2046 jtab.render($('#offscreen-jtab-chord-Eb'),'Eb'); 2047 jtab.render($('#offscreen-jtab-chord-F') ,'F'); 2048 jtab.render($('#offscreen-jtab-chord-Fs'),'F#'); 2049 jtab.render($('#offscreen-jtab-chord-Gb'),'Gb'); 2050 jtab.render($('#offscreen-jtab-chord-G') ,'G'); 2051 jtab.render($('#offscreen-jtab-chord-Gs'),'G#'); 2052 jtab.render($('#offscreen-jtab-chord-Ab'),'Ab'); 2053 jtab.render($('#offscreen-jtab-chord-A') ,'A'); 2054 jtab.render($('#offscreen-jtab-chord-As'),'A#'); 2055 jtab.render($('#offscreen-jtab-chord-Bb'),'Bb'); 2056 jtab.render($('#offscreen-jtab-chord-B') ,'B'); 2080 2081 setChordLineupMode("maj"); 2082 chordChange("0"); 2083 2084 var lineup = jam_chords["maj"]; 2085 2086 // add click handler and scale down in size: one-time operation 2087 2088 for (var i=0; i<lineup.length; i++) { 2089 $('#offscreen-jtab-chord-'+i).click(function(ii) { return function(e) { chordChange(ii) } }(i) ); 2090 2091 var $tab_svg = $('#offscreen-jtab-chord-'+i+'>div>svg'); 2092 $tab_svg.attr("width", "58"); // go thinner than 'natural' width of 69 (for a height of 59) 2093 $tab_svg.attr("height","59"); 2094 // True box is 0 0 138 118, but shaving off values so not so much white-space 2095 $tab_svg[0].setAttribute("viewBox","20 0 90 118"); // W3C DOM way to avoid jquery lower-casing 'viewBox' into 'viewbox' 2096 $tab_svg.parent().css("height","59px"); 2097 //$tab_svg.parent().attr("height","59"); 2098 //$tab_svg.parent().parent().attr("width","60"); 2099 //$tab_svg.parent().parent().attr("height","59"); 2100 2101 } 2102 2103 2104 2105 /* 2106 $('#offscreen-jtab-chord-0').click(function(e) { chordChange('0') }); 2107 $('#offscreen-jtab-chord-1').click(function(e) { chordChange('1') }); 2108 $('#offscreen-jtab-chord-2').click(function(e) { chordChange('2') }); 2109 $('#offscreen-jtab-chord-3').click(function(e) { chordChange('3') }); 2110 $('#offscreen-jtab-chord-4').click(function(e) { chordChange('4') }); 2111 $('#offscreen-jtab-chord-5').click(function(e) { chordChange('5') }); 2112 $('#offscreen-jtab-chord-6').click(function(e) { chordChange('6') }); 2113 $('#offscreen-jtab-chord-7').click(function(e) { chordChange('7') }); 2114 $('#offscreen-jtab-chord-8').click(function(e) { chordChange('8') }); 2115 $('#offscreen-jtab-chord-9').click(function(e) { chordChange('9') }); 2116 $('#offscreen-jtab-chord-10').click(function(e) { chordChange('10') }); 2117 $('#offscreen-jtab-chord-11').click(function(e) { chordChange('11') }); 2118 $('#offscreen-jtab-chord-12').click(function(e) { chordChange('12') }); 2119 $('#offscreen-jtab-chord-13').click(function(e) { chordChange('13') }); 2120 $('#offscreen-jtab-chord-14').click(function(e) { chordChange('14') }); 2121 $('#offscreen-jtab-chord-15').click(function(e) { chordChange('15') }); 2122 $('#offscreen-jtab-chord-16').click(function(e) { chordChange('16') }); 2123 */ 2057 2124 2058 2125 $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup')); 2059 2126 2060 console.log("!!!! forced background colour for F major in Guitar Tab area!!!") 2061 $('#builder_6').css("background-color","rgba(46,82,164,0.50)"); 2127 2062 2128 }); 2129 ]]> 2063 2130 </gsf:script> 2064 2131 </div>
Note:
See TracChangeset
for help on using the changeset viewer.
