Coder Social home page Coder Social logo

ddmal / neon Goto Github PK

View Code? Open in Web Editor NEW
23.0 7.0 8.0 3.18 GB

A web-based MEI neume editor.

Home Page: https://ddmal.music.mcgill.ca/Neon

License: MIT License

JavaScript 2.31% HTML 3.56% Shell 0.06% CSS 6.92% TypeScript 87.15%
mei verovio javascript square-notation neume omr

neon's Introduction

Neon v6.0.0

Build_Status License: MIT dependencies Status devDependencies Status

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
  1. Build webpack:
yarn build
  1. Start the server:
yarn start
  1. 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 People

Contributors

atranimal avatar cadagong avatar caitlin-hutnyk avatar carrieeex avatar chetbae avatar deepio avatar dependabot[bot] avatar gabbyhalpin avatar jinh0 avatar joyfulgen avatar jregimbal avatar kemalkongar avatar pythonsemicolon avatar raviraina avatar vigliensoni avatar yinanazhou avatar zhannaklimanova avatar zoemcl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

neon's Issues

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.

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.

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.

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.

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.

Auto Saving

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

Insertion of elements

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

Movement of Staff Lines

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

Rework naming schema

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

Implement Zoom

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

File download

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

Set bounding boxes

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

  • look into attrCoordinated() function

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.

Payload too large error

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

Multiple note selection

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

Saving MEI files

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

Neume information

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

Add warning to revert

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

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

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.

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.

Move Neumes

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.