Cabbage Logo
Back to Cabbage Site

Finally, a better way of doing realtime graphics

#1

I’m excited to share some work I’ve been doing on bringing next level graphics to Cabbage. I’ve been working on adding a webview widget that will display a webpage, which is being served directly from Cabbage1. This means we can use websocket opcodes2 to send data over and back between the webview and Csound. Here it is in action:

Not only does this provide us with a way of doing super efficient real-time graphics, it also means users can develop their entire UI with html5/JS. You will still need to add Cabbage sliders for plugin parameters, but if you place the webview over them they won’t be seen. And you can then provide the required hooks to update the parameters in your Csound code. I’m still working on some things, but the initial experiments seem vey encouraging.

[1] this build of Cabbage embeds a web server. You can set the port number when you create the webview
[2] These opcodes were written by Ed Costello. They are not part of the canonical Csound, and are not the simplest to build, so I plan to bundle them into Cabbage directly.

6 Likes
#2

An obligatory scrolling waveform example :slight_smile:

2 Likes
#3

That looks insane!
How will this work in an exported plugin? very curious to see where this is going
:clap:

#4

Should work just as it does in the videos posted above. I’ve been trying to send fft data so we can make some fabfilter like spectrograms, but it seems to get a little slow. It’s till early days, perhaps I’m chocking it somehow :grimacing:

[edit] I have this working faster now. When I get time I’ll try to port @oeyvind SVG spectral display instrument using something like snap.js or svg.js. The improvement in performance should be remarkable.

2 Likes
#5

Is this the way of the future? Moving away from JUCE?

#6

Not at all. JUCE gives us the wrappers for all the plugin formats, and much more, This is just a way to generate nicer, and far more efficient graphics.

#7

Fantastic :blush:

#8

It looks insane! Can’t wait to try it

1 Like
#9

This is so great! Any E.T.A. when it will be inside of Cabbage?

#10

I’ve really gone down a rabbit hole with this :man_facepalming: I’m at the point where I think I can implement it without using websockets at all. As for ETA, I can’t really give one. I’m swamped with real work at the moment :sob:

#11

Hi Rory,

Is it still in the pipeline? Can’t wait to try it out :smiley:

#12

I think @Andy.Fillebrown is almost ready with the new websocket opcodes. Once they are ready I will implement this. I’m doing something similar in another project right now, so I have most of the part already complete, so with any hope it shouldn’t take too long to get it up and running.

2 Likes
#13

Hi Rory,

You probably saw I’m working more and more on plugins using Cabbage, thanks again for this framework it’s a pleasure to be able to release plugins using it!

I’d like to refactor the UI of my previous plugin and add a scrolling waveform (or anything that could indicate how the plugin catches transients and visualize it). Do you think this webview component will be implemented in Cabbage soon? Otherwise I’ll probably use a less performant approach and try to find workarounds.

Thanks!

Julien / nymano

#14

I have to wait till the next release of Csound before I can implement this as the new websocket opcodes depend on an API change. @Andy.Fillebrown (who wrote this new opcodes) has made the relevant PRs and they have been merged into the Csound6 and Csound7 branches. So we’re just waiting on the next point release of Csound6. Once that’s out I can start rolling out these updates. I’ll ask the Csound devs now when they expect a new release for Csound6.

1 Like
#15

But I’d say in the meantime, you might be as well off to use one of the less performant ways of doing it. It will be one thing to get this implemented, but I imagine it will need quite some testing once it’s in the wild.

1 Like
#16

Thank you! I’ll try this implementation then: Continuous display of audio data

If it doesn’t work I’ll try to be creative :smiley:

#17

I have a feeling this option may need to be explored!

1 Like
#18

Hi there :slight_smile:

Where are these new websocket opcodes that @Andy.Fillebrown wrote? I could not find any PR or anything in the source tree. Do they work with arrays?

#19

Hi @mesca, welcome to the forum. You can find those plugins here:


You’ll need to build yourself but the last time I tried it was pretty straightforward.

1 Like
#20

Perfect. Thanks!