Generalized module for creating WebMIDI CC Controllers
This is still very much in beta right now - although I don't expect to make breaking changes at this point, I'm not making promises
Include the library, initialise it during onload:
<!DOCTYPE html>
<html>
<head>
<script src="../script/ccynthmata.js" type="text/javascript"></script>
<script>
// doing it this way is useful for debugging in the console as you can call on the cynth object
var cynth;
let init = ()=>{cynth = new Ccynthmata(); cynth.init();}
</script>
</head>
<body onload="init()">
<!-- ...etc... -->
</body>
</html>Add some divs for the standard interface elements to be added to:
<div class="controlitemgroup" id="midiSetup">
<h3>Midi Device Setup</h3>
</div>
<div class="controlitemgroup" id="saveLoadPanel">
<h3>Save/Load/Export/Share</h3>
</div>Add controls with the midiccparam class, give it a CC number to control with the data-cclsb attribute:
<input
class="midiccparam" data-cclsb="63"
max="127" min="0" type="range" >If you need to target a specific channel, rather than the one selected in the interface use data-midiChannel
<input
class="midiccparam" data-cclsb="63"
data-midiChannel="1"
max="127" min="0" type="range" >If you have 14-bit CCs specify the MSB CC with data-ccmsb
<input
class="midiccparam" data-cclsb="63" data-ccmsb="31"
data-midiChannel="1"
max="16383" min="0" type="range" >For a more complete working example see my Volca Drum Editor
The Ccynthmata contructor optionally takes an options object as an argument, which may contain the following options:
interfaceRoot: element for the root of the interface (default:document)setupPanelElement: element for the midi setup panel (default: the element that matches#midiSetupwithininterfaceRoot)saveLoadPanelElement: element for the save/share panel (default: the element that matches#saveLoadPanelwithininterfaceRoot)parameterDisplayElement: element for parameter value display (default: the element that matches#ccParameterDisplaywithininterfaceRoot)autoHideParameterDisplay: hide the parameter display when it is not being shown (after a timeout) (default:false)initPatch: intial patch, in the same format as the output ofcollectPatch()(default:null)
- Write the rest of the documentation
- Parameter display.
- midiCcTotal only works properly for checkable controls (radio-buttons are the obvious use-case). This may be a feature rather than a bug...