Skip to content

Commit

Permalink
update link fix, color arrays
Browse files Browse the repository at this point in the history 
split color arrays into two groups
created color pallete dynamically based on color pallate array
changed demo links
  • Loading branch information
@deltadada
deltadada committed Aug 21, 2014
1 parent 05fbde6 commit 8ef9ad0
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 24 deletions.
38 changes: 29 additions & 9 deletions boxfrets.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
/* code to handle manipulation */
var GUITAR_STRINGS;
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 = [
var INTERVAL_COLORS = [
"i_root",
"i_flatnine",
"i_nine",
Expand All @@ -17,15 +15,21 @@ var POSSIBLE_COLORS = [
"i_flatseventh",
"i_seventh",
"i_passing",
"white",
"black"
]

var PALLETE_COLORS = [
"orange",
"green",
"blue",
"yellow",
"lightgreen",
"red",
"black",
"white",
"transparent"];
"transparent"
]

var POSSIBLE_COLORS = INTERVAL_COLORS.concat(PALLETE_COLORS);// concat interval and pallete colors
var ERASER = false;
var BRUSH = false;
var SETTINGROOT = false;
Expand Down Expand Up @@ -416,13 +420,14 @@ var ctrl_addDashNotegroups = function(idStr){
function(){
ctl_stopPlayer();
$(this).remove();
update_link();
//update_link();
}
).click(
// set notegroups on abridged Div click
function(){
//var abDivArrID = this.attributes["notegroup"].value.split('_');
set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]);
//update_link();
}
);

Expand Down Expand Up @@ -653,6 +658,14 @@ var updateSetRootView = function(){
// });
// }

var populateColorPalleteChooser = function(){
html = "Palette:";
for(var i=0; i < PALLETE_COLORS.length; i++){
html += '<input type="button" value="&nbsp;" class="color_button '+PALLETE_COLORS[i]+'" />';
}
$('#colorchooser').append(html);

}
var populateNotegroupsUnabridged = function(){
var html = '<ul id="unabridgedKeyTabs">';
for (var key in dictKeys) {
Expand Down Expand Up @@ -727,8 +740,10 @@ var makeUnabridgedDragDroppable = function(){
}).click(function(){
var arrID = this.id.split('_');
set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]);
update_link();
});


$("#ngDashboard").droppable({
accept: '.ngUnabDiv',
activeClass: "drop-area",
Expand Down Expand Up @@ -759,6 +774,9 @@ var onDocReady = function(){
}

jQuery(document).ready(function() {
//START

populateColorPalleteChooser();

populateNotegroupsUnabridged();
$("#notegroupsUnabridged").tabs();
Expand Down Expand Up @@ -924,7 +942,8 @@ jQuery(document).ready(function() {

$('#clear').click(function(){
message.html('');
clear_fretboard(); update_link();
clear_fretboard();
update_link();
});

$('#modeNoteInt').click(function(){
Expand Down Expand Up @@ -997,7 +1016,8 @@ jQuery(document).ready(function() {
// set up example links
$('#examples ul li a').click(function(){
url_params = get_url_parameters($(this).attr('href'));
clear_fretboard(); update_link();
clear_fretboard();
//update_link();
loadFromUrl();
});

Expand Down
2 changes: 1 addition & 1 deletion fretboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ div.h_ctrl { display:inline; margin-right: 12px; }

#clear, #eraser, #brush { font-weight: bold; padding: 2px; }

input.color_button { width:40px; border-radius: 5px; }
input.color_button { width:40px; border-radius: 5px; margin-left: 8px; }

#colorchooser { display:inline; };

Expand Down
33 changes: 19 additions & 14 deletions fretboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,13 @@

<div class="h_ctrl">
<div id="colorchooser">
Palette:
<input type="button" value="&nbsp;" class="color_button green" />
<!-- generated by js -->
<!-- <input type="button" value="&nbsp;" class="color_button green" />
<input type="button" value="&nbsp;" class="color_button yellow" />
<input type="button" value="&nbsp;" class="color_button blue" />
<input type="button" value="&nbsp;" class="color_button lightgreen" />
<input type="button" value="&nbsp;" class="color_button red" />
<input type="button" value="&nbsp;" class="color_button orange" />
<input type="button" value="&nbsp;" class="color_button orange" /> -->
</div>
</div>
</div><!-- first button row end -->
Expand Down Expand Up @@ -171,23 +171,28 @@
<div id="examples"><strong>Examples:</strong>
<!-- (hiE){[fret,color], [fret,color]};(B){...};(G){...};(D){...};(A){...};(lowE){...}&diagram_title=title -->
<ul>
<li><a href="#strings=6:16,18:16;11:16;3:16,15:16;8:16;1:16,13:16;6:16,18:16&key=Cnatural&intColor=false&intNames=false&diagram_title=Bb%20octaves">Bb octaves</a></li>
<li><a href="#strings=0:17,3:17,8:17,12:17,15:17;1:17,5:17,8:17,13:17;0:17,5:17,9:17,12:17;2:17,5:17,10:17,14:17;3:17,7:17,10:17,15:17;0:17,3:17,8:17,12:17,15:17&key=Cnatural&intColor=false&intNames=false&diagram_title=C%20major%20along%20the%20fretboard">C major all along the fretboard</a></li>
<li><a href="#strings=3:0,4:20,5:20,6:20,7:4,8:20;3:7,4:20,5:20,6:11,7:20,8:0;3:20,4:4,5:20,6:20,7:7,8:20;3:11,4:20,5:0,6:20,7:20,8:20;3:20,4:20,5:7,6:20,7:20,8:11;3:0,4:20,5:20,6:20,7:4,8:20&key=Gnatural&intColor=true&intNames=false&diagram_title=C%20Major%20ii-V-I&dash=Dnatural_ARP_DIM,Gnatural_ARP_DOM7,Cnatural_ARP_MAJ7,Cnatural_ARP_MAJ7">
2-5-1 in C Major</a>
<li><a href="#strings=6:16,18:16;11:16;3:16,15:16;8:16;1:16,13:16;6:16,18:16&key=Cnatural&intColor=false&intNames=false&diagram_title=Bb%20octaves"
>Bb octaves</a></li>
<li><a href="#strings=0:17,3:17,8:17,12:17,15:17;1:17,5:17,8:17,13:17;0:17,5:17,9:17,12:17;2:17,5:17,10:17,14:17;3:17,7:17,10:17,15:17;0:17,3:17,8:17,12:17,15:17&key=Cnatural&intColor=false&intNames=true&diagram_title=C%20major%20along%20the%20fretboard"
>C major all along the fretboard</a></li>
<li><a href="#strings=3:7,4:13,5:13,6:13,7:11;3:13,4:13,5:4,6:13,7:13;3:13,4:11,5:0,6:13,7:13;3:13,4:13,5:7,6:13,7:13;3:0,4:13,5:13,6:13,7:4;3:7,4:13,5:13,6:13,7:11&key=Cnatural&intColor=true&intNames=false&diagram_title=C%20Major%20ii-V-I&dash=Dnatural_ARP_MIN7,Gnatural_ARP_DOM7,Cnatural_ARP_MAJ7,Cnatural_ARP_MAJ7_MAJ7"
>2-5-1 in C Major</a>
</li>
<li><a href="l#strings=;;;;;&key=Cnatural&intColor=false&intNames=false&diagram_title=F%20minor%202-5-1&dash=Gnatural_ARP_MIN7b5,Cnatural_ARP_DOM7,Fnatural_ARP_MIN7,Fnatural_ARP_MIN7">
2-5-1 in F Minor</a>
<li><a href="#strings=3:14,4:4,5:13,6:14,7:13;3:13,4:11,5:13,6:0,7:13;3:14,4:13,5:7,6:14,7:13;3:0,4:13,5:14,6:4,7:13;3:7,4:14,5:13,6:11,7:13;3:14,4:4,5:13,6:14,7:13&key=Fnatural&intColor=true&intNames=false&diagram_title=F%20Minor%202-5-1&dash=Gnatural_SC_LOCRIAN,Cnatural_SC_MIXOLYDIAN,Fnatural_SC_DORIAN,Fnatural_SC_DORIAN"
>2-5-1 in F Minor</a>
</li>
<li>
<a href="#strings=;;;;;&key=Cnatural&intColor=false&intNames=false&diagram_title=3-6-2-5-1%20for%20Ab%20Major&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ">
3-6-2-5-1 in Ab Major</a>
<a href="#strings=2:13,3:13,4:0,5:13,6:13;2:13,3:13,4:7,5:13,6:13;2:13,3:13,4:13,5:4,6:13;2:13,3:13,4:13,5:13,6:0;2:13,3:4,4:13,5:13,6:7;2:13,3:13,4:0,5:13,6:13&key=Aflat&intColor=false&intNames=false&diagram_title=3-6-2-5-1%20for%20Ab%20Major&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ"
>3-6-2-5-1 in Ab Major</a>
</li>


<li><a href="#strings=3:13;2:15;3:15;2:15;;3:15&key=Gnatural&intColor=false&intNames=false&diagram_title=Gdim%20fingering">Gdim fingering</a></li>
<li><a href="#strings=0:4,2:3,5:3,7:18,10:3,12:3,14:3;0:18,3:3,5:3,7:3,10:3,12:18,15:3;2:3,4:18,7:3,9:3,11:3,14:3;0:4,2:3,4:3,7:3,9:18,12:3,14:3;0:4,2:18,5:3,7:3,9:3,12:3,14:18;0:4,2:3,5:3,7:18,10:3,12:3,14:3&key=Gnatural&intColor=false&intNames=false&diagram_title=B%20minor%20pentatonic">B minor pentatonic</a></li>
<li><a href="#strings=;4:15;4:15;4:15;;4:18&key=Cnatural&intColor=false&intNames=false&diagram_title=Abmin%20fingering">Abmin fingering</a></li>
<li><a href="#strings=3:19;2:19;3:19;2:20;;&key=Gnatural&intColor=false&intNames=false&diagram_title=Edim7%20Fingering"
>Edim7 fingering</a></li>
<li><a href="#strings=0:14,2:7,5:11,7:0,10:4,12:14,14:7;0:0,3:4,5:14,7:7,10:11,12:0,15:4;2:11,4:0,7:4,9:14,11:7,14:11;0:4,2:14,4:7,7:11,9:0,12:4,14:14;0:11,2:0,5:4,7:14,9:7,12:11,14:0;0:14,2:7,5:11,7:0,10:4,12:14,14:7&key=Bnatural&intColor=false&intNames=true&diagram_title=B%20minor%20pentatonic&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ"
>B minor pentatonic</a></li>
<li><a href="#strings=;5:15;5:15;5:15;;5:20&key=Anatural&intColor=false&intNames=true&diagram_title=A-7%20Fingering"
>A-7 fingering</a></li>

</ul>
</div>
Expand Down

0 comments on commit 8ef9ad0

Please sign in to comment.