-
Notifications
You must be signed in to change notification settings - Fork 6
For Developers
Neon's functionality is split into many different classes, in many different folders, and it can be hard to understand which files control which functionality when first trying to navigate the project. Here we try to break down the project into understandable chunks.
The HTML for the home page is stored in templates/demo.html and templates/index.html. During development, demo.html is used because of a variable in conf.py, but during production, index.html should be updated to match. The JS code that is linked with the functionality for uploading files is found within neonsrv/interface.py, in the RootHandler class. Once uploaded, each MEI file in the MEI_DIRECTORY folder shows up on the index, and links to the /editor/ page as noted in the URLs of server.py.
The HTML for the editor page is found in /templates/neon_square_devel.html. This HTML file contains mostly information for the navbar, but also the containers for the sidebar and the fabric canvas. The JS code for handling the navbar, sidebar, and initial hotkeys is found in src/views/gui.js. The actual canvas rendering happens in src/neon.js (You can see this in the HTML, starting on line 77).
In the src/neon.js file, it starts to load the background image, the glyphs from the svg files, as well as the MEI file. Once these things are complete, it begins to use these elements to generate the canvas itself, using fabric functions. It loads in all the correct objects using /src/nn/squarenotepage.js.loadMei, which parses through the XML and puts in the neumes, clefs etc. into the canvas. All of these objects have their own JS class which you can see in src/models.
Once fabric is loaded, all the interactions (including deletion, insertion, movement, etc.) will be handled by src/nn/squarenoteinteraction.js. This is the biggest single JS file we have, which handles a majority of actions done by the user. This is the interface between the user doing any type of action, and changing both the fabric instance as well as the underlying MEI file. Any feature that the user can use will be stored in here.
Changing the MEI file is done by POSTs which are mostly started in src/nn/squarenoteinteraction.js. The route the post takes is to server.py -> neonsrv/tornadoapi.py -> neonsrv/modifymei.py. In the latter two files, the class names are very clear on what the function does. All code related to actually updating the MEI database should be done in python, in the neonsrv folder.
Past developers have made some headway in the implementation of editing of cheironomic scores. You will notice that it's present throughout the entire JS project. If you wish to continue it's development, first create a cheironomic folder in your MEI_DIRECTORY and then uncomment the code on lines 127-136 in templates/demo.html. This will allow you to upload and save cheironomic scores and view the cheironomic editing page.