Skip to content
Cabbage
Install

Widgets

Image

image creates an on-screen image. Users can interact with an image via mouse events if a channel name has been assigned.

image.csd
Download .csd
"active": true

Will deactivate a control if false is set (use 0/1 to update from Csound). Controls which are deactivated can still be updated from Csound. Any widget that has its active property set to false will allow all mouse-clicks to pass through it.

"automatable": true

Defaults to true. Determines if a widget is automatable by a host DAW. Automatable widgets show up as plug-in parameters in the host. Non-automatable widgets can still communicate with Csound but are not accessible by the host. Note that hosts don't allow this parameter to change dynamically. If you change this setting, the plugin will need to be reloaded.

"bounds": {"left":0, "top":0, "width":100, "height":100}

Integer values that set position and size on screen(in pixels).

"channels": [
{
"id": "channelName",
"label": { "name": "Channel Name", "prefix": "", "suffix": "" },
"event": "valueChanged",
"type": "number",
"range": {"min":0, "max":100, "defaultValue":0, "skew":1, "increment":0.1}
}
]

In Cabbage 3, widgets use an array of channels instead of a single channel string. Each channel object includes an id that defines a unique channel name. Widgets in Cabbage 3 can have any number of channels attached to them. An optional label object controls how the parameter appears in DAW parameter editors and automation lanes; if omitted, the id is used. An optional event property specifies the type of interaction. A range object can define the minimum, maximum, and default values, along with the skew and step increment. The type is set to number by default. Each widget sets its own type, number or string. A "string" channel carries text (readable with the string variant of cabbageGetValue), persists through session saves, and is excluded from DAW automation. See Persisting Custom UI State.

Channel label: DAW display name

The label object separates the internal channel identifier from the display name shown in DAWs, and allows a prefix and suffix to be appended to the parameter's value string in the DAW. This is useful when you want short, code-friendly channel IDs (e.g., hrm1, hrm2) while showing descriptive names in the DAW (e.g., Harmonic 1, Harmonic 2). Csound code always uses the id for channel access via cabbageGetValue and cabbageSetValue.

FieldDescription
name Human-readable parameter name shown in the DAW (required if using label)
prefix String prepended to the value in the DAW's value display (optional)
suffix String appended to the value in the DAW's value display (optional)

If range is omitted, it defaults to a range from 0 to 1, with increments of 0.001 for widgets that use drag events (e.g., sliders, XY pads) and 1 for widgets that use click or toggle events (e.g., buttons, checkboxes).

Note on increment parameter behavior:

The increment parameter quantizes all values sent to Csound channels, ensuring they snap to the specified step size. For example, with increment: 0.1, values will be rounded to 0.0, 0.1, 0.2, etc. before reaching Csound.

The DAW host automation has additional constraints:

  • increment >= 1.0: The host will display discrete integer steps (e.g., move from 1 to 2 to 3, etc.) in its native controls, and enforce these steps during automation.
  • increment < 1.0: The host displays a continuous slider.

Cabbage always quantizes values internally before sending to Csound.

Supported event types:

EventDescription
valueChanged (default)Tracks simple value changes
mousePressLeftTracks presses of left mouse button
mousePressRightTracks presses of right mouse button
mousePressMiddleTracks presses of middle mouse button
mouseMoveXTracks movement along X axis.
mouseMoveYTracks movement along Y axis.
mouseDragXTracks movement along X axis with mouse pressed
mouseDragYTracks movement along Y axis with mouse pressed
mouseInside Returns max when any mouse button is within the bounds of the widget, min if outside.
"file": "filename"

This property sets the file to be displayed by the image widget. The following image formats should be supported on most systems: PNG, JPEG, GIF

BMP, SVG (Scalable Vector Graphics).

Note: SVG files might not load if they contains scripts or other features that violate security policies (like CORS - Cross-Origin Resource Sharing).

"id": "widgetId"

This optional channel can be used to define a top-level line of communication between the instrument’s UI and Csound. It is reserved for UI updates only. If omitted, it defaults to the first id from the channels array. Its primary purpose is to help produce clearer code, especially for widgets with multiple channels.

