ddmal / neon

A web-based MEI neume editor.

Neon v6.0.0

Neume Editor ONline.

Neon is a browser-based music notation editor written in JavaScript using the Verovio music engraving library. The editor can be used to manipulate digitally encoded early musical scores in square-note notation.

Neon is a re-write of Neon.JS using a modified version of Verovio to render MEI-Neume files according to the MEI 5.0.0-dev specifications.

Neon for Artists

Neon has two main modes: viewer and editor. To learn how to use both, read the instructions on our wiki.

Neon for Developers

To Run Neon locally

Requirements

• yarn:
  • brew install yarn on Mac

Setup

1. Install the dependencies using yarn:

yarn install

2. Build webpack:

yarn build

3. Start the server:

yarn start

4. Access the page at: http://localhost:8080.

For more information, read the instructions on our wiki.

Testing

We use Cypress for E2E testing.

Run the command yarn test. Read more about testing on our wiki.

Verovio

Verovio is present as an npm package under verovio-util/verovio-dev with the name verovio-dev. Its contents come from the emscripten/npm-dev folder in a Verovio project folder.

neon's Issues

Original Image rendered/scaled behind verovio

A jpeg file containing the original image should be rendered behind the verovio svgs

Set initial zoom level to be larger

when the mei files are initially rendered they are too small and should be initially set to a higher zoom level.

Merge Neon2 and Neon3 into one editor

Initially load Neon2 and make it possible for users to move into"Editing Mode" to edit the Mei file.

push uploads folder

make sure uploads is pushed to git

Add error notifications

Implement error notifications on the front page that appear when a user:

• Uploads a single file
• Uploads a non-supported file type

Use the same method later on the editor page.

Cannot drag neumes when text is rendered

If we choose to render the syllable text then we can no longer drag neumes. When the checkbox is the unchecked, we are still unable to drag the neumes.

Multiple note selection

Some sort of selection box / shift-click feature could be implemented to move multiple neumes at once

Add opacity for background image

Currently we can only change the opacity of the glyphs but we should also be able to change the opacity of the background image.

Payload too large error

When working with a full mei file, when we try and save express throws a PayloadTooLargeError.

Implement Syllable Text

text stored in the tags should be rendered above notes

Implement Divisions

Render division elements in all forms: small, minor, major and final.

InfoBox Neon3

Implement Neume information boxes in Neon3. The InfoBox onClick events are currently conflicting with the dragHandler onClick events so need to make them independent of each other.

Implement Custos

we need custos at the end of staff lines

Adding att_shared coordinated attributes to <neume>

element needs to have the ulx attribute in order to place groupings on the staff instead of on the element.

Implement the current Neon2 tools on Neon3

Tools include:

• Zoom sliders
• Pan sliders
• Opacity
• layered bg image
• infoBox

MEI opacity resets when reloaded

When the MEI is re-rendered in verovio, Neon2 displays the opacity as being 100% even though the controls may be set to a different value. This different value should be used.

resetting zoom throws error Neon2/3

Zoom reset throws error in the Neon2/3 branch but is still functional. Need to find out why .getAttribute is throwing errors.

make cursor images variable with scale

Currently the cursor images for various elements are set at a static size. They should change size based on the current scale of the image.

Similarly, the slider for inserting systems should dynamically change the size of the system the user wishes to insert.

File download

Be able to download edited mei file and original png file.

Implement Ornaments

Must be able to render all types of ornaments and divisions.

Design frontend for Neon3

Design the frontend of Neon3 so users can both edit and insert elements.

Movement of Staff Lines

Staff lines should be able to be moved, with the elements on them keeping their relative positions

Auto Saving

Implement auto saving so users do not loose all their progress when they exit the page.

Set bounding boxes

Add an interface to Verovio in order to set the bounding boxes needed for scaling

• look into attrCoordinated() function

Refactor Neon2 for compatibility with unit tests

Neon2 needs to be refactored to be more compatible with unit testing and could be more intuitive in general.

Revert to original uploaded MEI

