Vexflow: Treble and bass clef together

[brettz9]

While it appears you are orienting things for guitar, can one include a treble and bass clef whose bar is joined together?

[drewish]

I believe the term is a grand staff

[Silverwolf90]

Create two Vex.Flow.Staves and offset them by an appropriate y amount. In the following example, the staves are offset by 150.

...
// Create the staves 
var topStaff = new Vex.Flow.Stave(10, 0, 300);
var bottomStaff = new Vex.Flow.Stave(10, 150, 300);

Now add the Clef's:

topStaff.addClef('treble');
bottomStaff.addClef('bass');

Now we need to add the brace to indicate that the two staves belong to the same part. The Vex.Flow.StaveConnector handles this for us:

var brace = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(3); // 3 = brace

Then you create the thin line connectors for the start and end of the staves.

var lineRight = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(0);
var lineLeft = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(1);
...

Then draw the Vex.Flow.Staves and Vex.Flow.StaveConnectors that you created.

[0xfe]

@Silverwolf90's method here should work for you. Closing.

[drewish]

@Silverwolf90 Thanks a bunch for the hints. I realized I wanted a grand stave that looked more like your demo editor so I kept poking around with the settings. Here's my snippet:

  var canvas = document.getElementById('drawing');
  var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
  var ctx = renderer.getContext();

  // Create the staves
  var topStaff = new Vex.Flow.Stave(20, 0, 300);
  var bottomStaff = new Vex.Flow.Stave(20, 150, 300);

  topStaff.addClef('treble');
  bottomStaff.addClef('bass');

  var brace = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(3);
  var lineLeft = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(1);
  var lineRight = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(6);

  topStaff.setContext(ctx).draw();
  bottomStaff.setContext(ctx).draw();

  brace.setContext(ctx).draw();
  lineLeft.setContext(ctx).draw();
  lineRight.setContext(ctx).draw();

[brettz9]

Sorry for the "me too", but I did want to get in a thanks for everybody's contributions on this. Very cool.

[drewish]

Here's my usage of this: http://drewish.com/projects/midi-monitor/

It combines VexFlow and the beta Web MIDI API to display the notes on the stave as you play them.

[brettz9]

Sounds cool...

Would love to see such a thing which accepted regular keyboard input (for typing up simple melodies at least) and something which could animate already-annotated music by giving added prominence to the note currently being played.

Nit: spelling of "browswer"

[timaschew]

If I map notes to the bass clef they are drawn the wrong way, you can repdoruce it:
paste the code into this sandbox http://www.vexflow.com/docs/sandbox.html

// Get the rendering context
var canvas = $("div.sandbox div.sandbox canvas")[0];

var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
  var ctx = renderer.getContext();
  ctx.clear();
  // Create the staves
  var topStaff = new Vex.Flow.Stave(20, 0, 300);
  var bottomStaff = new Vex.Flow.Stave(20, 150, 300);

  topStaff.addClef('treble');
  bottomStaff.addClef('bass');

  var brace = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(3);
  var lineLeft = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(1);
  var lineRight = new Vex.Flow.StaveConnector(topStaff, bottomStaff).setType(6);

  topStaff.setContext(ctx).draw();
  bottomStaff.setContext(ctx).draw();

  brace.setContext(ctx).draw();
  lineLeft.setContext(ctx).draw();
  lineRight.setContext(ctx).draw();

  var notes = [
    // A quarter-note C.
    new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),

    // A quarter-note D.
    new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),

    // A quarter-note rest. Note that the key (b/4) specifies the vertical
    // position of the rest.
    new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "qr" }),

    // A C-Major chord.
    new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
  ];
  // Create a voice in 4/4
  var voice = new Vex.Flow.Voice({
    num_beats: 4,
    beat_value: 4,
    resolution: Vex.Flow.RESOLUTION
  });

  // Add notes to voice
  voice.addTickables(notes);

  // Format and justify the notes to 500 pixels
  var formatter = new Vex.Flow.Formatter().
    joinVoices([voice]).format([voice], 300);

  // Render voice

  voice.draw(ctx, bottomStaff);

[Silverwolf90]

You have to supply a clef property on StaveNote creation

new Vex.Flow.StaveNote({clef: "bass", keys: ["c/4", "e/4", "g/4"], duration: "q" })

[timaschew]

thanks :smile_cat:

[gparsloe]

Is there a way to create a grand staff in VexTab?