Creating custom UIs with Cabbage 3

hdale94 · 25 March 2025 17:05

Thanks, works great.

Is there any way to retrieve other properties for a channel, such as the range, bounds, etc.? Range being the most useful though.

rorywalsh · 28 March 2025 16:03

Sorry for the late reply @hdale94, I’ve had a serious dose of flu all week. I’ll prepare an example for this when I get back on my feet.

rorywalsh · 29 March 2025 15:01

I just took a look at this now. The widget data, i.e, all widget properties should be sent to the plugin when it’s first loaded. It might be the case that the plugin is trying to send the data before the plugin UI has loaded, in which case the message are lost. So I’ve made sure they are added to a queue of messages tht get sent only when the ui opens. I’ve triggered a new build which should be ready shortly.

To intecept the properties you’ll need to update your code from before. The command is still named ‘widgetUpdate’, but there will be no event.data.value property. Instead, there will be a JSON object called data, so in your case it will be event.data.data. So you will need to update the following code to check for the existance of event.data.value.

if (slider) {
    switch (event.data.command) {
    case "widgetUpdate":
        slider.value = event.data.value;
        break;
    default:
        break;
    }
}

Here’s how I do it in my code: https://github.com/rorywalsh/vscabbage/blob/main/src/cabbage/widgetManager.js#L304 (keeping in mind JS in not my first language! )

hdale94 · 1 April 2025 16:11

I’m having some trouble compiling the Cabbage instrument after updating to the newest version, are you experiencing this aswell?

<Cabbage>[

{"type":"form","caption":"Effect","size":{"width":580,"height":300},"pluginId":"def1"},

{"type":"verticalSlider","channel":"gainL","bounds":{"left":20,"top":100,"width":80,"height":180}, "text":"Gain", "range":{"min":0,"max":1,"defaultValue":0.5,"skew":1,"increment":0.02}},

{"type":"verticalSlider","channel":"gainR","bounds":{"left":100,"top":100,"width":80,"height":180}, "text":"Gain", "range":{"min":0,"max":1,"defaultValue":0.5,"skew":1,"increment":0.02}}

]</Cabbage>

<CsoundSynthesizer>

<CsOptions>

-n -d

</CsOptions>

<CsInstruments>

; Initialize the global variables.

ksmps = 32

nchnls = 2

0dbfs = 1

instr 1

    a1 inch 1

    kGainL cabbageGetValue "gainL"

    kGainR cabbageGetValue "gainR"

    outs a1*kGainL, a1*kGainR

endin

</CsInstruments>

<CsScore>

;causes Csound to run for about 7000 years...

i1 0 z

</CsScore>

</CsoundSynthesizer>

Cabbage DEBUG: Starting Cabbage service app CabbageAPP_main.cpp (43) main [Thread ID: 7508]

 Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: form CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

Cabbage INFO: Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: verticalSlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

Cabbage INFO: Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: verticalSlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

Cabbage DEBUG: Resetting csound ...

csound = 0x000001B366953AA0 Cabbage.cpp (114) cabbage::Engine::setupCsound [Thread ID: 7508]

 Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: form CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

 Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: verticalSlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

 Parse error : [json.exception.parse_error.101] parse error at line 1, column 1: syntax error while parsing value - unexpected end of input; expected '[', '{', or a literal at byte position 1

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 7508]

Cabbage ERROR: Widget type is not valid: verticalSlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 7508]

Cabbage DEBUG: IPlugAPPHost::IPlugAPPHost CabbageAPP_host.cpp (42) iplug::IPlugAPPHost::IPlugAPPHost [Thread ID: 7508]

File is empty, using default settings.

Cabbage DEBUG:

RtAudio Version 6.0.1 CabbageAPP_host.cpp (694) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Probing audio devices CabbageAPP_host.cpp (695) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Device 0: Primary Sound Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Device 1: H�yttalere (PHILIPS HTL3110 Stereo) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Device 2: Speaker (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Device 3: Primary Sound Capture Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Cabbage DEBUG: Device 4: Microphone Array (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 7508]

Process exited with code 3221226505 and signal null

Process exited with code 3221226505 and signal null

rorywalsh · 1 April 2025 17:36

No, I didn’t get a chance to test as I’m still not back to full health. Can you try the previous one again, and this time look out for those message with the data object?

hdale94 · 1 April 2025 20:43

Experienced the error even when rolling back to last version

I’ll try more tomorrow

hdale94 · 2 April 2025 16:57

I am struggling to find a solution for why it will not compile.

I’ve checked the settings.json at C:\Users\Dale\Local Settings\Application Data\Cabbage, and it seems fine no?

{
    "currentConfig": {
        "audio": {},
        "jsSourceDir": "C:/Users/Dale/.vscode/extensions/cabbageaudio.vscabbage-1.0.38-alpha/src",
        "midi": {}
    },
    "systemAudioMidiIOListing": {
        "audioDrivers": "",
        "audioInputDevices": {},
        "audioOutputDevices": {},
        "midiInputDevices": {},
        "midiOutputDevices": {}
    }
}

\

Cabbage DEBUG: Starting Cabbage service app CabbageAPP_main.cpp (43) main [Thread ID: 9912]

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 9912]

Cabbage ERROR: Widget type is not valid: form CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 9912]

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 9912]

Cabbage ERROR: Widget type is not valid: rotarySlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 9912]

Cabbage DEBUG: Resetting csound ...

csound = 0x00000211A7171650 Cabbage.cpp (114) cabbage::Engine::setupCsound [Thread ID: 9912]

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 9912]

Cabbage ERROR: Widget type is not valid: form CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 9912]

Cabbage DEBUG: Invalid widget JS files path:/cabbage/widgets CabbageUtils.h (600) cabbage::WidgetDescriptors::get [Thread ID: 9912]

Cabbage ERROR: Widget type is not valid: rotarySlider CabbageParser.cpp (108) cabbage::Parser::parseContent [Thread ID: 9912]

Cabbage DEBUG: IPlugAPPHost::IPlugAPPHost CabbageAPP_host.cpp (42) iplug::IPlugAPPHost::IPlugAPPHost [Thread ID: 9912]

Cabbage DEBUG:

RtAudio Version 6.0.1 CabbageAPP_host.cpp (694) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Probing audio devices CabbageAPP_host.cpp (695) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Device 0: Primary Sound Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Device 1: Speaker (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Device 2: IPS234 (NVIDIA High Definition Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Device 3: Primary Sound Capture Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Device 4: Microphone Array (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 9912]

Cabbage DEBUG: Connection established CabbageAPP_host.cpp (319) iplug::IPlugAPPHost::InitWebSocket::<lambda_fa49004c06161634de272b1d67177452>::operator () [Thread ID: 14796]

 CabbageIsReadyToLoad

Cabbage DEBUG: Interface has loaded. CabbageProcessor.cpp (181) CabbageProcessor::interfaceHasLoaded [Thread ID: 14796]

 Primary Sound Capture Driver

Cabbage DEBUG: couldn't find previous audio device, reseting to default

 CabbageAPP_host.cpp (904) iplug::IPlugAPPHost::TryToChangeAudio [Thread ID: 9912]

Cabbage DEBUG: Attempting to start audio with the following settings:

SR: 44100

Buffer Size: 512

Input device: Primary Sound Capture Driver

Number of channels: 2

Output device: Primary Sound Driver

Number of channels: 2 CabbageAPP_host.cpp (1077) iplug::IPlugAPPHost::InitAudio [Thread ID: 9912]

rorywalsh · 2 April 2025 18:20

I’ll have a look at this tomorrow.

rorywalsh · 3 April 2025 08:32

I just checked here and I was having similar issue until I realised the path to my js source was not correct. Mine was pointed to an older install dir that no longer exists. And on top of that, I notice that because I sync settings across machine, it was showing a windows path, even though I’m on Mac. I’ll need to fix this. We shouldn’t have to set this path at all. vscode should be able to determine the path itself. Regardless, can you double check the path actually exists? This line of code from the debugger is not right"

Invalid widget JS files path:/cabbage/widgets CabbageUtils.h

That should contain a full path before /cabbage/widgets - if it’s not, it’s likely the path isn’t valid.

hdale94 · 3 April 2025 10:04

"c:\\Users\\Dale\\.vscode\\extensions\\cabbageaudio.vscabbage-1.0.38-alpha\\src"

Should be the correct path no? This was set using the “Set Cabbage Source Path” command.

rorywalsh · 3 April 2025 10:32

I can’t say without access to your PC. You’ll need to check the path actually exists, because right now Cabbage can’t find it. It looks right, but we need to verify it

hdale94 · 3 April 2025 13:49

The path definitely exists, this is the content

rorywalsh · 4 April 2025 08:15

I just tested on Windows, and I can’t recreate your issues. I did notice my path uses forward slashes. Can you try changing the \\'s to /? Check my path here:

The thing is I didn’t change anything to do with this code in quite some time. Perhaps if this doesn’t work, nuke the install folde, and the settings.json file and start again. I’ll help up get you set up with a dev environment once I’ve finished the latest rewrite

hdale94 · 4 April 2025 15:35

I fixed the issue now thanks to your image. The path was fine, but I changed the property in the wrong settings.json file…

There are 3 settings.json files that I’ve found with a property for this:

C:\Users\Dale\Local Settings\Application Data\Cabbage\settings.json
C:\Users\Dale\AppData\Roaming\Code\User\settings.json
C:\Users\Dale\AppData\Local\Cabbage\settings.json

hdale94 · 8 April 2025 17:27

Hmm, I can’t seem to find the event.data.data property when opening the console in the exported plugin in a DAW. I exported with vscabbage 1.0.38-alpha. All of them seem contain the value property, but none of them contain the “data”-property

useEffect(() => {
        const handleMessage = async (event: any) => {
            console.log("event", event);
        };

        // Add event listener
        window.addEventListener("message", handleMessage);

        // Cleanup function to remove the event listener
        return () => {
            window.removeEventListener("message", handleMessage);
        };
    }, []);

rorywalsh · 9 April 2025 18:13

@hdale94, I just got around to fixing this now. New build underway. I’ve tested it here and all widget data is now sent whenever the UI is opened.

hdale94 · 10 April 2025 14:23

I’m getting an error when compiling now, the GUI isn’t showing up, only the Cabbage logo with the white background. I changed the jsSourceDir in the right places to version 1.0.39

Cabbage DEBUG: Starting Cabbage service app CabbageAPP_main.cpp (43) main [Thread ID: 16260]

Cabbage DEBUG: Resetting csound ...

csound = 0x0000026527295B10 Cabbage.cpp (114) cabbage::Engine::setupCsound [Thread ID: 16260]

Cabbage DEBUG: IPlugAPPHost::IPlugAPPHost CabbageAPP_host.cpp (42) iplug::IPlugAPPHost::IPlugAPPHost [Thread ID: 16260]

Cabbage DEBUG:

RtAudio Version 6.0.1 CabbageAPP_host.cpp (694) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Probing audio devices CabbageAPP_host.cpp (695) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Device 0: Primary Sound Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Device 1: Speaker (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Device 2: IPS234 (NVIDIA High Definition Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Device 3: Primary Sound Capture Driver CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Device 4: Microphone Array (Realtek(R) Audio) CabbageAPP_host.cpp (710) iplug::IPlugAPPHost::ProbeAudioIO [Thread ID: 16260]

Cabbage DEBUG: Connection established CabbageAPP_host.cpp (319) iplug::IPlugAPPHost::InitWebSocket::<lambda_fa49004c06161634de272b1d67177452>::operator () [Thread ID: 2236]

Cabbage INFO: CabbageIsReadyToLoad

Cabbage DEBUG: Interface has loaded. CabbageProcessor.cpp (184) CabbageProcessor::interfaceHasLoaded [Thread ID: 2236]

 Primary Sound Capture Driver

Cabbage DEBUG: couldn't find previous audio device, reseting to default

 CabbageAPP_host.cpp (904) iplug::IPlugAPPHost::TryToChangeAudio [Thread ID: 16260]

Cabbage DEBUG: Attempting to start audio with the following settings:

SR: 44100

Buffer Size: 512

Input device: Primary Sound Capture Driver

Number of channels: 2

Output device: Primary Sound Driver

Number of channels: 2 CabbageAPP_host.cpp (1077) iplug::IPlugAPPHost::InitAudio [Thread ID: 16260]

 CabbageIsReadyToLoad

rorywalsh · 10 April 2025 15:08

Can you open the dev tools in vscode? I tested this last night with the custom UI for a plugin project and it was working fine

hdale94 · 10 April 2025 15:48

rorywalsh · 10 April 2025 17:09

Hmm, I don’t see any problems there. I’ll try tomorrow when I’m at my windows machine again.