-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (118 loc) · 4.21 KB
/
index.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
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
---
---
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Ribbon and notes visualization for Josquin music.">
<meta name="author" content="Seemant Kulleen">
<meta name="author" content="Curran Kelleher">
<link href="/img/favicon.ico" rel="icon" type="image/x-icon" />
<title>Josquin Research Project</title>
<!-- Bootstrap
For reset and grid layout.
from http://getbootstrap.com/customize/?id=c9c26f4080624c8af8ea9d80a6a64013
-->
<link rel="stylesheet" href="css/bootstrap-styles.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="page-header text-center">
<h1>Josquin Research Project</h1>
<div>
<div class="meta-titles">
<h3></h3>
<h4></h4>
</div>
<div>
<input title="Delete the text to see an autocomplete list." id="josquin_catalog" name="josquin_catalog" type="text" list="catalog">
</input><button id="load_song">Load</button>
<datalist id="catalog"></datalist>
</div>
</div>
</header>
<article>
<div id="notesbook" class="well">
<svg>
<defs>
{% comment %}
The following include contains the mensuration symbols
for all current mensuration signs in the JRP database.
The symbols are IDed by their proll JSON data name, with the
following transform needed to convert from the JSON string
to the ID of the mensuration in the symbol table, where mentag
is the name in the JSON file, and menid is the corresponding
symbol id for the desired symbol in the following list.
var menid = mentag.replace(/^C/g, "c")
.replace(/^O/g, "o")
.replace(/r/g, "-reverse")
.replace(/\//g, "-over")
.replace(/\|/g, "-pipe")
.replace(/\./g, "-dot")
.replace(/(\d+)/g, "-$1")
.replace(/^-/, "n");
{% endcomment %}
{% include mensuration/mensuration.symbols %}
</defs>
</svg>
<div id="legend">
<span id="zoomed-duration-indicator"></span>
</div>
</div><!--/#viewer-->
<div id="meta" class="well">
<div>
<div id="ribbons-ui">
<label for="show-ribbon">
<input id="show-ribbon" type="checkbox" value="all" checked> Show Ribbon:
</label>
<select id="select-ribbon">
<optgroup label="Select a Ribbon">
<option value="standard_deviation">Melodic Contour</option>
<option value="attack_density" selected>Rhythmic Activity</option>
</optgroup>
</select>
<label for="combine-voices">
<input id="combine-voices" type="checkbox" autocomplete="off"> Combine Voices
</label>
<label for="center-ribbons">
<input id="center-ribbons" type="checkbox" autocomplete="off"> Center Ribbons on Notes
</label>
</div><!--/#ribbons-ui-->
<div id="notes-ui">
<label for="show-notes">
<input id="show-notes" type="checkbox" autocomplete="off"> Show Notes
</label>
<label for="show-extremes">
<input id="show-extremes" type="checkbox" autocomplete="off"> Highlight Extreme Notes
</label>
</div><!--.btn-group#notes-ui-->
</div>
<div>
<button id="export-svg-button">Export SVG</button>
</div>
</div><!--.col-xs-12.col-lg-2-->
<div id="navigator" class="well">
<svg></svg>
</div><!--.well#navigator-->
</article>
{% if site.debugging %}
<script src="js/vendor/d3.min.js"></script>
<script src="js/vendor/d3-tip.min.js"></script>
<script src="js/vendor/svgsaver.js"></script>
<script src="js/dev/svg-export-processing.js"></script>
<script src="js/dev/getTime.js"></script>
<script src="js/dev/legend.js"></script>
<script src="js/dev/ribbon.js"></script>
<script src="js/dev/score.js"></script>
<script src="js/dev/markings.js"></script>
<script src="js/dev/notescanvas.js"></script>
<script src="js/dev/notesbook.js"></script>
<script src="js/dev/notesnav.js"></script>
<script src="js/dev/baton.js"></script>
{% else %}
<script src="js/vendors.js"></script>
<script src="js/josquin.js"></script>
{% endif %}
</body>