$KEYBOARD_UI

This JavaScript module handles piaono keyboards for html pages.

Module file is: keyboard-ui-1.0.0.min.js.
It has dependencies: harmony-1.0.0.min.js and music.min.css.

Files to include in HTML file header

<link rel="stylesheet" href="css/music.min.css" />

<script src="libs/harmony-1.0.0.min.js"></script>
<script src="libs/keyboard-ui-1.0.0.min.js"></script>

$KEYBOARD_UI Methods

Method	Description
init()	Initializes piano drawings.
clear()	Clears note selection for a given keyboard.
selectNotes()	Highlights a set of note for a given keyboard.
selectChord()	Highlights chord's notes for a given keyboard.
selectScale()	Highlights scales's notes for a given keyboard.
selectScale2()	Highlights scale's notes with colored tonal triton.
highlightTonalTriton()	Colorises tonal triton for a given keyboard.
highlightKeyFromNote()	Colorises a key for a given keyboard.

Examples

Scale for piano
Chords for piano
Chords for piano in scale context
Validation

$KEYBOARD_UI.init()

$KEYBOARD_UI.init();

init() initializes piano keyboard(s) found in html file.
This method is called by default when keyboard-ui-1.0.0.min.js module is include.
It can also be called after you add piano dynamically on the page.

To declare piano keyboard add in html file:

<div id="an_unique_id" class="keyboard z">n</div>

Where :

n is the octave number.
z is the zoom.

Examples

<div id="piano1" class="keyboard 1">3</div>

Octaves: 3, zoom: 1

<div id="piano2" class="keyboard 0.5" align="center">2</div>

Octaves: 2, zoom: 0.5

<div id="piano3" class="keyboard 1.2" align="right">2</div>

Octaves: 2, zoom: 1.2

<div id="piano4" class="keyboard 0.45">7</div>

Octaves: 7, zoom: 0.45

$KEYBOARD_UI.clear()

$KEYBOARD_UI.clear(id);

clear() clears note selection for a given keyboard.

id unique piano identificator.

Example

HTML

<div id="piano5" class="keyboard .75" align="center">2</div>

JavaScript

$KEYBOARD_UI.clear('piano5');

$KEYBOARD_UI.selectNotes()

$KEYBOARD_UI.selectNotes(id, notes, firstOctave);

selectNotes() highlights a set of note in ascendant order for a given keyboard.

id unique piano identificator.
notes note list in a string, separed by comma and without space.
firstOctave 0 by default, octave of the first note.
legend optional, to add explicative text centered under the piano.
colors optional, list of colors in order of notes.

Examples

HTML

<div id="piano-n1" class="keyboard .6" align="center">3</div>
<div id="piano-n2" class="keyboard .6" align="center">3</div>
<div id="piano-n3" class="keyboard .6" align="center">3</div>
<div id="piano-n4" class="keyboard .6" align="center">3</div>

JavaScript

$KEYBOARD_UI.selectNotes('piano-n1', 'C,E,F,A,Bb,D,G', 1);
$KEYBOARD_UI.selectNotes('piano-n2', 'G,G,C,Eb,F#,A#');
$KEYBOARD_UI.selectNotes('piano-n3', 'C, E, G, B, D', 0, 'my legend');
$KEYBOARD_UI.selectNotes('piano-n4', 'C, Eb, G, Bb, D, F#, Ab, C, Eb', 0,
    'with colors', ['red', 'lightred', 'blue', 'lightblue', 'green',
    'lightgreen', 'orange', 'gray']);

piano-n1

piano-n2

piano-n3

piano-n4

$KEYBOARD_UI.selectChord()

$KEYBOARD_UI.selectChord(id, chord, firstOctave);

selectChord highlights chord's notes for a given keyboard.

id unique piano identificator.
chord chordname in string.
firstOctave 0 by default, octave of the first note.

Examples

HTML

<div id="piano-c1" class="keyboard 0.6">2</div>
<div id="piano-c2" class="keyboard 0.6">2</div>
<div id="piano-c3" class="keyboard 0.6">2</div>
<div id="piano-c4" class="keyboard 0.6">2</div>
<div id="piano-c5" class="keyboard 0.6">2</div>
<div id="piano-c6" class="keyboard 0.6">2</div>

JavaScript

$KEYBOARD_UI.selectChord('piano-c1', 'CM7');
$KEYBOARD_UI.selectChord('piano-c2', 'G7');
$KEYBOARD_UI.selectChord('piano-c3', 'Dm7/F');
$KEYBOARD_UI.selectChord('piano-c4', 'C/A');
$KEYBOARD_UI.selectChord('piano-c5', 'E°7');
$KEYBOARD_UI.selectChord('piano-c6', 'A');

