Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 08:39
    infojunkie edited #1084
  • 08:38
    infojunkie edited #1084
  • 08:38
    infojunkie edited #1084
  • 08:35
    infojunkie edited #1084
  • Nov 26 17:18

    sschmidTU on develop

    chore: set osmd.Version to 1.3.… chore: update changelog for 1.3… (compare)

  • Nov 26 17:04

    sschmidTU on master

    chore: update osmd.Version to 1… chore: update Changelog for 1.3… chore: update Changelog for 1.3… and 19 more (compare)

  • Nov 26 17:04

    sschmidTU on develop

    chore: bump version to 1.3.1 chore: update changelog for 1.3… Merge branch 'release/1.3.1' and 2 more (compare)

  • Nov 26 17:04

    sschmidTU on 1.3.1

    (compare)

  • Nov 26 16:24

    sschmidTU on develop

    fix(Clefs): Fix in-staff clefs … (compare)

  • Nov 26 16:24
    sschmidTU closed #1103
  • Nov 26 16:24
    sschmidTU closed #1102
  • Nov 26 16:13
    sschmidTU commented #1102
  • Nov 26 16:12
    sschmidTU assigned #1103
  • Nov 26 16:10
    sschmidTU synchronize #1103
  • Nov 26 16:10

    sschmidTU on clefs-missing-instaff

    refactor (compare)

  • Nov 26 16:07
    sschmidTU edited #1103
  • Nov 26 16:00
    sschmidTU opened #1103
  • Nov 26 15:52

    sschmidTU on clefs-missing-instaff

    refactor: fix warning / unused … (compare)

  • Nov 26 15:50
    sschmidTU commented #1102
  • Nov 26 15:48
    sschmidTU closed #695
Hallvord R. M. Steen
@hallvors
By inserting an extra SVG rect inside the SVG itself one can use the coordinates of other SVG elements without any tricky calculation of the corresponding values in pixels for positioning things according to the page..
@sschmidTU I think I saw a "render until measure X" parameter mentioned somewhere. Would that be a step towards rendering parts at a time?
Hallvord R. M. Steen
@hallvors
Did anyone look into whether the main performance issue could be fixed by reading some value out of Vexflow instead of getting it from a canvas element or some such? And is that issue even an issue if you're using the SVG backend?
I mean #937 by the way
Simon
@sschmidTU
we did try to get values out of Vexflow i think. Using SVG data seems to be the best approach.
Hallvord R. M. Steen
@hallvors
Is it only an issue for the Canvas backend? For me the OSMD rendering seems reasonably fast, loading the XML is a bit slow and I should probably look into using compressed MusicXML instead of uncompressed..
Simon
@sschmidTU
it's mostly only an issue for large scores that are bigger than 1 or 2 pages.
Hallvord R. M. Steen
@hallvors
I usually need only one voice at a time, and use a server-side script to parse the MusicXML and remove the un-necessary parts, it did speed up rendering nicely compared to just setting voices to invisible. I have one big score in particular that renders very slowly..
phamconganh
@phamconganh
image.png
@zhong_yi_ta_gitlab do you want this?
zhong yi
@zhong_yi_ta_gitlab
@phamconganh yes , this is the result i am looking for. may i know how you set the blue rect? Thanks.
zhong yi
@zhong_yi_ta_gitlab
@hallvors I am tring your solution. Thanks. I am using osmd on a e-ink pad. It has very limited screen fresh rate which i have to reduce recreen changes. Will get it back if it works for me .Thanks anyway .
phamconganh
@phamconganh
@zhong_yi_ta_gitlab
public moveToGraphicalMeasure(graphicalMeasure?: GraphicalMeasure, forceShow?: boolean): this {
    if (!graphicalMeasure) return this;
    const musicSystem: MusicSystem = graphicalMeasure.ParentMusicSystem;
    if (!musicSystem) return this;
    const nextMusicSystem = musicSystem.NextSystem;
    const bboxMusicSystem = musicSystem.PositionAndShape;
    const bboxMeasure = graphicalMeasure.PositionAndShape;
    const x = bboxMeasure.AbsolutePosition.x + bboxMeasure.BorderMarginLeft;
    const width = bboxMeasure.Size.width;
    const y = bboxMusicSystem.AbsolutePosition.y + bboxMusicSystem.BorderMarginTop;
    let height = 0;
    if (!nextMusicSystem) {
      height = bboxMusicSystem.Size.height;
    } else {
      const bboxNextMusicSystem = nextMusicSystem.PositionAndShape;
      height = bboxNextMusicSystem.AbsolutePosition.y + bboxNextMusicSystem.BorderMarginTop - y;
    }
    const offsetHaftHeight = 0.1;
    const offsetHaftWidth = 0.2;
    const tmpRect = new RectangleF2D(
      x - offsetHaftWidth,
      y - offsetHaftHeight,
      width + offsetHaftWidth * 2,
      height + offsetHaftHeight * 2
    );
    const rect = this.controller.applyScreenTransformationForRect(tmpRect);
    this.currentGraphicalMeasure = graphicalMeasure;
    // console.log(graphicalMeasure)
    // console.log((graphicalMeasure as any).stave, x, y, width, height)
    if (forceShow && this.hidden) {
      return this.updateStyle(rect).show();
    } {
      return this.updateStyle(rect);
    }
  }
