Download the completed VDMX project and example TouchOSC template for this tutorial.

Over the last few years one of the most exciting developments for Mac VJs has been the adoption of Open Sound Control (OSC) by software and hardware makers as an alternative to the MIDI and DMX standards for sending control information between physical instruments, music, video, and lighting applications.

One of the first and most popular apps on iOS for remotely controlling the visuals running on your Mac is TouchOSC from Hexler which allows for customizing which controls are accessible from your iPhone, iPad, or iPod Touch, and configure their layout much like you can using the Control Surface plugin within VDMX.

In this tutorial we look at the 'Sync UI' option in the Media Bin for updating the display of buttons and button grids in TouchOSC as movies are triggered in VDMX. The example template also makes use of two-way talkback with other movie controls such as the time and volume sliders for visual feedback as clips play back.

Preparing a basic layout with VDMX and TouchOSC Editor on the Mac.

TouchOSC Layout with toggle buttons for triggering media bin cells and time slider display running on iPhone.

Note: Also see the similar tutorial detailing setting up Media Bin sync with the Akai APC MIDI controllers.

Materials and Prerequisites:

TouchOSC* for iOS or Android.
Read the introduction tutorial on the Media Bin.

* Also check out other available OSC controllers available in the iOS App Store, such as Control and Lemur, or physical instruments like the Monome.

Step 1: Configure TouchOSC and VDMX network & OSC Preferences.

In the VDMX Preferences in the 'OSC' section, in the 'Inputs' tab make sure there is at least one port set up to receive OSC data. Under the 'Outputs' tab you should automatically see any copies of TouchOSC on the network and their IP / port combination along with a human-readable name for the device.

Tip: If using the included VDMX project files for this tutorial be sure to rename your device to 'TouchOSC-Device' in the 'Appears as' column in the 'Output Ports' shown below instead of the default name for your device.

Step 2: Inspect a Media Bin and set up the OSC button triggers.

Typically the 'Toggle Button' or 'Multi-Toggle' UI items are used within TouchOSC layouts for remotely triggering clips in VDMX. Both of these options work with basic Media Bin UI sync, however it is not possible to change the color of individual cells in the 'Multi-Toggle', only the on/off state, so for this tutorial we'll use the 'Toggle Button' option.

Use the 'Hardware Learn' mode option found in the 'Workspace menu' and tap each toggle button in the order you wish to use them in the bin.

To automatically set up a group of buttons or multi-toggle UI on the TouchOSC layout, click the 'Range' button, then press the top-left button, followed by the bottom-right button. Note that buttons must have consecutively named address paths (eg. buttons/toggle1, buttons/toggle2, etc.) for the range detect option to work.

Preparing the layout in the TouchOSC Editor, editing 'toggle6' in the sidebar.

Example 'MovieControls' TouchOSC Layout loaded and running on iPhone.

Setting up OSC shortcuts in the Media Bin by Hardware Learn Mode.

Step 3: Set up Media Bin UI Sync in the 'Sending' tab of the inspector.

In the 'Sending' tab set the 'Sync UI With Device' type menu to 'OSC' and then choose the controller to sync with.

From the 'Media Bin State Sender' sub-inspector, set the OSC messages, key paths, and values to send for each clip possible clip state to set the desired colors and toggle states of individual buttons in TouchOSC.

A complete list of possible messages that can be sent to each type of UI item can be found in the TouchOSC: Control Reference documentation.

Tip: The 'Control' tab of the inspector has data-receivers for changing the transpose (offset) of the trigger highlight for row up / down buttons.

Tip: When using multiple Media Bin plugins in VDMX use different color buttons states to represent different sets of clips and layers in TouchOSC.