Measures (Bars)
Richard Lewis
to a VexFlow score? grep'ing the src directory for "measure" returns
nothing, and "bar" returns references to BarNote and to the
vertical_bar property of Staves. As far as I can tell, neither of
these has anything to do with bars.
Gregory Jopa
To have multiple measures on one stave with Vexflow I am using “new Vex.Flow.BarNote()” to separate notes into measures. This method requires disabling the voice tick counter. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Vexflow multiple measures per staff</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="vexflow.js"></script>
<style>
canvas {
background: #EED;
border: 10px solid #DDDDCC;
}
#wrapper {
width: 768px;
margin:0px auto;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
canvas = $("#score")[0];
var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 750);
stave.addClef("treble").setContext(ctx).draw();
// Create the notes
var notes = [
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "qr" }),
new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),
// start new measure
new Vex.Flow.BarNote(),
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "qr" }),
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
});
// turn off tick counter
voice.setStrict(false)
// Add notes to voice
voice.addTickables(notes);
// Format and justify the notes to 700 pixels
var formatter = new Vex.Flow.Formatter().
joinVoices([voice]).format([voice], 700);
// Render voice
voice.draw(ctx, stave);
});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="score" height="300" width="800"></canvas>
</div>
</body>
</html>
I don’t know how to have multiple measures on one stave
without disabling the voice tick counter. I think you would need to use multiple
voices on one stave and somehow offset each voice so they don’t appear in the same
measure. Anyone have example code of how to do this?
--
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
Mohit Muthanna
I don’t know how to have multiple measures on one stave without disabling the voice tick counter. I think you would need to use multiple voices on one stave and somehow offset each voice so they don’t appear in the same measure. Anyone have example code of how to do this?
On Thu, Aug 18, 2011 at 4:36 AM, Richard Lewis <rjlewi...@gmail.com> wrote:
Apologies if I'm just being thick, but how do I add bars (or measures)
to a VexFlow score? grep'ing the src directory for "measure" returns
nothing, and "bar" returns references to BarNote and to the
vertical_bar property of Staves. As far as I can tell, neither of
these has anything to do with bars.
--
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 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
Mohit Muthanna [mohit (at) muthanna (uhuh) com]
Gregory Jopa
Thanks! Using a stave for each measure seems like a much better approach. This method works better for a lot more use cases like having different time signatures for each measure or for beaming notes.
I put together a quick demo that shows how to use a stave for each measure and position them next to each other:
<!DOCTYPE html>
<html>
<head>
<title>Vexflow multiple measures per staff</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="vexflow.js"></script>
<style>
canvas {
background: #EED;
border: 10px solid #DDDDCC;
}
#wrapper {
width: 768px;
margin:0px auto;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
canvas = $("#score")[0];
var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
// measure 1
var staveMeasure1 = new Vex.Flow.Stave(10, 0, 300);
staveMeasure1.addClef("treble").setContext(ctx).draw();
var notesMeasure1 = [
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "qr" }),
new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
];
// Helper function to justify and draw a 4/4 voice
Vex.Flow.Formatter.FormatAndDraw(ctx, staveMeasure1, notesMeasure1);
// measure 2 - juxtaposing second measure next to first measure
var staveMeasure2 = new Vex.Flow.Stave(staveMeasure1.width + staveMeasure1.x, 0, 400);
staveMeasure2.setContext(ctx).draw();
var notesMeasure2_part1 = [
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];
var notesMeasure2_part2 = [
new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];
// create the beams for 8th notes in 2nd measure
var beam1 = new Vex.Flow.Beam(notesMeasure2_part1);
var beam2 = new Vex.Flow.Beam(notesMeasure2_part2);
var notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2);
Vex.Flow.Formatter.FormatAndDraw(ctx, staveMeasure2, notesMeasure2);
// Render beams
beam1.setContext(ctx).draw();
beam2.setContext(ctx).draw();
});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="score" height="300" width="800"></canvas>
</div>
</body>
</html>
--
Greg
Mohit Muthanna
Thanks! Using a stave for each measure seems like a much better approach. This method works better for a lot more use cases like having different time signatures for each measure or for beaming notes.
I put together a quick demo that shows how to use a stave for each measure and position them next to each other:
Richard Lewis
On Aug 18, 7:52 pm, Gregory Jopa <grj...@gmail.com> wrote:
> Thanks! Using a stave for each measure seems like a much better approach.
> This method works better for a lot more use cases like having different time
> signatures for each measure or for beaming notes.
>
> I put together a quick demo that shows how to use a stave for each measure
> and position them next to each other:
approach into my code and it seems to work.
This is the thing I'm working on:
http://igor.gold.ac.uk/~map01rl/pocac/prokofiev-op-36.html
Clearly, there are still various other problems to iron out.
Thanks for your help.
Best,
Richard
Omid Houshyar
awkward to me and then each time I needed to add a new measure, it was
needed to changing number of beat with which prevent it from throwing
exception, but indeed using separate stave I can say for each measure
would be the proper way.
Thank you guys.
On Fri, Aug 19, 2011 at 2:52 AM, Gregory Jopa <grj...@gmail.com> wrote:
> Thanks! Using a stave for each measure seems like a much better approach.
> This method works better for a lot more use cases like having different time
> signatures for each measure or for beaming notes.
>
> I put together a quick demo that shows how to use a stave for each measure
> and position them next to each other:
--
~ Omid
YusufSalahAdDin
Crash Course
Zafer Khourdaji
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 post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
--
Mohit Muthanna [mohit (at) muthanna (uhuh) com]
--
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
Axel Arnold Bangert
I'm retired and triying to learn saxophon, piano and I code a little bit around to get a little bit of music understanding by playing around.
In this concern I found your API which I like and appreciate very much. I have a little hill to climb and in this action I found your article
here, which ist a first step for my hill-climb :) . So thank you for that explanation for custom measure bar insertion. I have the following
aim. I want to
1. get the live input from a midi instrument - OK
2. get the played note and duration - OK
3. set the played note instantly remotly in Bravura in HTML (Selenium from pygame) on a machine where Bravura is not installed - NOT OK
(Bravura seems to block @font-face) -> see https://stackoverflow.com/questions/62068468/music-font-bravura-text-from-web-with-font-face
4. your glyph rendering allows this for note after note sequence after the stave ... lets say in 4/4 after adding four 1/4 notes ... is complete - OK
5. your systems allows to display the note name below the Bravura glyphes - OK
5. but ... ... ... how can I display the glyphes temporarily added in singularity one after the other as it is played until the stave is full, and drawn while the temporary output is cleaned? - NOT OK
the insertion is principally done like that ... http://i-ki-ba.de/Bravura/VexflowHTML.html ... via Python Selenium
driver.execute_script("addNote();")
I did not implement the note-parameters from midi-input jet. It is now only for testing via onClick().
driver.execute_script("addNote(" + bravuraNote + "," + bravuraNoteLetter + ");")
This would be the principla normal adding when the stave is filled. Tne question is, how to temporarily write the
notes after each input until the stave is full :)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>I-KI-BA AI Music Composer</title>
<style>
.letters {
font-family: "Arial";
font-size: 10pt;
padding-left: 80px;
}
</style>
<link rel="icon" type="image/vnd.microsoft.icon" href="zFavicon.ico">
<script src="vexflow/releases/vexflow-min.js"></script>
</head>
<body>
<div id="notes" onclick = "addNote()" </div>
<div id="noteLetters" class="letters"></div>
<script type="text/javascript">
var count = 0;
VF = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
var div = document.getElementById("notes")
var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
// Size our SVG (Width, Height)
renderer.resize(900, 200);
// And get a drawing context:
var context = renderer.getContext();
function addNote(bravuraClef, bravuraTimeSignature, bravuraNote, bravuraNoteDuration, bravuraNoteLetter)
{
this["stave" + count] = new VF.Stave(10, 40 + (count * 100), 400);
this["stave" + count].addClef(bravuraClef).addTimeSignature(bravuraTimeSignature);
this["notes" + count] = [
new VF.StaveNote({ clef: bravuraClef, keys: [bravuraNote], duration: bravuraNoteDuration }),
// A quarter-note D.
new VF.StaveNote({ clef: bravuraClef, keys: [bravuraNote], duration: bravuraNoteDuration }),
// A quarter-note E.
new VF.StaveNote({ clef: bravuraClef, keys: [bravuraNote], duration: bravuraNoteDuration }),
// A quarter-note F.
new VF.StaveNote({ clef: bravuraClef, keys: [bravuraNote], duration: bravuraNoteDuration })
];
this["voice" + count] = new VF.Voice({ num_beats: 4, beat_value: 4 });
this["voice" + count].addTickables(this["notes" + count]);
// Format and justify the notes to 400 pixels.
var formatter = new VF.Formatter().joinVoices([this["voice" + count]]).format([this["voice" + count]], 400);
this["voice" + count].draw(context, this["stave" + count]);
this["stave" + count].setContext(context).draw();
// resize the svg renderer height
renderer.resize(900, 200 + count*100);
count += 1;
}
</script>
</html>
I would enjoy it very much if Greg or someone other could give me a hint?
Best regards and thanks for your work and help
Axel Arnold Bangert - Herzogenrath 01.06.2020
Axel Arnold Bangert
I could modify the svg-output of the stave in the client-browser for the temporarily
one by one output until the stave is full? Do you know another solution?
Best
Axel