<!DOCTYPE html>
<html>
<head>
<title>let's compose</title>
<link rel="stylesheet" href="freeserif.css">
<link rel="stylesheet" href="draft.css">
<link rel="stylesheet" href="style.css">
<script type="application/javascript" src="script.js"></script>
<script type="application/javascript" src="draft.js"></script>
</head>
<body onload="onLoad()" onresize="adjustPadding()">
<div id="toolbar">
<span id="durations">
<button class="tool" onclick="selectDuration(this)" data-lily="\breve" id="doublewholenote" title="select duration 2/1 for writing notes" style="background-image: url('graphicalelements/note-breve.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="1" id="wholenote" title="select duration 1/1 for writing notes" style="background-image: url('graphicalelements/note1.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="2" id="halfnote" title="select duration 1/2 for writing notes" style="background-image: url('graphicalelements/note2.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="4" id="quarternote" title="select duration 1/4 for writing notes" style="background-image: url('graphicalelements/note4.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="8" id="eighthnote" title="select duration 1/8 for writing notes" style="background-image: url('graphicalelements/note8.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="16" id="sixteenthnote" title="select duration 1/16 for writing notes" style="background-image: url('graphicalelements/note16.png')"><div class="foreground"></div></button>
<button class="tool" onclick="selectDuration(this)" data-lily="32" id="thirtysecondnote" title="select duration 1/32 for writing notes" style="background-image: url('graphicalelements/note32.png')"><div class="foreground"></div></button>
</span>
<span id="rests">
<button class="tool" onclick="writeRest(this)" data-lily="\breve" id="doublerest" title="write a double rest" style="background-image: url('graphicalelements/r-breve.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="1" id="wholerest" title="write a whole rest" style="background-image: url('graphicalelements/r1.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="2" id="halfrest" title="write a half rest" style="background-image: url('graphicalelements/r2.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="4" id="quarterrest" title="write a 1/4 rest" style="background-image: url('graphicalelements/r4.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="8" id="eighthrest" title="write an 1/8 rest" style="background-image: url('graphicalelements/r8.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="16" id="sixteenthrest" title="write a 1/16 rest" style="background-image: url('graphicalelements/r16.png')"><div class="foreground"></div></button>
<button class="tool" onclick="writeRest(this)" data-lily="32" id="thirtysecondrest" title="write a 1/32 rest" style="background-image: url('graphicalelements/r32.png')"><div class="foreground"></div></button>
</span>
<span id="durationmarks">
<button class="tool" onclick="cycle(this)" data-lily="." id="dot" title="add/remove an augmentation dot on the current note" style="background-image: url('graphicalelements/dot.png')"><div class="foreground"></div></button>
<button class="tool" onclick="cycle(this)" data-lily="\fermata" id="fermata" title="add/remove fermata on the current note" style="background-image: url('graphicalelements/fermata.png')"><div class="foreground"></div></button>
</span>
<span id="notemarks">
<button class="tool" onclick="cycle(this)" data-lily="~" id="tie" title="write/erase a tie" style="background-image: url('graphicalelements/tie.png')"><div class="foreground"></div></button>
<button class="tool" onclick="cycle(this)" data-lily="->" id="accent" title="add/remove an accent mark on the current note" style="background-image: url('graphicalelements/accent.png')"><div class="foreground"></div></button>
<button class="tool" onclick="cycle(this)" data-lily="-." id="staccato" title="add/remove a staccato dot on the current note" style="background-image: url('graphicalelements/staccato.png')"><div class="foreground"></div></button>
<button class="tool" onclick="cycle(this)" data-lily="\slashedGrace " id="grace" title="make the current note a grace note/not" style="background-image: url('graphicalelements/grace.png')"><div class="foreground"></div></button>
<button class="tool" onclick="cycle(this)" data-lily=" \breathe" id="breath" title="write/erase a breath comma after the current note" style="background-image: url('graphicalelements/comma.png')"><div class="foreground"></div></button>
</span>
<span id="notegrouping">
<button class="tool" onclick="group(this)" id="beam" title="specify start/end of beam" style="background-image: url('graphicalelements/beam.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="slur" title="specify start/end of slur" style="background-image: url('graphicalelements/slur.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="tuplet" data-param="3/2" title="specify start/end of tuplet; enter number after end specified" style="background-image: url('graphicalelements/tuplet.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="crescendo" title="specify start/end of crescendo" style="background-image: url('graphicalelements/crescendo.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="decrescendo" title="specify start/end of decrescendo" style="background-image: url('graphicalelements/decrescendo.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="repeat" title="specify start/end of repeated section" style="background-image: url('graphicalelements/repeat.png')"><div class="foreground"></div></button>
<button class="tool" onclick="group(this)" id="voices" title="specify start/end of polyphonic section; enter second voice after end specified" style="background-image: url('graphicalelements/polyphony.png')"><div class="foreground"></div></button>
</span>
<span><button class="tool" id="settings" onclick="cycleSettings()" title="settings" style="background-image: url('graphicalelements/cogwheel.png')"><div class="foreground"></div></button></span>
</div>
<div id="zoom-container">
<div id="zoom">
<div id="draft"></div>
<button class="tool" id="chord" onclick="setInputMode('chord')" title="chord mode: playing on the keyboard, write notes of one chord" style="background-image: url('graphicalelements/chord.png')"><div class="foreground"></div></button>
<button class="tool" id="correction" onclick="setInputMode('correction')" title="correction mode: playing on the keyboard, the same note will be rewritten">✗</button>
<input id="fragment" onchange="document.getElementById('submitfragment').disabled = false"/>
<button class="tool" onclick="advance()" id="submitfragment" title="pretty-print the current note/rest into the overview and edit the next one">🖉</button>
</div>
<div id="settingstab" style="display: none">
<table>
<tr>
<td><label for="qOctave">Q-octave:</label></td>
<td><input type="number" max="7" min="0" id="qOctave"/></td>
</tr>
<tr>
<td><label for="zOctave">Z-octave:</label></td>
<td><input type="number" max="7" min="0" id="zOctave"/></td>
</tr>
<tr>
<td><label for="layout">Keyboard layout:</label></td>
<td><select id="layout" onchange="initKeymap(this.value)">
<option>qwerty</option>
<option>qwertz</option>
<option>azerty</option>
</select></td>
</tr>
</table>
</div>
</div>
<div id="wait">Engraving...</div>
<div id="music">
<h1>How to begin</h1>
<ol>
<li>Be it a note or a rest that you want to write, <em onmouseover="highlight(this, ['durations'])">choose its ▲ duration</em> first. Skip this step if your choice is already selected.</li>
<li>Now decide. If you want a note, <em onmouseover="highlight(this, ['piano'])">play it on <span style="font-style: normal">▶</span> the keyboard.</em> If you want a rest, <em onmouseover="highlight(this, ['rests'])">use ▲ the toolbar button.</em> There are shortcut buttons to halve/double the duration and write a rest in one click.</li>
<li><em onmouseover="highlight(this, ['zoom'])">A draft appears in ▼ the zoom box,</em> ready to be <em onmouseover="highlight(this, ['durationmarks', 'notemarks'])">decorated with ▲ marks.</em> If you're happy with it, <em onmouseover="highlight(this, ['submitfragment'])">push ▼ the pencil.</em></li>
<li><em onmouseover="highlight(this, ['music'])">See your work pretty-printed in the sheet music.</em> Continue with the next note or rest, or click on the music to correct. Explore hotkeys to speed up composition: hover buttons with the mouse.</li>
<li>Some decorations apply to groups of notes. <em onmouseover="highlight(this, ['notegrouping'])">Push ▲ these buttons</em> at the start of the group, and again at the end.</li>
</ol>
<p>Move the mouse pointer over the text for clarification.</p>
</div>
<table id="piano" onclick="pianoclicked(window.event)">
</table>
</body>
</html>
