-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchart.html
82 lines (76 loc) · 1.91 KB
/
chart.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
svg.chordChart {
background: white;
/*border: 1px #ccc solid;*/
border-radius: 10px;
width: 120px;
}
svg.chordChart .grid {
stroke: black;
stroke-linecap: round;
}
svg.chordChart .labels {
fill: white;
}
svg.chordChart .text {
font-family: Arial, sans-serif;
}
svg.chordChart .title {
font-size: 20px;
}
</style>
</head>
<body>
<div id="charts"></div>
<script src='chartmaker.js'></script>
<script src='chords.js'></script>
<script>
var num = 0;
chord("Cmajor");
function chord(name) {
// creates chord diagram using its name
name = name.replace("Bb", "A#").replace("H", "B");
if (name[1] == "#") {
var letter = name.slice(0, 2);
var type = name.slice(2);
} else {
var letter = name.slice(0, 1);
var type = name.slice(1);
}
if (type == "") {
type = "major";
} else if (type == "m") {
type = "minor";
}
for (var i = 0; i < 4; i++) {
document.getElementById("charts").innerHTML += '<svg id="chart' + num + '" class="chordCharts"></svg>';
var pos = chords.ukulele[letter][type].positions[i + ""]
var labelF = pos.fingers;
var fretF = pos.frets;
var baseF = pos.baseFret;
baseF--;
var labels = labelF["0"] + "," + labelF["1"] + "," + labelF["2"] + "," + labelF["3"];
var frets = (fretF["0"] + baseF) + "," + (fretF["1"] + baseF) + "," + (fretF["2"] + baseF) + "," + (fretF["3"] + baseF);
var name = (i == 0) ? name : "";
create(name, frets, labels, "chart" + num);
num++;
}
}
function create(titleI, fretI, labelI, id) {
var createChart = chartMaker();
var placeholder = document.getElementById(id);
var udi = {
title: titleI,
fret: fretI,
label: labelI
};
createChart(placeholder, udi);
}
</script>
</body>
</html>