Storing rendered output

137 views
Skip to first unread message

Cyril

unread,
Sep 16, 2015, 9:02:09 AM9/16/15
to vexflow
Hi all,

Has anyone attempted to store the rendered output of VexFlow, so that it could be returned to the user without much processing required in the frontend?

For example in PHP, when you have some expensive object to create, you can generate it once, then serialize() it to string and save it disk, cache, or DB. Later when the user needs this, you can just unserialize() and the object comes into scope without the expense of the generation function.

I have many scores being parsed using the MusicXML plugin Dan created; and find that loading, parsing, and rendering this stuff every single time on the client frontend is a bit wasteful; given that the end output is always the same.

I was thinking that this could be done server-side once per score: using something like PhantomJS to render the score, and then to somehow store the created DOM and somehow store the relevant JS variables.  The instead of running all the parse stuff on the client, we just return some HTML with a < script > tag containing the hydrated JS vars.

Anyone tried this before or have some ideas on how to achieve it?

thanks,

Cyril

Michael Scott Cuthbert

unread,
Sep 16, 2015, 10:22:21 AM9/16/15
to vex...@googlegroups.com
Cyril,

I have saved the rendered output as a .png file without much difficulty before.  I know that you’re asking about storing something closer to the .SVG or something like that, but I don’t know that this would be more helpful than a .png since it couldn’t reflow, be transposed, or anything like that.

For storing all the variables, it is almost certainly possible to run json.stringify() on the VexFlow.Staff and other objects.  I do not know however how well they loads() back into an object.

My experience with music21 serialization in Python was that there was about a 4x speedup in deserializing the notation objects over reparsing MusicXML into our internal system, so it was worth the effort to set up something like that.

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

Gregory Ristow

unread,
Nov 10, 2015, 10:47:26 AM11/10/15
to vexflow
Cyril,

Sorry I'm so late to the plate on this -- but since others might find it helpful, posting anyway. In one project I work on, there's an option for users to download an SVG. Here's the relevant code:

function exportSVG() {
  var s = new XMLSerializer();
  return s.serializeToString(ctx.svg); //ctx is the VexFlow SVG rendering context
}

function downloadSVG() {
  var content = exportSVG();
  var fileName = "vexflow-export.svg";
  var a = document.createElement("a");
  var file = new Blob([content], {type: 'text/plain'});
  a.href = URL.createObjectURL(file);
  a.download = fileName;
  a.click();
}


Greg

Cyril Graze

unread,
Dec 4, 2015, 8:21:49 PM12/4/15
to vex...@googlegroups.com
Hi Michael & Greg,


Thanks a lot for your responses and sorry for the late reply, I had switched to working on another project and just restarted this now. I'll have  a try with your suggestions and see how it goes.

Your Music21 project looks like something I would definitely want to try out as well, Michael.

cheers,

Cyril

--
--
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 a topic in the Google Groups "vexflow" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/vexflow/9di-x3ASLd0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vexflow+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages