Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

ccynthmata

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

Quickstart:

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

Constructor Options

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 #midiSetup within interfaceRoot)
  • saveLoadPanelElement: element for the save/share panel (default: the element that matches #saveLoadPanel within interfaceRoot)
  • parameterDisplayElement: element for parameter value display (default: the element that matches #ccParameterDisplay within interfaceRoot)
  • 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 of collectPatch() (default: null)

TODO:

  • Write the rest of the documentation
  • Parameter display.

Known Issues / Notes / Caveats

  • midiCcTotal only works properly for checkable controls (radio-buttons are the obvious use-case). This may be a feature rather than a bug...

About

Generalized module for creating WebMIDI CC Controllers

Resources

License

Releases

No releases published

Packages

No packages published