Adding dynamics to the score

[XenonApps]

I am attempting to use VexFlow to render short scores derived from MusicXML files. However, am stuck on how to draw TextDynamics. The tests print out shows the following use of dynamics:

This isn't what I'm looking for, I want to associate a dynamic marking with a particular note and position it below the stave. For crescendos and diminuendos I would need a start position and an end position (notes?). I have scoured the code but cannot find any way of managing this. Nor have seen any examples which show dynamic markings.

Here's an example of what I am trying to render:

and here's the MusicXML which describes it:

<!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 4.0 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
<score-partwise version="4.0">
  <work>
    <work-title>2 Bars in Bb Major, tempo, dynamics, beams.</work-title>
  </work>
    <part-list>
    <score-part id="P1">
      <part-name>Trumpet</part-name>
      <part-abbreviation>Tpt.</part-abbreviation>
      <score-instrument id="P1-I57">
        <instrument-name>Piano</instrument-name>
        <instrument-sound>keyboard.piano</instrument-sound>
      </score-instrument>
      <midi-device id="P1-I57" port="1"></midi-device>
      <midi-instrument id="P1-I57">
        <midi-channel>1</midi-channel>
        <midi-program>1</midi-program>
        <volume>80</volume>
        <pan>0</pan>
      </midi-instrument>
    </score-part>
  </part-list>
  <part id="P1">
    <measure number="1" width="515.21">
      <attributes>
        <divisions>2</divisions>
        <key>
          <fifths>-2</fifths>
          </key>
        <time>
          <beats>4</beats>
          <beat-type>4</beat-type>
          </time>
        <clef>
          <sign>G</sign>
          <line>2</line>
        </clef>
      </attributes>
      <direction placement="above">
        <direction-type>
          <metronome parentheses="no" default-x="-37.68" relative-y="20">
            <beat-unit>quarter</beat-unit>
            <per-minute>80</per-minute>
          </metronome>
        </direction-type>
        <sound tempo="80"/>
        </direction>
      <direction placement="below">
        <direction-type>
          <dynamics default-x="3.09" default-y="-45.6" relative-y="-20">
            <p/>
            </dynamics>
          </direction-type>
        <sound dynamics="54.44"/>
      </direction>
      <note default-x="106.95" default-y="-20">
        <pitch>
          <step>B</step>
          <alter>-1</alter>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <stem>down</stem>
      </note>
      <note default-x="208.57" default-y="-30">
        <pitch>
          <step>G</step>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <stem>up</stem>
      </note>
      <direction placement="below">
        <direction-type>
          <wedge type="crescendo" default-y="-66.35" number="1"/>
        </direction-type>
      </direction>
      <note default-x="310.18" default-y="-45">
        <pitch>
          <step>D</step>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <stem>up</stem>
      </note>
      <note default-x="411.79" default-y="-40">
        <pitch>
          <step>E</step>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <accidental>natural</accidental>
        <stem>up</stem>
      </note>
    </measure>
    <measure number="2" width="463.83">
      <note default-x="12.5" default-y="-30">
        <pitch>
          <step>G</step>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <stem>up</stem>
      </note>
      <direction placement="below">
        <direction-type>
          <wedge type="stop" number="1"/>
        </direction-type>
        </direction>
      <direction placement="below">
        <direction-type>
          <wedge type="diminuendo" default-y="-66.35" number="1"/>
        </direction-type>
      </direction>
      <note default-x="114.12" default-y="-10">
        <pitch>
          <step>D</step>
          <octave>5</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <stem>down</stem>
      </note>
      <note default-x="215.73" default-y="-15">
        <pitch>
          <step>C</step>
          <octave>5</octave>
        </pitch>
        <duration>1</duration>
        <voice>1</voice>
        <type>eighth</type>
        <stem>down</stem>
        <beam number="1">begin</beam>
      </note>
      <note default-x="283.47" default-y="-20">
        <pitch>
          <step>B</step>
          <octave>4</octave>
        </pitch>
        <duration>1</duration>
        <voice>1</voice>
        <type>eighth</type>
        <accidental>natural</accidental>
        <stem>down</stem>
        <beam number="1">end</beam>
      </note>
      <note default-x="351.21" default-y="-20">
        <pitch>
          <step>B</step>
          <alter>-1</alter>
          <octave>4</octave>
        </pitch>
        <duration>2</duration>
        <voice>1</voice>
        <type>quarter</type>
        <accidental>flat</accidental>
        <stem>down</stem>
      </note>
      <direction placement="below">
        <direction-type>
          <wedge type="stop" number="1"/>
          </direction-type>
        </direction>
      <barline location="right">
        <bar-style>light-heavy</bar-style>
      </barline>
    </measure>
  </part>
</score-partwise>

Can anyone help me solve this conundrum?

[AaronDavidNewman]

You have to render the note first to get the absolute X. This is what I do in Smoosic:

Here is an a abridged version. This is vex4. Vex5 might have slightly different syntax.

var x = stemmableNote.getAbsoluteX();
var y = stave!.getYForLine(11); // assuming you want it on the bottom, stave is the vexflow Stave object
var code= 'dynamicForte';  // e.g. dynamicMezzo
var fontSize = 30;
const glyph = new VF.Glyph(text, fontSize);
glyph.render(context, x, y);  // context is SVG context

[XenonApps]

Thank you, that helps. I'll give it a try and I'll take a look at Smoosic. 👍