basically like this, you get the rect then you add custom cursor svg like @hallvors
phamconganh
@phamconganh
@sschmidTU is the next release coming soon?
Simon
@sschmidTU
@phamconganh yes, it is.
zhong yi
@zhong_yi_ta_gitlab
image.png
while i draw a rect on sheet, the x position seems not correct. What's wrong with my code?
``` 
                   let graphicalMeasure = this.osmd.graphic.getGraphicalMeasureFromSourceMeasureAndIndex(this.getCurrentCursorMeasure(), 1);
        var svgns = "http://www.w3.org/2000/svg";
        var svg = document.getElementById('svg');
        var shape = document.createElementNS(svgns, "rect");
        shape.setAttributeNS(null, "x", graphicalMeasure.stave['x']);
        shape.setAttributeNS(null, "y", graphicalMeasure.stave['y']);
        shape.setAttributeNS(null, "width",  graphicalMeasure.stave['width']);
        shape.setAttributeNS(null, "height",  graphicalMeasure.stave['height']);

        shape.setAttributeNS(null, "fill", "blue");
        svg.appendChild(shape);
``` 
Simon
@sschmidTU
you can also do it via OSMD:
let boundingbox = osmd.graphic.measureList[0][1].PositionAndShape
osmd.drawer.drawBoundingBox(boundingbox, "#34cfeb")
image.png
also with transparency:
#32cfeb66
image.png
Jari Haavisto
@norppa
Hello! I'm trying to create a react site that would show some sheet music. I have a backend that serves the musicxml (mxl) files, but I can't figure out how to make OSMD read the file streams. Would anybody have an example of how this is (supposed) to be achieved?
at the moment I have a version that works for uncompressed xml files, by reading them into a string and passing that to OSMD, but is there a way to do the same with the compressed files without unzipping them
Simon
@sschmidTU

@norppa have you seen our React example project?
https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay

also, OSMD can read mxl files (which is zipped musicxml) and unzip them, so you should be able to pass in the compressed file to osmd.load().

but if you really want OSMD to handle the filestream directly, i don't know that there's a universal filestream API for javascript/typescript, so you'll probably have to convert the stream to string anyways. (and pass that to OSMD)
Jari Haavisto
@norppa
yes, I'm using that example as the basis
and it processes local mxl files no problem, it's just that if I fetch them from an API it doesn't seem to be able to handle them and I haven't been able to find an example of how to read the compressed file to a string
Jari Haavisto
@norppa
this works for xml file, but not for the mxl file
const getScore = async (id) => {
const url = './app/music/Example.mxl'
const decoder = new TextDecoder('utf-8')
await fetch(url)
.then(response => {
response.body.getReader().read()
.then(({ value, done }) => {
setSelectedScore(decoder.decode(value))
})
})
}
Simon
@sschmidTU
you should be able to take some code from osmd.load() to turn the mxl file to an xml string.
禄碌无为
@rianlu
I have two problems now:
How to display only the left/right hand scores?
How to get the beat of the score? Such as 3/4 4/4
Does anyone know how to solve it?
禄碌无为
@rianlu
phamconganh
@phamconganh
@rianlu you can get staff id, 1 for right hand, > 1 for left hand
phamconganh
@phamconganh
sourceStaffEntry.ParentStaff.Id == 1 for right hand
禄碌无为
@rianlu
Yes, I have seen the previous chat, but I want to show only the left or right hand, is there any good way?
phamconganh
@phamconganh
@rianlu you create 2 custom cursor right hand and left hand, and a function moveToSourceStaffEntry(sourceStaffEntry) and condition for move is sourceStaffEntry.ParentStaff.Id == 1 for right hand and sourceStaffEntry.ParentStaff.Id > 1 for left hand
phamconganh
@phamconganh
image.png
禄碌无为
@rianlu
@phamconganh Thank you for your reply. Now I can use osmd.cursor.iterator.CurrentVoiceEntries[0].ParentSourceStaffEntry.parentStaff.id to judge the left and right hands, but it is not clear how to use it, because I am also new to osmd. I want to be able to use code to control the display of the left and right hands of the score, just like controlling the display of the scores of different instruments: osmd.sheet.Instruments[0].Visible = false. My idea is to be able to display only the left hand or the right hand, or Some special treatments are performed on the right hand, such as setting transparency, etc. This way, you can practice the left and right hands separately. I don’t know if this will be difficult to achieve.
image.png
The picture above is what I hope to achieve
Simon
@sschmidTU
you can't only display the right or left hand of a piano score right now, unfortunately, because they are part of the same Instrument.
maybe you can remove the staff from the xml, using osmd.OnXMLRead to give a function that manipulates the xml and returns a new xml before it is loaded by OSMD.
Simon
@sschmidTU

@rianlu regarding checking for rhythm, I just changed SourceMeasure.RhythmPrinted to be of type RhythmInstruction instead of boolean. So you'll be able to check sourceMeasure.RhythmPrinted.Rhythm.Nominator (3) and Denominator (4) for a 3/4 score. this is updated on the develop branch, will be in the next OSMD release.

if you need the information now, with a method that works in the current OSMD release, see MusicSystemBuilder.AddInstructionsAtMeasureBegin in the source code.

Simon
@sschmidTU
so you would check e.g. osmd.sheet.SourceMeasures[0].RhythmPrinted
Simon
@sschmidTU
actually, showing e.g. only the right hand from a piano score by removing the other staff from the xml doesn't seem to work that simply. i tried setting staff-layout number="1" and removing notes with <note><staff>1 in a very simple piano score, but that wasn't enough.
so, we'd like to implement this feature, but it would take some time.
禄碌无为
@rianlu
@sschmidTU Thank you for your answer! I'm going to try next!
禄碌无为
@rianlu
image.png
I got it!
Simon
@sschmidTU
nice! the other method i mentioned will probably be easier once the next osmd version is released, but if you already got it working, no reason to worry about it i guess ;)
禄碌无为
@rianlu
I used osmd.cursor.iterator.CurrentVoiceEntries[0].ParentSourceStaffEntry.parentStaff.id to distinguish the left and right hands, and I have got all the notes for the left and right hands. Is there a way to make the cursor jump to the specified position? In other words, the cursor can only be moved based on the left-hand score or the right-hand score?