About jTabTwiki

jTabTwiki combines the guitar chord and tab notation power of jTab with the very popular TiddlyWiki single-file wiki software. Together, they allow you to instantly setup a personal guitar tab wiki/notebook. No kidding. And it's free.

This page provides the basic instructions for getting up and running. There are basically three approaches you may take:

  1. Take a copy of the jTabTwiki starter kit
  2. Import the jTab plugin into a new/existing TiddlyWiki file
  3. Manually add the jTab plugin to a TiddlyWiki file (it's not as hard as it sounds)

Once you have jTabTwiki setup, take a look at the very simple usage instructions, and then you are on your way.

With jTabTwiki, you can easily make guitar notation notes in your wiki like this:


Option 1: Take a copy of the jTabTwiki starter kit

A preconfigured jTabTwiki file is available here. Right-click on the link to download to a local folder, then open your local copy in the browser and start using it.

This is currenly using TiddlyWiki version 2.5, revision 2.

It also directly includes the jTab support files from the Internet, so it will not render jTab if you are not online. If you want to work with fully-rendered jTab while offline, you can make a local copy of the jTab files. See section 3 for details.

Next step: checkout the usage instructions.

Option 2: Import the jTab plugin into a new/existing TiddlyWiki file

TiddlyWiki has a simple and effective plugin architecture. Another approach is to install the jTab plugin into a fresh (or existing) TiddlyWiki file. See the TiddlyWiki plugin installation instructions for full details, but here's the simplified version:

  1. Download a fresh TiddlyWiki if you don't already have one.
  2. Open your local TiddlyWiki file, click on the "backstage" link if backstage not already shown.
  3. Click on Import and Open your local TiddlyWiki file, click on the "backstage" link if backstage not already shown.
    Set the import source URL to http://jtab.tardate.com/jtabtwiki.html and click Open
  4. Select the two jTabTwiki objects (MarkupPostHead and jTab plugin) and click import
  5. TiddlyWiki will confirm the import. Click done
  6. Now you have TiddlyWiki setup with the jTabTwiki plugin. Don't forget to save!

Next step: checkout the usage instructions.

Option 3: Manually add the jTab plugin to a TiddlyWiki file

It is actually quite simple to setup jTab in TiddlyWiki. You just need to create two 'tiddlers': MarkupPostHead and jTab plugin.

Creating MarkupPostHead

From the More | Shadowed items, select MarkupPostHead

Edit MarkupPostHead, and add the three required jTab script includes and then click done:

The actual required jTab script includes are as follows: 

  <script src="http://jtab.tardate.com/javascripts/prototype.js" type="text/javascript"></script>
  <script src="http://jtab.tardate.com/javascripts/raphael.js" type="text/javascript"></script>
  <script src="http://jtab.tardate.com/javascripts/jtab.js" type="text/javascript"></script>

Note the direct URL reference to the files on http://jtab.tardate.com. This means you must be online for jTab to render properly. If you wish to avoid this dependency, you can save these files locally, and change the src links appropriately. e.g. in a javascripts folder relative to the TiddlyWiki file: 

  <script src="./javascripts/prototype.js" type="text/javascript"></script>
  <script src="./javascripts/raphael.js" type="text/javascript"></script>
  <script src="./javascripts/jtab.js" type="text/javascript"></script>

Creating jTab plugin

Select new tiddler and enter the code for the jtab macro as follows:

The actual required script is as follows: 

//{{{
config.macros.jtab = {
  handler: function (place, macroName, params, wikifier, paramString, tiddler)
  {
      var tokens = params[0];
      var el = createTiddlyElement( place, 'div', '', 'jtab', tokens );
      jtab.render(el, tokens );
  }
};
//}}}

Make sure to set the tag systemConfig and then click done:

Save then reload the TiddlyWiki page and you are ready to go.

Next step: checkout the usage instructions.

Using jTabTwiki

For the most part, what you'll want to study up on is how to use TiddlyWiki (unless you are already a regular user). It's basically point-and-click, and learn some of the special notation. See the TiddlyWiki GettingStarted pages here.

When you want to include some jTab notation, simply use the jtab macro as follows: 

    <<jtab 'Am7 / Dm7 Em7 |'>>

Enter the jTab notation to be rendered as the string parameter to the macro (in this example, the 'Am7 / Dm7 Em7 |' bit). To learn more about jTab notation, see here.

More information and support

See the jTab home page for more information. Feedback and suggestions are always welcome!