Spaces:

Genius-Society
/

figured_bass_calculator

Running

App Files Files Community

admin commited on Dec 27, 2024

Commit

893621a

1 Parent(s): 9ac82f2

upl codes

Browse files

Files changed (45) hide show

.gitattributes +10 -11
README.md +1 -1
css/style.css +31 -0
index.html +255 -18
js/calculator.js +387 -0
src/+42.png +0 -0
src/+6+43.png +0 -0
src/+64.png +0 -0
src/+643.png +0 -0
src/+65.png +0 -0
src/+6b5.png +0 -0
src/2+.png +0 -0
src/4+2.png +0 -0
src/4+b3.png +0 -0
src/42.png +0 -0
src/43.png +0 -0
src/4b.png +0 -0
src/4b3.png +0 -0
src/5+.png +0 -0
src/5+3.png +0 -0
src/53.png +0 -0
src/54.png +0 -0
src/6+43.png +0 -0
src/64.png +0 -0
src/642.png +0 -0
src/643.png +0 -0
src/65+.png +0 -0
src/65+3.png +0 -0
src/65.png +0 -0
src/65b.png +0 -0
src/65b3.png +0 -0
src/6slash.png +0 -0
src/6slash4.png +0 -0
src/6slash5.png +0 -0
src/6slashb5.png +0 -0
src/7+.png +0 -0
src/7+3.png +0 -0
src/73.png +0 -0
src/74.png +0 -0
src/742.png +0 -0
src/743.png +0 -0
src/754.png +0 -0
src/84.png +0 -0
src/853.png +0 -0
style.css +0 -28

.gitattributes CHANGED Viewed

@@ -1,35 +1,34 @@
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
 *.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
 *.ftz filter=lfs diff=lfs merge=lfs -text
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
 *.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
 *.onnx filter=lfs diff=lfs merge=lfs -text
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
 saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
 *.tflite filter=lfs diff=lfs merge=lfs -text
 *.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
 *.xz filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
+*.bin.* filter=lfs diff=lfs merge=lfs -text
 *.bz2 filter=lfs diff=lfs merge=lfs -text
 *.ftz filter=lfs diff=lfs merge=lfs -text
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
 *.msgpack filter=lfs diff=lfs merge=lfs -text
 *.onnx filter=lfs diff=lfs merge=lfs -text
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.rar filter=lfs diff=lfs merge=lfs -text
 saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.tar.* filter=lfs diff=lfs merge=lfs -text
 *.tflite filter=lfs diff=lfs merge=lfs -text
 *.tgz filter=lfs diff=lfs merge=lfs -text
 *.xz filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
+*.zstandard filter=lfs diff=lfs merge=lfs -text
+*.tfevents* filter=lfs diff=lfs merge=lfs -text
+*.db* filter=lfs diff=lfs merge=lfs -text
+*.ark* filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*data* filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 title: Figured Bass Calculator
-emoji: 👁
 colorFrom: red
 colorTo: red
 sdk: static

 ---
 title: Figured Bass Calculator
+emoji: 🎵🖥️
 colorFrom: red
 colorTo: red
 sdk: static

css/style.css ADDED Viewed

	@@ -0,0 +1,31 @@

+table {
+    border-collapse: collapse;
+}
+#chord {
+    margin: 0 auto;
+    display: block;
+}
+a {
+    text-decoration: none;
+    display: block;
+    float: right;
+}
+#demo {
+    display: contents;
+}
+select {
+    width: 100%;
+}
+video {
+    width: 480px;
+    aspect-ratio: 16/9;
+}
+#maintab {
+    margin: 0 auto;
+}

index.html CHANGED Viewed

@@ -1,19 +1,256 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="robots" content="index, follow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="text/javascript" src="./js/calculator.js"></script>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body style="background: white;">
+  <table border="1" id="maintab">
+    <tbody>
+      <tr>
+        <td>教程 (Tutorial)</td>
+        <td>
+          <video
+            src="https://www.modelscope.cn/studio/Genius-Society/figured_bass_calculator/resolve/master/src/demo.mp4"
+            controls muted loop autoplay></video>
+        </td>
+      </tr>
+      <tr>
+        <td class="col-1"><label for="key">中心音 (Key)</label></td>
+        <td class="col-2">
+          <select id="key">
+            <option value="Cb">C♭</option>
+            <option value="Gb">G♭</option>
+            <option value="Db">D♭</option>
+            <option value="Ab">A♭</option>
+            <option value="Eb">E♭</option>
+            <option value="Bb">B♭</option>
+            <option value="F">F</option>
+            <option value="C" selected="selected">C</option>
+            <option value="G">G</option>
+            <option value="D">D</option>
+            <option value="A">A</option>
+            <option value="E">E</option>
+            <option value="B">B</option>
+            <option value="F#">F♯</option>
+            <option value="C#">C♯</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td><label for="key">大小调 (Mode)</label></td>
+        <td>
+          <select id="mode" onchange="change_mode()">
+            <option value="Major" selected="selected">大调 (Major)</option>
+            <option value="Minor">小调 (Minor)</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td><label for="bassNote">低音 (Bass Note)</label></td>
+        <td>
+          <select id="bassNote">
+            <option value="C" selected="selected">C</option>
+            <option value="D">D</option>
+            <option value="E">E</option>
+            <option value="F">F</option>
+            <option value="G">G</option>
+            <option value="A">A</option>
+            <option value="B">B</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td><label for="accidental">变音记号 (Accidental)</label></td>
+        <td>
+          <select id="accidental">
+            <option value="bb">♭♭</option>
+            <option value="b">♭</option>
+            <option value="" selected="selected">&nbsp;</option>
+            <option value="n">♮</option>
+            <option value="#">♯</option>
+            <option value="##">♯♯</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td><label for="figures">数字 Figure(s)</label></td>
+        <td>
+          <span class="dropdown">
+            <span class="dropdown-content" id="dropdown">
+              <table border="1">
+                <tbody>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="noFigure" id="noFigure"
+                        checked="checked" onclick="close_dropdown()"><label for="noFigure">无数字 (No figure)</label>
+                    </td>
+                    <td><input type="radio" name="figures" class="figure" value="0" id="0"
+                        onclick="close_dropdown()"><label for="0">Tasto solo</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="42" id="2"
+                        onclick="close_dropdown()"><label for="2">2</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="4#2" id="4#2"
+                        onclick="close_dropdown()"><label for="4#2">♯2 or <img class="single-figure" src="./src/2+.png"
+                          height="15" valign="middle" alt="2+"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="3" id="3"
+                        onclick="close_dropdown()"><label for="3">3</label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="#" id="#"
+                        onclick="close_dropdown()"><label for="#">♯ or ♯3</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="b" id="b"
+                        onclick="close_dropdown()"><label for="b">♭ or ♭3</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="n" id="n"
+                        onclick="close_dropdown()"><label for="n">♮ or ♮3</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="4" id="4"
+                        onclick="close_dropdown()"><label for="4">4 or <img class="double-figure" src="./src/54.png"
+                          height="20" valign="middle" alt="54"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="4b3" id="4b3"
+                        onclick="close_dropdown()"><label for="4b3"><img class="double-figure" src="./src/4b.png"
+                          height="20" valign="middle" alt="4b"> or <img class="double-figure" src="./src/4b3.png"
+                          height="20" valign="middle" alt="4b3"></label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="#4b3" id="#4b3"
+                        onclick="close_dropdown()"><label for="#4b3"><img class="double-figure" src="./src/4+b3.png"
+                          height="20" valign="middle" alt="#4b3"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="42" id="42"
+                        onclick="close_dropdown()"><label for="42"><img class="double-figure" src="./src/42.png"
+                          height="20" valign="middle" alt="42"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="#42" id="#42"
+                        onclick="close_dropdown()"><label for="#42"><img class="double-figure" src="./src/4+2.png"
+                          height="20" valign="middle" alt="4+2"> or <img class="double-figure" src="./src/+42.png"
+                          height="20" valign="middle" alt="#42"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="43" id="43"
+                        onclick="close_dropdown()"><label for="43"><img class="double-figure" src="./src/43.png"
+                          height="20" valign="middle" alt="43"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="5" id="5"
+                        onclick="close_dropdown()"><label for="5">5</label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="#5" id="#5"
+                        onclick="close_dropdown()"><label for="#5">♯5</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="b5" id="b5"
+                        onclick="close_dropdown()"><label for="b5">♭5</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="53" id="53"
+                        onclick="close_dropdown()"><label for="53"><img class="double-figure" src="./src/53.png"
+                          height="20" valign="middle" alt="53"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="5#3" id="5#3"
+                        onclick="close_dropdown()"><label for="5#3"><img class="double-figure" src="./src/5+3.png"
+                          height="20" valign="middle" alt="5#3"> or <img class="double-figure" src="./src/5+.png"
+                          height="20" valign="middle" alt="5#"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="6" id="6"
+                        onclick="close_dropdown()"><label for="6">6</label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="#6" id="#6"
+                        onclick="close_dropdown()"><label for="#6"><img class="single-figure" src="./src/6slash.png"
+                          height="18" valign="middle" alt="6\"> or ♯6</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="b6" id="b6"
+                        onclick="close_dropdown()"><label for="b6">♭6</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="64" id="64"
+                        onclick="close_dropdown()"><label for="64"><img class="double-figure" src="./src/64.png"
+                          height="20" valign="middle" alt="64"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="#64" id="#64"
+                        onclick="close_dropdown()"><label for="#64"><img class="double-figure" src="./src/6slash4.png"
+                          height="20" valign="middle" alt="6\4"> or <img class="double-figure" src="./src/+64.png"
+                          height="20" valign="middle" alt="#64"></label>
+                    </td>
+                    <td><input type="radio" name="figures" class="figure" value="642" id="642"
+                        onclick="close_dropdown()"><label for="642"><img src="./src/642.png" height="28" valign="middle"
+                          alt="642"></label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="643" id="643"
+                        onclick="close_dropdown()"><label for="643"><img src="./src/643.png" height="28" valign="middle"
+                          alt="643"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="#643" id="#643"
+                        onclick="close_dropdown()"><label for="#643"><img src="./src/+643.png" height="28"
+                          valign="middle" alt="#643"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="#6#43" id="#6#43"
+                        onclick="close_dropdown()"><label for="#6#43"><img src="./src/+6+43.png" height="28"
+                          valign="middle" alt="#6#43"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="6#43" id="6#43"
+                        onclick="close_dropdown()"><label for="6#43"><img src="./src/6+43.png" height="28"
+                          valign="middle" alt="6#43"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="65" id="65"
+                        onclick="close_dropdown()"><label for="65"><img class="double-figure" src="./src/65.png"
+                          height="20" valign="middle" alt="65"></label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="65#3" id="65#3"
+                        onclick="close_dropdown()"><label for="65#3"><img src="./src/65+.png" height="28"
+                          valign="middle" alt="65#"> or <img src="./src/65+3.png" height="28" valign="middle"
+                          alt="65#3"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="65b3" id="65b3"
+                        onclick="close_dropdown()"><label for="65b3"><img src="./src/65b.png" height="28"
+                          valign="middle" alt="65b"> or <img src="./src/65b3.png" height="28" valign="middle"
+                          alt="65b3"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="#65" id="#65"
+                        onclick="close_dropdown()"><label for="#65"><img class="double-figure" src="./src/6slash5.png"
+                          height="21" valign="middle" alt="6\5"> or <img class="double-figure" src="./src/+65.png"
+                          height="20" valign="middle" alt="#65"></label>
+                    </td>
+                    <td><input type="radio" name="figures" class="figure" value="#6b5" id="#6b5"
+                        onclick="close_dropdown()"><label for="#6b5"><img class="double-figure" src="./src/6slashb5.png"
+                          height="21" valign="middle" alt="6\b5"> or <img class="double-figure" src="./src/+6b5.png"
+                          height="20" valign="middle" alt="#6b5"></label>
+                    </td>
+                    <td><input type="radio" name="figures" class="figure" value="7" id="7"
+                        onclick="close_dropdown()"><label for="7">7</label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="b7" id="b7"
+                        onclick="close_dropdown()"><label for="b7">♭7</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="73" id="73"
+                        onclick="close_dropdown()"><label for="73"><img class="double-figure" src="./src/73.png"
+                          height="20" valign="middle" alt="73"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="7#3" id="7#3"
+                        onclick="close_dropdown()"><label for="7#3"><img class="double-figure" src="./src/7+.png"
+                          height="20" valign="middle" alt="7#"> or <img class="double-figure" src="./src/7+3.png"
+                          height="20" valign="middle" alt="7#3"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="742" id="742"
+                        onclick="close_dropdown()"><label for="742"><img src="./src/742.png" height="28" valign="middle"
+                          alt="742"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="743" id="743"
+                        onclick="close_dropdown()"><label for="743"><img src="./src/743.png" height="28" valign="middle"
+                          alt="743"></label></td>
+                  </tr>
+                  <tr>
+                    <td><input type="radio" name="figures" class="figure" value="754" id="754"
+                        onclick="close_dropdown()"><label for="754"><img class="double-figure" src="./src/74.png"
+                          height="20" valign="middle" alt="74"> or <img src="./src/754.png" height="28" valign="middle"
+                          alt="754"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="8" id="8"
+                        onclick="close_dropdown()"><label for="8">8</label></td>
+                    <td><input type="radio" name="figures" class="figure" value="84" id="84"
+                        onclick="close_dropdown()"><label for="84"><img class="double-figure" src="./src/84.png"
+                          height="20" valign="middle" alt="84"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="853" id="853"
+                        onclick="close_dropdown()"><label for="853"><img src="./src/853.png" height="28" valign="middle"
+                          alt="853"></label></td>
+                    <td><input type="radio" name="figures" class="figure" value="953" id="9"
+                        onclick="close_dropdown()"><label for="9">9</label></td>
+                  </tr>
+                </tbody>
+              </table>
+            </span>
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td><input id="chord" type="button" onclick="show_notes_to_play()" value="计算应该演奏的和弦"></td>
+        <td>
+          <div id="demo">Show chord to play</div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>

js/calculator.js ADDED Viewed

	@@ -0,0 +1,387 @@

+var line_of_fifths = [
+  "F\u266D",
+  "C\u266D",
+  "G\u266D",
+  "D\u266D",
+  "A\u266D",
+  "E\u266D",
+  "B\u266D",
+  "F",
+  "C",
+  "G",
+  "D",
+  "A",
+  "E",
+  "B",
+  "F\u266F",
+  "C\u266F",
+  "G\u266F",
+  "D\u266F",
+  "A\u266F",
+  "E\u266F",
+  "B\u266F",
+];
+function show_notes_to_play() {
+  var keyNoteElement = document.getElementById("key");
+  var keyModeElement = document.getElementById("mode");
+  var bassNoteElement = document.getElementById("bassNote");
+  var bassNote = bassNoteElement.options[bassNoteElement.selectedIndex].value;
+  var keyNote = keyNoteElement.options[keyNoteElement.selectedIndex].text;
+  var keyMode = keyModeElement.options[keyModeElement.selectedIndex].text;
+  var scale = get_scale(keyNote, keyMode);
+  var bassAccidentalElement = document.getElementById("accidental");
+  var bassAccidental = bassAccidentalElement.options[bassAccidentalElement.selectedIndex].text;
+  if (bassAccidental == "\u00A0") {
+    if (!scale.includes(bassNote)) {
+      var index = scale.findIndex(note => note.startsWith(bassNote));
+      bassNote = scale[index];
+    }
+  }
+  bassNote += bassAccidental;
+  getIntervalAboveWithinKey(scale, bassNote, 5, 1);
+  var figures = document.querySelector('input[name="figures"]:checked').value;
+  var notes = realizeFigures(scale, bassNote.trim(), figures);
+  var bSorted = -1;
+  notes.sort();
+  for (i = 0; bSorted != 1; i++) {
+    if (notes[i] != null && compare(notes[i], bassNote) == -1)
+      notes = mutableRotateLeft(notes);
+    else
+      bSorted = 1;
+  }
+  document.getElementById("demo").innerHTML = bassNote.trim() + "," + notes; // "Bass note: "+bassNote+"<br/>Notes to play above bass note: "+notes;
+  notes.length = 0;
+}
+function compare(a, b) {
+  if (a < b)
+    return -1;
+  else if (a > b)
+    return 1;
+  else
+    return 0;
+}
+function mutableRotateLeft(arr) {
+  arr.push(arr.shift());
+  return arr;
+}
+function get_scale(keyNote, keyMode) {
+  var scale = [];
+  var keyNoteIndex = line_of_fifths.indexOf(keyNote);
+  if (keyMode == "Major") {
+    scale.push(line_of_fifths[keyNoteIndex]);
+    scale.push(line_of_fifths[keyNoteIndex + 2]);
+    scale.push(line_of_fifths[keyNoteIndex + 4]);
+    scale.push(line_of_fifths[keyNoteIndex - 1]);
+    scale.push(line_of_fifths[keyNoteIndex + 1]);
+    scale.push(line_of_fifths[keyNoteIndex + 3]);
+    scale.push(line_of_fifths[keyNoteIndex + 5]);
+  }
+  else {
+    scale.push(line_of_fifths[keyNoteIndex]);
+    scale.push(line_of_fifths[keyNoteIndex + 2]);
+    scale.push(line_of_fifths[keyNoteIndex - 3]);
+    scale.push(line_of_fifths[keyNoteIndex - 1]);
+    scale.push(line_of_fifths[keyNoteIndex + 1]);
+    scale.push(line_of_fifths[keyNoteIndex - 4]);
+    scale.push(line_of_fifths[keyNoteIndex - 2]);
+  }
+  return scale;
+}
+function getIntervalAboveWithinKey(scale, noteBass, nStepsUp, iAlter) {
+  var startIndex = scale.findIndex(note => note.startsWith(noteBass.charAt(0)));
+  var endIndex = startIndex + nStepsUp - 1;
+  if (endIndex > 6)
+    endIndex %= 7;
+  var newNote = scale[endIndex];
+  switch (iAlter) {
+    case -2:
+      {
+        for (i = 0; i < 2; i++) {
+          if (newNote.endsWith("\u266F"))
+            newNote = newNote.substring(0, newNote.length - 1);
+          else
+            newNote += "\u266D";
+        }
+        break;
+      }
+    case -1:
+      {
+        if (newNote.endsWith("\u266F"))
+          newNote = newNote.substring(0, newNote.length - 1);
+        else
+          newNote += "\u266D";
+        break;
+      }
+    case 1:
+      {
+        if (newNote.endsWith("\u266D"))
+          newNote = newNote.substring(0, newNote.length - 1);
+        else
+          newNote += "\u266F";
+        break;
+      }
+    case 2:
+      {
+        for (i = 0; i < 2; i++) {
+          if (newNote.endsWith("\u266D"))
+            newNote = newNote.substring(0, newNote.length - 1);
+          else
+            newNote += "\u266F";
+        }
+        break;
+      }
+    case 0:
+    default:
+  }
+  //alert("Bass Note: "+noteBass+" Scale: "+scale+" Index: "+startIndex+" End Index: "+endIndex+" New Note: "+newNote);
+  return newNote;
+}
+function realizeFigures(scale, noteBass, sFB) {
+  var figures = [];
+  var notes = [];
+  notes.push(noteBass);
+  var iAlter = 0;
+  for (index = 0; index < sFB.length; index++) {
+    if (sFB.charAt(index) == '#' || sFB.charAt(index) == '+' || sFB.charAt(index) == '\u266F')
+      iAlter += 1;
+    else if (sFB.charAt(index) == 'b' || sFB.charAt(index) == '-' || sFB.charAt(index) == '\u266D')
+      iAlter -= 1;
+    else if (sFB.charAt(index) == 'T' || sFB.charAt(index) == '0') {
+      figures.length = 0;
+      figures.push(0);
+      notes.length = 0;
+      notes.push("none");
+      return notes;
+    }
+    else if (!isNaN(parseInt(sFB.charAt(index), 10))) //isDigit?
+    {
+      var nSteps = parseInt(sFB.charAt(index), 10);
+      var note = getIntervalAboveWithinKey(scale, noteBass, nSteps, iAlter);
+      notes.push(note);
+      figures.push(nSteps);
+      iAlter = 0;
+    }
+  }
+  if (!figures.includes(5))
+    if (!figures.includes(6)) {
+      var note = getIntervalAboveWithinKey(scale, noteBass, 5, 0);
+      notes.push(note);
+      if (getNumberOfSecondsInChord(notes) > 1) {
+        notes = arrayRemove(notes, note);
+        note = getIntervalAboveWithinKey(scale, noteBass, 6, 0);
+        notes.push(note);
+        if (getNumberOfSecondsInChord(notes) > 1)
+          notes = arrayRemove(notes, note);
+      }
+    }
+  if (!figures.includes(3))
+    if (!figures.includes(4)) {
+      if (sFB.length == 1 && (sFB == "#" || sFB == "+" || sFB == "\u266F"))
+        var note = getIntervalAboveWithinKey(scale, noteBass, 3, 1);
+      else if (sFB.length == 1 && (sFB == "b" || sFB == "-" || sFB == "\u266D"))
+        var note = getIntervalAboveWithinKey(scale, noteBass, 3, -1);
+      else
+        var note = getIntervalAboveWithinKey(scale, noteBass, 3, iAlter);
+      notes.push(note);
+      if (getNumberOfSecondsInChord(notes) > 1) {
+        notes = arrayRemove(notes, note);
+        note = getIntervalAboveWithinKey(scale, noteBass, 4, 0);
+        notes.push(note);
+        if (getNumberOfSecondsInChord(notes) > 1)
+          notes = arrayRemove(notes, note);
+      }
+    }
+  notes.shift();
+  return notes;
+}
+function getNumberOfSecondsInChord(notes) {
+  var nSteps = 0;
+  notes.forEach(function (element) {
+    notes.forEach(function (element2) {
+      if (isStep(element, element2))
+        nSteps++;
+    });
+  });
+  return nSteps;
+}
+function isStep(note1, note2) {
+  switch (note1.charAt(0)) {
+    case 'A':
+      {
+        if (note2.charAt(0) == 'B')
+          return true;
+        else
+          return false;
+      }
+    case 'B':
+      {
+        if (note2.charAt(0) == 'C')
+          return true;
+        else
+          return false;
+      }
+    case 'C':
+      {
+        if (note2.charAt(0) == 'D')
+          return true;
+        else
+          return false;
+      }
+    case 'D':
+      {
+        if (note2.charAt(0) == 'E')
+          return true;
+        else
+          return false;
+      }
+    case 'E':
+      {
+        if (note2.charAt(0) == 'F')
+          return true;
+        else
+          return false;
+      }
+    case 'F':
+      {
+        if (note2.charAt(0) == 'G')
+          return true;
+        else
+          return false;
+      }
+    case 'G':
+      {
+        if (note2.charAt(0) == 'A')
+          return true;
+        else
+          return false;
+      }
+    default:
+      return false;
+  }
+}
+function arrayRemove(arr, value) {
+  return arr.filter(function (ele) {
+    return ele != value;
+  });
+}
+function convert_pitch_to_int(name, accidental) {
+  iStepClass = -1;
+  switch (name) {
+    case 'C': iStepClass = 0; break;
+    case 'D': iStepClass = 1; break;
+    case 'E': iStepClass = 2; break;
+    case 'F': iStepClass = 3; break;
+    case 'G': iStepClass = 4; break;
+    case 'A': iStepClass = 5; break;
+    case 'B': iStepClass = 6; break;
+    default: break;
+  }
+  return iStepClass;
+}
+function change_mode() {
+  var key = document.getElementById("key");
+  var mode = document.getElementById("mode");
+  var index = key.selectedIndex;
+  if (mode.options[mode.selectedIndex].value == "Major") {
+    key.options[0] = new Option('C\u266D', 'Cb');
+    key.options[1] = new Option('G\u266D', 'Gb');
+    key.options[2] = new Option('D\u266D', 'Db');
+    key.options[3] = new Option('A\u266D', 'Ab');
+    key.options[4] = new Option('E\u266D', 'Eb');
+    key.options[5] = new Option('B\u266D', 'Bb');
+    key.options[6] = new Option('F', 'F');
+    key.options[7] = new Option('C', 'C');
+    key.options[8] = new Option('G', 'G');
+    key.options[9] = new Option('D', 'D');
+    key.options[10] = new Option('A', 'A');
+    key.options[11] = new Option('E', 'E');
+    key.options[12] = new Option('B', 'B');
+    key.options[13] = new Option('F\u266F', 'F#');
+    key.options[14] = new Option('C\u266F', 'C#');
+    index += 3;
+    if (index > 14)
+      index -= 12;
+    key.selectedIndex = index;
+  }
+  else {
+    key.options[0] = new Option('A\u266D', 'Ab');
+    key.options[1] = new Option('E\u266D', 'Eb');
+    key.options[2] = new Option('B\u266D', 'Bb');
+    key.options[3] = new Option('F', 'F');
+    key.options[4] = new Option('C', 'C');
+    key.options[5] = new Option('G', 'G');
+    key.options[6] = new Option('D', 'D');
+    key.options[7] = new Option('A', 'A');
+    key.options[8] = new Option('E', 'E');
+    key.options[9] = new Option('B', 'B');
+    key.options[10] = new Option('F\u266F', 'F#');
+    key.options[11] = new Option('C\u266F', 'C#');
+    key.options[12] = new Option('G\u266F', 'G#');
+    key.options[13] = new Option('D\u266F', 'D#');
+    key.options[14] = new Option('A\u266F', 'A#');
+    index -= 3;
+    if (index < 0)
+      index += 12;
+    key.selectedIndex = index;
+  }
+}
+function close_dropdown() {
+  // var lab = document.getElementById("dropbuttonlabel");
+  // var btn = document.getElementById("dropbutton");
+  // var radioButtons = document.getElementsByName("figures");
+  // for (var x = 0; x < radioButtons.length; x++) {
+  //   if (radioButtons[x].checked) {
+  //     lab.innerHTML = radioButtons[x].nextSibling.innerHTML + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='triangle'>&#9660;</span>";
+  //   }
+  // }
+  // btn.checked = false;
+}
+function deleteAllCookies() {
+  var cookies = document.cookie.split(";");
+  for (var i = 0; i < cookies.length; i++) {
+    var cookie = cookies[i];
+    var eqPos = cookie.indexOf("=");
+    var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  }
+}
+function getCookie(cname) {
+  var name = cname + "=";
+  var decodedCookie = decodeURIComponent(document.cookie);
+  var ca = decodedCookie.split(';');
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}

