forked from rism-digital/verovio.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtopic01.html
49 lines (43 loc) · 1.57 KB
/
topic01.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
---
next_text: Handling events
next_id: topic02
---
<h3>Managing options</h3>
<p>
In this example, we can see how rendering options can be passed to the Verovio JavaScript toolkit. In particular, we set the zoom and we also adjust the size according to the window. As a result, the output is now adjusted to the window size.
</p>
{% highlight javascript %}
///////////////////////////
/* Some global variables */
///////////////////////////
var vrvToolkit = new verovio.toolkit();
var zoom = 30;
var pageHeight = 2970;
var pageWidth = 2100;
///////////////////////////////////////////////////
/* A function for setting options to the toolkit */
///////////////////////////////////////////////////
function setOptions() {
//////////////////////////////////////////////////////////////
/* Adjust the height and width according to the window size */
//////////////////////////////////////////////////////////////
pageHeight = $(document).height() * 100 / zoom ;
pageWidth = $(window).width() * 100 / zoom ;
options = {
pageHeight: pageHeight,
pageWidth: pageWidth,
scale: zoom,
adjustPageHeight: true
};
vrvToolkit.setOptions(options);
}
{% endhighlight %}
{% include html-tutorial.html id="code1" file="topic01-options.html" %}
<div id="code1-xml" style="display: none">
{% highlight html %}
{% include_relative gh-tutorial/topic01-options.html %}
{% endhighlight %}
</div>
<div class="pull-right">
<p><a href="./tutorial.xhtml?id={{ page.next_id }}">{{ page.next_text }}</a> →</p>
</div>