The webview
widget in Cabbage will let you display web content directly within your plugin
window.
Content is served through an integrated live server. Like all Cabbage widgets, each webview
widget must set
a channel. All communication between Csound the webview
will be conducted on this channel.
Each webview component is passed the current channel as a URL parameter. This allows you to set up unique channels for each webview. To query the parameter you can use this following JS code: can be queried using the
const url = new URL(window.location.href);
const params = url.searchParams;
let webviewChannel = params.get("params");
- You can mix native Cabbage widgets alongside webviews, but they must not overlap.
- If you wish to control a plugin parameter with a webview component, create a native widget in Cabbage place it off-screen (see
slider1
in the Cabbage section of this instrument). Updates to its channel from the webview will notify the host DAW.
Cabbage
class. This object will
manage all
communication between the webview
and Cabbage. The setChannel("name", value)
function
will send channel data to
Csound. This method will also update any plugins parameters that are associated with the given channel.
function sliderChange() {
if(cabbage)
cabbage.setChannel("slider1", slider1.value);
}
For now only float values are supported by the setChannel() method.
cabbageWebSend [kTrig,], "webViewChannel", "customEventName", xValue
This opcode will send data to the webview. It packs the data into a custom event and sends it to the corresponding webview. To pick up the data, create a new Cabbage class, and add a listener for the event you wish to receive. The addListener() method takes the event name, and a callback function that will passed the event data.
In this instrument the output of an oscillator is sent to the "webUISlider" channel. The UI picks up the value and uses it to move a range component.
cabbage.addListener("webUISlider", (data) => {
slider2.value = data;
});
You must be cautious when sending data to your webview. If you send on every k cycle you will most likely cause
update problems and the graphics will inevitably start to struggle. Always use the metro
opcode to
regulate the frequency of events.
- The
cabbageWebSend
opcode can also send initialisation and audio rate signals. Audio rate signals are sent as an array of samples.
- The data passed to the addlistener() callback method can be be scalar, or an array. It is up to you to make sure you interpret the data correctly.
cabbageWebSendArray [kTrig,], "webViewChannel", "customEventName", kArray[]
This opcode will send array data to the webview. It packs the data into a custom event and sends it to the corresponding webview. To pick up the data, you create a new listener:
cabbage.addListener("webUIDrawNoteArray", (data) => {
//pass array of notes to drawNoteArray method
drawNoteArray(data);
});
In this example Csound is generating a new set of notes every 16 beats. The updated is array is then sent to the webview.
cabbageWebSendTable [kTrig,], "webViewChannel", "customEventName", iTableNumber
This opcode will send the contents of a table to the webview. It packs the data into a custom event and sends it to the corresponding webview. To pick up the data, you must add a custom listener as shown in the previous examples.
The ubiquitous scrolling waveform display can be achieved by sending a sample on each k-cycle to the webview. The webview picks up the sample and adds it to the end of an existing array, while removing the first element from the array.
It is the constant adding and removing of a single sample to the end and start of the array on each k-cycle that make it appear to scroll across the screen.
XY Controllers are simple to build using a html5 canvas. In this example a `onmousemove` event is attached to the canvas. Each time it gets call it sends x and y position of the mouse is sent to Csound.