piano-c1 2	piano-c2 2
piano-c3 2	piano-c4 2
piano-c5 2	piano-c6 2

$KEYBOARD_UI.selectScale()

$KEYBOARD_UI.selectScale(id, mode, tone, firstOctave);

selectScale highlights scale's notes for a given keyboard.

id unique piano identificator.
mode a number for scale:
- 0: major,
- 7: melodic minor,
- 14: harmonic minor,
- 21: natural minor.
firstOctave 0 by default, octave of the first note.

Examples

HTML

<div id="piano-g1" class="keyboard 0.6">3</div>
<div id="piano-g2" class="keyboard 0.6">3</div>
<div id="piano-g3" class="keyboard 0.6">3</div>
<div id="piano-g4" class="keyboard 0.6">3</div>

JavaScript

$KEYBOARD_UI.selectScale('piano-g1', 0, 'C', 3);
$KEYBOARD_UI.selectScale('piano-g2', 7, 'C', 3);
$KEYBOARD_UI.selectScale('piano-g3', 14, 'C', 3);
$KEYBOARD_UI.selectScale('piano-g4', 21, 'C', 3);

piano-g1 2 C major	piano-g2 2 C melodic minor
piano-g3 2 C harmonic minor	piano-g4 2 C natural minor

$KEYBOARD_UI.selectScale2()

$KEYBOARD_UI.selectScale2(id, mode, tone, firstOctave);

selectScale2 highlights scale's notes with colored tonal triton for a given keyboard.

id unique piano identificator.
mode a number for scale:
- 0: major,
- 7: melodic minor,
- 14: harmonic minor,
- 21: natural minor.
firstOctave 0 by default, octave of the first note.

Examples

HTML

<div id="piano-g5" class="keyboard 0.6">3</div>
<div id="piano-g6" class="keyboard 0.6">3</div>
<div id="piano-g7" class="keyboard 0.6">3</div>
<div id="piano-g8" class="keyboard 0.6">3</div>

JavaScript

$KEYBOARD_UI.selectScale('piano-g5', 0, 'G', 3);
$KEYBOARD_UI.selectScale('piano-g6', 7, 'G', 3);
$KEYBOARD_UI.selectScale('piano-g7', 14, 'G', 3);
$KEYBOARD_UI.selectScale('piano-g8', 21, 'G', 3);

piano-g5 2 G major	piano-g6 2 G melodic minor
piano-g7 2 G harmonic minor	piano-g8 2 G natural minor

$KEYBOARD_UI.highlightTonalTriton()

$KEYBOARD_UI.highlightTonalTriton(id, tone);

highlightTonalTriton colorises tonal triton for a given keyboard.

id unique piano identificator.
tone tone of selected scale.

showTonalTriton must be call after an action.
Warning, clear disables tonal triton highlight.

Examples

HTML

<div id="piano-tt1" class="keyboard 0.8" align="center">2</div>

JavaScript

$KEYBOARD_UI.selectChord('piano-tt1', 'G7');
$KEYBOARD_UI.highlightTonalTriton('piano-tt1', 'C');

HTML

<div id="piano-tt2" class="keyboard 0.8" align="center">2</div>

JavaScript

$KEYBOARD_UI.selectNotes('piano-tt2', 'Db,F,Ab,B,Eb');
$KEYBOARD_UI.highlightTonalTriton('piano-tt2', 'C');

$KEYBOARD_UI.highlightKeyFromNote()

$KEYBOARD_UI.highlightKeyFromNote(id, note, firstOctave, pattern);

highlightKeyFromNote Colorises a key for a given keyboard.

id unique piano identificator.
note note to highlight.
firstOctave 0 by default, octave of the first note.
pattern string for color in ['red', 'lightred', 'blue', 'lightblue', 'green', 'lightgreen', 'orange', 'gray', 'optional'].

showTonalTriton must be call after an action.
Warning, clear disables tonal triton highlight.

Example

HTML

<div id="piano-tt3" class="keyboard 0.8" align="center">2</div>

JavaScript

$KEYBOARD_UI.selectChord('piano-tt3', 'D7');
$KEYBOARD_UI.highlightKeyFromNote('piano-tt3', 'A', 0);
$KEYBOARD_UI.highlightKeyFromNote('piano-tt3', 'E', 1, "optional");

Scale for piano

HTML

