From f22e34d474327c5bb2082627ae5ad2a27d798d37 Mon Sep 17 00:00:00 2001 From: jeremy Date: Thu, 21 Aug 2014 09:51:24 -0400 Subject: [PATCH] Fretpainter updates; new look fretboard Fretpainters now update link Widened fretboard and made encapsulating div that won't shrink. Also rounded notespans --- boxfrets.js | 200 ++++++++++++++++++------------------ fretboard.css | 78 +++++++------- fretboard.html | 77 +++++++------- fretboard.sublime-workspace | 158 ++++++++++++++++++++++++++++ 4 files changed, 338 insertions(+), 175 deletions(-) create mode 100644 fretboard.sublime-workspace diff --git a/boxfrets.js b/boxfrets.js index 4e418f5..b9baa50 100644 --- a/boxfrets.js +++ b/boxfrets.js @@ -4,7 +4,7 @@ var COLOR = "lightgreen"; //var PALLETE_COLORS = ["orange", "green", "blue", "yellow", "lightgreen", "red", "transparent"] //var POSSIBLE_COLORS2 = ["orange", "green", "blue", "yellow", "lightgreen", "red", "i_root", "transparent"] var POSSIBLE_COLORS = [ - "i_root", + "i_root", "i_flatnine", "i_nine", "i_flatthird", @@ -17,12 +17,12 @@ var POSSIBLE_COLORS = [ "i_flatseventh", "i_seventh", "i_passing", - "orange", - "green", - "blue", - "yellow", - "lightgreen", - "red", + "orange", + "green", + "blue", + "yellow", + "lightgreen", + "red", "black", "white", "transparent"]; @@ -180,11 +180,11 @@ var td_paint_or_clear = function(td){ { var arrStringFret = getStringFret(td); ctl_color_td_by_interval(arrStringFret[0],arrStringFret[1]); - } - else - { + } + else + { // repaint with new pallete color - td_paint(td, COLOR ); + td_paint(td, COLOR ); } } @@ -206,9 +206,9 @@ var getFretcloneStrings = function(){ updateSetRootView(); var newNote = $(this).attr('notename'); // get safeName from note - ctl_change_key.setRoot(getKeyObjFromNoteName(newNote)); + ctl_change_key.setRoot(getKeyObjFromNoteName(newNote)); td_clear(this);// will paint after - //var newKey = $("#selKey").val(getChromaticInt(newNote, CHROMFLAT)); + //var newKey = $("#selKey").val(getChromaticInt(newNote, CHROMFLAT)); } td_paint_or_clear(this, COLOR); }, @@ -230,7 +230,7 @@ var getFretcloneStrings = function(){ td_paint(this, COLOR); // current palette color update_link(); } - } + } }); } } @@ -279,7 +279,7 @@ var check_answers = function(a_repr) { } } var clear_fretboard = function(){ - + for(var i = 0; i < GUITAR_STRINGS.length; i++){ for(var j = 0; j < GUITAR_STRINGS[i].length; j++){ td_clear(GUITAR_STRINGS[i][j].td); @@ -299,7 +299,7 @@ var set_notes = function(){ var note_td = $(GUITAR_STRINGS[i][j].td); var notespan = $(GUITAR_STRINGS[i][j].td).find('.note'); var note = pick_note(j, offsets[i]); - + notespan.attr('id','ns_'+i+'_'+j );// ns_(string)_(fret) note_td.attr('id','nc_'+i+'_'+j ); notespan.attr('notename', note ); @@ -308,14 +308,14 @@ var set_notes = function(){ var chromFromC = (j + offsets[i]) % mFB.getChromNames().length; note_td.attr('semiInts', chromFromC ); notespan.attr('semiInts', chromFromC ); - + } } } var set_notespans = function(){ - + var offsets = [4, 11, 7, 2, 9, 4]; for(var i = 0; i < GUITAR_STRINGS.length; i++){ for(var j = 0; j < GUITAR_STRINGS[i].length; j++){ @@ -325,19 +325,19 @@ var set_notespans = function(){ var arrLen = mFB.getNGintnames().length; var nsSemiInt = ((mFB.getNGintnames().length + Number(ns.attr("semiInts"))) - mFB.getKeyInt()) % mFB.getNGintnames().length; - + if(INTERVALMODE) { if (nsSemiInt == 0){ - ns.html(mFB.getChromNames()[0]); + ns.html(mFB.getChromNames()[0]); } else { - ns.html(mFB.getNGintnames()[nsSemiInt]); + ns.html(mFB.getNGintnames()[nsSemiInt]); } } - else + else { ns.html(mFB.getChromNames()[nsSemiInt]); } @@ -345,8 +345,8 @@ var set_notespans = function(){ var isPainted = is_painted($('#nc_'+i+'_'+j)); if(COLORBYINTERVALS && is_painted($('#nc_'+i+'_'+j)) ) { - - ctl_color_td_by_interval(i,j); //send string, fret + + ctl_color_td_by_interval(i,j); //send string, fret } } } @@ -366,7 +366,7 @@ var ctrl_updateMessage = function(){ } var ctl_updateIntervalMode = function(boolNewMode){ - + if(boolNewMode){ $('#modeNoteInt').attr('value', 'Intervals'); INTERVALMODE = true; @@ -393,9 +393,9 @@ var ctrl_addDashNotegroups = function(idStr){ var ngType = arrID[1]; var ng = arrID[2]; // notegroup var htmlTxt = getKeyObjFromSafeName(arrID[0]).name; - + var ngBoxClrClass; - + switch(ngType){ case "ARP": htmlTxt += dictArps[ngType+'_'+ng].name; @@ -408,12 +408,12 @@ var ctrl_addDashNotegroups = function(idStr){ case "CHD": htmlTxt += ' '+dictChords[ngType+'_'+ng].name; ngBoxClrClass="ngboxChd"; - break; + break; } var $abDiv = $("
", {class: "cNoteGroup "+ngBoxClrClass, notegroup: idStr}).html(htmlTxt); $abDiv.dblclick( // remove abridgedDiv on doubleclick - function(){ + function(){ ctl_stopPlayer(); $(this).remove(); update_link(); @@ -422,14 +422,14 @@ var ctrl_addDashNotegroups = function(idStr){ // set notegroups on abridged Div click function(){ //var abDivArrID = this.attributes["notegroup"].value.split('_'); - set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]); + set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]); } ); - + if(mPlayer.getPlaystate() == PS_PLAYING){ ctl_stopPlayer(); } - + $("#ngDashboard").append($abDiv); // add dragged notegroup to Dashboard $("#ngDashboard").sortable({ stop: function( event, ui ) { @@ -442,7 +442,7 @@ var ctrl_addDashNotegroups = function(idStr){ }); mPlayer.reloadNotegroups($("#ngDashboard")); update_link(); - + } var ctl_updateColorIntMode = function(boolNewMode){ if(boolNewMode){ @@ -461,18 +461,18 @@ var ctl_updateColorIntMode = function(boolNewMode){ update_link(); } } - + var ctl_color_td_by_interval = function(string, fret){ var nsSemiInt = ((mFB.getNGintnames().length + Number($('#ns_'+string+'_'+fret).attr("semiInts"))) - mFB.getKeyInt()) % mFB.getNGintnames().length; var newColor = mFB.getNGintcolor()[Number(nsSemiInt)]; // need to be a number? td_paint($('#nc_'+string+'_'+fret), newColor ); - } + } var ctl_change_key = { "setRoot" : function(kObj){ mFB.setKey(kObj); if($("#selKey").val() != kObj.safename){ - $("#selKey").val(kObj.safename); + $("#selKey").val(kObj.safename); } set_notespans(); }, @@ -480,7 +480,7 @@ var ctl_change_key = { mFB.setKey(dictKeys[kSafeName]); var selKeyVal = $("#selKey").val(); if(selKeyVal != kSafeName){ - $("#selKey").val(kSafeName); + $("#selKey").val(kSafeName); } }, "selKeyChange" : function(selKeyVal){ @@ -489,12 +489,12 @@ var ctl_change_key = { set_notespans(); update_link(); } - + } - + var set_notes_per_notegroup = function(keySafeName, ngType, ng){ // if color by intervals is off, turn on and save state - var paletteState = !COLORBYINTERVALS; + var paletteState = !COLORBYINTERVALS; COLORBYINTERVALS = true; ctl_change_key.keyChangeNotegroup(keySafeName); var ng = ngType+'_'+ng; @@ -515,7 +515,7 @@ var isPalleteColor = function(c){ } var getChromaticInt = function(noteStr, chromNamesScale){ - + if(chromNamesScale == null){ chromNamesScale = mFB.getChromNames(); } @@ -542,15 +542,15 @@ var getEnharmonic = function(noteStr){ enStr = acc[0]+"♯"; noteStr = CHROMFLAT[getChromaticInt(enStr,CHROMSHARP)]; break; - default: + default: //natural - noteStr = noteStr.charAt(0); + noteStr = noteStr.charAt(0); } - } + } return noteStr; - + } var getAccTypeStr = function(noteStr){ @@ -565,21 +565,21 @@ var getAccTypeStr = function(noteStr){ //sharp accType = SHARPED; break; - default: + default: //natural - accType= NATURAL; + accType= NATURAL; } - + return accType; } -var getKeyObjFromNoteName = function(noteStr){ +var getKeyObjFromNoteName = function(noteStr){ var intFromC = getKeyObjFromUnsafeName(noteStr).fromC var newKeyHtmlName = mFB.getKeyObj().baseScale[intFromC]; return getKeyObjFromUnsafeName(newKeyHtmlName); } -var getSafeNameFromNoteName = function(noteStr){ +var getSafeNameFromNoteName = function(noteStr){ var intFromC = getKeyObjFromUnsafeName(noteStr).fromC var newKeyHtmlName = mFB.getKeyObj().baseScale[intFromC]; return getKeyObjFromUnsafeName(newKeyHtmlName).safename; @@ -604,14 +604,14 @@ var getKeyObjFromUnsafeName = function(htmlStr){ break; } } - + if(keyObj == ""){ // likely a sharp key that needs to be a flat key = get Enharmonic for(var i = 0; i < CHROMSHARP.length; i++){ if(htmlStr == CHROMSHARP[i]){ htmlStr = CHROMFLAT[i]; break; - } + } } for(ko in dictKeys){ @@ -628,13 +628,13 @@ var getNotespanFromTD = function(td){ var arr = td.attr('id').split('_'); return $('#ns_'+arr[1]+'_'+arr[2]); } - + var getStringFret = function(el){ var aStringFret = el.attr('id').split('_'); aStringFret.shift(); return aStringFret; } - + var updateSetRootView = function(){ if(SETTINGROOT){ $("#setRoot").addClass( 'setRootArmed' ); @@ -642,7 +642,7 @@ var updateSetRootView = function(){ $("#setRoot").removeClass( 'setRootArmed' ) } } - + //var populateScaleMenu = function(){ // var scaleSel = $('#selScale'); // var arrScales = dictScales; @@ -650,7 +650,7 @@ var updateSetRootView = function(){ // scaleSel.append( // $('').val(val).html(text["name"]) // ); -// }); +// }); // } var populateNotegroupsUnabridged = function(){ @@ -660,7 +660,7 @@ var populateNotegroupsUnabridged = function(){ } html += ''; $('#notegroupsUnabridged').append(html); - + html =""; for(var key in dictKeys){ html += '
'; @@ -671,8 +671,8 @@ var populateNotegroupsUnabridged = function(){ html += '
  • Scales
    • '; html += '
  • Chords
    • '; html += ''; - - // ~~~~~~ arpeggios + + // ~~~~~~ arpeggios html += '
    '; // divs @@ -683,9 +683,9 @@ var populateNotegroupsUnabridged = function(){ html += '
    '; } - + html += '
    '; - + // ~~~~~~ scales html += '
    '; @@ -695,11 +695,9 @@ var populateNotegroupsUnabridged = function(){ html += dictKeys[key].name +' '+ dictScales[ng].name; html += '
    '; } - - + html += '
    '; - - + // ~~~~~~ chords html += '
    '; //html += dictKeys[key].name+' chords'; @@ -710,7 +708,6 @@ var populateNotegroupsUnabridged = function(){ html += '
    '; } $('#notegroupsUnabridged').append(html); - }; @@ -731,13 +728,13 @@ var makeUnabridgedDragDroppable = function(){ var arrID = this.id.split('_'); set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]); }); - + $("#ngDashboard").droppable({ accept: '.ngUnabDiv', activeClass: "drop-area", drop: function (e, ui) { if ($(ui.draggable)[0].id != "") { - // on dropping unabridged div + // on dropping unabridgedtd var x = ui.helper.clone(); var helperID = ui.helper.clone().context.id; ui.helper.remove(); @@ -754,11 +751,11 @@ $("#remove-drag").droppable({ hoverClass: "remove-drag-hover", accept: '.remove' }); - + } - + var onDocReady = function(){ - + } jQuery(document).ready(function() { @@ -769,21 +766,21 @@ jQuery(document).ready(function() { for(var key in dictKeys){ $("#ngTab_"+dictKeys[key].safename).tabs(); } - + $("#notegroupsUnabridged2").tabs(); $( ".cNoteGroup" ).draggable({ addClasses: false }); - - + + $(gen_fret_boxes(19, 6)).insertAfter($('#mainfretboard')); GUITAR_STRINGS = getFretcloneStrings(); set_notes(); - + // add another row onto Fretclone to serve as fretpaint buttons var newRow = function(){ var html ="" var board_strings = $('#fretclone tr'); - + var children = board_strings[0].children; for (var f = 0; f < children.length; f++){ html +=''; @@ -792,21 +789,21 @@ jQuery(document).ready(function() { return html; } $('#fretclone > tbody:last').append(newRow); - + //populateScaleMenu(); // removed from view var url_params = get_url_parameters(); var loadFromUrl = function(){ if (is_defined(url_params['intColor'])){ if(url_params['intColor'] == "true"){ - + ctl_updateColorIntMode(true); - } + } } if (is_defined(url_params['intNames'])){ if(url_params['intNames'] == "true"){ ctl_updateIntervalMode(true); - } + } } if (is_defined(url_params['key'])){ // key should use safename @@ -815,7 +812,7 @@ jQuery(document).ready(function() { if (is_defined(url_params['dash'])){ var arrNotgroups = url_params['dash']; ctl_populateDash(arrNotgroups); - } + } if (is_defined(url_params['diagram_title'])){ $('#diagram_title').val(unescape(url_params['diagram_title'])); } @@ -862,10 +859,10 @@ jQuery(document).ready(function() { } } - + for(var s = 0; s < GUITAR_STRINGS.length; s++){ if(fpainted){ - td_clear($('#'+'nc_'+s+'_'+fret)); + td_clear($('#'+'nc_'+s+'_'+fret)); } else{ var ns = $('#'+'nc_'+s+'_'+fret); if(COLORBYINTERVALS){ @@ -874,9 +871,10 @@ jQuery(document).ready(function() { { td_paint($('#'+'nc_'+s+'_'+fret), COLOR); } - - } + + } } + update_link(); }) @@ -900,7 +898,7 @@ jQuery(document).ready(function() { if (iteration>2) iteration=1 $(this).data('iteration',iteration) }); - + $('#eraser').click(function(){ var iteration=$(this).data('iteration')||1 switch ( iteration) { @@ -920,23 +918,23 @@ jQuery(document).ready(function() { if (iteration>2) iteration=1 $(this).data('iteration',iteration) }); - - + + $('#clear').click(function(){ message.html(''); clear_fretboard(); update_link(); }); - + $('#modeNoteInt').click(function(){ if(INTERVALMODE == true){ ctl_updateIntervalMode(false); } else{ ctl_updateIntervalMode(true); } - + }); - + $('#colorByInterval').click(function(){ if(COLORBYINTERVALS){ ctl_updateColorIntMode(false); @@ -944,7 +942,7 @@ jQuery(document).ready(function() { ctl_updateColorIntMode(true); } - + }); $('#setRoot').click(function(){ @@ -955,12 +953,12 @@ jQuery(document).ready(function() { } updateSetRootView(); }); - + $('#selKey').change(function(){ ctl_change_key.selKeyChange($('#selKey').val()); }); - + // dash player controls $('#dashPlayStop').click(function(){ if (mPlayer.getPlaystate() == PS_PLAYING){ @@ -969,21 +967,21 @@ jQuery(document).ready(function() { ctl_playPlayer(); } }); - + $('#dashBack').click(function(){ ctl_backPlayer(); - + }); $('#dashFwd').click(function(){ ctl_fwdPlayer(); }); - + $('#dashSpeed').change(function(){ ctl_changeSpeed(); }); - + // removed from view // $('#selScale').change(function(){ // var newScale = $('#selScale').val(); @@ -1001,10 +999,10 @@ jQuery(document).ready(function() { clear_fretboard(); update_link(); loadFromUrl(); }); - - - + + + // TODO: generate jTab // TODO: show chord in standard notation }); diff --git a/fretboard.css b/fretboard.css index 77f28ea..89f40b6 100644 --- a/fretboard.css +++ b/fretboard.css @@ -3,11 +3,13 @@ * { margin:0; padding:0; border-spacing:0; } body { font-family:sans-serif; font-size:100%; } -table#mainfretboard { position:absolute; top:120px; left:50px; border:1px solid red; } -table#mainfretboard tr td { border:1px solid black; font-size: 28px; width:46px; height:34px; text-align:center; } +table#mainfretboard { position:absolute; top:120px; left:69px; border:1px solid red; } +/*table#mainfretboard tr td { border:1px solid black; font-size: 28px; width:46px; height:34px; text-align:center; }*/ +table#mainfretboard tr td { border:1px solid black; font-size: 28px; width:66px; height:34px; text-align:center; } /* fretclone sits at z of 1 over main fretboard */ table#fretclone { position:absolute; top:100px; left:-5px; border-spacing:8px; } -table#fretclone tr td { margin: 0 2px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 5px; } +/*table#fretclone tr td { margin: 0 2px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 5px; }*/ +table#fretclone tr td { margin: 0 12px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 14px; } table#fretclone tr td:hover { cursor:pointer; border-color: black !important; border-style: dotted !important; } @@ -50,10 +52,11 @@ a:hover { color: #005580; text-decoration: underline; } .transparent { background-color:transparent !important; border-color:transparent !important; color:transparent !important } -table#fretclone tr .fretpainter {background-color:#CFCFCF !important; border-color:#FFF !important; color:#4c4c2d !important; height:4px !important; border-radius:0px !important;} +table#fretclone tr .fretpainter {background-color:#DADADA !important; border-color:#FFF !important; height:6px !important; border-radius:0px !important;} -div#main { height:280px; margin:10px; width: 940px; } -#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:100%; } +div#main {width: 1356px;} +div#fretboard_container { height:280px; margin:10px; width: 1308px; } +#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:100%; } div.h_ctrl_cnt{ padding:10px; margin:0px 10px 0px 10px; } div.h_ctrl { display:inline; margin-right: 12px; } @@ -75,32 +78,33 @@ input.color_button { width:40px; border-radius: 5px; } #form_controls { padding:10px; } #checkanswer { display:none; } -#message { text-align: right; +#message { text-align: right; + margin-right: 22px; color:#a5a5a5; } #examples ul { margin-left: 20px; } - + /* jquery ui*/ -.tabs-nohdr { - padding: 0px; - background: none; - border-width: 0px; +.tabs-nohdr { + padding: 0px; + background: none; + border-width: 0px; font-size: inherit; - - - -} -.tabs-nohdr .ui-tabs-nav { - padding-left: 0px; - background: transparent; - border-width: 0px 0px 1px 0px; - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - border-radius: 0px; -} -.tabs-nohdr .ui-tabs-panel { - background: #FFF; - border-width: 0px 1px 1px 1px; + + + +} +.tabs-nohdr .ui-tabs-nav { + padding-left: 0px; + background: transparent; + border-width: 0px 0px 1px 0px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; +} +.tabs-nohdr .ui-tabs-panel { + background: #FFF; + border-width: 0px 1px 1px 1px; overflow:auto; } .tabs-nohdr .ui-tabs-anchor{ @@ -162,9 +166,9 @@ div.cNoteGroup{ border-right:#FFF thin solid; border-left:#FFF thin solid; /*border-width: 0px 0px 1px 0px; */ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; } div .ngUnabDiv{ @@ -175,10 +179,10 @@ div .ngUnabDiv{ margin: 2px; background:rgb(200,238,251); border:#555 thin solid; - border-width: 0px 0px 1px 0px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; + border-width: 0px 0px 1px 0px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; } div .tabs-nobg .ui-tabs-panel { @@ -191,14 +195,14 @@ div .tabs-nobg .ui-tabs-panel { z-index:999; border:#F00 thin solid; } - + ul .uNotegroup{ list-style:none; border:#555 thin solid; padding:3px; margin: 2px; } - + div .ngboxScale{ background:#ddfcc2; } @@ -210,7 +214,7 @@ div .ngboxArp{ div .ngboxChd{ background:#cff6fd; } -/* drag drop classes */ +/* drag drop classes */ .ngExchange{} span .drag{ background-color:rgb(153,153,153); diff --git a/fretboard.html b/fretboard.html index c19c0d9..764b178 100644 --- a/fretboard.html +++ b/fretboard.html @@ -10,18 +10,19 @@ - + - + +
    -
    +
     
    @@ -35,15 +36,15 @@
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -105,63 +106,63 @@
    - +
    - - + +
    - - + +
    - +
    - +
    - - + +
    - +
    - +
    - +
     
    - + - +
    - -
    + +
    -
    +
    - + -
    - +
    + - +
    - + + +