Notes on bass clef render as though on treble clef

[Alan McNeil]

I'm probably just not "getting it", maybe missing something but there are no single bass clef in the tutorials.

Here's what I put in the Sandbox:

// 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();

renderer.resize(400, 300); // Resize and clear canvas

ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

// Create stave

var stave = new Vex.Flow.Stave(10, 0, 300);

stave.addClef('bass');

var keysig = new Vex.Flow.KeySignature('C');

keysig.addToStave();

stave.setContext(ctx).draw();

var notes = [ new Vex.Flow.StaveNote({ keys: ['C/2'], duration: "q" })

];

var voice = new Vex.Flow.Voice({

num_beats: 1,

beat_value: 4,

resolution: Vex.Flow.RESOLUTION

});

voice.addTickables(notes);

var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 300);

voice.draw(ctx, stave);

I get this result:

Also if I change the KeySignature like to use 'G', I get an error - "TypeError: Cannot read property 'addGlyph' of undefined"

I've been pouring over the code in github trying to figure this out. Any help would be appreciated. 

Thanks,

Alan

[Sylvain Poitras]

Hi,

Sorry, I don't have time to go through your code, but I can share the following, which works for me to display bass clef notation:

Sylvain

// setup canvas

var canvas = $("div.sandbox div.sandbox canvas")[0];

// setup renderer

var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);

// setup context

var ctx = renderer.getContext();

ctx.clear();

// create stave

var stave = new Vex.Flow.Stave(10, 10, 400).addClef("bass").setContext(ctx).draw();

// create notes

var notes = [

    new Vex.Flow.StaveNote({keys: ["g/2"], 

    stem_direction: 1, 

    duration: "q",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["a/2"], 

    stem_direction: 1, 

    duration: "q",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["b/2"], 

    stem_direction: 1, 

    duration: "8d",

    clef:"bass"}).addDotToAll(),

    new Vex.Flow.StaveNote({keys: ["b/2"], 

    stem_direction: 1, 

    duration: "16",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["b/2"], 

    stem_direction: 1, 

    duration: "8",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["a/2"], 

    stem_direction: 1, 

    duration: "8",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["g/2"],

    stem_direction: 1, 

    duration: "8",

    clef:"bass"}),

    new Vex.Flow.StaveNote({keys: ["f/2"], 

    stem_direction: 1,

    duration: "q",

    clef:"bass"})];

// create voice

var voice = new Vex.Flow.Voice({num_beats:4,  

                                beat_value:4,

resolution:Vex.Flow.RESOLUTION});

voice.setStrict(false);

voice.addTickables(notes);

// format voice

var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 380);

// create beams as required

var beam1 = new Vex.Flow.Beam(notes.slice(2,4));

var beam2 = new Vex.Flow.Beam(notes.slice(4, 7));

// create tuplets as required

var tuplet = new Vex.Flow.Tuplet(notes.slice(4, 7));

// create ties as required

var tie = new Vex.Flow.StaveTie({

    first_note: notes[4],

    last_note: notes[6],

  });

// draw voice

voice.draw(ctx, stave);

// draw tuplets

tuplet.setContext(ctx).draw();

  

// draw beams

beam1.setContext(ctx).draw();

beam2.setContext(ctx).draw();

//draw ties

tie.setContext(ctx).draw();

[Alan McNeil]

Thank you Sylvain! 

The missing piece was adding clef to notes.

new Vex.Flow.StaveNote({ keys: [note], duration: "q", clef: "bass" }

Puzzling since I thought the staff should know its clef (bass) and the notes are assigned after clef.

Thanks again!! Now I can make more progress on my Bandoneon practice tool.

--
--
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/j1kl9htg75g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mohit Muthanna Cheppudira]

On Mon, Feb 2, 2015 at 5:42 PM, Alan McNeil <a9k...@gmail.com> wrote:
> Thank you Sylvain!
>
> The missing piece was adding clef to notes.
> new Vex.Flow.StaveNote({ keys: [note], duration: "q", clef: "bass" }
> Puzzling since I thought the staff should know its clef (bass) and the notes
> are assigned after clef.

A single staff can change clefs anytime mid-measure, which is why you
need to be explicit about it in the note.

> 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.

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