hondrou thoughts: Musical Symbols in WPF/Silverlight

I had some interest over this week looking at being able to show some musical symbols in a Silverlight / WPF application and had expected this to be a relatively simple thing but ended up chasing down quite a lot of little dark alleys until I found a couple of good answers. So, with my New Year's resolution of posting a lot more of these little thoughts, I'll see how far I can get describing the journey.

For starters I thought this would be simple. Everything is now unicode, right, they have Japanese, Korean, Maths notation and other symbols, there must be a code-page for musical notation. Yes! and well, no! If you go to the Unicode specification, there's a whole set of musical symbols defined. http://www.unicode.org/charts/PDF/U1D100.pdf Next bit of searching was to find a suitable font that had these symbols included. I finally found 'Symbola.ttf' which included it, but probably not my final font. Enough to try though. I dutifully installed this and then wanted to have a look at what symbols were there. The big problem is that these are in UTF-32. Take a look at charmap (on Windows), this only extends up to UTF-16. So I couldn't see them. Undeterred and still expecting this not to be a problem I had a long fight with Silverlight to try to get it to show this unicode encoding, finally giving up when I realised it only extended to UTF-16 (basically this means you can only go as far as \UFFFF or  as otherwise written. This is a problem, as the musical notation is all above that, with the treble-clef at U+1d120. Hmmpf.

So, where could I go then? I did have a poke around in some other fonts, and hoped that they would have musical notation in the private areas. More of which later, but at this point I didn't find quite what I was looking for and so, I'll continue my journey as it uncovered some other interesting things on the way to what I got to solve my problem.

Next step, I took a look at EasyABC, as I had posted previously I've been using this on my Mac and am really liking it, so I took a look at the package and the python scripts. First thing to note that the actual musical rendering is made by abc2ps, an excellent little project written in C. The musical format in this case was not quite what I was looking for (need to come back and detail a bit more when I get a chance).

After that, as I've been playing with it as well, I took a look at VexFlow. Now, this was interesting, digging down in the source on github, they have the file gonville.js that appears to have some interesting path-like font descriptions. In trying to understand this I uncovered quite a long and interesting thread on pluggable fonts for VexFlow that I must go back and read in more detail.

The thread lead me on to SMuFL - Standard Music Font Layout (http://www.smufl.org/) - now I was getting somewhere! I had an interesting read around this and found the Bravura.otf OpenText format font. This revealed a number of interesting things - firstly it is available under the SIL Open Font license and secondly it implements all of the specified unicode musical symbol range U+1d100 - U+1d1dd, however these are mapped into the unicode Basic Multilingual Plane in the standard private area at U+e000 so fall within the scope of UTF-16 and hopefully usable by Silverlight! Now we're sucking diesel!

Next step I returned to the previous bashing of my head against a Silverlight wall and with a bit more googling, finally got the font in and showing a treble-clef. There's a quite a few false trails out there and the Silverlight route throws up some slightly different challenges to a standard WPF app, but the best advice was from Apres Pro Silverlight 5 in C# here on Font Embedding It's important to follow the note on using the # to show the name of the font, not just the file containing the font.

My code directly in WPF finally looked like this...

In this case I have the Bravura.otf font file in a sub-directory called Fonts and the properties have Build Action set to Resource and Copy to Output set to Copy if newer. The name of my application is 'AgScore'. Nice!

Now, there's an interesting little note in the Apres book that says if you can't get this working for you in your app, then turn the fonts into graphics and use the Path notation. Nice! To backtrack a little. I had tried this unsuccessfully earlier when I took one of the lines of the gonville.js file path-like notation and had converted that into the path mini-language. It sort of worked, but I didn't have the energy to follow that through when I thought there should be a simpler answer and fond the SMuFL links. The little note in the book points to a link hich details how to get the text into a path string from code. I didn't want to fight this from Silverlight itself and the approach shown in the link uses a backend service by the looks of it, so I decided to bash at this directly in a C# application and get the path information to see how it worked. Here's how it looks:

    // Set up the Culture
    string strCulture = "en-us";

    System.Globalization.CultureInfo ci = new System.Globalization.CultureInfo(strCulture);

    // Set up the flow direction
    System.Windows.FlowDirection fd = FlowDirection.LeftToRight;

    // Set up the font family from the parameter
    FontFamily ff = new FontFamily("D:\\Users\\gbcollia\\Documents\\Visual Studio 2010\\Projects\\AgScore\\AgScore\\Fonts\\Bravura.otf#Bravura");

    // Create the new typeface
    System.Windows.Media.Typeface tf = new System.Windows.Media.Typeface(ff,  
                                                                        FontStyles.Normal, 
                                                                        FontWeights.Normal 
                                                                        FontStretches.Normal);

    // Create a formatted text object from the text,

    // culture, flowdirection, typeface, size and black

    FormattedText t = new FormattedText("\uf472", ci, fd, tf, 20, System.Windows.Media.Brushes.Black);

    // Build a Geometry out of this
    Geometry g = t.BuildGeometry(new Point(0, 0));

    // Get the Path info from the geometry
    PathGeometry p = g.GetFlattenedPathGeometry();

    // Get the path data info
    string pathdata = p.ToString();

I then unashamedly pasted this path data into a path in SIlverlight to see how that looked as follows:

Very nice. I had a treble-clef, although not quite how I wanted it. So, after a quick, lazy google, I scaled using this suggestion (http://stackoverflow.com/questions/5109058/wpf-the-right-way-to-scale-a-path). Omitting the path data for clarity:

<Path Stroke="Black" Fill="Black" StrokeThickness="0.1" Data="..."

Height="80" Width="30" Margin="0" RenderTransformOrigin="0, 0">

<Path.RenderTransform>

</Path.RenderTransform>

</Path>

This pretty much gets me what I wanted. Now, I just need to do a simple routine to export all of the fonts I need into paths, put them into a separate XML file (or similar) and I can use them in Silverlight programmatically to render some nice graphics.

Hope this is of use to someone else struggling with the same questions.

hondrou thoughts

Friday 9 January 2015

Musical Symbols in WPF/Silverlight

No comments:

Post a Comment