Untitled

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Fretboard App</title>
  <meta name="description" content="Fretboard App">
  <meta name="author" content="Frank Ford">

  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!--  Import jQuery  -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!--  Import Tonal Library  -->
  <script src="js/tonal.min.js"></script>
  <!--  Import d3  -->
  <script src="js/d3.min.js"></script>

  <link rel="stylesheet" type="text/css" href="css/fretboard.css"/>
  <script src="js/fretboard.js"></script>

</head>

<body>

<script>
/*console.log(Tunings);*/
//    Fretboard.drawAll('.fb-container');
</script>
<!--  Selector Interface  -->
<div class="control-panel">
  <label for="selectRoot">Root Note:</label>
  <select id="selectRoot">
      <option>Choose a Root Note</option>
  </select>

  <label for="selectChord">Chord:</label>
  <select id="selectChord" disabled>
      <option>Choose a Chord Type</option>
  </select>

  <label for="selectScale">Scale:</label>
  <select id="selectScale" disabled>
      <option>Choose a Scale Type</option>
  </select>

  <label for="selectTuning">Tuning:</label>
  <select id="selectTuning">
      <option>Choose a Instrument Type</option>
  </select>
</div>


<script>

/*var roots = ["A", "A#", "B", "C", "C#", "D", "D#", "E", "F", "F#", "G", "G#"];*/
var roots = allNotes; // From fretboard.js
var fb = Fretboard();
// Get Selected Chord/Scale info from API
function getMusicData(mysel){

  var iroot = $("#selectRoot option:selected").val();
  var ichord = $("#selectChord option:selected").val();
  var iscale = $("#selectScale option:selected").val();
  var myout = [];
switch(mysel){
  case 'r':
  myout = iroot.split(' ');
  break;
  case 'c':
  myout = Tonal.Chord.notes(iroot, ichord);
  break;
  case 's':
  myout = Tonal.Scale.notes(iroot, iscale);
}
var finseq = myout.join(' ');
fb.clearNotes();
fb.clearNoteText();
fb.draw(finseq);
/*console.log('output: '+finseq);*/
}

// Get Selected Tuning info from fretboard.js
function retuneFretboard(){
  var itune = $("#selectTuning option:selected");
  var item = itune.text();
  var group = itune.parent().attr('label');
  var mytune = 'Tunings.' + group + '.' + item;
  fb.delete();

  // for enumerable properties
  var props = Object.keys(fb);
  for (var i = 0; i < props.length; i++) {
    delete fb[props[i]];
  };
  console.log("cleared values");
  console.log(fb);
  retuneFretBoard(mytune);
  //var fb = Fretboard({tuning: Tunings.Guitar.Drop_D});
  //fb.draw('');
  //console.log('Selected: ' + mytune);
}

// Setup Root Note Dropdown
$.each(roots, function(i, p) {
    $('#selectRoot').append($('<option></option>').val(p).html(p));
});

// Setup Chord Dropdown
var chords = Tonal.Chord.names();
$.each(chords, function(i, p) {
    $('#selectChord').append($('<option></option>').val(p).html(p));
});

// Setup Scale Dropdown
var scales = Tonal.Scale.names();
$.each(scales, function(i, p) {
    $('#selectScale').append($('<option></option>').val(p).html(p));
});

// Setup Tuning Dropdown
var tunings = Tunings;
var tuningselect = $('#selectTuning');

$.each(tunings, function(key, value){
        var group = $('<optgroup label="' + key + '" />');
        $.each(value, function(i,p){
            $('<option />').html(i).appendTo(group);
        });
        group.appendTo(tuningselect);
    });

// Enable Chord & Scale Dropdowns when a root is selected
$("#selectRoot").change(function() {
  $("#selectChord").prop('disabled', false).prop('selectedIndex',0);
  $("#selectScale").prop('disabled', false).prop('selectedIndex',0);
  getMusicData('r');
});

// Disable Chord or Scale Dropdown when one is selected
$("#selectChord").change(function() {
$('#selectScale').prop('selectedIndex',0);
getMusicData('c');
});

$("#selectScale").change(function() {
$('#selectChord').prop('selectedIndex',0);
getMusicData('s');
});

// Change the Instrument Tuning
$("#selectTuning").change(function() {
  $("#selectRoot").prop('selectedIndex',0);
  $("#selectChord").prop('disabled', true).prop('selectedIndex',0);
  $("#selectScale").prop('disabled', true).prop('selectedIndex',0);
  retuneFretboard();
});

</script>
</body>
</html>