git.s-ol.nu isomorphic-kb-explorer / 35e5767
add various labeling schemes s-ol 4 months ago
2 changed file(s) with 59 addition(s) and 32 deletion(s). Raw diff Collapse all Expand all
4545 );
4646 };
4747
48 // B A
49 // A B A C B
50 // o C o o
51 // C
52
53
4854 const layouts = {
4955 wicki_hayden: {
5056 major: 'row',
5157 map: ([x, y], [w, h]) => {
52 let note = 48 + 2 * x + 6 * y;
58 // A = 5
59 // B = 7
60 // C = 2 = x
61 // A + B = 12 = y
62 let note = 41 + 2 * x + 6 * y;
5363 if (y % 2 == 0) note += 1;
5464 return note;
5565 },
5666 },
5767 harmonic: {
68 // A = 3
69 // B = 7 = y
70 // C = 4
71 // C - A = 1 = x
72
73 // A = 7 = y
74 // B = 4
75 // C = -3
76 // B + C = 1 = x
5877 major: 'col',
5978 map: ([x, y], [w, h]) => {
6079 let note = 48 + x * 0.5 + y * 7;
61 if (x % 2 === 1) note += 3.5;
80 if (x % 2 === 1) note -= 3.5;
6281 return note;
6382 },
6483 },
6584 gerhard: {
85 // A = -3
86 // B = 1
87 // C = 4
88 //
89 // A = 1 = y
90 // B = 4
91 // C = 3
92 // B + C = 7 = x
6693 major: 'col',
6794 map: ([x, y], [w, h]) => {
6895 let note = 48 + x * 3.5 + y;
100127 };
101128 };
102129
103 const Keyboard = ({ w, h, layout: { major, map }, showMidi, state, scale, noteon, noteoff }) => (
130 const Keyboard = ({ w, h, layout: { major, map }, state, scale, labels, noteon, noteoff }) => (
104131 <div
105132 className={`keyboard ${major}-major`}
106133 style={{
123150 noteoff={noteoff}
124151 major={major}
125152 >
126 {showMidi ? note : notes.music[note % 12]}
153 {labels ? labels[note % 12] : note}
127154 </Hexagon>
128155 );
129156 })
216243 state = {
217244 layout: 'wicki_hayden',
218245 scale: 'major',
246 labels: 'english',
219247 offset: 60,
220248 state: {},
221249 w: 12,
269297 this.send(NOTE_OFF, note);
270298 }
271299
272 set(key) {
273 return (e) => {
274 let value = e.target.value;
275 if (key === 'w' || key === 'h') value = +value;
276 this.setState({ [key]: value });
277 };
278 }
300 set = (e) => {
301 const key = e.target.name;
302 let value = e.target.value;
303 if (key === 'w' || key === 'h') value = +value;
304 this.setState({ [key]: value });
305 };
279306
280307 onoffset = (offset) => (e) => this.setState({ offset });
281308
318345 }
319346
320347 render() {
321 const { configure, showMidi } = this.props;
322 const { w, h, scale, offset, layout, state } = this.state;
348 const { configure } = this.props;
349 const { w, h, scale, layout, labels, offset, state } = this.state;
323350
324351 const chord = Object.entries(state).filter(([note, on]) => on).map(([k, _]) => k);
325352 chord.sort();
332359 </div>
333360 <div className="group">
334361 <label>layout:</label>
335 <select name="layout" value={layout} onChange={this.set('layout')}>
362 <select name="layout" value={layout} onChange={this.set}>
336363 <option value="wicki_hayden">Wicki-Hayden</option>
337364 <option value="harmonic">Harmonic Table</option>
338365 <option value="gerhard">Gerhard</option>
339366 </select>
340367 </div>
341368 <div className="group">
369 <label>note format:</label>
370 <select name="labels" value={labels} onChange={this.set}>
371 <option value="english">English</option>
372 <option value="german">German</option>
373 <option value="sol">Solf├Ęge</option>
374 <option value="midi">MIDI no</option>
375 </select>
376 </div>
377 <div className="group">
342378 <label>scale:</label>
343379 <button onClick={this.onoffset(null)}>
344 {notes.music[offset % 12]}
380 {labels ? notes.labels[labels][offset % 12] : offset}
345381 </button>
346 <select name="layout" value={scale} onChange={this.set('scale')}>
382 <select name="scale" value={scale} onChange={this.set}>
347383 <option value="none">None</option>
348384 <option value="major">Major</option>
349385 <option value="minor_nat">Natural Minor</option>
362398 </div>
363399 <div className="group">
364400 <label>size:</label>
365 <input className="small" type="number" min="1" value={w} onChange={this.set('w')} />
401 <input className="small" type="number" min="1" name="w" value={w} onChange={this.set} />
366402 {'x'}
367 <input className="small" type="number" min="1" value={h} onChange={this.set('h')} />
403 <input className="small" type="number" min="1" name="h" value={h} onChange={this.set} />
368404 </div>
369405 <div className="spacer" />
370406 </nav>
375411 h={h}
376412 noteon={this.noteon.bind(this)}
377413 noteoff={this.noteoff.bind(this)}
378 showMidi={showMidi}
379414 layout={layouts[layout]}
380415 scale={scale !== "none" && offset !== null && tallyup(scales[scale], offset)}
416 labels={notes.labels[this.state.labels]}
381417 offset={offset}
382418 state={state}
383419 />
0 export const music = {
1 11: 'B',
2 10: 'A#',
3 9: 'A',
4 8: 'G#',
5 7: 'G',
6 6: 'F#',
7 5: 'F',
8 4: 'E',
9 3: 'D#',
10 2: 'D',
11 1: 'C#',
12 0: 'C',
0 export const labels = {
1 english: 'C C# D D# E F F# G G# A A# B'.split(' '),
2 german: 'C C# D D# E F F# G G# A A# H'.split(' '),
3 sol: 'do do# re re# mi fa fa# sol sol# la la# si'.split(' '),
134 };
145
156 export const key2midi = {