Creating fingering charts with diagrams from the Fingering Diagram Builder

My Fingering Diagram Builder has been around for a little over five years now. I was careful to name it the Fingering Diagram Builder instead of the Fingering Chart Builder because it is a tool for creating individual diagrams, not for assembling them into comprehensive fingering charts. But the difference can be a little confusing, so I get frequent questions from users who complain that they can’t figure out how to create and download a “chart” with multiple fingerings on it.

The reason I didn’t try to build a complete system for creating fingering charts is that I assumed users would have widely-varying needs, and would do better to assemble charts using some other kind of software. Here are a few examples of how that might be done, using music notation software, using a word processor, and using a text editor to create HTML code (such as for a website). All the software I’m using here is free to download on Windows, Mac OS, and Linux, but whatever free or commercial programs you are already using probably have similar features. You’re on your own to work out the details (and feel free to share them in the comments if you are feeling helpful).

Creating a fingering chart in music notation software

I am using MuseScore here, but commercial software like Finale and Sibelius and other free software like LilyPond could be used in similar ways.

First I set up a musical “score” with the notes for the chart. I used whole notes, separated by double bar lines, but that’s up to you.

MuseScore setup

Next I created my fingering diagrams in the FDB. I sized the diagrams “tiny” with “thick” lines.

Adding the diagrams to the score is very simple in MuseScore—I just dragged the downloaded diagrams from my file manager right onto the score. If I drag the diagram and hover it on top of a note, that note gets highlighted. Then I can release the diagram and it attaches to the note.

musescore-drop

Initially the diagrams are placed right on top of the note. I selected the diagrams and used the Inspector panel to give them a horizontal offset of -2.5sp and a vertical offset of -10.5 sp, which moved them above the staff, more or less centered above the noteheads. I adjusted the A and tenor B-flat fingerings’ horizontal offsets a bit more to make them look just right.

Here is the finished product, a small chart with a few bassoon fingerings:

bassoon-fingering-chart-sample

Creating a fingering chart in word processing software

I am using LibreOffice Writer, but something like Microsoft Word or Apple Pages would work just as well.

First I opened a new document and inserted a table. My table has three rows and seven columns.
writer-table

Then I dragged the downloaded diagrams from my file manager into the bottom row of the table.

writer-diagrams

I merged some cells together, dragged in some images of notes on staves, and added some text.

writer-complete

A few more little tweaks and here is the finished chart:

clarinet-fingering-chart-sample

Creating an HTML fingering chart in text editing software

This code be used in any text editor or HTML source editor, and of course similar results could be accomplished with a visual/WYSIWYG editor. I’m not showing complete code here, just the most relevant parts.

I started with a framework for a table that I could use to show a note with two alternate fingerings. (This is a flute fingering chart with horizontally-oriented diagrams. For an instrument with vertically-oriented diagrams, you may want to rearrange things a bit.)

<table>
  <tr>
    <th rowspan=2><!— note image here —></th>
    <td><!— first fingering image here —></td>
    <td><!— first fingering text here —></td>
  </tr>
  <tr>
    <td><!— second fingering image here —></td>
    <td><!— second fingering text here —></td>
  </tr>
</table>

Then I plugged in <img> tags and text:

<table>
  <tr>
    <th rowspan=2><img src="images/f-sharp-note.png" /></th>
    <td><img src="images/f-sharp-standard.png"</td>
    <td>Standard</td>
  </tr>
  <tr>
    <td><img src="images/f-sharp-trill.png"</td>
    <td>Trill from E</td>
  </tr>
</table>

I duplicated that code for additional notes. Since this is a sample alternate/trill fingering chart, each note has at least two fingerings. For notes with more fingerings, I added <tr>s and changed the rowspan values accordingly.

I also added a little CSS to spruce things up:

<style>
  table {
    display: inline-block; /* make tables wrap gracefully depending on screen width */
    margin: 1em; /* put some space between tables for legibility/clarity */
  }
  th img {
    max-width: 8em; /* manage size of note images */
  }
</style>

Here is the result:

flute-fingering-chart-sample

I hope that sparks a few ideas for you if you are considering putting together a fingering chart. If you have other methods or tips, please share in the comments section!

Fingering Diagram Builder, version 0.7

I have released version 0.7 of the Fingering Diagram Builder. Mostly it supports some new instruments. Let me know if you run into bugs or have suggestions or feature requests.

Here’s what’s new:

  • I fixed a bug that was preventing saving custom presets. Not sure if anybody noticed.
  • Viennese oboe diagrams.
  • German clarinet diagrams, in Oehler and Albert variants.
  • French bassoon diagrams, in Jancourt and modern Buffet variants.
  • The (Conservatory) oboe diagram now (optionally) has a thumb low B key.
  • The (German/Heckel) bassoon diagram now (optionally) has an offset C-sharp trill (hat tip to Trent Jacobs).
