JSscaleTool
Since I have learned harmony-theory and practiced it on the guitar, I think an individual visualisation of the scales on the fretboard is important to memorize the positions of the available notes on the instrument.
The JS-Scaletool is a javascript-plugin, that draws a virtual fretboard on a HTML5-canvas. It also provides an option to draw a keyboard instead.
It can not only be used to display chords and scales on a fretboard, but also to modify them and create own scales interactively.
The plugin provides a lot of options to individualize the look and size of the fretboard and to set the attributes of the instrument(e.g. number of strings and frets, tuning).
It also provides the possibility to get setters so that the users/readers can change attributes later on.
Try out all the functions of the tool on the project-page.
Reference
Installation
Download the scaletool.js file and put it to any directory.
Include the file in your document.
The plugin will create the global variable jsst on the window-object.
jsst.createScaletool
Method to initialize scaletool. Returns a Scaletool-object
| jsst.createScaletool(wrapper [, strings [, fretboardSettings]]) | |
|---|---|
| argument | description |
| wrapper | A DOM-element to wrap scaletools canvas |
| strings | An array containing numeric expressions for each root note of a string that should be available. 0 stands for a C, 1 stands for a C# ... 11 stands for a B/H. By default the standard tuning of a 6-string guitar: [4,9,2,7,11,4] |
| fretboardSettings | An object which properties define the appearance of the fretboard. The settings can also later be changed with .fretboard.settings = {...} or in before with jsst.config({...}) |
| Fretboard settings | |||
|---|---|---|---|
| setting | default | type | description |
| width | 600 | number | width of the canvas |
| height | 260 | number | height of the canvas |
| marginLeft | 40 | number | margin between the fretboard and the canvas |
| marginTop | 60 | number | margin between the fretboard and the canvas |
| marginRight | 40 | number | margin between the fretboard and the canvas |
| marginBottom | 20 | number | margin between the fretboard and the canvas |
| backgroundColor | '#FFF' | string | backgroundcolor |
| fontSize | 11 | number | general font-size |
| showFretNo | true | boolean | hide/show fret numbering |
| fretColor | '#000' | string | fret-color |
| stringColor | '#000' | string | string-color |
| markerStroke | '#000' | string | stroke color of the markers |
| rootFill | '#000' | string | fill-color of the scales root-note |
| markerFill | '#666' | string | fill-color of the other markers |
| markerSize | 10 | number | size of the markers |
| markerFontColor | '#FFF' | string | font-color of the markers |
| showGhostMarkers | false | boolean | show/hide subtle markers on positions that don't belong to the scale |
| markerNotesInterval | true | boolean | show notes or intervals on the markers |
| markChord | false | boolean | mark the generated chord |
| hudColor | '#000' | string | font color of the scale and chord description |
Example
jsst.createScaletool will create a canvas-element and append it to the wrapper.
// define a wrapper for Scaletool
var div = document.getElementById('scaleToolWrapper');
// createScaletool() will create a canvas inside the wrapper
var scaletool = jsst.createScaletool(
// creating the Scaletool requires the wrapper..
div,
// after that you can define the strings...
[4,9,2,7,11,4],
// and pass options for the fretboard appearance.
{
height:200,
rootFill: '#F00'
}
);
// since the scaleTool object is saved to a variable you can change various settings later on:
scaletool.fretboard.frets = 5;
jsst.config
You can set the defaults of jsst before you create a Scaletool by using jsst.config.
| jsst.config(settings) | |
|---|---|
| argument | description |
| settings | An object which properties define beside the appearance of the fretboard, the scale, the strings and the number of frets. You can put all the fretboard settings in the argument. Furthermore additional properties are possible. |
| Additional settings for jsst.config() | |||
|---|---|---|---|
| setting | default | type | description |
| frets | 13 | number | number of frets on the fretboard |
| fromFret | 0 | number | start at fret number |
| scale | 'Major' | string | scalename: 'Major Pentatonic', 'Minor Blues', 'Major', 'Melodic Minor', 'Harmonic Minor', 'Dimnished', 'Wholetone' or 'Chromatic' |
| strings | [4,9,2,7,11,4] | array | array with the rootnotes of each string. |
| pianomode | false | boolean | displays pianokeys if true |
Example: Multiple Scaletools in the same style
jsst.config({
width: 600,
height: 160,
marginTop: 40,
marginBottom: 10,
marginLeft: 20,
marginRight: 20,
backgroundColor: '#112233',
rootFill: 'red',
hudColor: 'white',
stringColor: 'white',
fretColor: 'white',
markerSize: 7,
markChord: true,
scale: 'Harmonic Minor'
});
var div = document.getElementById('scaleToolWrapper');
var scaletool1 = jsst.createScaletool(div);
var scaletool2 = jsst.createScaletool(div);
scaletool2.fretboard.setScaleNextDegree();
Example: Piano
jsst.config({
frets: 24,
scale: 'Minor Blues',
pianomode: true
});
var div = document.getElementById('scaleToolWrapper');
jsst.createScaletool(div);
getSetter
With a setter you can bring in some interactivity and make Scaletool customizable. The method returns input elements wrapped inside div-elments.
| st.getSetter(setter [, id [, legend]]) | |
|---|---|
| argument | description |
| setter (string) | The setter-name. getSetter() will return a div-wrapper (classes: 'scaleToolSetter', setter-name) containing a label and a input element |
| setter (array) | Multiple setter-names. getSetter() will return a fieldset-element containing div-wrappers for each setter defined in the array. |
| id | Optional in case of setter (array). An id for the fieldset. |
| legend | Optional in case of setter (array). An legend for the fieldset. |
| Setter-names | |
|---|---|
| setter | input-type |
| width | number |
| height | number |
| marginLeft | range |
| marginTop | range |
| marginRight | range |
| marginBottom | range |
| backgroundColor | color |
| fontSize | range |
| showFretNo | checkbox |
| fretColor | color |
| stringColor | color |
| markerStroke | color |
| rootFill | color |
| markerFill | color |
| markerSize | range |
| markerFontColor | color |
| showGhostMarkers | checkbox |
| markerNotesInterval | checkbox |
| markChord | checkbox |
| hudColor | color |
| imgLink | a |
| frets | number |
| fromFret | number |
| intervals | checkbox |
| scales | select |
| scaleDegree | fieldset |
| scaleRoot | select |
| stringConfig | fieldset |
| stringTune | select |
| pianoMode | button |
Example: Appending a single setter
var guiWrapper = document.getElementById('scaleToolGUI');
guiWrapper.appendChild(scaletool.getSetter('rootFill'));
The getSetter(string)-method returns a div-wrapper containing a label and an input-element:
Example: Appending multiple setters
var guiWrapper = document.getElementById('scaleToolGUI');
guiWrapper.appendChild(scaletool.getSetter(
['rootFill', 'scaleRoot'],
'root_setters',
'Root Setters'
));
The getSetter(settersArray[, idString[, legendString]])-method returns a fieldset containing div-wrappers for each setter. Optionally with a legend and an id.
st.fretboard
| Fretboard methods | |||
|---|---|---|---|
| method | returns | description | example |
| pianomode get | boolean | gets the status of pianomode property | st.fretboard.pianomode |
| togglePianomode() | boolean | toggles pianomode true/false | st.fretboard.togglePianomode() |
| settings get | object | gets the fretboard settings | st.fretboard.settings |
| settings set | object | sets the fretboard settings | st.fretboard.settings = {width: 800, rootFill: '#FF0000'} |
| toPNG() | string | returns png-dataURL | st.fretboard.toPNG() |
| frets get | number | gets the number of frets | st.fretboard.frets |
| frets set | number | sets the number of frets | st.fretboard.frets = 8 |
| addFrets(number) | number | adds a number of frets | st.fretboard.addFrets(8) |
| removeFrets(number) | number | removes a number of frets | st.fretboard.removeFrets(5) |
| fromFret get | number | gets the fromFret number | st.fretboard.fromFret |
| fromFret set | number | sets the fromFret number | st.fretboard.fromFret = 3 |
| removeString(index) | number | removes a string at index | st.fretboard.removeString(0) |
| addString(root, single, pos) | adds a string tuned by root at pos | st.fretboard.addString(4,'',0) | |
| addStrings(array) | add strings. rootnotes are defined in the array | st.fretboard.addStrings([4,0,2,9]) | |
| toggleScaleInterval(index) | toggles the interval at index of the scale. (eg. index 2 => 2b) | st.fretboard.toggleScaleInterval(1) | |
| setScaleScale(scale) | string | sets the scale to 'Pentatonic', 'Major' ... | st.fretboard.setScaleScale('Melodic Minor') |
| setScaleRoot(number) | number | st.fretboard.setScaleRoot(0) | |
... to be continued
You are welcome to comment if you have any ideas, suggestions or just wanna say something.
Next version will have the functions to set attributes seperated from the setters to make it possible to easily use other setters or methods to configure/alter the plugin.
Comments
Add a comment