$DIAGRAM_UI


harmonic diagram
editor
with json format

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

Files to include in HTML file header
<script src="libs/harmony-1.0.0.min.js"></script>
<script src="libs/diagram-ui-1.0.0.min.js"></script>

Exemples


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("G");

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.updateTone("F");


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("G");

Ab

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.updateTone("F");

C#

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