User should be able to revert all changes and return the mei to the original uploaded version.

Neume information

provide neume information (system position, pitch, etc.) when clicked on.

Insertion of elements

The user should be able to insert elements such as notes / clefs into the document.

Underscore in Syl text should represent underline

Rather than being rendered as an in-line curve, an underscore in the text in <syl> tags should cause that text to be underlined and remove the underscore.

Update custos image

Rework the custos png image to not have a white background.

Add warning to revert

add pop up warning to revert action to remind users that they will loose all changes.

Saving in Neon2/3 affects scaling

If you drag, save and refresh in Neon3, the scaling as affected. The svg become larger and is shifted left.

Loading Neon2 with different MEI files

Some sort of splash page that lets you select which MEi file to edit.

Image reloads every time Neon3

Image reloads every time a neume is moved since the page is refreshed. It should only load once.

Move Neumes

Move neumes as a whole rather than just individual neume components.

Saving MEI files

User should be able to save the MEI file stored in verovioToolkit to disk

Misplaced </layer> in saved MEI after edit

Sometimes after saving an edited MEI file, the output will have a misplaced </layer> before the content is finished. For example

...
<layer xml:id="layer-0000001762477840" n="1">
    <syllable xml:id="syllable-0000001718454274">
        <syl xml:id="syl-0000001225983262" n="initial">
            <rend xml:id="rend-0000001644850468" color="red">O</rend>
        </syl>
        <neume xml:id="neume-0000000787547370">
            <nc xml:id="nc-0000000177574793" oct="3" pname="g" />
            <nc xml:id="nc-0000000213781314" oct="3" pname="f" intm="d" />
            <nc xml:id="nc-0000001799941834" oct="3" pname="g" intm="u" />
        </neume>
    </syllable>
</layer>
<syllable xml:id="syllable-0000000944613709">
    <syl xml:id="syl-0000000867234019">splen_</syl>
    <neume xml:id="neume-0000001065376939">
        <nc xml:id="nc-0000000755714094" oct="4" pname="d" />
        <nc xml:id="nc-0000001352791161" oct="3" pname="b" intm="d" />
    </neume>
    <neume xml:id="neume-0000000065042260">
        <nc xml:id="nc-0000000179101831" oct="3" pname="a" />
        <nc xml:id="nc-0000001633605519" oct="3" pname="b" intm="u" />
    </neume>
</syllable>
...

Any LayerElements outside of the <layer>...</layer> are not rendered and verovio reports this as an error. The rendered neume also is not rendered right.

X & Y offsets in editorActions

Currently have hardcoded offsets for x and y values when trying to modify note positions in DragController.js. Need to investigate source of offsets and set it dynamically for different sized MEIs

Rework naming schema

Think of a good naming schema to use as the project grows and change the names of several .js files.

Add developers and help to navbar

Add a developers dropdown and a help link to the navbar. Help should redirect to the Neon2 wiki.

boundaryEnd error (Neon3)

Depending on the version of the verovio toolkit, the following error is thrown when saving and reloading an MEI file:

verovio-toolkit.js:1 --> [Error] Could not find start element '' for boundaryEnd

This causes the system to be truncated and several neumes are not rendered properly.

Implement Opacity control for the background image/neumes

Have a way for the user to control the opacity level of both the background image and the rendered neumes.

Moving Clefs

Be able to move clefs similar to ncs

Make the front end website for Neon2

Design and Implement the front end of Neon2

Clean up "Controller" files

Refactor and add better documentation to various "Controller" files in public/src/.

Make test Mei4 file

make a test Mei4 file in order to test Neon2/3 functionality.

Order shifting in the MEI file

Curently, notes when moved horizontally just have their ULX attribute modified, but in the MEI file, if the move shifts position behind or after another element, it should be dynamically updated.

Add att_visual diagonalright attribute to <nc>

In compliance with MEI 4.0, diagonalright needs to added as an attribute for tags.

Implement Zoom

Implement zoom so that the background layer and neume layer zoom simultaneously to the same level

Implement neume groups

Groups of neumes should have a separate image