The webview widget

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");
            















Sending data to Cabbage from a webview

To send data from a webview to Cabbage you must first create a new 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.
The slider change event classback looks like this:

        function sliderChange() {
            if(cabbage)
                cabbage.setChannel("slider1", slider1.value);
        }
        
For now only float values are supported by the setChannel() method.

















The cabbageWebSend opcode

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 cabbageWebSendArray opcode

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.














The cabbageWebSendTable opcode

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.














Scrolling waveforms

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.














Simple XY Controller

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.