19/02/2008 - Term 2, Week 7 (start of)
- The Staff object, allowing any five-line staff (with associated clef, time signature and key signature) to be drawn to the browser in accordance with MusicXML attributes.
- The Note object, which takes MusicXML attributes and positions and draws any single note to a given staff.
- The Chord object, which takes an array of notes and positions them around each other so as to form a valid chord on a given part. This is the area which took longer than expected as keeping to the musical notation standards (cf. this previous entry) was complex. The current implementation simplifies chord layout slightly by viewing each chord as two distinct sub-chords by the stem direction of the composite notes (i.e. 'up' or 'down'), and placing them side by side This approach should be sufficient for the purposes of the editor as it should still be clear what is going on to the user.
Also, last week I contacted the creators of the Virginia Tech Online Music Dictionary who have since granted me permission to use symbols found on that website in the first version of the system. The codes of the symbols I have used so far from this website are: 08-10,12-15,23-28,43-48,50-51,57-58 (see Supported Symbols for explaination of symbol codes).
It has been necessary, due to oversights in the original design, to add a further 19 symbols to the system for: time signatures, vertically flipped versions of the stem flags (for down-stems) and ledger-lines. Out of a new total of 87 required symbols, I have now acquired 65 of them.
User Interface Design
The design of the user interface for the editor system, which until now has been sketchy in some places, has been further developed. The current aim is for the webpage to have three main columns: left-sidebar, main and right-sidebar. The main section will display the score, and the left-sidebar will display the general options and links around the rest of the site (e.g. 'Save work'). The right-side bar will be the score editing tool bar and will contain a panel for editting the attributes of the selected symbol (e.g. change the no. accidentals associated with the selected note) and a 'playground' stave where the user can mess around with new notes/chords before dragging them onto the score or drag existing notes/chords back onto to significantly re-shuffle things. The user will also be able to change the attributes of selected notes as they sit within the score and will be able to drag notes around to change their pitch / location in the score.
This design will evolve as I move closer to its implementation.
Work to do
Following is the coding work required to bring me to where I originally specified the first version of this project should get to:
- Implement the Part, Measure and Score objects in the client-side system, allowing full pieces of music to be displayed in the browser.
- Implement a MusicXML parser function that will process a MusicXML file and generate the data required to display it.
- Implement the user interface for interactively modifying the score in the browser
- Implement a function that will save the data back to MusicXML format (and back to the server)
- Complete implementation of the simple server-side system that will allow users an account where they may access their saved scores and edit a few details
- Implement the auto-saving feature, so that each change in the browser is sent to the server asynchronously (Ajax), as and when the user makes them.
In week eight or nine I will be required to give a presentation to my assessors summarising what I have achieved with this project and demonstrating its current capabilities. It is my hope that I will be able to get everything listed above done in time. However, if I am not able to do so, note that the above tasks are listed in order of priority. A natural cut-off point would be after point 4, not completing the aspects of the server-side system in time for the demonstration.
Whatever I get done in the next fortnight, it is my intention that I finish implementing the originally specified version of the system over the next few months.
Watch This Space
There will be regular updates on this blog marking out my progress for the next few weeks