European woodwindy goodness. L-R: Viennese oboe, Oehler clarinet, Buffet bassoon
European woodwindy goodness. L-R: Viennese oboe, Oehler clarinet, Buffet bassoon

Note that I do not play or own a Viennese oboe, an Oehler- or Albert-system clarinet, or a French bassoon, nor am I suitably fluent in European languages to 100% understand the related pedagogical literature, so I could really use some assistance on making sure these new diagrams look right and things are named properly. Please don’t hesitate to get in touch if you have suggestions/improvements.

As always, I’m glad to hear from folks who are using the FDB, and to see the cool things you are making (websites, blog posts, books, posters, handouts…). The FDB generates thousands of images every month, which I think is pretty cool.

Fingering Diagram Builder, version 0.6

I have just released version 0.6 of the Fingering Diagram Builder. It’s almost a maintenance release, that mostly just attempts to fix a few problems and add a little polish. Your suggestions and bug reports are, as always, welcome (as are your donations, social media pings, links, etc.). Go play around with it or read on for the details.

New hotness
New hotness

Here’s what’s new:

  • The user interface got a minor facelift and some usability improvements. For example, if you dare to use the “Keywork details” tab, you may notice that the menu stays a little more manageable size-wise, and if you’re working at a desktop monitor you can tweak things without losing sight of the diagram.
  • Several of you wrote in to point out that the Dropbox functionality had become broken. Dropbox changed some things on their end and I got a little behind on making the necessary adjustments on my end. Long story short, the FDB now uses Dropbox’s slick little popup thing if you want to save your fingering diagrams there. You might have to enable popups for the FDB in your browser. Also, if you’re not using Dropbox yet, how do you even survive?
  • Valved brass instrument diagrams have been around since version 0.2, but they were little-known because for some reason I lumped them in with the simple-system flutes. I know. They are much easier to find now. You can stop writing in to ask if I know of a website that does diagrams for brass instruments.
  • If you are into creating custom styles, you can now include your selected instrument as part of those if you wish.
  • The Creative Commons license has been updated to version 4.0. That really just means that some of the legalese underlying it has changed. You’re still totally free to use the diagrams for your not-for-profit projects, or to hit me up and make the necessary arrangements if you want to use the diagrams to make something you’re going to sell. (Here’s a cool example of something made with literally one bazillion FDB diagrams: it’s a book.)
  • I did a bunch of other stuff under the hood to improve stability and speed and to lay groundwork for future improvements.

As always, there are more improvements in the works. I usually wait until I have more of a “wow” feature to show off before doing a release, but I wanted to get a fix out there for the Dropbox users. Enjoy!

Fingering Diagram Builder, version 0.51: flute half-holes

Okay, nerds. I got email from a composer acquaintance who pointed out, correctly but also politely, that the Fingering Diagram Builder was lacking a bit in the area of flute half-holing. Here is a minor release to fix that problem. Now you can do some different half-holes on an open-holed flute’s rings. Here is the most obvious kind:

Lengthwise upper half-hole
Lengthwise upper half-hole

But this may also be useful:

Widthwise proximal half-hole

Or, hey, get creative with it:

A variety of half-holes. On the right hand third finger, I’ve overlapped a lengthwise upper half-hole and a widthwise distal half-hole. Works great if you have oddly-shaped fingers.

You can even do this if you want to. It’s no skin off my nose.

Gah

If you’re going for something relatively simple, a few clicks will do it. For the first example (lengthwise upper), click the “Keywork” tab on the menu, then “Keywork details.” Scroll down quite a bit and set “Open holes” to “always” and “Lengthwise upper half-holes” to “always.” Now you are in business. For the key that you want, click the main key (biggest circle) on the diagram, then the open half of the hole, then the closed half of the hole. Bam.

I’m interested in making the FDB useful for new and interesting kinds of fingering diagrams, so let me hear your requests for future versions. Stay tuned for more new features and improvements that are already in the planning stages.

Fingering Diagram Builder, version 0.5

I am pleased to announce the release of the Fingering Diagram Builder, version 0.5. The updates are mostly tech-nerdy stuff and won’t affect how you use it. Read on to find out what’s new, or just check it out yourself.

It has been a bit over a year since the last “major” release, which I hope didn’t led anyone to believe that the project was abandoned. I still have every intention of continuing to update and improve it, and your suggestions and bug reports (also donations) are always welcomed.

Here’s what’s new: Continue reading “Fingering Diagram Builder, version 0.5”

Three Fingering Diagram Builder tutorials

Back in the olden days (2002), I wrote a paper for a college class on Rahsaan Roland Kirk’s simultaneous playing of clarinet and saxophone on “Creole Love Call” from the 1967 album The Inflated Tear. (When I started up this blog, the paper retroactively became a blog post.) In my paper, I included two fingering charts—one for right-handed clarinet, one for left-handed saxophone—that I thought looked pretty good and only took me a few hours to make. Ah, how young I was.

