Examples of multi-measure music and / or piano staff music rendered using the vexflow library

[Craig Morrison]

I have gotten the tests to work locally, and walked throughout the tutorial, but in line with my desire to figure out how to responsively / dynamically display musical content based on the device / screen / viewport size, I need some knowledge of how measures work. It's easy in vextab notation, I think... But in the actual script that calls all the modules in the vexflow library, it didn't feel intuitive at all, and when I manipulated values that I had originally copied and pasted from the tutorial page, I crashed my working example page. Any ideas from the community on how to go about this resizing? I am a lower level programmer / learner, so I expect to learn much more along the way. I've been reading through all the old threads here to try to pick up any little scraps of knowledge I can about how exactly vexflow works... Thanks Mohit and other active posters / contributors!!

[Gregory Ristow]

Hi Craig -- it depends on what sort of resizing you want to do.  If you want to change layouts within VexFlow (how much white space there is between notes, or how many measures are displayed on each staff system, for instance), that would involve how you configure the size of each measure (or Stave in VexFlow speak), and whether you're manually setting the X positions of each element in the measure, or letting the Formatter handle it for you.  This gets into some pretty high level programming and depends a lot on the application needs you have.  If you're building an in-browser GUI music notation program, you'll end up spending a lot of time on exactly this, and the Formatter.preCalculateMinTotalWidth() function will become a dear friend of yours.

Method for Canvas, SVG, and Raphael Contexts:

If you don't need that functionality, and just want the image of the music to be sized to the width of the container, then the best (current) bet without hacking the VexFlow rendering engines, is to add a listener for window.resize events.  When they happen:

  - Clear your VexFlow canvas

  - Resize your VexFlow canvas to the new dimensions you want

  - Figure out how that container size compares to the width you've imagined as your default (basically, the width of all your measures combined).  For instance, if you'd imagined you'd have 500px width, but you actually have 750px available, you'd want to scale the rendering to 1.5 times the original.

  - Call ctx.scale(width, height) with whatever the scale factor you calculated was

  - Redraw your VexFlow notation.

Responsive Kluge for SVG Context Only:

You can leave the sizing to the browser in the new SVG context, but it takes a little bit of hacking. If you're ok with that, reach into the SVG itself and set its style.width & style.height elements as a percentage to make the SVG automatically resize to its container width:

    ctx.svg.style.width = "100%";

    ctx.svg.style.height = "100%";

If you do this, to keep the image from stretching horizontally or vertically, you may also want to add a preserveAspectRatio = "xMinYMin meet" (note the capitalization of xMin vs YMin!!!) to the SVG.  You can do this by calling:

    ctx.svg.setAttribute("preserveAspectRatio", "xMinYMin meet");

Note that any time you call ctx.clear() you'd also need to set the preserveAspectRatio again, since it would be removed from with all of the other elements from the SVG.

Hope this helps -- sorry there's not an easier answer!

Greg

[Craig Morrison]

Gregory, Thank you very much for giving me some ideas to try to move forward with this.  I really appreciate it.  My idea is that a musical score rendered in a browser would always be visible, regardless of the size of the window, so the notes wouldn't change size, just, the number of measures visible would be less or more, depending, and wrap down to the next line(s) accordingly.  I would also like to create the interface as a responsive one, in terms of device (media queries and whatnot), so that the expected width would change based on the device's viewport size.  To see the functionality I'd like to do, go to this link and launch the demo, and start resizing your browser window.  http://www.soundslice.com/

[Gregory Ristow]

Ok, got it -- then basically your process would be:

   - Figure out the minimum width in px needed for each measure using the formatter.preCalculateMinTotalWidth()

   - Use that to figure out how many measures you can fit on each line

   - Distribute any remaining available width to the measures when you actually format them -- I tend to do this proportionally (what % of a line is a measure taking up? It gets that % extra width to fill the line).

They've really done a great job of this at soundslice.com -- totally impressive work going on under the hood.

[Craig Morrison]

Agreed. The site looks great and functions really, really well. Apparently Adrian Holovaty coded the entire rendering engine from scratch. If that name sounds at all familiar, it's because he was a cofounder of Django, the Python framework. Any ideas on implementing the scroller tool on playback? The little orange cursor-like line, that scrolls from note to note?

[Adrian Holovaty]

Hey, my ears were ringing. Thanks for the nice words! And note that we offer licensing for the Soundslice player if you want a "turn-key" solution (but of course I realize the fun and flexibility of doing it on your own).

Adrian

On Mon, Mar 9, 2015 at 6:39 PM, Craig Morrison <frogmor...@gmail.com> wrote:

Agreed.   The site looks great and functions really, really well.  Apparently Adrian Holovaty coded the entire rendering engine from scratch.  If that name sounds at all familiar, it's because he was a cofounder of Django, the Python framework.  Any ideas on implementing the scroller tool on playback?  The little orange cursor-like line, that scrolls from note to note?

--
--
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/d/optout.

[Craig Morrison]

Hey Adrian,

Thanks for chiming in, Yes, my biz partner and I have been wondering about the details of licensing your tech. I'll drop you a line on your soundslice email later, so as not to jam up the vexflow group's threads with off-topic stuff.

Craig

[YusufSalahAdDin]

Hi man, what's about this? Finally, could you do this?