Generating Guitar Chord Diagrams

One day I wanted to add a feature to Guitar Unleashed which exists in some of the better guitar tab sites. When a user hovers over a chord, they are shown a diagram representing the guitar fret with overlaid finger positions required to produce this chord.

Many of the most popular sites do this by showing  a crude, plain-text representation of the chord. For example, a C chord is shown as follows:


e ---|---|---|---|---|
B -x-|---|---|---|---|
G ---|---|---|---|---|
D ---|-x-|---|---|---|
A ---|---|-x-|---|---|
E ---|---|-o-|---|---|


Typeset guitar chord representation looks very different. Two most popular variants of the C chord would appear above the staff with small symbols that look something like this:

Such images have many benefits as compared to the plain text version:

• Convention: many guitar players are used to learning from sheet music, so this chord notation is familiar to them.
• Readability: the image representation is more compact and more pleasant to read.
• Completeness: the image version has an easy way to display barre chords and specify fingerings (not pictured)

True to Guitar Unleashed’s mission of being a truly usable guitar chords site, I decided to display typeset fret diagrams. For the implementation, a program would pre-generate images on the server based on the encoded chord shape and then serve these images dynamically via JavaScript. Unfortunately, I found no software to generate such images for all popular chords, so I ended up developing my own.

From some brief research, I decided that lilypond fret diagrams are the most elegant way of creating such images. The alternative was to use GCHORDS whose output I liked less, and which required depending on TeX. Typically lilypond typesets an entire piece of sheet music on a staff, with clefs, key signatures, etc. After discovering a really great lilypond bundle for textmate, I managed to get rid of these unnecessary features and display just a fret diagram. The following python-parametrized lilypond template does the trick:


\include "lilypond-book-preamble.ly"
\version "2.10.0"
\markup
\fret-diagram-terse #"%(chord_markup)s"


Then, using lilypond’s fret diagram encoding, a python script replaces %(chord_markup)s with the desired markup. Lilypond’s markup is very terse but mostly manageable. Sample markup for a C chord looks like this: x;3;2;o;1;o;, while the barre version looks a little bit more bizarre, like this: 3-(;3;5;5;5;3-);.

My python program contains a list of chord shapes for the most popular chords, encoded in the manner above, then outputs images for each chord and variant into a directory. I’ve made it available for download, in case your next project needs generated fret diagrams with a highly customizable look. You can also see the diagrams live at guitarunleashed.com.

Carnegie Mellon University!?

In late March, I was completely thrilled to hear that the Carnegie Mellon University Human Computer Interaction Institute accepted me into their Master’s program! In addition to admission, they offered a very juicy scholarship to spend part of the time on the beautiful island of Madeira. CMU was my most far fetched reach school, so I attribute this wonderful fortune to a clerical error made by the admission committee.

In addition to studying at one of the best universities in the world, traveling to Europe, and relaxing on the beach, here are a couple of reasons why my inner geek can’t contain his excitement, try as he might. These incredible courses are offered at CMU in September 2009:

48-739: Making Things Interactive

In this hands-on design-build class you will learn the skills to embed sensors and actuators (light, sound, touch, motion, etc.) into everyday things (and places etc.) and to program their interactive behavior using a microcontroller. Through weekly exercises and a term project the class will introduce basic analog electronics and microcontroller programming, as well as exploration into using kinetics and materials to make the things you design perform. Emphasis will be on creating innovative experiences using simple robotic technologies. The graduate edition of this course will require additional work including a paper that can be submitted to a peer-reviewed interaction design conference such as CHI, UIST, or TEI.Students from all disciplines are welcome: but please note that the class demands that you master technical material. Experience in at least one of: programming, electronics, or physical fabrication is strongly recommended.

16-899D: Principles of Human-Robot Interaction:

