Cabbage Logo
Back to Cabbage Site

Cabbage React - Build custom UIs for Cabbage 3 with React

I’ve just triggered a new build. I couldn’t recreate the issue you faced? But I did update my example. One thing I was forgetting to do was send a cabbageIsReadyToLoad message on startup. Some housekeeping tasks weren’t running because of this. I also added some code to show how to update a plain old html slider from Csound. Oh and how to also best handle parameter changes, values, JSON data etc.

const handleMessage = async (event) => {
    console.log("Message received:", event.data);
    let obj = event.data;

    let slider;
    if (obj.command === "parameterChange") {
        // For parameterChange messages, find slider by paramIdx
        slider = obj.paramIdx === 0 ? document.getElementById('slider1') : document.getElementById('slider2');
    } else {
        // For other messages, find slider by id
        slider = document.getElementById(obj.id);
    }

    if (slider) {
        switch (obj.command) {
            case "parameterChange":
                console.log(`Parameter change for ${obj.paramIdx}:`, obj);
                slider.value = obj.value;
                break;
            case "widgetUpdate":
                if (obj.value !== undefined) {
                    console.log(`Updating ${obj.id} to value:`, obj.value);
                    slider.value = obj.value;
                }
                else if (obj.widgetJson !== undefined) {
                    let widgetObj = JSON.parse(obj.widgetJson);
                    let bounds = widgetObj.bounds;
                    if (bounds) {
                        slider.style.position = 'absolute';
                        slider.style.top = bounds.top + 'px';
                    }
                    // Set value if the UI has just been reopened
                    if (widgetObj.value !== undefined) {
                        slider.value = widgetObj.value;
                    }
                }
                break;
            default:
                break;
        }
    }
};

Automation is working, updating parameters from the UI is working, and updating the frontend from Csound is also working. :+1:

Let me know if you continue to have issues with larger ranges.

Update Custom UIs.zip (2.7 KB)

Thanks, I’ll test more this weekend :+1:

Note that the data object is now called widgetJson. “Data” was a little ambiguous!

1 Like

But it still opens with right values though?

Was a post I forgot to delete, it was an error on my side. It works great right now except the one thing I mentioned earlier in a message, so we are almost there :+1:

Hi everyone, thats looks nice!

@hdale94 and @rorywalsh where do I find Cabbage 3 to run the files to test it.

thanks
//root

Both the package and the example is updated now! This issue should be fixed :+1:

Hi @rootnote, you should check out this thread.

1 Like

Found the artefacts. on github already and got first test running on VS. :slight_smile:

That’s good to hear. Let me know if you spot any issues, there are bound to be some.

p.s. In case you missed it, here are the current docs.

@hdale94 or @rorywalsh where should I place the assets from the .dist folder on a MAC for the VST version?
I only get standard Cabbage Gui Elements and not the one from the package. I started cabbage.js in the browser, there it started correctly.

thanks
//root

I think on MacOS it is /Library/CabbageAudio/PLUGIN_NAME/

I should include it in the readme.

1 Like

On my MAC M1 it is:

/Users/$USERNAME/Library/CabbageAudio/Example

than it shows up correctly!

2 Likes

managed to make a complete new GUI showing up :exploding_head:

1 Like

Looks great! The sky is the limit with React!

1 Like

Those sliders are dreamy! :heart: :rofl:

2 Likes

@rorywalsh do you plan do have mouse over functionality? Right now I need to actively move the knobs, but I could use my mousepad as well in other plugins. Does react offer such UX experience?

You can add event handlers to the element with this: https://www.w3schools.com/jsref/event_onmouseover.asp

1 Like

I don’t need to, thanks to the way Cabbage 3 works. You can just add that functionlity yourself if your developing custom interfaces. I can add generic mouseOver events to the built-in Cabbage widgets, but I’ve a feeling your talking about the React-based framework @hdale94 built for Cabbage 3?

yes, it is the framework from @hdale94 that I use. I will try the mouseover suggestions. thanks!