<script src="libs/music-ui-1.0.0.min.js"></script>
<div align="center">
    Select a tonality:
    <div id="tonalities_1"></div><br>
    <div id="piano-scale_1" class="keyboard 0.4">2</div>
</div>

JavaScript

function updatePianoScale1(tonality) {
    var tm = $HARMONY.getToneAndMinor(tonality);
    var g = tm.minor ? 14 : 0;
    $KEYBOARD_UI.selectScale('piano-scale_1', g, tm.tone);
}
var tonalitySelection1 = "MC";
$MUSIC_UI.buildTonalities('tonalities_1', tonalitySelection1, updatePianoScale1);
updatePianoScale1(tonalitySelection1);

Select a tonality:

HTML

<script src="libs/music-ui-1.0.0.min.js"></script>
<div align="center">
    Select a tonality:
    <div id="tonalities_2"></div><br>
    <div id="piano-scale_2" class="keyboard 0.5">4</div>
</div>

JavaScript

function updatePianoScale2(tonality) {
    var tm = $HARMONY.getToneAndMinor(tonality);
    var g = tm.minor ? 14 : 0;
    $KEYBOARD_UI.selectScale2('piano-scale_2', g, tm.tone, 1);
}
var tonalitySelection2 = "mA";
$MUSIC_UI.buildTonalities('tonalities_2', tonalitySelection2, updatePianoScale2);
updatePianoScale2(tonalitySelection2);

Select a tonality:

Chords for piano #1

HTML

<div align="center">
    Select a tone: <div id="tones_1"></div><br>
    Select a signature: <div id="signatures_1"></div><br>
    <div id="piano-chord_1" class="keyboard 0.8">3</div>
</div>

JavaScript

var tone1 = 'C', signature1 = 'm';
var signatures_1 = [
    'Maj', 'm', '°', 'mb5', '+5',
    '!7', 'M7', 'Δ7', 'm7', 'mM7', '°7',
    '!m7b5', 'Ø7', '7b5', '7#5', 'M7#5', 'dim7',
    '!sus2', 'sus4', '7sus4', '6', 'm6', 'add9'
];
function updatePianoChord1() {
    var chord = tone1 + signature1;
    $KEYBOARD_UI.selectChord("piano-chord_1", chord, 1);
}
function updateChordTone1(tone) {
    tone1 = tone;
    updatePianoChord1();
}
function updateChordSignature1(signature) {
    signature1 = signature;
    updatePianoChord1();
}
$MUSIC_UI.buildTones('tones_1', tone1, updateChordTone1);
$MUSIC_UI.buildSignatures('signatures_1', signatures_1, 1, updateChordSignature1);
updatePianoChord1();

Select a tone:

Select a signature:

Chords for piano in scale context

HTML

<div align="center">
    Select scale tonality: <div id="tonalities"></div>
    Tonal triton is <span id="quarte" class="T4"></span> and <span id="sensible" class="T7M"></span>.
    <br><br>Select chord tone: <div id="tones_2"></div>
    <br>Select chord signature: <div id="signatures_2"></div><br>
    <div id="piano-chord_2" class="keyboard .5">2</div>
</div>

JavaScript

var tonality2 = 'MC', tone2 = 'G', signature2 = '7', scaleTone = 'C';
var signatures_2 = ['Maj', 'm', '°', '+5', '7', 'M7', 'm7', '°7'];
function updatePianoChord2() {
    var chord = tone2 + signature2;
    $KEYBOARD_UI.selectChord("piano-chord_2", chord);
    $KEYBOARD_UI.highlightTonalTriton("piano-chord_2", scaleTone);
}
function updateChordTonality2(tonality) {
    scaleTone = $HARMONY.getToneOfTonality(tonality);
    document.querySelector('#quarte').innerHTML = 'quarte ' + $HARMONY.getRelativeNote(scaleTone, "P4");
    document.querySelector('#sensible').innerHTML = 'sensible ' + $HARMONY.getRelativeNote(scaleTone, "M7");
    updatePianoChord2();
}
function updateChordTone2(tone) { tone2 = tone; updatePianoChord2(); }
function updateChordSignature2(signature) { signature2 = signature; updatePianoChord2(); }
$MUSIC_UI.buildTonalities('tonalities', tonality2, updateChordTonality2);
$MUSIC_UI.buildTones('tones_2', tone2, updateChordTone2);
$MUSIC_UI.buildSignatures('signatures_2', signatures_2, 0, updateChordSignature2);
updateChordTonality2(tonality2);

Select scale tonality:

Tonal triton is and .

Select chord tone:

Select chord signature: