So apparently someone got hired to make a highly functional cross-browser vexflow editor for $1000 in 30 days.

[Cyril]

http://www.freelancer.com/projects/Javascript-XML/Interactive-Notation-Editor-based.html

Requirements:

http://pastebin.com/raw.php?i=CXMimkAu

This made me laugh :D 

If someone can pull this off I will be thoroughly impressed!

[Mohit Muthanna]

Ha. That's $1000 down the drain.

--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en

--
Mohit Muthanna [mohit (at) muthanna (uhuh) com]

[Alexandre gaudencio]

The dev must be like : 

2013/1/9 Mohit Muthanna <mo...@muthanna.com>

[Luuk de Waal Malefijt]

It's been a while since I've seen the code. I remember something with it being hard making it an interactive app because of the way it is rendered.

What are specifically the problems that make this a laughable attempt?

[Mohit Muthanna]

It's not that hard to make it interactive. I have some interactivity working, and so do a few others on this list.

That said, it is pretty hard to make something good. There are a lot of moving parts, with complex interactions (e.g., when you're dealing with multiple voices, etc.)

30 days and $1000 trivializes the complexity of the problem, especially considering the requirements (interactivity, sound, MIDI, MP3 export, etc.)

[Luuk de Waal Malefijt]

So what kind of money would make a thing like this viable? Are we talking about ranges in the ten thousands?

Especially since sites like Songsterr are popping up with their version (albeit flash based) although im pretty sure the renderer is based on vexflow and Alphatab.

[Nikos M.]

Hi all,

actually i have scheduled to create a project like this
An interactive music notation editor (and more, like producing midi files)
using (parts of) the vexflow api.

Of course this will be free and open source.

The sad thing is that although i have all the tools that are needed for this project
i lack the time to start with it.

Anyway i think it will be available soon (maybe 2-3 months time)

So dont laugh yet :)

[Nikos M.]

Actually sth like this already exists here:
https://github.com/DDMAL/Neon.js/wiki/Installation-and-Instructions

i will use parts of it also but integrate with vexflow to produce modern music notation.

Also it will have import/export functionality to midi and live palyback
also maybe have import/export to music-xml format as well,

Everyone willinfg to participate in thsi is welcome, to drop me an email.

Nikos

Τη Τετάρτη, 9 Ιανουαρίου 2013 12:34:53 μ.μ. UTC+2, ο χρήστης Cyril έγραψε:

[Cyril]

I have been working on an editor extensively, a previous prototype I posted here. It's definitely taken a lot of time to where it is now, (however,  I am an amateur programmer). In any case, it's not like a notation editor system is particularly obvious. So I made a lot of design choices that I had to change later. But I would say the project would be well worth many more thousands of dollars and would take significantly longer than a month.

Remember that Vexflow is a rendering engine, most of the guts of what an editor would be completely unrelated code to handle the score "state" as well as UI and command handling.

[Nikos M.]

Well i have already completely (almost) laid out the architecture of the editor and the various modules needed.

The general scheme is this. It will use an MVC pattern in javascript in order to produce various outputs from same model data
eg: same data (music score)
Outputs:
Sheet Score, MIDI, MusicXML. etc..
Also live playback, can be considered as output.

The Sheet Output, which is also the editor main screen will use a Scene graph api (like Flash, with layers) so each note/item can be independently positioned
and z-indexed, eg NEngine.js (the project is closed, but i have the code) other alternatives are possible.

All open source javascript libraries (eg read./write MIDI, read/write MusicXML, produce live playback AUDIOLIB) already exist

The Neon.js is a good prototype to build upon, as a start.

Functionalities:
Insert/Edit/Delete/Group/Ungroup/Print/Play/Export/Import/Save
Right Click popup with duration choices to insert (eg whole, half, quarter etc..)
Alternative button menu with drag-drop to select specific duration note

Grouping/Ungrouping of notes, so beams can be rendered etc.. Vexflow can handle all this dynamically.
etc..

Functionalities for future iterations:
Chords, Transposition, Various Symmetry/Geometric Operations on the score (eg reflect this group of notes , etc.. for some space stuff :))

Tricky issues:
 large data is an issue, but for starters the application can handle 1-5 small pages of music notation.
Pagination and height/width , measure bars handling will have to be dynamic.
Scene graphs work frame-by-frame so the sheet output will have to drawn (at least part of it) dynamically on each frame (like Flash does)
so each change of dimensions or number of items is taken care of.

