Vexflow: documentation on creating multiple bar

[cedvdb]

The title is pretty self explanatory. It should be in the doc in my opinion.

Here is how I do it at the moment:

  createStaff(){
    let renderer = new VF.Renderer(myDiv, VF.Renderer.Backends.SVG);

    // Configure the rendering context.
    renderer.resize(800, 500);
    let context = renderer.getContext();
    context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

    let topStaff = new Vex.Flow.Stave(20, 0, 300);
    let bottomStaff = new Vex.Flow.Stave(20, 100, 300);
    let top2ndStaff = new Vex.Flow.Stave(320, 0, 300);
    let bottom2ndStaff = new Vex.Flow.Stave(320, 100, 300);


    topStaff.addClef('treble');
    bottomStaff.addClef('bass');
    let brace = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(3); 
    let lineRight = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(0);
    let lineLeft = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(1);
    topStaff.setContext(context).draw();
    bottomStaff.setContext(context).draw();
    brace.setContext(context).draw();
    lineLeft.setContext(context).draw();
    lineRight.setContext(context).draw();
    top2ndStaff.setContext(context).draw();
    bottom2ndStaff.setContext(context).draw();
  }

I started using the lib today so my code could be wonky, good job with it. Imo this sort of things should be abstracted though.

[zhengkai2001]

It is such a coincidence that I wanted to post a similar issue, after making effort for trying to add bar lines but still couldn't figure out, and finally saw this issue opened just one day ago.
Thanks for your useful snippet :).

[zhengkai2001]

just found this,
stave.drawVerticalBar(50, true);
you can visit http://public.vexflow.com/tests/ , then download vexflow-tests.js and look into it.

[Silverwolf90]

Agreed that this should be in the docs. But for confirmation, you are indeed doing this the idiomatic way. Basically a Stave is not the "full system stave", but only a measure's slice of the "full system stave". The semantics are definitely a bit awkward.

[zhengkai2001]

Sorry, I didn't check github's email.
I was using this snippet in my project. See attached. It is from the
official test site.
Hope it's not too late and helps.

Kai Zheng

On Tue, Nov 15, 2016 at 12:51 PM, Cedric Vanden Bosch <
[email protected]> wrote:

@zhengkai2001 https://github.com/zhengkai2001 Did you use my technique
or the one you alluded to ?

If you used mine did you manage to make the notes on every bar line up ?
Because all the notes I add to the bars after the first one are added on
top of the first one.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/0xfe/vexflow/issues/470#issuecomment-260731139, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGm7X4FUDbfOIFLUd5hphx48s0uXGB3Oks5q-f83gaJpZM4KwtRf
.

[lpeppe]

HI guys, I'm encountering your same problem, but I didn't understand what's the best way to get out of it. Is @cedvdb 's way the only one?

[zhengkai2001]

try this

Kai Zheng

On Thu, Nov 24, 2016 at 11:18 AM, lpeppe [e-mail] wrote:

HI guys, I'm encountering your same problem, but I didn't understand
what's the best way to get out of it. Is @cedvdb
https://github.com/cedvdb 's way the only one?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/0xfe/vexflow/issues/470#issuecomment-262820723, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGm7X0AxvZAg05hPM0Hi_eZsh2ldxCmtks5rBcbQgaJpZM4KwtRf
.

[lpeppe]

try what? lol

[zhengkai2001]

Try what I attached. It was a js snippet.
In case you've lost it, I will attach it again.

Kai Zheng

On Fri, Nov 25, 2016 at 5:26 AM, lpeppe [e-mail] wrote:

try what? lol

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/0xfe/vexflow/issues/470#issuecomment-262936987, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGm7X4S4OLhAJpEfsNzCLbkKiLCb0_0Yks5rBsXcgaJpZM4KwtRf
.

[cedvdb]

@Silverwolf90

The semantics are definitely a bit awkward.

try : down right wrong.

I've seen the issue you opened to change the name and I agree with you.

[SalahAdDin]

I want this tutorial too.

[MegaMech]

@zhengkai2001
The people who are using Github and not e-mail are unable to view and download attachments. Please post a link or pastebin.

[zhengkai2001]

My apologies: looks like I've made mistakes: When people replied to this thread, I received emails. But I thought they were sending e-mail to me personally, so I didn't know when I replied an e-mail I actually replied to this thread... (And of course, the attachment in e-mail was not post here) So it caused some confusion. I'm sorry I just find how this issue system works.

For the file I sent in the e-mail, it was just like I mentioned in the beginning, "you can visit http://public.vexflow.com/tests/ , then download vexflow-tests.js and look into it." Direct link: http://public.vexflow.com/build/vexflow-tests.js

[SalahAdDin]

@zhengkai2001 Do you say that in the test we can found multiple bar implementation?

[zhengkai2001]

@SalahAdDin Yes. You can see test for multiple bars on the page. Once you see it, you can search corresponding keywords in the .js file to find its implementation.

[SalahAdDin]

Ok, but a good documentation wouldn't be bad.