Created
July 21, 2020 21:30
-
-
Save maciejjankowski/1975971f4485a6ebe482cb0eb36f8e98 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/zovonum
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| <div id="app">\xx | |
| <ol> | |
| <li v-for="control in controls"> | |
| {{ control.name }}<br> | |
| <input type="range" v-on:input="updateControl" min=0 max=127 :data-cc=control.CC> | |
| </li> | |
| </ol> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| let data = `32 Bank Select LSB | |
| 0 Bank Select MSB | |
| 7 Level | |
| 10 Pan | |
| 14 Noise Filter Frequency | |
| 15 Noise Filter Type | |
| 16 Noise Filter Envelope | |
| 17 Noise Filter Resonance | |
| 18 Noise Attack/Rate | |
| 19 Noise Atk Mode | |
| 20 Noise Decay Type (E, L, G) | |
| 21 Noise Decay | |
| 22 Noise Decay Lo | |
| 23 Dist Amount | |
| 24 Dist Type | |
| 25 EQ Frequency | |
| 26 EQ Gain | |
| 27 Echo Feedback | |
| 28 Echo Amount | |
| 61 Echo BPM LSB | |
| 29 Echo BPM MSB | |
| 30 Tone Spectra | |
| 46 Tone Wave | |
| 47 Tone Timbre Decay | |
| 48 Tone Punch | |
| 49 Tone Decay Type (L, E) | |
| 50 Tone Decay | |
| 51 Tone Dec Lo | |
| 52 Tone Timbre | |
| 53 Tone Timb Envelope | |
| 54 Tone Bend Amount | |
| 55 Tone Bend Time | |
| 56 Click Level | |
| 57 Click Type | |
| 58 Mix Balance | |
| 59 Mute Group | |
| 63 Tone Pitch LSB | |
| 31 Tone Pitch MSB | |
| 70 Channel Focus` | |
| let xcontrols = data | |
| .split("\n") | |
| .map(l => l.split(" ")) | |
| .map(pair => ({ "name" : pair.slice(1).join(" "), "CC" : pair[0]})) | |
| function sendMidi(){ | |
| return 1 | |
| } | |
| // https://vuejsexamples.com/a-rotary-knob-control-for-vue-js/ | |
| // https://github.com/andrepxx/pure-knob | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| message: 'Hello Vue!', | |
| controls : xcontrols | |
| }, | |
| methods:{ | |
| updateControl : function(a){ | |
| // console.log(a); | |
| sendMidi(a.target.dataset["cc"], a.target.value) | |
| }} | |
| }) | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">let data = `32 Bank Select LSB | |
| 0 Bank Select MSB | |
| 7 Level | |
| 10 Pan | |
| 14 Noise Filter Frequency | |
| 15 Noise Filter Type | |
| 16 Noise Filter Envelope | |
| 17 Noise Filter Resonance | |
| 18 Noise Attack/Rate | |
| 19 Noise Atk Mode | |
| 20 Noise Decay Type (E, L, G) | |
| 21 Noise Decay | |
| 22 Noise Decay Lo | |
| 23 Dist Amount | |
| 24 Dist Type | |
| 25 EQ Frequency | |
| 26 EQ Gain | |
| 27 Echo Feedback | |
| 28 Echo Amount | |
| 61 Echo BPM LSB | |
| 29 Echo BPM MSB | |
| 30 Tone Spectra | |
| 46 Tone Wave | |
| 47 Tone Timbre Decay | |
| 48 Tone Punch | |
| 49 Tone Decay Type (L, E) | |
| 50 Tone Decay | |
| 51 Tone Dec Lo | |
| 52 Tone Timbre | |
| 53 Tone Timb Envelope | |
| 54 Tone Bend Amount | |
| 55 Tone Bend Time | |
| 56 Click Level | |
| 57 Click Type | |
| 58 Mix Balance | |
| 59 Mute Group | |
| 63 Tone Pitch LSB | |
| 31 Tone Pitch MSB | |
| 70 Channel Focus` | |
| let xcontrols = data | |
| .split("\n") | |
| .map(l => l.split(" ")) | |
| .map(pair => ({ "name" : pair.slice(1).join(" "), "CC" : pair[0]})) | |
| function sendMidi(){ | |
| return 1 | |
| } | |
| // https://vuejsexamples.com/a-rotary-knob-control-for-vue-js/ | |
| // https://github.com/andrepxx/pure-knob | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| message: 'Hello Vue!', | |
| controls : xcontrols | |
| }, | |
| methods:{ | |
| updateControl : function(a){ | |
| // console.log(a); | |
| sendMidi(a.target.dataset["cc"], a.target.value) | |
| }} | |
| }) | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let data = `32 Bank Select LSB | |
| 0 Bank Select MSB | |
| 7 Level | |
| 10 Pan | |
| 14 Noise Filter Frequency | |
| 15 Noise Filter Type | |
| 16 Noise Filter Envelope | |
| 17 Noise Filter Resonance | |
| 18 Noise Attack/Rate | |
| 19 Noise Atk Mode | |
| 20 Noise Decay Type (E, L, G) | |
| 21 Noise Decay | |
| 22 Noise Decay Lo | |
| 23 Dist Amount | |
| 24 Dist Type | |
| 25 EQ Frequency | |
| 26 EQ Gain | |
| 27 Echo Feedback | |
| 28 Echo Amount | |
| 61 Echo BPM LSB | |
| 29 Echo BPM MSB | |
| 30 Tone Spectra | |
| 46 Tone Wave | |
| 47 Tone Timbre Decay | |
| 48 Tone Punch | |
| 49 Tone Decay Type (L, E) | |
| 50 Tone Decay | |
| 51 Tone Dec Lo | |
| 52 Tone Timbre | |
| 53 Tone Timb Envelope | |
| 54 Tone Bend Amount | |
| 55 Tone Bend Time | |
| 56 Click Level | |
| 57 Click Type | |
| 58 Mix Balance | |
| 59 Mute Group | |
| 63 Tone Pitch LSB | |
| 31 Tone Pitch MSB | |
| 70 Channel Focus` | |
| let xcontrols = data | |
| .split("\n") | |
| .map(l => l.split(" ")) | |
| .map(pair => ({ "name" : pair.slice(1).join(" "), "CC" : pair[0]})) | |
| function sendMidi(){ | |
| return 1 | |
| } | |
| // https://vuejsexamples.com/a-rotary-knob-control-for-vue-js/ | |
| // https://github.com/andrepxx/pure-knob | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| message: 'Hello Vue!', | |
| controls : xcontrols | |
| }, | |
| methods:{ | |
| updateControl : function(a){ | |
| // console.log(a); | |
| sendMidi(a.target.dataset["cc"], a.target.value) | |
| }} | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment