$DIAGRAM_UI

harmonic diagram
editor
with json format

This JavaScript module handles insertion in html page of transposable harmonic diagram.

Module file is: diagram-ui-1.0.0.min.js.
It has dependencies: harmony-1.0.0.min.js, music-ui-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/music-ui-1.0.0.min.js"></script>
<script src="libs/diagram-ui-1.0.0.min.js"></script>

$DIAGRAM_UI Methods

Method	Description
init()	Builds all harmonic diagram found in html file.
updateTonality()	Updates transposable harmonic diagrams with given tonality.

Examples

Validation

$DIAGRAM_UI.init()

$DIAGRAM_UI.init(options);

init() Builds all harmonic diagrams found in html file.

options {
    'tonality': 'MC',
    'bMajorOrMinor': true or false,
    'lang': 'en' or 'fr' for language
}

$DIAGRAM_UI.updateTonality()

$DIAGRAM_UI.updateTonality(tonality, bMajorOrMinor);

updateTonality() Updates transposable harmonic diagrams with given tonality.

tonality the selected tonality for update.
bMajorOrMinor true to support diagrams with class major and minor, false otherwise.

1 - Static diagram with given tone

HTML

<div id="diagram_1" class="harmonic-diagram"></div>

JavaScript

var diagram_1 = [[
  { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "right",
    links: [{from:"right", to:"left", x:1, y:0, color:'red'}]},
  { interval: "P1", signature: "", degree:"I", fn: "T", pins: "left+right" },
  { interval: "P4", signature: "", degree:"IV", fn: "SD", pins: "left",
    links: [{from:"left", to:"right", x:-1, y:0, color:'black'}] }
]];
$DIAGRAM_UI.init({tonality:"MG"});

2 - Transposable diagram with given tone

HTML

<div id="diagram_2" class="harmonic-diagram transposable"></div>

JavaScript

var diagram_2 = [[
  { interval: "P4", signature: "", degree:"IV", fn: "SD", pins: "right",
    links: [{from:"right", to:"left", x:1, y:0, color:'gray'}] },
  { interval: "P5", signature: "7", degree:"V7", fn: "D", pins: "left+right",
    links: [{from:"right", to:"left", x:1, y:0, color:'red'}]},
  { interval: "P1", signature: "", degree:"I", fn: "T", pins: "left" }
]];
$DIAGRAM_UI.updateTonality("MF");

3 - Static diagram with fixed tone (Ab)

HTML

<div id="diagram_3" class="harmonic-diagram">Ab</div>

JavaScript

var diagram_3 = [[
  { interval: "M6", signature: "7", degree:"V7/II", fn: "D2", pins: "right",
    diatonic: false,
    links: [{from:"right", to:"left", x:1, y:0, color:'red'}] },
  { interval: "M2", signature: "m", degree:"II", fn: "SD",
    pins: "left+right",
    links: [{from:"right", to:"left", x:1, y:0, color:'black'}] },
  { interval: "P5", signature: "7", degree:"V7", fn: "D",
    pins: "left+right",
    links: [{from:"right", to:"left", x:1, y:0, color:'red'}]},
  { interval: "P1", signature: "", degree:"I", fn: "T", pins: "left" }
]];
$DIAGRAM_UI.init({tonality:"MG"});

4 - Transposable diagram with initial fixed tone (C#)

HTML

<div id="diagram_4" class="harmonic-diagram transposable">C#</div>

JavaScript

var diagram_4 = [
[ // line1
  { interval: "M2", signature: "°", degree:"II",  fn: "SD", pins: "right",
    links: [
      {from:"right", to:"left", x:1, y:0, color:'black'},
      {from:"right", to:"left", x:1, y:1, color:'gray'}] },
  { interval: "P5", signature: "7", degree:"V7", fn: "D",
    pins: "left+right",
    links: [{from:"right", to:"left", x:1, y:0, color:'red'}] },
  { interval: "P1", signature: "m", degree:"I", fn: "T", pins: "left" }
],[ // line2
  { interval: "M2", signature: "7", degree:"V7/V", fn: "D2", pins: "right",
    diatonic: false,
    links: [
      {from:"right", to:"left", x:1, y:0, color:'gray'},
      {from:"right", to:"left", x:1, y:-1, color:'red'}] },
  { interval: "M7", signature: "°7", degree:"VII°7", fn: "D",
    pins: "left+right",
    links: [{from:"right", to:"left", x:1, y:-1, color:'orange'}] }
]];
$DIAGRAM_UI.updateTonality("MF");

Diagram is transposable with transposable key in class list, call to $DIAGRAM_UI.updateTonality changes the initial tone value. We start with G and change it to F.