Jazz-Soft.net
We make it sound!
Home » Documentation » JZZ.js » Modules » JZZ.input.Knobs

JZZ.input.Knobs

Additional controls for your virtual piano. Support mouse and touch. Custom styles. Ready for responsive design.

Virtual MIDI Controls

See the demo...

JZZ.input.Slider

JZZ.input.Slider(params);
// or
JZZ.input.Slider(name, params);
// or
JZZ.input.Slider.register(name, params);
JZZ().openMidiIn(name);

where params - is the object with the following possible keys:

JZZ.input.Pad

A 2-dimentional cousin of JZZ.input.Slider

JZZ.input.Pad(params);
// or
JZZ.input.Pad(name, params);
// or
JZZ.input.Pad.register(name, params);
JZZ().openMidiIn(name);

where params - is the object with the following possible keys:

Data

Control can encode its value as a Pitch Bend message (Ex lsb msb), or as one or two Control Change messages (Bx MM msb, Bx LL lsb),

where lsb/msb stand for the least/most significant byte, and LL/MM are the corresponding control codes.

The data parameter can be:

If the data parameter is missing or not recognized, defaults to Pitch Bend.

If both dataX and dataY parametes are skipped for the JZZ.input.Pad, they default to Pitch Bend and Modulation Wheel.

Styling

Sliders and Pads can be customized by assigning styles and inner HTML for their knob, range, or box DOM elements.

This can be done from the and(...) or onCreate(...) functions, or from any other part of your application at any time.

Functions that access the DOM elements are:

These elements can be modofied by the following functions:

Example

slider.getKnob().setStyle({borderRadius:'20%'})
                .setStyle({backgroundColor:'rgba(0,0,255,0.5)'}, {backgroundColor:'rgba(255,0,0,0.5)'});

See also