The vexflow api will be used to render the actual notes and beams etc and also for dimension calculations

This is in rough outline the  architecture.

Anyone want to be part of it?


Nikos

[Mike Blackstock]

Sure, I'd love to help out. I had a prototype of this sort of thing a few years back, but I got

sidelined. Vexflow has re-ignited my interest.

I have a file manager/workbench setup that might be useful; its at http://www.omet.ca

I use dojo a lot (dojotoolkit.org)

-Mike

[Mike Blackstock]

PS - I also have a development server we can used - Debian Linux, and I can install any software we might need - SVN, CVS or whatever.

Cheers,

Mike

On Thu, Jan 10, 2013 at 3:50 PM, Nikos M. <niko...@gmail.com> wrote:

[Nikos M.]

Hi Mike, the project will be hosted on github probably and it is going to be open source.

The intention is to be used as a music theory and experimentation learning tool and also (if possible)
as a programming learning tool.

The first part should be a complete interactive editor with all basic functionalities of editors like
Insert/Edit/Move/Delete/Copy/Paste/Select/Group/UnGroup/Save/Print/Play

Import/Export to MIDI/MusicXML can be left as a second phase of the project.

Future Functionalities should include: support for more voices/chords/tabs/operational transformations
(so many people can simultaneously work on same score, kind of ambitious here)/ harmonizing melodies/
transposition/ symmetry operations (like reflections etc..) any other ideas welcome..

The only issue right now, is time, but i am going to make time for this project soon.

As a start i suggest to study the Neon.js code and see how vexflow can be integrated with it to display
modern notation. My initial study has led me to think that some parts of vexflow api will have to be abstracted as independent modules to be fit
into the editor. i can also send the NEngine.js code (has similar api to Flash if you know it) or any other Scene graph js api would be fine

Nikos

[Cyril]

Hi Nikos,

Have you seen my editor prototype? cyrilsilverman.com/editor

I can tell you that those basic commands are going to be pretty trivial to implement since most commands are just simple manipulations of standard properties. The real design difficulty comes from how to store the score data. While vexflow contains all the data, the API does not have any built in methods for dynamically editing or removing any objects. I would not use Vexflow to store a dynamic score data and only use it as the score rendering module. In addition, as Vexflow expands you are not tied down to any specific version of it, improving maintainability.

-Cyril

[Chris Ward]

I agree with Cyril.

I use VexFlow for rendering primarily. I don't need a "full" editor for my application so have a simpler use case.

I store my state in a "model" with getters/setters and ghis can be serialised to and from JSON.

So my drag and drop events update the model and then call renderModel()

I've used this approach across a number of my plugins for jQuery.

Chris

Sent from my iPhone

On 12 Jan 2013, at 23:50, Cyril <silver...@gmail.com> wrote:

> Cyril

[Ahmed Hassan]

Hey Nikos i am actually working hard on an mxml to vexflow parser - is there any space to cooperate or participate?!

would be great to hear from you!

Kind Regards from Berlin

Ahmed

[Michael Scott Cuthbert]

Just a note in the process of making my own editor for the online components I’ve made for MIT's Music Fundamentals class.

In detecting note selections, the hardcoded “ - 10” in formatter.js was the hardest bug I found to debug in making a function that could figure out what note had been clicked in Vexflow if the canvas does not begin at left: 10. I’ve found that to put a piano brace I need left: 20, and because of the data format, I’ve been drawing additional measures as new staves placed after the first.

formatToStave: function(voices, stave, options) {
var justifyWidth = stave.getNoteEndX() - stave.getNoteStartX() - 10;


The 10 pixels needs to be compensated for in getting the x position of the note.


var vfn = new Vex.Flow.Note( … )

… do all your stave drawing, etc. then with nextTicks set to 0 at first...
var nextTicks = 0;
var fixVexflowPadding = 10;

… iterate over each note as vfn...

var nTicks = parseInt(vfn.ticks);
var formatterNote = formatter.tContexts.map[String(nextTicks)];
nextTicks += nTicks;
var actualXPositionFromCanvasStart = formatterNote.x + stave.start_x + stave.glyph_start_x - stave.x + fixVexflowPadding;


then that can be compared to the actual pixel clicked in the document.

// mouse event handler code from: http://diveintohtml5.org/canvas.html
var xClick, yClick;
if (e.pageX != undefined && e.pageY != undefined) {
xClick = e.pageX;
yClick = e.pageY;
} else {
xClick = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
yClick = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var offset = $(canvas).offset();
var xPx = (xClick - offset.left);
var yPx = (yClick - offset.top);

var lineSpacing = stave.options.spacing_between_lines_px;
var linesAboveStaff = stave.options.space_above_staff_ln;
var totalLines = (stave.options.num_lines - 1) + linesAboveStaff + stave.options.space_below_staff_ln;
var pixelScaling = totalLines * lineSpacing/$(canvas).height();

var yPxScaled = yPx * pixelScaling;
var notesFromTop = yPxScaled * 2 / lineSpacing;
var notesAboveFirstLine = Math.round(((storedVFStave.options.num_lines - 1 + linesAboveStaff) * 2 )- notesFromTop);

xPxScaled = xPx * pixelScaling;

then compare xPxScaled to actualXPositionFromCanvasStart +/– a window and the note can be identified.

this assumes that the canvas has not been distorted from the correct proportions. If it has then you’ll need a separate X and Y pixel scaling.

Hope that this helps others in their work!

P.S. — the winning bidder on the project bid $250.

Best,
Myke

> --

> --
> You received this message because you are subscribed to the Google
> Groups "vexflow" group.
> To post to this group, send email to vex...@googlegroups.com
> To unsubscribe from this group, send email to
> vexflow+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/vexflow?hl=en
>

> ---

> You received this message because you are subscribed to the Google Groups "vexflow" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.



--- ---
Michael Scott Cuthbert

Homer A. Burnell Career Development Professor, MIT
Associate Professor of Music +1 (413) 575-6024
cuth...@mit.edu http://www.trecento.com

[Mohit Muthanna]

On Tue, Oct 22, 2013 at 10:12 PM, Michael Scott Cuthbert <cuth...@mit.edu> wrote:

Just a note in the process of making my own editor for the online components I've made for MIT's Music Fundamentals class.

In detecting note selections, the hardcoded " - 10" in formatter.js was the hardest bug I found to debug in making a function that could figure out what note had been clicked in Vexflow if the canvas does not begin at left: 10.  I've found that to put a piano brace I need left: 20, and because of the data format, I've been drawing additional measures as new staves placed after the first.

formatToStave: function(voices, stave, options) {
         var justifyWidth = stave.getNoteEndX() - stave.getNoteStartX() - 10;


The 10 pixels needs to be compensated for in getting the x position of the note.

You don't need to do this (and it's not a great idea to tie your note-detection to the formatting algorithm). Each stave note knows it's x-position and bounds, which you can get from getAbsoluteX(...) and getBoundingBox(...).

 

     var vfn = new Vex.Flow.Note( ...  )

     ... do all your stave drawing, etc. then with nextTicks set to 0 at first...

     var nextTicks = 0;
     var fixVexflowPadding = 10;

        ... iterate over each note as vfn...

     var nTicks = parseInt(vfn.ticks);
     var formatterNote = formatter.tContexts.map[String(nextTicks)];
     nextTicks += nTicks;
     var actualXPositionFromCanvasStart = formatterNote.x + stave.start_x + stave.glyph_start_x - stave.x + fixVexflowPadding;


then that can be compared to the actual pixel clicked in the document.

                // mouse event handler code from: http://diveintohtml5.org/canvas.html
                var xClick, yClick;
                if (e.pageX != undefined && e.pageY != undefined) {
                        xClick = e.pageX;
                        yClick = e.pageY;
                } else {
                        xClick = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                        yClick = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
                var offset = $(canvas).offset();
                var xPx = (xClick - offset.left);
                var yPx = (yClick - offset.top);

                var lineSpacing = stave.options.spacing_between_lines_px;
                var linesAboveStaff = stave.options.space_above_staff_ln;
                var totalLines = (stave.options.num_lines - 1) + linesAboveStaff + stave.options.space_below_staff_ln;
                var pixelScaling = totalLines * lineSpacing/$(canvas).height();

                var yPxScaled = yPx * pixelScaling;
                var notesFromTop = yPxScaled * 2 / lineSpacing;
                var notesAboveFirstLine = Math.round(((storedVFStave.options.num_lines - 1 + linesAboveStaff) * 2 )- notesFromTop);

                xPxScaled = xPx * pixelScaling;

then compare xPxScaled to actualXPositionFromCanvasStart +/- a window and the note can be identified.

this assumes that the canvas has not been distorted from the correct proportions.  If it has then you'll need a separate X and Y pixel scaling.

Hope that this helps others in their work!

P.S. -- the winning bidder on the project bid $250.