Tutorial

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. Insert Mode

To start, switch to insert mode by either clicking on the blue button, or using the i hotkey. 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. Note that you should set the system to be system #1 using the slider on the sidebar, as it is the first system on the page (All the systems after will have their system numbers modified).

[IMG]

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. If you are having difficulty seeing the images to match with, try using the h hotkey in order to temporarily make the glyphs transparent.

[IMG]

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.

2. Edit Mode

Edit mode contains more nuanced (read: hacked together) functionality, due to the strange way that the OMR process can make mistakes in the process. We are going to split the edit tutorial into two parts: a) Fixing errors in OMR process using clef insertion and merge systems and b) Editing tools. First, switch to the edit tab by clicking on the blue edit button, or using e.

2a. OMR Correction

This section mimics a scenario 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.

[IMG]

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.

[IMG]

2b. Edit Tools

Our editing features are built to be as intuitive as possible. 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 groups too; try moving the first set of neumes into the correct position.

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

[IMG]

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.

[IMG]

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!