split out sine wave data, display as merlin hex format, use select for legend.

Makefile

@@ -2,7 +2,7 @@
 
 all: js/application.js js/preact.min.js | js
 
-js/application.js : src/main.jsx src/application.jsx src/note_input.jsx src/radio_group.jsx
+js/application.js : src/main.jsx src/application.jsx src/note_input.jsx src/sine_wave_data.jsx
 	esbuild --bundle --jsx-factory=preact.h --jsx-fragment=preact.Fragment --format=esm \
 	src/main.jsx --outfile=js/application.js 
 

src/application.jsx

@@ -3,7 +3,7 @@
 
 import { NoteInput, NoteFrequency } from './note_input';
 import { RadioGroup } from './radio_group';
-
+import { SineWaveData } from './sine_wave_data';
 
 function calc_sr(osc) {
 	// iigs is ~7.14Mhz / 8.  Mirage is 8Mhz / 8
@@ -70,7 +70,7 @@ function Frequency(props) {
 function nmultiply(x) {
 	if (x == 0) return 0;
 	if (x == 1) return <i>n</i>;
-	return <span>{x} * <i>n</i></span>;
+	return <>{x} * <i>n</i></>;
 	// return paren ? <span>({x} * <i>n</i>)</span> : <span>{x} * <i>n</i></span>;
 }
 function SampleDisplay(props) {
@@ -118,35 +118,22 @@ function SampleDisplay(props) {
 	return rv;
 }
 
-function SineWave() {
 
-	var rv = [];
-	for (n = 0; n < 256; ++n) {
-		var x = 128 + Math.round(127 * Math.sin(n * Math.PI / 128));
-		var y = x.toString(16); if (y.length < 2) y = "0" + y;
-		rv.push( y );
-		if ((n & 0x07) == 0x07) rv.push("\n");
-		else rv.push(', ');
-	}
-
-	return (
-		<code>
-		<pre>
-		{rv}
-		</pre>
-		</code>
-	);
-}
 function NoteDisplay(props) {
 
 
-	var { osc, wave, note } = props;
+	var { osc, note } = props;
+
+	const wave = 0; // 256
 
 	const sr = calc_sr(osc);
 	const note_frq = NoteFrequency(note);
 
 	const f = note_frq / (sr / (1 << (8 + wave)));
 
+	// best_res = 7 - Math.ceil(Math.log2(f)) ?
+	// best_freq = f * (1 << calc_shift(best_res, 0)) ?
+
 	var best_res = 0;
 	var best_freq = 0;
 	for (var res = 0; res < 8; ++res) {
@@ -158,14 +145,16 @@ function NoteDisplay(props) {
 
 	return (
 		<>
+			<div>Wave Size: 256</div>
 			<div>Resolution: {best_res}</div>
 			<div>Frequency: {Math.round(best_freq)}</div>
-			<SineWave />
+			<SineWaveData />
 		</>
 
 	);
 }
 
+
 // oscillators generate addresses, not samples.
 // accumulator is 24-bit.
 // frequency is 16-bit.
@@ -213,7 +202,9 @@ export class Application extends preact.Component {
 		this.setState( { freq: v } );
 	}
 
-	tabChange(v) {
+	tabChange(e) {
+		e.preventDefault();
+		var v = +e.target.value;
 		this.setState({ tab: v });
 	}
 
@@ -256,9 +247,6 @@ export class Application extends preact.Component {
 				<div>
 					<label>Oscillators</label> <Oscillators value={osc} onChange={this._oscChange} />
 				</div>
-				<div>
-					<label>Wave Size</label> <WaveSize value={wave} onChange={this._waveChange} />
-				</div>
 				<div>
 					<label>Note</label> <NoteInput value={note} onChange={this._noteChange} />
 				</div>
@@ -282,11 +270,15 @@ export class Application extends preact.Component {
 			case 1: children = this.noteChildren(); break;
 		}
 
+		var options = ["Sample", "Note"].map( (o, ix) => {
+			return <option key={ix} value={ix}>{o}</option>;
+		});
 
 		return (
-			<RadioGroup value={tab} options={["Sample", "Note"]} onClick={this._tabChange }>
-				{ children }
-			</RadioGroup>
+			<fieldset>
+				<legend><select value={tab} onChange={this._tabChange}>{options}</select></legend>
+				{children}
+			</fieldset>
 		);
 	}
 }

src/note_input.jsx

@@ -2,7 +2,6 @@
 
 const _notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
 
-const _base = [ 27.5, 55, 110, 220, 440, 880, ]
 
 function split_value(value) {
 	return [ value % 12, (value / 12) >> 0 ];
@@ -69,7 +68,7 @@ export class NoteInput extends preact.Component {
 		});
 
 		var octaves = [];
-		for (var i = 0; i < 8; ++i) {
+		for (var i = 0; i < 9; ++i) {
 			octaves.push(
 				<option key={i} value={i}>{i}</option>
 			);

src/sine_wave_data.jsx

@@ -0,0 +1,26 @@
+
+
+export function SineWaveData() {
+
+	var data = [];
+	for (var n = 0; n < 256; ++n) {
+		var x = 128 + Math.round(127 * Math.sin(n * Math.PI / 128));
+		data.push( x || 1 );
+	}
+
+	var hex = data.map( (x) => x < 0x10 ? "0" + x.toString(16) : x.toString(16) );
+
+	var code = [];
+	for (var n = 0; n < 16; ++n) {
+		var line = "\t hex " + hex.slice(n * 16, n * 16 + 16).join("") + "\n"
+		code.push(line);
+	}
+
+	return (
+		<code>
+		<pre>
+		{code}
+		</pre>
+		</code>
+	);
+}