Cabbage Logo
Back to Cabbage Site

Creating custom UIs with Cabbage 3

#21

Nice one, this works perfectly. Is there a way we can get the initial value?

#22

Think I found something here.

Changing the 2nd slider (channel: “gainR”) will also trigger an event for “gainL”.

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

Can you check the message being sent from Cabbage? Maybe add a console.log() and see what’s going on?

#24

The events for both channels always reference the channel gainL
image

#25

In the first message it references gainR?

#26

Yep, the value is indeed getting set, but I figured out the issue. It was on my side.The event-listener type was not unique for each channel.

Changing:

	window.addEventListener("message", handleMessage);

to

	window.addEventListener(`message-${channel}`, handleMessage);

fixed it :+1:

Was there a way to receive the initial channel value?

#27

The inital value/staet of each widget should be sent to the webUI as soon as it is opened? Let me check…

#28

Looks like it might not have been doing this. I’ve just triggered a new build but I didn’t have time to test it…

#29

I was wrong here, this just broke it… :rofl:

It seems to me when I send a value update to Cabbage for channel “gainR”, it triggers a message-event for “gainL” aswell.

const handleValueChange = (newValue) => {
        setValue(newValue);

        const msg = {
            paramIdx: 0,
            channel: channel,
            value: newValue,
        };

        Cabbage.sendParameterUpdate(msg, null);
    };

const handleMessage = async (event) => {
                console.log("event", event);
                if (event.data.channel === channel) {
                    switch (event.data.command) {
                        case "widgetUpdate":
                            setValue(event.data.value);
                            break;
                        default:
                            break;
                    }
                }
            };

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

image

#30

I’ll try this now and see what I see…

#31

I took your code and added to a simple project. Seems to be working fine here.

I didn’t have time to check those first parameter sends, but auomation seems to work fine. I’ve attached my .csd and index.html.
customUI.zip (2.1 KB)

#32

Thanks for the example, I forgot to set unique paramIdx for the parameters :man_facepalming:

But seems like the initial value is still not correctly set, did you get a chance to test that?

#33

Unfortunately not. And I won’t have a chance to check this out until next week. I hope you can continue to work on your getting end until then. I’m really curious to see how you get on with Cabbage and React :grin:

#34

Alright. It’s really powerful, all my future UI’s will be made this way, no doubt about it.

Right now I’m making an example repository with simple demonstrations so that everyone on the forum can get started with this :+1:

1 Like
#35

Wow, that would be really great!

#36

I just pushed a fix for this issue now. Passes all tests here on Mac, but I can’t check on Windows until tomorrow. :+1:

#37

Did you trigger a new build? Seems like the last release is still the same in github?

#38

Sorry, triggered the wrong repo. Build underway now.

#39

I can see you triggered the build, but I don’t see a new version under releases on the vscabbage repo? :thinking:

#40

Sorry, triggering new new build now :slight_smile: