-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathtopic08-saxonce.html
107 lines (92 loc) · 3.95 KB
/
topic08-saxonce.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
<html>
<head>
<title>Verovio example with SaxonCE</title>
<script src="https://www.verovio.org/javascript/develop/verovio-toolkit.js" type="text/javascript" ></script>
<!-- We also use jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" ></script>
<!-- Basic events from example 02 -->
<script src="javascript/basic-events.js" type="text/javascript" ></script>
<!-- A stylesheet for the help overlay -->
<link rel="stylesheet" href="css/tutorial.css" />
<!--///////////-->
<!-- Saxon-CE -->
<!--///////////-->
<script type="text/javascript" language="javascript" src="javascript/Saxonce/Saxonce.nocache.js"></script>
</head>
<body style="margin: 0px;">
<!-- A help overlay -->
<div id="help_overlay">
<p>Press <b>1</b> to show the violin 1 part</p>
<p>Press <b>2</b> to show the violin 2 part</p>
<p>Press <b>3</b> to show the viola part</p>
<p>Press <b>4</b> to show the cello part</p>
</div>
<!-- The div where we are going to insert the SVG -->
<div id="svg_output"/>
<script type="text/javascript">
var vrvToolkit = new verovio.toolkit();
var page = 1;
var zoom = 60;
var pageHeight = 2970;
var pageWidth = 2100;
/////////////////////////////////////////////////////////////
/* A variable for selecting the voice (staff) with SaxonCE */
/////////////////////////////////////////////////////////////
var voice = 1;
function setOptions() {
pageHeight = $(document).height() * 100 / zoom ;
pageWidth = $(document).width() * 100 / zoom ;
options = {
pageHeight: pageHeight,
pageWidth: pageWidth,
scale: zoom,
adjustPageHeight: true,
spacingStaff: 0,
spacingSystem: 0
};
vrvToolkit.setOptions(options);
}
function loadData(data) {
setOptions();
vrvToolkit.loadData(data);
page = 1;
loadPage();
}
function loadPage() {
svg = vrvToolkit.renderToSVG(page, {});
$("#svg_output").html(svg);
};
////////////////////////////////////////////////////////
/* A function that applies the XSLT and load the data */
////////////////////////////////////////////////////////
function loadFile() {
var file = "mei/Beethoven_StringQuartet_op.18_no.2.mei";
var xsl = Saxon.requestXML("xslt/stripStaff.xsl");
var xml = Saxon.requestXML(file);
var proc = Saxon.newXSLT20Processor(xsl);
proc.setParameter(null, "voice", voice);
loadData(Saxon.serializeXML(proc.transformToDocument(xml)));
}
$(document).ready(function() {
$(window).keyup(function(event){
// Process navigation an zoom basic events
processBasicEvents(event);
/////////////////////////
/* Selecting the voice */
/////////////////////////
if ((event.keyCode > 48) && (event.keyCode < 59)) {
voice = event.keyCode - 48;
//console.log(voice);
loadFile();
}
});
$(window).resize(function(){
applyZoom();
});
});
var onSaxonLoad = function() {
loadFile();
};
</script>
</body>
</html>