note-wheel/index.html at master · hackjess/note-wheel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>
<head>
<!--This code was developed by Theo Greer and Jessica Hack-->

<title>Color Chordination</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Local Styling-->
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script src="js/abcjs_basic_2.3-min.js" type="text/javascript"></script>
<script src="js/chordBuilder.js"></script>
<script type="text/javascript" src="https://npmcdn.com/vexflow/releases/vexflow-debug.js"></script>
<script src="Chart/dist/Chart.bundle.js"></script>
<script src="js/wheel.js"></script>
<script>
$(document).ready(function() {
$(".btn-group.note button").click(function () {
    $(".btn-group.note button").removeClass("active");
    $(this).addClass("active");
});

$(".btn-group.chord button").click(function () {
    $(".btn-group.chord button").removeClass("active");
    $(this).addClass("active");
});

});
</script>
</head>
<body>
<div class="row title">
  <div class="clip-text clip-text_fourteen clip-text--cover">Color Chordination</div>
</div>
<div class="row welcome">Welcome! Please select a root note and chord type.</div>
<br/>
<div class="row">
  <div class="col-md-7">
    <div id="canvas-holder" style="width:90%">
      <div class="labels">
        <div id="labelC">C</div>
        <div id="labelCsharp">C#/Db</div>
        <div id="labelD">D</div>
        <div id="labelDsharp">D#/Eb</div>
        <div id="labelE">E</div>
        <div id="labelF">F</div>
        <div id="labelFsharp">F#/Gb</div>
        <div id="labelG">G</div>
        <div id="labelGsharp">G#/Ab</div>
        <div id="labelA">A</div>
        <div id="labelAsharp">A#/Bb</div>
        <div id="labelB">B</div>
      </div>
      <canvas chart-labels="chart.labels" id="chart-area"></canvas>
    </div>
  </div>
  <!--col-->
  <div class="col-md-4">
    <div class="NoteGroup">
      <label>Root Note</label>
      <div class="btn-group note" role="group" aria-label="RootNote">
        <button onClick="chooseNote(0)" type="button" class="btn btn-default note">C</button>
        <button onClick="chooseNote(1)" type="button" class="btn btn-default note">C#/Db</button>
        <button onClick="chooseNote(2)" type="button" class="btn btn-default note">D</button>
        <button onClick="chooseNote(3)" type="button" class="btn btn-default note">D#/Eb</button>
        <button onClick="chooseNote(4)" type="button" class="btn btn-default note">E</button>
        <button onClick="chooseNote(5)" type="button" class="btn btn-default note">F</button>
        <button onClick="chooseNote(6)" type="button" class="btn btn-default note">F#/Gb</button>
        <button onClick="chooseNote(7)" type="button" class="btn btn-default note">G</button>
        <button onClick="chooseNote(8)" type="button" class="btn btn-default note">G#/Ab</button>
        <button onClick="chooseNote(9)" type="button" class="btn btn-default note">A</button>
        <button onClick="chooseNote(10)" type="button" class="btn btn-default note">A#/Bb</button>
        <button onClick="chooseNote(11)" type="button" class="btn btn-default note">B</button>
      </div>
    </div>
    <br/>
    <div class="ChordGroup">
      <label>Chord Type</label>
      <div class="btn-group chord" role="group" aria-label="Chord">
        <label class="chordlabel">Three Tone</label>
        <button id="Major" type="button" onClick="chooseChordType(0)" class="btn btn-default chord">Major</button>
        <button id="Minor" type="button" onClick="chooseChordType(1)" class="btn btn-default chord">Minor</button>
        <button id="Dim" type="button" onClick="chooseChordType(2)" class="btn btn-default chord">Diminished</button>
        <br/>
        <button id="Sus2" type="button" onClick="chooseChordType(3)" class="btn btn-default chord">Sus2</button>
        <button id="Sus4" type="button" onClick="chooseChordType(4)"  class="btn btn-default chord">Sus4</button>
        <button id="Aug" type="button" onClick="chooseChordType(5)" class="btn btn-default chord">Augmented</button>
        <br/>
        <div class="col-md-8"> <br/>
          <label class="chordlabel">Four Tone</label>
          <button id="Major7th" type="button" onClick="chooseChordType(6)" class="btn btn-default chord four">Major 7th</button>
          <button id="Dominant7th" type="button" onClick="chooseChordType(7)" class="btn btn-default chord four">Dominant 7th</button>
          <button id="Minor7th" type="button" onClick="chooseChordType(8)" class="btn btn-default chord four">Minor 7th</button>
          <button id="HalfDim" type="button" onClick="chooseChordType(9)" class="btn btn-default chord four">Half Dimin.</button>
          <button id="FullyDim" type="button" onClick="chooseChordType(10)" class="btn btn-default chord four">Diminished</button>
          <button id="6th" type="button" onClick="chooseChordType(11)"  class="btn btn-default chord four">6th</button>
          <button id="Minor6th" type="button" onClick="chooseChordType(12)" class="btn btn-default chord four">Minor 6th</button>
          <button id="Add9" type="button" onClick="chooseChordType(13)" class="btn btn-default chord four">Add9</button>
        </div>
        <div class="col-md-3"> <br/>
          <label class="chordlabel">Extended</label>
          <button id="9" type="button" onClick="chooseChordType(14)" class="btn btn-default chord extended">9</button>
          <button id="Major9" type="button" onClick="chooseChordType(15)" class="btn btn-default chord extended">Major 9</button>
          <button id="Minor9" type="button" onClick="chooseChordType(16)" class="btn btn-default chord extended">Minor 9</button>
          <button id="6/9" type="button" onClick="chooseChordType(17)" class="btn btn-default chord extended">6/9</button>
        </div>
        <br/>
        <div class="col-md-1"></div>
      </div>
      <!--row-->
    </div>
    <!--chord group-->
    <div class="col-md-1"></div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>