blob: 6da137690c11f2fa634c60235bd9442535d65608 (
plain)
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chord Tone</title>
<link rel="stylesheet" href="/static/main.css">
</head>
<body>
<h1>Chord Tone Map Generator</h1>
<hr>
<p>This will map the notes of multiple chords on the fretboard in different colors.
Use this to map out chord tones for improvisation, melody construction,
and whatever else you can think of. If this has helped you at all,
please consider <a href="https://www.domdit.com/donate" target="_blank">donating</a>!</p>
<form method="post">
<datalist id="chords">
{% for chord in chords %}
<option value="{{chord}}">{{chord}}</option>
{% endfor %}
</datalist>
<label for="chord_1">Chord 1:</label>
<input list="chords" name="chord_1" id="chord_1">
<label for="chord_2">Chord 2:</label>
<input list="chords" name="chord_2" id="chord_2">
<br>
<label for="chord_3">Chord 3:</label>
<input list="chords" name="chord_3" id="chord_3">
<label for="chord_4">Chord 4:</label>
<input list="chords" name="chord_4" id="chord_4">
<br><br>
<input type="submit" value="Submit">
</form>
<br>
<div class="fretboard-container">
<img src="{{ url_for('static', filename='fretboard.png') }}">
<div id="e0" class="e zero"></div>
<div id="e1" class="e one"></div>
<div id="e2" class="e two"></div>
<div id="e3" class="e three"></div>
<div id="e4" class="e four"></div>
<div id="e5" class="e five"></div>
<div id="e6" class="e six"></div>
<div id="e7" class="e seven"></div>
<div id="e8" class="e eight"></div>
<div id="e9" class="e nine"></div>
<div id="e10" class="e ten"></div>
<div id="e11" class="e eleven"></div>
<div id="e12" class="e twelve"></div>
<div id="b0" class="b zero"></div>
<div id="b1" class="b one"></div>
<div id="b2" class="b two"></div>
<div id="b3" class="b three"></div>
<div id="b4" class="b four"></div>
<div id="b5" class="b five"></div>
<div id="b6" class="b six"></div>
<div id="b7" class="b seven"></div>
<div id="b8" class="b eight"></div>
<div id="b9" class="b nine"></div>
<div id="b10" class="b ten"></div>
<div id="b11" class="b eleven"></div>
<div id="b12" class="b twelve"></div>
<div id="g0" class="g zero"></div>
<div id="g1" class="g one"></div>
<div id="g2" class="g two"></div>
<div id="g3" class="g three"></div>
<div id="g4" class="g four"></div>
<div id="g5" class="g five"></div>
<div id="g6" class="g six"></div>
<div id="g7" class="g seven"></div>
<div id="g8" class="g eight"></div>
<div id="g9" class="g nine"></div>
<div id="g10" class="g ten"></div>
<div id="g11" class="g eleven"></div>
<div id="g12" class="g twelve"></div>
<div id="d0" class="d zero"></div>
<div id="d1" class="d one"></div>
<div id="d2" class="d two"></div>
<div id="d3" class="d three"></div>
<div id="d4" class="d four"></div>
<div id="d5" class="d five"></div>
<div id="d6" class="d six"></div>
<div id="d7" class="d seven"></div>
<div id="d8" class="d eight"></div>
<div id="d9" class="d nine"></div>
<div id="d10" class="d ten"></div>
<div id="d11" class="d eleven"></div>
<div id="d12" class="d twelve"></div>
<div id="a0" class="a zero"></div>
<div id="a1" class="a one"></div>
<div id="a2" class="a two"></div>
<div id="a3" class="a three"></div>
<div id="a4" class="a four"></div>
<div id="a5" class="a five"></div>
<div id="a6" class="a six"></div>
<div id="a7" class="a seven"></div>
<div id="a8" class="a eight"></div>
<div id="a9" class="a nine"></div>
<div id="a10" class="a ten"></div>
<div id="a11" class="a eleven"></div>
<div id="a12" class="a twelve"></div>
<div id="ee0" class="E zero"></div>
<div id="ee1" class="E one"></div>
<div id="ee2" class="E two"></div>
<div id="ee3" class="E three"></div>
<div id="ee4" class="E four"></div>
<div id="ee5" class="E five"></div>
<div id="ee6" class="E six"></div>
<div id="ee7" class="E seven"></div>
<div id="ee8" class="E eight"></div>
<div id="ee9" class="E nine"></div>
<div id="ee10" class="E ten"></div>
<div id="ee11" class="E eleven"></div>
<div id="ee12" class="E twelve"></div>
</div>
<div id="stats"></div>
<hr>
<h4>Upcoming Features:</h4>
<ul>
<li>Select Your Own Colors</li>
<li>Fix the fret dots so they are more visible</li>
<li>Add up to 24 frets</li>
<li>Add option to choose your which frets you want to see</li>
<li>Improve the overall look of the app</li>
</ul>
<hr>
<small>Version 1.0 | Created By <a href="https://www.domdit.com" target="_blank">Dominic DiTaranto</a> | Questions/Suggestions: me@domdit.com | Last Update 09/22/2024</small>
<script src="static/main.js"></script>
<script>
generateFretMarkers(JSON.parse('{{chord_map | tojson}}'), JSON.parse('{{counts | tojson}}'))
</script>
</body>
</html>
|
