-
Notifications
You must be signed in to change notification settings - Fork 3
/
index-old.html
111 lines (93 loc) · 3.6 KB
/
index-old.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html lang="en">
<head>
<title>Portasound JS</title>
<script crossorigin="anonymous"
integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<style>
</style>
</head>
<body>
<h1>PortaSound PSS Sysex Editor</h1>
<img src="images/pss-480-yellow.png" width="500"/>
<p>
MIDI Device: <select id="midiOutput"></select>
</p>
<table id="editor"></table>
<script>
/****** MIDI device code ******/
let midi = null; // global MIDIAccess object
let midiOutput = null;
let midiOutputSelectorEl = document.querySelector('#midiOutput');
navigator.requestMIDIAccess({ sysex: true }).then(onMIDISuccess);
midiOutputSelectorEl.addEventListener('change', ev => {
midiOutput = midi.outputs.get(midiOutputSelectorEl.value);
localStorage.setItem('midiOutputDevice', midiOutputSelectorEl.value);
});
function onMIDISuccess(midiAccess) {
const logMidi = o => console.debug(`[MIDI ${o.type}] id: ${o.id.padEnd(14, ' ')} ` +
`manufacturer: ${o.manufacturer.padEnd(20, ' ')} name: ${o.name.padEnd(20, ' ')}`);
for (var entry of midiAccess.inputs) logMidi(entry[1]);
for (var entry of midiAccess.outputs) logMidi(entry[1]);
let midiOutputHtml = '';
for (let entry of midiAccess.outputs) {
let output = entry[1];
midiOutputHtml += `
<option value='${output.id}'>${output.name}</option>`;
}
midiOutputSelectorEl.innerHTML = midiOutputHtml;
midi = midiAccess;
const storedMidiDevice = localStorage.getItem('midiOutputDevice');
if (storedMidiDevice) {
midiOutputSelectorEl.value = storedMidiDevice;
midiOutputSelectorEl.dispatchEvent(new Event('change'));
}
}
/****** Sysex code ******/
/****** GUI code ******/
let editorEl = document.querySelector('#editor');
function updateEditor() {
let editorHtml = '';
for (let i = 0; i < params.length; i++) {
const param = params[i];
const sysexValue = param.valueFn ? param.valueFn(param.value) : param.value;
let ticksHtml = '';
if (param.range == 100) ticks = 11;
else if (param.range == 128) ticks = 9;
else if (param.range == 64) ticks = 9;
else ticks = param.range;
for (let j = 0; j < ticks; j++) {
ticksHtml += `<span class='tick'></span>`
}
editorHtml += `
<tr class='param'>
<td class='label'>${param.name}:</td>
<td class='range-container'>
<div class='ticks'>${ticksHtml}</div>
<input data-idx='${i}' type='range' min='0' max='${param.range - 1}' value='${param.value}'/>
</td>
<td class='label'>
<span id='sysex-value-${i}'>${displayValues(param.value, sysexValue)}</span>
</td>
</tr>
`;
}
editorEl.innerHTML = editorHtml;
}
updateEditor();
function displayValues(value, sysexValue) {
return `${value.toString().padStart(2, '0')} <span class="gray">${(sysexValue | 0).toString(2).padStart(8, '0')}</span>`;
}
editorEl.addEventListener('input', ev => {
const idx = parseInt(ev.target.dataset['idx'], 10);
const param = params[idx];
const bankNum = parseInt(params[0].value);
const sysexValueEl = document.querySelector('#sysex-value-' + idx);
param.value = ev.target.value;
const sysexValue = param.valueFn ? param.valueFn(param.value) : param.value;
sysexValueEl.innerHTML = displayValues(param.value, sysexValue);
sendSysex(bankNum, buildSysex(params));
});
</script>
</body>
</html>