$KEYBOARD_UI


This JavaScript module handles piaono keyboards for html pages.

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.
selectGammut() Highlights gammut's notes for a given keyboard.
selectGammut2() Highlights gammut's notes with colored tonal triton.
highlightTonalTriton() Colorises tonal triton for a given keyboard.

Exemples

$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 :

Examples

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

Octaves: 3, zoom: 1

3

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

Octaves: 2, zoom: 0.5

2

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

Octaves: 2, zoom: 1.2

2

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

Octaves: 7, zoom: 0.45

7

$KEYBOARD_UI.clear()

$KEYBOARD_UI.clear(id);

clear() clears note selection for a given keyboard.

Exemple

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

JavaScript
$KEYBOARD_UI.clear('piano5');

2



$KEYBOARD_UI.selectNotes()

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

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

Exemples

HTML
<div id="piano-n1" class="keyboard .6" align="center">3</div>
<div id="piano-n2" 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#');

piano-n1
3
piano-n2
3

$KEYBOARD_UI.selectChord()

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

selectChord highlights chord's notes for a given keyboard.

Exemples

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.selectGammut()

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

selectGammut highlights gammut's notes for a given keyboard.

Exemple

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.selectGammut('piano-g1', 0, 'C', 3);
$KEYBOARD_UI.selectGammut('piano-g2', 7, 'C', 3);
$KEYBOARD_UI.selectGammut('piano-g3', 14, 'C', 3);
$KEYBOARD_UI.selectGammut('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.selectGammut2()

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

selectGammut2 highlights gammut's notes with colored tonal triton for a given keyboard.

Exemple

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.selectGammut('piano-g5', 0, 'G', 3);
$KEYBOARD_UI.selectGammut('piano-g6', 7, 'G', 3);
$KEYBOARD_UI.selectGammut('piano-g7', 14, 'G', 3);
$KEYBOARD_UI.selectGammut('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.showTonalTriton(id, tone);

showTonalTriton colorises tonal triton for a given keyboard.

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

Exemples

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');

2

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');

2

Gammut 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-gammut_1" class="keyboard 0.4">2</div>
</div>

JavaScript
function updatePianoGammut1(tonality) {
    var tm = $HARMONY.getToneAndMinor(tonality);
    var g = tm.minor ? 14 : 0;
    $KEYBOARD_UI.selectGammut('piano-gammut_1', g, tm.tone);
}
var tonalitySelection1 = "MC";
$MUSIC_UI.buildTonalities('tonalities_1', tonalitySelection1, updatePianoGammut1);
updatePianoGammut1(tonalitySelection1);
Select a tonality:

2
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-gammut_2" class="keyboard 0.5">4</div>
</div>

JavaScript
function updatePianoGammut2(tonality) {
    var tm = $HARMONY.getToneAndMinor(tonality);
    var g = tm.minor ? 14 : 0;
    $KEYBOARD_UI.selectGammut2('piano-gammut_2', g, tm.tone, 1);
}
var tonalitySelection2 = "mA";
$MUSIC_UI.buildTonalities('tonalities_2', tonalitySelection2, updatePianoGammut2);
updatePianoGammut2(tonalitySelection2);
Select a tonality:

4

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:

3

Chords for piano in gammut context

HTML
<div align="center">
    Select gammut 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', gammutTone = '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", gammutTone);
}
function updateChordTonality2(tonality) {
    gammutTone = $HARMONY.getToneOfTonality(tonality);
    document.querySelector('#quarte').innerHTML = 'quarte ' + $HARMONY.getRelativeNote(gammutTone, "P4");
    document.querySelector('#sensible').innerHTML = 'sensible ' + $HARMONY.getRelativeNote(gammutTone, "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 gammut tonality:
Tonal triton is and .

Select chord tone:

Select chord signature:

2