src/+42.png ADDED Viewed

src/+6+43.png ADDED Viewed

src/+64.png ADDED Viewed

src/+643.png ADDED Viewed

src/+65.png ADDED Viewed

src/+6b5.png ADDED Viewed

src/2+.png ADDED Viewed

src/4+2.png ADDED Viewed

src/4+b3.png ADDED Viewed

src/42.png ADDED Viewed

src/43.png ADDED Viewed

src/4b.png ADDED Viewed

src/4b3.png ADDED Viewed

src/5+.png ADDED Viewed

src/5+3.png ADDED Viewed

src/53.png ADDED Viewed

src/54.png ADDED Viewed

src/6+43.png ADDED Viewed

src/64.png ADDED Viewed

src/642.png ADDED Viewed

src/643.png ADDED Viewed

src/65+.png ADDED Viewed

src/65+3.png ADDED Viewed

src/65.png ADDED Viewed

src/65b.png ADDED Viewed

src/65b3.png ADDED Viewed

src/6slash.png ADDED Viewed

src/6slash4.png ADDED Viewed

src/6slash5.png ADDED Viewed

src/6slashb5.png ADDED Viewed

src/7+.png ADDED Viewed

src/7+3.png ADDED Viewed

src/73.png ADDED Viewed

src/74.png ADDED Viewed

src/742.png ADDED Viewed

src/743.png ADDED Viewed

src/754.png ADDED Viewed

src/84.png ADDED Viewed

src/853.png ADDED Viewed

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}