Added dropdown to help creation of notes, closes #4

controlPanel.js

@@ -40,4 +40,10 @@ $(function() {
 				$('#activationLevelSpan').show();
 		}
 	});
+
+	_.times(8, octave => {
+		_.each(twelveTones, (tone, index) => {
+			$('#noteInput').append($('<option></option>').val((octave+2)*12 + index).html(tone + (octave+1)));
+		});
+	});
 });

index.html

@@ -39,14 +39,15 @@
 
 				<span id='timerInputSpan' hidden>
 					Timer in Seconds: 
-					<input type='number' name='quantity' min='.25' max='10' value='1' step='.25' id='timerActivationInput'>
+					<input type='number' min='.25' max='10' value='1' step='.25' id='timerActivationInput'>
 					Times
-					<input type='number' name='quantity' min='-1' max='500' placeholder='-1 for forever' step='1' id='timesInput'>
+					<input type='number' min='-1' max='500' placeholder='-1 for forever' step='1' id='timesInput'>
 				</span>
 
 				<span id='noteInputSpan' hidden>
-					Note C1 - C8: 
-					<input type='number' name='quantity' min='24' max='108' value='24' step='1' id='noteInput'> 
+					<a target="_blank" href='https://newt.phys.unsw.edu.au/jw/graphics/notesinvert.GIF'>Notes a0 - c8</a>: 
+					<select id='noteInput'> 
+					</select>
 				</span>
 			</div>
 

neuron.js

@@ -173,7 +173,7 @@ class Neuron {
 	    var activationLevel = parseInt($('#activationLevel').val());
 	    var timerActivationInSeconds = parseFloat($('#timerActivationInput').val());
 	    var timesTimerRuns = parseFloat(parseInt($('#timesInput').val()));
-	    var noteInMidi = parseInt($('#noteInput').val());
+	    var noteString = parseInt($('#noteInput').val());
 
 	    let temp_neuron = undefined;
 	    switch (neuronType) {
@@ -190,7 +190,7 @@ class Neuron {
 	      	temp_neuron = new TimerNeuron(x, y, cellSize, activationLevel, timerActivationInSeconds, timesTimerRuns);
 	      	break;
 	      case 'note':
-	      	temp_neuron = new NoteNeuron(x, y, cellSize, activationLevel, noteInMidi);
+	      	temp_neuron = new NoteNeuron(x, y, cellSize, activationLevel, noteString);
 	      	break;
 
 	    }

noteNeuron.js

@@ -5,11 +5,14 @@ var osc;
 osc = new p5.Oscillator();
 osc.setType('triangle');
 osc.amp(.05);
+var twelveTones = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
+
 
 class NoteNeuron extends Neuron {
 	constructor(x, y, neuronSize, actlvl, note) {
 		super(x, y, neuronSize, actlvl);
 		this.note = note;
+		console.log(this.note);
 	}
 
 	display() {
@@ -37,6 +40,5 @@ class NoteNeuron extends Neuron {
 		this.curCharge = 0;
 		this.currentSteps = 0;
 		osc.stop();
-		console.log('hello');
 	}
 }

style.css

@@ -15,6 +15,10 @@ p {
 	border-bottom: 1px solid black;
 }
 
+a:visited { 
+    color: blue;
+}
+
 #control-panel {
 	width: 100%;
 	height: 100px;
@@ -44,6 +48,10 @@ p {
 	width: 100px;
 }
 
+#noteInput {
+	width: 55px;
+}
+
 #control-panel div.active { 
 	background-color: rgb(200, 200, 200);
 }