ringw / vexflow

A JavaScript library for rendering music notation and guitar tablature.
http://www.vexflow.com
71 stars 23 forks source link

How to join measures #8

Closed luismgcoelho closed 8 years ago

luismgcoelho commented 9 years ago

Hello

Reading the xml on finale or other software the output is:

captura de tela 2015-09-08 17 41 06

on this music library the output is:

captura de tela 2015-09-08 17 38 37

Is it possible to join the measures?

Regards,

Luís Coelho

luismgcoelho commented 8 years ago

Please find the attached music xml file:

<?xml version="1.0" encoding='UTF-8' standalone='no' ?>
<!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 3.0 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
<score-partwise version="3.0">
 <work>
  <work-title />
 </work>
 <identification>
  <rights>Copyright © </rights>
  <encoding>
   <encoding-date>2015-08-18</encoding-date>
   <encoder>Isabel</encoder>
   <software>Sibelius 8.0.0</software>
   <software>Direct export, not from Dolet</software>
   <encoding-description>Sibelius / MusicXML 3.0</encoding-description>
   <supports element="print" type="yes" value="yes" attribute="new-system" />
   <supports element="print" type="yes" value="yes" attribute="new-page" />
   <supports element="accidental" type="yes" />
   <supports element="beam" type="yes" />
   <supports element="stem" type="yes" />
  </encoding>
 </identification>
 <defaults>
  <scaling>
   <millimeters>210</millimeters>
   <tenths>1200</tenths>
  </scaling>
  <page-layout>
   <page-height>1697</page-height>
   <page-width>1200</page-width>
   <page-margins type="both">
    <left-margin>70</left-margin>
    <right-margin>70</right-margin>
    <top-margin>70</top-margin>
    <bottom-margin>70</bottom-margin>
   </page-margins>
  </page-layout>
  <system-layout>
   <system-margins>
    <left-margin>67</left-margin>
    <right-margin>0</right-margin>
   </system-margins>
   <system-distance>92</system-distance>
  </system-layout>
  <appearance>
   <line-width type="stem">0.9375</line-width>
   <line-width type="beam">5</line-width>
   <line-width type="staff">0.9375</line-width>
   <line-width type="light barline">1.5625</line-width>
   <line-width type="heavy barline">5</line-width>
   <line-width type="leger">1.5625</line-width>
   <line-width type="ending">1.5625</line-width>
   <line-width type="wedge">1.25</line-width>
   <line-width type="enclosure">0.9375</line-width>
   <line-width type="tuplet bracket">1.25</line-width>
   <line-width type="bracket">5</line-width>
   <line-width type="dashes">1.5625</line-width>
   <line-width type="extend">0.9375</line-width>
   <line-width type="octave shift">1.5625</line-width>
   <line-width type="pedal">1.5625</line-width>
   <line-width type="slur middle">1.5625</line-width>
   <line-width type="slur tip">0.625</line-width>
   <line-width type="tie middle">1.5625</line-width>
   <line-width type="tie tip">0.625</line-width>
   <note-size type="cue">75</note-size>
   <note-size type="grace">60</note-size>
  </appearance>
  <music-font font-family="Opus Std" font-size="19.8425" />
  <lyric-font font-family="Plantin MT Std" font-size="11.4715" />
  <lyric-language xml:lang="pt" />
 </defaults>
 <credit page="1">
  <credit-words default-x="600" default-y="70" font-family="Plantin MT Std" font-style="normal" font-size="10.0763" font-weight="normal" justify="center" valign="middle">Copyright © </credit-words>
 </credit>
 <credit page="2">
  <credit-words default-x="70" default-y="1627" font-style="normal" font-weight="normal" justify="left" valign="middle">2</credit-words>
 </credit>
 <part-list>
  <part-group type="start" number="1">
   <group-symbol>brace</group-symbol>
  </part-group>
  <score-part id="P1">
   <part-name>Piano</part-name>
   <part-name-display>
    <display-text>Piano</display-text>
   </part-name-display>
   <part-abbreviation>Pno.</part-abbreviation>
   <part-abbreviation-display>
    <display-text>Pno.</display-text>
   </part-abbreviation-display>
   <score-instrument id="P1-I1">
    <instrument-name>Piano (2)</instrument-name>
    <instrument-sound>keyboard.piano.grand</instrument-sound>
    <solo />
    <virtual-instrument>
     <virtual-library>General MIDI</virtual-library>
     <virtual-name>Acoustic Piano</virtual-name>
    </virtual-instrument>
   </score-instrument>
  </score-part>
  <part-group type="stop" number="1" />
 </part-list>
 <part id="P1">
  <!--============== Part: P1, Measure: 1 ==============-->
  <measure number="1" width="979">
   <print new-page="yes">
    <system-layout>
     <system-margins>
      <left-margin>80</left-margin>
      <right-margin>0</right-margin>
     </system-margins>
     <top-system-distance>22</top-system-distance>
    </system-layout>
    <staff-layout number="2">
     <staff-distance>55</staff-distance>
    </staff-layout>
   </print>
   <attributes>
    <divisions>256</divisions>
    <key color="#000000">
     <fifths>0</fifths>
     <mode>major</mode>
    </key>
    <time color="#000000">
     <beats>2</beats>
     <beat-type>4</beat-type>
    </time>
    <staves>2</staves>
    <clef number="1" color="#000000">
     <sign>G</sign>
     <line>2</line>
    </clef>
    <clef number="2" color="#000000">
     <sign>F</sign>
     <line>4</line>
    </clef>
    <staff-details number="1" print-object="yes" />
    <staff-details number="2" print-object="yes" />
   </attributes>
   <note color="#000000" default-x="76" default-y="-10">
    <pitch>
     <step>C</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">begin</beam>
    <lyric default-y="5" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>1</text>
    </lyric>
   </note>
   <note color="#000000" default-x="302" default-y="-10">
    <pitch>
     <step>D</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">end</beam>
    <lyric default-y="17" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>2</text>
    </lyric>
   </note>
   <note color="#000000" default-x="528" default-y="-15">
    <pitch>
     <step>C</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <lyric number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>1</text>
    </lyric>
   </note>
   <note default-x="753">
    <rest />
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <staff>1</staff>
   </note>
   <backup>
    <duration>512</duration>
   </backup>
   <note default-x="76">
    <rest />
    <duration>512</duration>
    <instrument id="P1-I1" />
    <voice>2</voice>
    <type>whole</type>
    <staff>2</staff>
   </note>
  </measure>
  <!--============== Part: P1, Measure: 2 ==============-->
  <measure number="2" width="548">
   <print new-page="yes">
    <system-layout>
     <system-margins>
      <left-margin>66</left-margin>
      <right-margin>0</right-margin>
     </system-margins>
     <top-system-distance>72</top-system-distance>
    </system-layout>
    <staff-layout number="2">
     <staff-distance>55</staff-distance>
    </staff-layout>
   </print>
   <attributes>
    <staff-details number="1" print-object="yes" />
    <staff-details number="2" print-object="yes" />
   </attributes>
   <note color="#000000" default-x="57" default-y="-10">
    <pitch>
     <step>C</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">begin</beam>
    <lyric default-y="10" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>1</text>
    </lyric>
   </note>
   <note color="#000000" default-x="180" default-y="-10">
    <pitch>
     <step>D</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">end</beam>
    <lyric default-y="6" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>2</text>
    </lyric>
   </note>
   <note color="#000000" default-x="302" default-y="-7">
    <pitch>
     <step>E</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">begin</beam>
    <lyric default-y="11" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>3</text>
    </lyric>
   </note>
   <note color="#000000" default-x="425" default-y="-7">
    <pitch>
     <step>D</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <beam number="1">end</beam>
    <lyric default-y="6" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>2</text>
    </lyric>
   </note>
   <backup>
    <duration>512</duration>
   </backup>
   <note default-x="57">
    <rest />
    <duration>512</duration>
    <instrument id="P1-I1" />
    <voice>2</voice>
    <type>whole</type>
    <staff>2</staff>
   </note>
  </measure>
  <!--============== Part: P1, Measure: 3 ==============-->
  <measure number="3" width="445">
   <attributes />
   <note color="#000000" default-x="15" default-y="-15">
    <pitch>
     <step>C</step>
     <octave>4</octave>
    </pitch>
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <stem>up</stem>
    <staff>1</staff>
    <lyric default-y="5" number="part1verse1" color="#000000">
     <syllabic>single</syllabic>
     <text>1</text>
    </lyric>
   </note>
   <note default-x="137">
    <rest />
    <duration>128</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>eighth</type>
    <staff>1</staff>
   </note>
   <note default-x="260">
    <rest />
    <duration>256</duration>
    <instrument id="P1-I1" />
    <voice>1</voice>
    <type>quarter</type>
    <staff>1</staff>
   </note>
   <barline>
    <bar-style>light-heavy</bar-style>
   </barline>
   <backup>
    <duration>512</duration>
   </backup>
   <note default-x="15">
    <rest />
    <duration>512</duration>
    <instrument id="P1-I1" />
    <voice>2</voice>
    <type>whole</type>
    <staff>2</staff>
   </note>
  </measure>
 </part>
