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

Tutorial

Zoé McLennan edited this page Jul 18, 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.

0. Introduction

We have two modes in Neon.js, insert and edit mode. You can switch between with tab, by using their hotkeys q and e, or by clicking on the blue buttons below.

In the tutorial, we will run you through each mode separately. You should be comfortable switching between them and realizing which mode you are in, as it is easy to perform actions under the wrong mode unknowingly. Insert mode is for inserting new elements, while almost every other functionality is contained within edit mode.

1. Edit Tools

Our editing features are built to be as intuitive as possible. First, make sure you are on the edit tab. You should load into edit mode by default, but if you are not you can press e or click on the blue edit button on the left sidebar.

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. You will also need to change the headshape of the cavum using the sidebar options when it's selected. 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. You can also do quick grouping by pressing 'g'. 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 q 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 let the page automatically refresh.

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. The page will automatically refresh after the merge. Keep in mind that merging systems ungroups all groupings and that they must manually be regrouped.

*Note: You MUST drag select, not shift select the systems

A more detailed breakdown of the issues regarding the OMR process and neon can be found at our wiki page, Tips for Correcting MEI files.

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