Right-handed clarinet fingering chart. Click for larger.
Left-handed saxophone fingering chart.

Clearly, the time has come to update these sad old charts, and the Fingering Diagram Builder makes it fast, easy, and, dare I say it?—fun. I’ll show you how it’s done, using three particularly cool features (if I do say so myself) of the FDB. We will take a look at the FDB’s custom styles, custom keywork presets, and Dropbox integration.

Custom styles

For now, my plan is just to create enough diagrams to replace the ones in these old fingering charts—just the fingerings I figure Kirk must have used. But I don’t think Rahsaan would want me limiting myself to just those fingerings in the future. I’d better set up this project in such a way that I can come back later with new one-handed fingerings I’ve discovered, and add them to the charts with a minimum of fuss.

The problem is that, what with the FDB’s highly customizable diagrams, I may not remember tomorrow whether the ones I made today have lines that are “medium” or “thick” or “heavy,” or whether I sized them “small” or “tiny,” or whether I was saving the diagrams as .PNG files for onscreen use or .TIF files for better printed results. The FDB does, of course, remember my current settings between sessions all on its own, but I like to work on several projects at once (Rahsaan would approve, I think) and I’ll use the FDB’s “custom styles”  to keep each project’s configuraton a click away. Here’s how:

  1. First I will set up things just the way I want them. Currently, settings that can be saved as part of a custom style are: diagram size, line thickness, color, file naming procedure (let the FDB name them automatically, or specify each filename myself), file format, save-to location (my computer or my Dropbox), and, if I’m using Dropbox, which folder to save the files in.
  2. Once everything is just right, I’ll click over to the “Custom styles” tab in the FDB’s menu to review my choices, and select which ones I want to save.

    As you can see, I’ve set the diagrams to be small, heavy-lined, colored in gray, .PNG-formatted, and saved to Dropbox in a folder called “kirkismyhero.” I have un-checked the box for “File naming,” since I don’t want the FDB to remember that for my purposes on this project—I’ll just go ahead and use whichever system I’m already using that day.
  3. I’ll type in a name (“kirk project”) for my custom style, and click the “Save current settings” button (or press Enter).

    I’m done—that’s all there is to it. In the future, whenever I want to create more diagrams like the ones I’m making today, I can just go to the “Custom styles” tab and click on “kirk project.”

Continue reading “Three Fingering Diagram Builder tutorials”

Fingering Diagram Builder, version 0.4

Hello, friends. I’m excited to share the latest round of improvements to the Fingering Diagram Builder. Thanks to all for your suggestions and bug reports, for your donations (every little bit helps), and for sharing with me some of the cool things you are making with the fingering diagrams.

A few names that need mentioning for recent extra-awesome support and/or ideas are bassoonist Dave Wells (check out his high-quality and handsome bassoon fingering charts), saxophonist/doubler Evan Tate, saxophonist Bart Walters (who blogs over at Music Collective), pianist Jason Gray, and clarinetists Kellie Lignitz and Rachel Yoder (who included the FDB in their column in The Clarinet and on Clarinet Cache). You internet people sure are nice!

Check out version 0.4 of the Fingering Diagram Builder, or read on for a guide to what’s new and improved.

Continue reading “Fingering Diagram Builder, version 0.4”

Fingering diagram builder, version 0.3

I’m pleased to announce some updates and improvements to the Fingering diagram builder. Thanks to all who have used it, and especially to all who have reported bugs, made suggestions, Tweeted or blogged about it, or offered compliments. And a very special thanks indeed to those who have used the “Send me reed money” link to support the FDB financially.

Go poke around the new-and-improved FDB, or read on for the full scoop. Continue reading “Fingering diagram builder, version 0.3”

How to make a bad fingering chart

The fingering diagrams I’ve provided in the Fingering diagram builder came into existence gradually over the last several years. As part of the process of developing them, I’ve looked at a great many fingering charts.

I’d like to share a few of the most horrifying examples, and tell you why I’ve tried to make mine the opposite of these. I’m not naming names on the sources, but many of them are well-known and recognizable. Many come from players and pedagogues who I deeply respect for reasons other than their fingering-chart-making skill. (Please don’t identify them in the comments. I’ll edit you if you do.)

Case study no. 1

Here’s a partial saxophone fingering chart from my collection:

Commentary: Continue reading “How to make a bad fingering chart”

Fingering diagram builder, version 0.2

Two months ago I introduced the Fingering diagram builder, something that I hoped people would find useful for quickly and easily creating fingering diagrams for woodwind instruments. Since then, something over 1,000 fingering diagrams have been downloaded, which I think is a nice start.

Many of those have been saxophone fingerings, and I attribute this to some kind mentions among the saxophone-blogger community (thanks Doron, Eric, David, Neal, Alistair, and Anton!).

Now I’m pleased to announce the new-and-of-course-improved version 0.2. Go take it for a spin, or read on about the new goodies:

Continue reading “Fingering diagram builder, version 0.2”