This course focuses on the emerging field of human-robot interaction, bringing together research and application of methodology from robotics, human factors, human-computer interaction, interaction design, cognitive psychology, education and other fields to enable robots to have more natural and more rewarding interactions with humans throughout their spheres of functioning. This course is a combination of state-of-art reading and discussions, focused team exercises and problem-solving sessions in human-robot interaction, and a special team project resulting in the implementation of a human-robot interaction system.

Guitar Unleashed

I’ve been collaborating with my dad on an experimental web-based guitar chord editing service. It’s still a work in progress, but we are ready to launch a beta version. Please visit http://www.guitarunleashed.com/ to check it out and provide feedback.

We hope that the major features of the service are easily discoverable, but in case they are not, here is a list:

• Add chords to your lyrics by clicking on any character
• Move chords via drag and drop
• Search for songs created by other users or from external sources
• Save your work and share it with others
• Add songs that you like to your favorites list
• Already have lyrics with chords? Create a new song, paste lyrics with chords in and see the chords come to life.

Please note that the application relies heavily on JavaScript, so it needs to be enabled in your browser.

Known issues

• Some lyrics may display incorrectly. This is an issue with LyricWiki.org
• Long chords placed at the beginning or the end of lyrics line may extend outside of the editing area
• Long lines in lyrics are not handled elegantly

Future features

• Editing lyric text
• Commenting on songs
• Searching sources of lyrics and chords other than LyricWiki
• Song books

Please give us feedback! Use the feedback button on guitarunleashed.com or contact us directly at feedback@guitarunleashed.com

Prettifying Embedded YouTube

In late January 2009, YouTube decided to change the default look of their embedded videos. They silently added an informative header which includes the video title and rating. Some time before then, a default search bar appeared at the top of the video. Thanks to these changes, most haphazardly embedded YouTube videos on the internet sport a repulsive new look.

What, you might ask, can be done about this excessive ugliness? Well, you could switch to Vimeo, which has a much nicer set of defaults, but that would mean bidding the YouTube community farewell — and what a tragedy that would be! A better alternative is to learn the YouTube Embedding API, but there are still problems:

1. Embedding code for YouTube videos is ugly.
2. The YouTube embedding scheme often silently changes.
3. If you embed multiple videos, there is no way to specify a default set of embedding preferences.

If you are a wordpress user, all of these issues are resolved by the most excellent Smart YouTube plugin. With it you can embed videos by simply inserting the URL to any YouTube video into your wordpress page or post and replacing http with httpv. Through a settings page, you can modify the way all of your embedded videos look with one fell swoop.

Clean drag and drop upload in Safari

Somehow I often find myself arguing in defense of the web browser as a viable platform for developing rich applications. In many such discussions, the issue of interoperability with the desktop arises. Someone will astutely observe that they can’t even drag and drop from their OS file manager into their browser, and all hell will break loose.

Happily, this is changing! Since version 3, Safari on Mac OS X has had support for dragging and dropping files from the finder into file input boxes. In various kludgy ways, Firefox and IE are now following suite.

Unfortunately, even in Safari, the default look of the <input type=”file”> box is quite ugly and the element itself is difficult to style. In addition, clicking anywhere in the file input element causes the default open file dialog to appear. I wanted to provide drag-and-drop uploading without ugly boxes or browser dialogs. The solution I came up with involves hiding the file upload box entirely by setting its opacity to 0, and then preventing the default action on click via event.preventDefault(). Here’s a sample of what I mean, with the entire browser window converted into a drag area.

Note that the drag area must be the first DOM element to receive the drop event for this approach to work. Unfortunately I ran into a bug where the file dialog refuses to bubble click events to other elements below it. This is baffling to me, since event.preventDefault() should not stop event propagation, but only prevent the default browser handler from being called. You can see what I mean by trying to click the link in the sample HTML file. If this is not a bug, and someone has an answer, I would really appreciate it.

Note also that there are java applet-based drag and drop solutions, but they are reserved for developers who have nothing but disdain for their users.