</score-partwise>
braoul commented 8 years ago

Hi, I am not an expert, but when I used this library, I had this behaviour when I launched the program from the code editor. I think that, because the window is not open, the algorithm consider that the window size is 0, so he add those little canvas to the page in place of a proper big canvas. If I refresh the page, the problem is gone because the windows size is not zero anymore. So maybe in your case, the windows size is too small when you launch the page. A better answer will be provided by the library creator, but I hope mine will help you

mtbinkdotcom commented 8 years ago

@luismgcoelho, your MusicXML file already forcing new page at measure 2:

  <!--============== Part: P1, Measure: 2 ==============-->
  <measure number="2" width="548">
   <print new-page="yes">

Here what it looks like in MuseScore:

Here what it looks like in Finale:

Here what it looks like in http://wim.vree.org/js/xml2abc-js.html :

Here what it looks like in http://wim.vree.org/js/abcweb.html :

Maybe you are in "Continuous View Mode" when getting the first screenshot of yours.

Thanks, mtbink.com

luismgcoelho commented 8 years ago

Hi @mtbinkdotcom thanks for the feedback, but the issue was related to @braoul comment. I was adding the notation to an element with the ng-if attribute (AngularJS) resulting in a width of 0. Waiting for the element to be added to the DOM before drawing the notation fixed it.