Skip to content
This repository has been archived by the owner on Aug 26, 2019. It is now read-only.

Tutorial

Andrew Tran edited this page Jun 29, 2017 · 26 revisions

Neon.js Tutorial

The Neon.js tutorial will run you through the basic functionality of Neon and get you prepped in order to start correcting MEI files. These are just supplementary notes; to complete the tutorial and follow along, please open the Neon.js webpage, and select the tutorial from the top of the page to begin. If at any time you want to restart the tutorial, simply choose the revert option from the dropdown at the top of the editor page.

1. Edit Tools

Our editing features are built to be as intuitive as possible. First, switch to the edit tab by clicking on the blue edit button, or using e.

You can select elements by clicking on them, or if they're too small you can drag a box over them. You can then move them around to place them in the correct position. You can do this to group of neumes too. try moving the first set of neumes into the correct position. If you are having difficulty seeing the images to match with, try using the h hotkey in order to temporarily make the glyphs transparent.

*An alternative control method is to use the up and down arrow keys to reposition the neumes after selection.

One of the most important features of Neon is grouping. Oftentimes, the OMR will not be able to group neumes together into torculuses, porrectuses, etc. and the user must group the neumes manually.

To group, simply drag select the neumes you want to group, and select the correct choice from the dropdown that appears on the sidebar. There are a few confusing ones, so please check out our grouping glossary in the wiki for more info. If you make a mistake, you can ungroup using the button or u.

->

2. Insert Mode

To start, switch to insert mode by either clicking on the blue button, or using the i hotkey. (You can also switch between edit and insert using the tab button) There are currently 4 different elements to insert. Start by selecting the system button or s and placing it in the correct position, as indicated by the background image.

With a system down, you can start adding elements to it. Switch to the clef insertion by using the button or c, and place an f-clef down at the correct position on the system according to the image. Don't forget to use the h hotkey to check!

From here on, use the rest of the insert tools to fill in the rest of the system. Place the neumes, and divisions where they should be, according to the background image. You can switch neume headtypes in the neume sub controls on the sidebar, including custos.

3. OMR Correction

Edit mode contains some more nuanced (read: hacked together) functionalities, due to the strange way that the OMR process can make mistakes in the process. This section mimics two scenarios you might encounter when correcting Salzinnes.

Oftentimes, the OMR process will mis-classify a clef as a neume, and thus will not render any of the neumes as there is no clef to give pitch position. The solution to this is to place a clef where it should be, and refresh the page.

You'll notice that the system is broken into two chunks. This is because in the background image, sometimes if the system is not straight, the OMR recognizes it as two separate systems. To remedy this, we need to use our merge systems feature. By default, systems are 'locked' or unselectable because they would interfere with the selection of elements on the systems. To unlock them, uncheck the system lock button or using l. Select the two systems, and choose the merge systems button, or m. You will need to refresh for the changes to appear.

Conclusion

There are a few more small things that you will discover as you try out Neon.js. Please let us know if you think there is anything missing from this tutorial!

Clone this wiki locally