"label": {
"text": "",
"offsetY": 0
}

Configures the widget label displayed near the control.

  • text: string — the label text.
  • offsetY: number — vertical offset applied when the label is rendered outside the control (pixels).

Typography (font size, color, family, alignment) is set via style.label.*.

"persistence": {
"preset": true,
"session": true
}

Controls whether a widget's state is saved in DAW presets and Csound session files. Both properties default to true.

  • preset: When true, the widget's current value/state is included when using Csound's cabbageSaveState opcode to save preset data. Set to false for widgets that should not persist in Csound preset files (e.g., widgets that load presets).
  • session: When true, the widget's state is included when the DAW saves a preset. Set to false for widgets that should not have their values loaded/saved when a DAW session loads (e.g., widgets that load presets).

Auto-cascade behavior: If you set preset to false without explicitly setting session, the system automatically sets session to false as well. This prevents state from being saved anywhere unless explicitly requested.

"sample": {"start":0, "end":-1}

This property sets the visible range of samples in a gentable. You can adjust these properties in real-time to enable zooming.

"tableNumber": 1

Sets the function table to be displayed by the genTable widget.

"visible": true

A value of true will cause the widget to become invisible (use 0/1 to update from Csound). Widgets have their visibility set to true by default.

"zIndex": 1

Sets the stacking order of the widget. Widgets with higher zIndex values will appear in front of widgets with lower values. Default is 1.

"style": {
"opacity": 1,
"borderRadius": 4,
"borderWidth": 1,
"borderColor": "#dddddd",
"backgroundColor": "#0295cf"
},
  • When file is set, the image is rendered and backgroundColor is not visible; otherwise a filled rectangle is shown.
  • Colors accept named CSS colors, hex (e.g., #RRGGBB or #RRGGBBAA), or rgb/rgba strings.

What the image channel sends to Csound is determined by the channel event type:

  • mouseMoveX / mouseMoveY report the pointer position, normalised across the widget and scaled into the channel range. mouseDragX / mouseDragY report the same position, but only while a mouse button is held down.
  • mousePressLeft sends 1 when the image is pressed; mouseReleaseLeft sends 0 on release.
  • valueChanged sends a click pulse on press.

The example below uses mouseMoveX / mouseMoveY position channels. Read each axis with the CabbageNumTrig struct form of cabbageGetValue:

imageX:CabbageNumTrig = cabbageGetValue("image1X")
imageY:CabbageNumTrig = cabbageGetValue("image1Y")
printf("Current Mouse X Position: %f\n", imageX.trig, imageX.val)
image.csd
<Cabbage>
{
"pluginId" : "def1",
"enableDevTools": true,
"channelConfig" : [ {"name": "0 in 2 out", "ins": "0", "outs": "2"} ],
"widgets" : [
{ "type": "form", "caption": "Label Example", "size": {"width": 500, "height": 500} },
{
"type" : "image",
"channels" : [
{ "id": "image1X", "event": "mouseMoveX", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.01} },
{ "id": "image1Y", "event": "mouseMoveY", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.01} }
],
"bounds" : {"left": 10, "top": 10, "width": 480, "height": 480},
"automatable": 1
}
]
}
</Cabbage>
<CsoundSynthesizer>
<CsOptions>
-n -d -+rtmidi=NULL -M0 -m0d --midi-key=4 --midi-velocity-amp=5
</CsOptions>
<CsInstruments>
; Initialize the global variables.
ksmps = 32
nchnls = 2
0dbfs = 1
; Rory Walsh 2021
;
; License: CC0 1.0 Universal
; You can copy, modify, and distribute this file,
; even for commercial purposes, all without asking permission.
instr 1
imageX:CabbageNumTrig = cabbageGetValue("image1X")
imageY:CabbageNumTrig = cabbageGetValue("image1Y")
printf("Current Mouse X Position: %f\n", imageX.trig, imageX.val)
printf("Current Mouse Y Position: %f\n", imageY.trig, imageY.val)
endin
</CsInstruments>
<CsScore>
;causes Csound to run for about 7000 years...
i1 0 z
</CsScore>
</CsoundSynthesizer>