Scriptasaurus JavaScript Class Library

Though you’ll probably use Scriptasaurus “as-is” some of you might want to modify or tinker — or you might just be curious. Under the hood Scriptasaurus is made up of several files that all extend the “ukeGeeks” namespace. Here’s a quick overview of the files and what they do.

I use PHP Minify to combine all of these into a single file (included in files on GitHub) in both merged-only and compressed formats.

File Description
ukeGeeks.namespace.js Defines the “ukeGeeks” namespace. A “namespace” is just a sexy way of saying that all the UGS classes, functions, and variables will be attached or defined within this one object. This precedes the other files.
ukeGeeks.settings.js Think of this as the preferences and constants class. Most notably this sets appearance — Chord Diagram’s size, fonts used, colors. Also the grid used to display all song chords Definitions for the various “entities” used (class or container definitions). Used by other classes to instantiate data objects.
ukeGeeks.definitions.js Chord definition tools for reading instruments and user-defined chords. Once a song’s been read this will hold arrays for its chords.
ukeGeeks.definitions .sopranoUkuleleGcea.js Chord Dictionary for Soprano Ukulele tuned G-C-E-A. Important: instrument definitions must be added after ukeGeeks.definitions! This is also the only file in this JavaScript library that “auto-executes” (does something without being asked).
ukeGeeks.canvasTools.js Wraps three common canvas actions: adding canvas element to DOM, drawing a dot, adding text
ukeGeeks.chordBrush.js Makes individual chord diagrams; all <canvas> drawing happens here
ukeGeeks.chordImport.js Converts text to JSON objects. Accetps either large text blocks or single lines of text written in CPM syntax (looks for instrument, tuning, and define statements). Returns either single or array of expandedChord objects (JSON).
ukeGeeks.cpmParser.js Reads text block following ChordPro formatting — finds text headings (labels), chorus markers, etc within the MusicText, replaces the plain text which H4H6 tags
ukeGeeks.chordParser.js Parses MusicText to find chords, constructs array of found chords, replaces chords plain text with HTML
ukeGeeks.chordPainter.js Uses the “Chord Brush” to draw all of the defined chord diagrams (only if you’ve opted to have them all listed in a grid some place on your page).
ukeGeeks.tabs.js Handles Tablatures. Reads text and creates canvas image(s).
ukeGeeks.toolsLite.js Some simple classname shortcut methods, similar to jQuery)
ukeGeeks.transpose.js Shift chords +/- any number of semitones; also handles switching instruments (soprano to baritone)
ukeGeeks.overlapFixer.js As the name implies this detects and fixes chord names (or diagram) collisions within the lyrics.
ukeGeeks.scriptasaurus.js Kicks off objects & actions; finds music, calls parser, calls chord drawing, etc.

Note that on your production site, just like on this site, you should link to merged and minified library — it reduces HTTP requests and file size, both are important.

File Description
startup.js The above ukeGeeks JavaScript files actually “do” nothing.They just provide the tools, data, and helpers required.

To convert a block of text (in a <pre> tag) you need to “run” the program, that’s what startup does. It actually executes the above to replace your song text with pretty-markup and generate your tablature and chord diagrams.

Other Files

In the download you’ll find some examples, including these CSS & HTML Templates.

File Description (media: all) A very minimal stylesheet, mainly handling the two presentation options — chords “over lyrics” or “inline with lyrics”
ukeGeeks.musicPrint.css (media: print) Print stylesheet strips padding