30:T953,// Example with input midiInput = async function* (opts) { const device = html`` const button = html`` const val = html`` const view = html`

${button} ${device} ${val}

` if (opts.title) view.prepend( html`

${opts.title}

` ) if (opts.description) view.append( html`

${opts.description}

` ) const precision = Math.pow(10, opts.precision || 0); if (!opts.getValue) opts.getValue = input => Math.round(input * precision) / precision; view.value = {value: opts.value, event: {}, input: {}} val.innerText = opts.getValue(view.value.value) let listening = null const _stop = () => listening && listening.return() const _listen = (input) => { _stop() listening = listen(input, 'controlchange', 'all') } const midiScale = d3.scaleLinear() .domain([0, 127]) .range([opts.min || 0, opts.max || 1]); const firstListen = new Promise(firstListenDone => { button.onclick = async () => { // start learning ui button.innerText = "Learning" button.disabled = true device.innerText = "" // learned ui const {input, event} = await waitOnMidi() button.disabled = false button.innerText = "Re-learn" device.innerText = `${input.name} (${event.data[0]}/${event.data[1]})` // propagate value const isFirstListen = !listening view.value = {input, event, midi: event.data[2], value: midiScale(event.data[2])} view.dispatchEvent(new CustomEvent("input")) if (isFirstListen) { _listen(input) firstListenDone() } } }) const getMatchingValue = async () => { while (true) { const {event} = view.value const e = await listening.next().value if (e.data[0] === event.data[0] && e.data[1] === event.data[1]) { return e } } } invalidation.then(d => _stop()) yield view while (true) { await firstListen if (view.value) { const e = await getMatchingValue() view.value = {...view.value, event: e, midi: e.data[2], value: midiScale(e.data[2])} val.innerText = opts.getValue(view.value.value) } yield view } }31:T56b,multiLearn = async (opts) => { const button = html`` const devices = html`` const view = html`

${button} ${devices}

` if (opts.title) view.prepend( html`

${opts.title}

` ) if (opts.description) view.append( html`

${opts.description}

` ) const inputs = opts.value || opts const length = inputs.length button.innerText = `Learn ${length}` button.onclick = async (e) => { button.disabled = true const results = [] for (let i=0; i < length; i++) { button.innerText = `Learning ${inputs[i]} (${i+1}/${length})` const val = await waitOnMidi() await Promises.delay(1000) results.push(val) } button.disabled = false button.innerText = `Re-learn ${length}` devices.innerText = inputs.map((v, i) => `${v}: ${results[i].input.name}(${results[i].event.data[0]}/${results[i].event.data[1]})`).join(', ') view.value = results.map(d => `${d.input.id}_${d.event.data[0]}_${d.event.data[1]}`) view.dispatchEvent(new CustomEvent('input')) } // const results = [] // for (let i=0; i < number; i++) { // results.push(await waitOnMidi()) // } // return results return view }32:[] 2e:{"title":"MIDI Learn","cells":[{"id":0,"value":"md`# MIDI Learn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"md`This only supports Google Chrome since it supports MIDI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`## midiInput`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"viewof h = midiInput({\n title: \"Height\",\n description: 'Height of the box',\n value: 50,\n min: 0,\n max: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"viewof w = midiInput({\n title: \"Width\",\n description: 'Width of the box',\n value: 50,\n min: 0,\n max: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"viewof color = midiInput({\n title: \"Color\",\n description: 'Color',\n value: 0,\n min: 0,\n max: 1,\n precision: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"{\n const svg = d3.create(\"svg\")\n const colorScale = d3.scaleSequential(d3.interpolateSinebow)\n svg.append('rect')\n .attr('fill', colorScale(color.value))\n .attr('width', w.value)\n .attr('height', h.value)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`## midiLearn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"learned && learned.input.name","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"learned && learned.event.data","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"learned && learned.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"learned && control[learned.value]","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof learned = midiLearn()","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"// Example with input\nmidiLearn = () => {\n const device = html``\n const button = html``\n const view = html`

${button} ${device}

`\n view.value = null\n\n button.onclick = async () => { \n // start learning ui\n button.innerText = \"Learning\"\n button.disabled = true\n device.innerText = \"\"\n\n // learned ui\n const {input, event} = await waitOnMidi()\n button.disabled = false\n button.innerText = \"Re-learn\"\n device.innerText = `${input.name} (${event.data[0]}/${event.data[1]})`\n\n // propagate value\n view.value = {input, event, value: `${input.id}_${event.data[0]}_${event.data[1]}`}\n view.dispatchEvent(new CustomEvent(\"input\"))\n }\n return view\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"md`## multiLearn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof multi = multiLearn({\n title: \"RGB\",\n value:[\"r\",\"g\",\"b\"],\n description: \"Map knobs to colors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"control = {\n let inputs = ({}) \n\n return Generators.observe(next => {\n next(inputs)\n const inputted = \n midi.inputs.forEach(inp => {\n inp.addListener('controlchange', 'all', (e) => {\n inputs = {\n ...inputs,\n [`${inp.id}_${e.data[0]}_${e.data[1]}`]: e.data[2]\n }\n\n next(inputs)\n })\n })\n\n return () => midi.inputs.forEach(inp => inp.removeListener())\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"function listen(midiInput, eventName, channel) {\n return Generators.observe(next => {\n const inputted = (e) => next(e)\n midiInput.addListener(eventName, channel, inputted)\n return () => midiInput.removeListener('controlchange', 'all', inputted)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"waitOnMidi = () => {\n const promise = new Promise(resolve => {\n const learning = true\n midi.inputs.forEach(inp => {\n const setValue = (e) => {\n if (learning) {\n resolve({input: inp, event: e})\n }\n inp.removeListener('controlchange', 'all', setValue)\n }\n inp.addListener('controlchange', 'all', setValue)\n })\n })\n return promise\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"midi = {\n return new Promise((resolve, reject) => {\n WebMidi.enable(function (err) {\n if (err) return reject(err)\n resolve(WebMidi)\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"WebMidi = require('webmidi')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}