Setting each measure's width to specific values

[paxbun]

Hi! I'm seeking sheet music rendering libraries for my Android/iOS app. I'm choosing between VexFlow and verovio, but since VexFlow is a TypeScript library, I would like to use verovio if possible.

I want to change every single measure's width to a specific value. The value may vary by measure.
With VexFlow, users can specify each measure's width by using VexFlow's low-level API as the following:

...
// Create a stave of width 400 at position 10, 40.
const stave = new Stave(10, 40, 400);
...

However, I haven't found any options or member functions in Toolkit to do this, which I think is because the Toolkit class is a high-level API. I've read some of the code, and it seems like I can adjust the position of measures by calling SetDrawingXRel. I also found Measure::m_xAbs2 or SetCoordX2, which seems responsible for determining the width of the measure. Still, I'm not sure whether modifying a measure's member variables would not break its alignment or make adjacent measures overlap.

I will modify verovio if necessary (I know verovio is licensed under GPL/LGPL), so I would like to know if this is possible with small changes in the current version of verovio. Thanks for reading!

[lpugin]

Would it be possible to elaborate a bit more the overall scenario of what you are trying to achieve? There are different ways to adjust the width of a measure. For example, by setting a linear spacing of the content. But that does not seem to be what you want. Depending of what you need it might be more something to set in the data rather than in Verovio.

[paxbun]

I'm making a memo feature using a digital pen. My app renders sheet music in an element with dynamic width, which makes the width of each measure also dynamic. Due to this, the memo's width must also be dynamic, but scaling each memo automatically makes it ugly, so I want to add some constraints to the measures' width.

For example, when the user makes a memo like the following:

When the measure is rendered in a device with narrower width:

I'm concerned about such cases.

[craigsapp]

I would look at the distance between the staff lines in the SVG image:

     <g id="staff-L1F2" class="staff">
      <path d="M0 402 L4950 402" stroke="currentColor" stroke-width="8" />
      <path d="M0 537 L4950 537" stroke="currentColor" stroke-width="8" />
      <path d="M0 672 L4950 672" stroke="currentColor" stroke-width="8" />
      <path d="M0 807 L4950 807" stroke="currentColor" stroke-width="8" />
      <path d="M0 942 L4950 942" stroke="currentColor" stroke-width="8" />

which is 537 - 402 = 135. Then use a scaling for the initial markup based on that value for both the x and y axis of the markup. This would keep the aspect ratio of the markup uniform for different spacing settings of the musical notes, and it would also keep the markup looking the same if the notation is scaled larger or smaller. This seems to make sense if you are referencing a single point in the image, such as the note that is being circled, and the device width should be irrelevant.

If the markup has two endpoints instead of one, such as circling two notes, then you would identify the two notes/elements that should be included and have a separate scale for the x and y dimensions to keep them both circled when changing the musical spacing.

[paxbun]

It seems like the first thing I've got to do is to implement shape recognition. I'll post another Q&A if I still have a problem making this memo feature.

[craigsapp]

Note that Verovio and Vexflow both render musical data to SVG, but in very different ways: vexflow stores/modifies data in Javascript objects to render to SVG, while verovio loads the data into an Emscripten-compiled toolkit to generate an SVG. Verovio's layout is fully automated (via input options), while vexflow typically requires/allows user control of layout directly.

You most likely want the option "spacingNonLinear": 1. This means that the width of a half note is twice that of a quarter note, and an eighth-note is half the width of a quarter note. The measures will be mostly equal in width, with some caveats if you have tight spacing and extra space is needed to avoid collisions or add non-durational elements such as clef changes. You will need to also set the spacingLinear option to get the desired width of the measures.

Here is an example using spacingLinear=0.03 and spacingNonLinear=1:

https://verovio.humdrum.org/?file=chorales/chor010.krn&filter=satb2gs&v=spacingNonLinear%201%7CspacingLinear%200.03

Note that measures 2 and 3 are the same width, despite measure 2 having lots of small durations and measure 3 having a few notes with large durations.

Here is what the spacing looks using the defaults for a more traditional spacing:

https://verovio.humdrum.org/?file=chorales/chor010.krn&filter=satb2gs

Now measures 2 and 3 have very different widths. Now the length of a half note is 1.67 times the width of a quarter note instead of 2 times. And eighth notes are 0.6 (1/1.67) times smaller than a quarter note. In other words there is now a geometric scaling between each rhythmic level, whereas when using spacingNonLinear=1, there is a linear scaling between rhythmic levels.

You may also need to adjust other parameters such as the pageWidth and scale to control the number of measures on each line of music. Also note that the first example has slightly different widths on the two systems. This is because verovio is trying to avoid an unfull last system for the music. Use "noJustification": true to prevent this. Also the above example indents the first system (because the input data requested it; otherwise, verovio does not indent the first system typically).

[paxbun]

Thanks for the detailed answer! I already saw this in the documentation, but this clarifies my question about each layout option. I'll give a detailed description of my case above.