mo.town blog

Fonts, Tablature, SVG, and a Demo

This was a pretty productive weekend. I got a lot working, and a lot to show off.

First, a credit to Simon Tatham, who created the awesome Gonville font, which I use for the renderer. Before finding Gonville, I tried to draw many of the glyphs myself and suffice to say, it didn't work out too well.


Gonville by Simon Tatham

Thank you Simon for creating this brilliant work of art!

This week was all about the tablature. First, I added support for bend-and-release.

Then, I added support for soft and harsh vibratos.

I added support for custom note annotations.

There are a lot of things you can do with note annotations.

I also added full support for SVG. Yep, full support. With a little help from raphael.js, it was actually pretty straightforward to implement. I created a RaphaelContext class that implements the HTML5 Canvas API, and delegates all the drawing calls to Raphael. So now, the library uses HTML5 Canvas by default, unless you explicitly include the Raphael JavaScript library in your script sources.

I created the beginnings of simple tablature language to render guitar tab. It's called VexTab and it's very very alpha. Here's an example:

Anyhow, all this while you've been seeing screenshots of rendered notation, and no real HTML5-based demos. So, this time, I put up a new demo. All JavaScript. All SVG. Here it is:

A VexFlow Demo: The VexTab Tutorial Page

Hope you like it, and keep those comments coming.

19 comments (imported from blogger)

Will
This stuff looks great! How exactly are you using Gonville? Is it as a reference, or are you embedding the font somehow? I played with the tutorial for a bit, do you think it would be possible to write something that could parse ascii tabs in to this form? Keep up the great work!
0xfe
@Will:
I converted the TTF to point-codes that the renderer can use. It is essentially converted into a bunch of MoveTo, LineTo, BeizerCurve instructions.
Re: ascii tabs, sure that would be simple. I'll let someone else do it after I expose the renderer API.
Will
@0xfe
Ah, smart thinking for the font.
If your going to let others work on parsing ascii tabs and other importing, why create another text based intermediate to your api? or is that what you are rendering from directly?
0xfe
@Will
Because it's really really hard to edit ASCII tabs. Try inserting a note in the middle of a bar, and you'll see what I mean. ;-)
Will
@0xfe
totally agree with that, ascii is a real pain. What I was wondering was if the shorthand (VexTab) you created is directly what you are rendering from or is there a more formal data format/structure behind it?
0xfe
@Will:
Nope, VexTab is not an intermediary language, and isn't meant to be. The VexTab parser uses the VexFlow (which is what I call the renderer) API to generate the notation.
For parsing alternate formats, all you need is the API, which could be likened to a compiler backend.
Unknown
Hi Mohit.
Awesome work. Your rendering is clean and well done. And also your coding style seems to be great. Your project inspired me to create a similar project. I'm the developer of GuitarSharp, a C#.net GuitarPro renderer/player. I ported my application into Javascript/HTML5. Check it out at: http://project.coderline.net/jsguitarsharp/
Under which license will you release this library? Probably we can work together to create a full featured web-notation "software". Feel free to contact me.
Greetings
Danielku15
Simon Tatham
Thanks for the credit, and glad you liked the font!
Anonymous
Nice Work. Any thought on adding lyrics?
Andrew Otto
This is fantastic. How do you notate chords, like you show in this image? http://3.bp.blogspot.com/_Zfnd5XZP80Y/TBWAqbxxlKI/AAAAAAAABrk/8e0gfSVlUts/s1600/Picture+7.png
Unknown
Awesome! I hate the fact that most tab formats are more or less closed in nature.
A few questions: How easy would it be to produce a stave for 5 strings (banjo)? Also, I didn't see how you produce multiple notes at the same time, even though I see an example in your post.
0xfe
@Danielku15 Sounds good. Your blogger profile is restricted so I can't really contact you. :-) Feel free to contact me when you get a chance.
@Simon You Rock!
@Andrew and @AnswerGuru: I just added Step 6 to the demo that shows you how to do chords.
Fabian
This is great.
Can you show us how to do annotations in the demo?
And have you planned for adding hammers, pulls and slides? I'd think that something like 0h2s5p2p0/4 would work nicely.
And will the tab notation be compatible with the music notation/rendering?
Unknown
@Mohit: True. The profile is restricted because I used my google account for posting :) As I have my own webspace I don't use blogger. You can write me via danielku15@gmail.com. Probably you have any instant messenger?
Blair Beebe
I'm really impressed with your work. When you're ready to let people use it, I'd love to start publishing guitar tabs on my blog using VexFlow/TabDiv. Also, I'd be happy to contribute some free design work to the cause. Maybe logos for VexFlow, VexTab, and TabDiv.
Unknown
I've uploaded Blairs logos to my website. He confused me with Mohit as the author of VexTab. :D
Those are the logos which Blair has designed:
http://project.coderline.net/vextab/vextab_logo.pdf
0xfe
Blair and Daniel, thanks for the help. I'll get in touch with you as soon as I get a chance. :-)
Pascaldigitall
Hi,
i started a job wich i don't know were i'm going to end and arrived here trough google.
I have a series of images wich i want to highlight respectively on each note from a tablature.
So each image will come up as it's linked note will play, like the "Do" on image 1 and the "Re" on image 2 and so on.
Can anybody give me a hint.
Sincerely, Pascal
info@pascaldigitall.be
Anonymous
@0xfe you are a God to me now...
can u share me how u convert the TTF into GlyphJson and fit to the renderer?
OMG.. are them all with your own tools?