Advanced UI

Hi all,

I’m pretty new to Vuo, though I’ve known about it for some time.

I’m starting my first project, which will be a utility application. It’ll require a fair amount of UI - for instance the ability to display and select from a list of NDI servers, and so on. I have a pretty good picture of the processes I need to use to do my video processing in Vuo, but I’m not fully sure how best to implement a UI for configuration of it all. In general it wants to have dynamic menus and some amount of user feedback representing application state.

Duo’s built-in support for UI elements seems pretty minimal.

It feels like trying to use HTML for a front end may not work that well, as Vuo doesn’t seem to have support for web sockets in order to provide feedback and data to the interface. I’m not sure how to use HTML as an interface with responsiveness to application state under Vuo.

I’ve also considered using Max/MSP (one of my normal “go-to’s”) to create an interface based around OSC for data and state communication, but this gets into running (and maintaining) two applications which I’d prefer to avoid if possible.

So, I’m looking for some input on how to use Vuo to create an application which has a UI-based configuration/operation window which includes dynamic menus and realtime state feedback.

Thanks for any considerations.

In trying to come up with a solution for more elaborate UI, I wonder, is JSON (files) the most practical way to exchange data with, and maintain, an HTML UI?

I’m not fully sure how best to implement a UI for configuration of it all. In general it wants to have dynamic menus and some amount of user feedback representing application state.

Some possible options:

  • Within Vuo, use buttons instead of menus. IIRC someone at some point shared a composition that let you select a server by displaying the current selection in a label and using previous/next buttons to cycle through the options.
  • Create the user interface in TouchOSC or OSC/PILOT, if those have the widgets you need and can update dynamically. (See “Receive OSC” example composition link in the Receive OSC Messages node’s documentation panel.)
  • Create a web page that communicates with Vuo’s Make Image from Web Page node. It could use JavaScript to parse URL query parameters from the Vuo composition, populate dynamic menus based on those parameters, and update the document location when the user selects a menu item. (See the “Spin Sphere with Control Panel” example composition link in the Make Image from Web Page documentation panel.)
  • If you’re up for some Cocoa/Swift coding, embed your Vuo composition within a host app that provides the UI (see the VuoPluginApp example in the Vuo SDK), or write a custom Vuo node class that provides the UI.

Thanks for that feedback Jaymie.

These are pretty much the same approaches I’d considered. I hadn’t considered using the URL query strings for transferring state data as I usually do that with web sockets these days for a variety of reasons. Query strings would get pretty clumsy by comparison.

I may experiment with some of these ideas, but probably not for this project.