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

> - 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.

### 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 `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.

### 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.