Building Great TouchOSC DJ Mappings for iOS and Android

Great performances come from artists with great control over their tools. Finding the right way to interact with your music is as important as the music itself – it’s an element of DJ style that can be as personal as you make it. If you can’t seem to find that perfect controller, or even if you just want to complement your existing setup with an unusual piece of kit, you might want to try making your own with TouchOSC.

INTRO TO TOUCHOSC

Devices with physical controls are always limited by their layout. If you want to really make something of your own, TouchOSC is a great way to go about it. Created by Rob Fischer of hexler.net, TouchOSC is an app for iOS devices of any shape or size, and recently, Android*. It allows you to design a custom layout of control elements – buttons, faders, rotaries, even XY pads. You can then specify what MIDI notes each element sends out to your software. It uses the CoreMidi and UDP protocols to send and receive MIDI and Open Sound Control (OSC) messages over wired or wireless connections.

That last bit is the killer feature. You can configure your computer to connect wirelessly to your iPhone, iPad, iPod touch, or Android device and use them as control surfaces for any application that accepts MIDI input.

*It seems that creating custom layouts is currently only supported for iOS devices

MAIN USES FOR TOUCHOSC

TouchOSC Control Elements

TouchOSC supports a wide variety of control types, allowing for a lot of flexibility in the design and features of your custom controller. Shown above are the six basic layout elements: push button, toggle button, XY pad, fader, rotary, and encoder.

There are also grouped versions of these, like the “multi-push” that lets you specify a grid of push buttons so you don’t have to align them all yourself. I use them to create all my hotcue grids. With these basic elements you can put together almost any interface you could need. You could use a couple of XY pads to get some really intuitive control over FX. You could make a massive clip launcher with an array of toggle buttons. You could make a fully fleshed out mixer with as many knobs and faders as you want.

Ready to try some of this stuff out? Read on for an introductory tutorial going over:

  1. Creating a layout
  2. Connecting your device
  3. Getting it to work with Traktor

BUILDING BASIC LAYOUTS

What you’ll need to get started:

  • iOS or Android device w/TouchOSC app (in iTunes app store or Google Play)
  • TouchOSC Editor (Mac/Windows XP&Vista & 7/Linux – download here)
  • TouchOSC Bridge (Mac/Windows XP&Vista & 7 – download here)
  • Audio software to rock out with (this tutorial is focused on Traktor- similar principles apply to other software)

Install the editor – it will allow you to build, edit, and upload OSC templates to your new weapon of musical raditude. Bridge is a tiny little app that sits in the background and watches for MIDI messages coming in over the WiFi and redirects them to your audio software (more on this later).

Open up the editor – you’re presented with a blank page and some basic layout options – whether you want the interface to be horizontal or vertical, and a choice between designing for iPhone or iPad. If you right click in the main layout area, a menu pops up listing all the different kinds of controls you can add, in horizontal and vertical variants (e.g. a cross fader is just a horizontal line fader). Once you add a control, you can scale it, drag it around, copy/paste it, change the color, and assign MIDI notes to it.

Let’s build something! The first step is to come up with a design. I always like to draw them out on paper first. Here’s the sketch for what we’re going to make – a simple layout that will control volume, EQ, play/pause, seeking, and an FX pad.

Sketch it out!

To start, open up the TouchOSC editor, and select either iPad and horizontal, or iPhone and vertical. For the iPhone layout, we’re just going to put the controls for Decks A and B on separate pages, but everything else will be the same.

Let’s start with the play button. Right click on the background area and add a Toggle Button. It starts off a little small so let’s stretch it out and drag it to the corner like in the diagram (at right).

Now we have to give it a MIDI note to send. If you click on the button, the panel on the left side will give you a bunch of controls for it. We can rename it, change the color, size, and MIDI messages.

In the bottom pane, click the MIDI tab, then pick ‘x’ from the drop-down “Var” menu, and check the box. This means that we want the button to send a message when its ‘x’ parameter is changed, i.e. when it’s pressed.

There are other parameters, and they change depending on the type of control you’re setting up. Most have x, z, and c.

• x is the control’s main action – button presses, fader moves, knob turns.
• z is activated whenever you’re touching the control. If you’re holding a rotary but not moving it, the ‘z’ message still gets sent, while the ‘x’ message will not. This is useful if, for example, you had a filter knob that you only wanted active while you’re touching it. You could assign the Filter On control in Traktor to the message sent from ‘z’, and the filter amount to the message sent from ‘x’.
• The c variable listens for output messages from Traktor, and can be used to change the color of the interface element.

XY pads have x, y, z, and c controls. ‘x’ and ‘y’ are the two dimensions of motion on the pad, ‘z’ is the touching variable, and ‘c’ is color again. The grouped controls, like multi-push, have separate variables for each of the items in the group: x1, z1, c1, x2, z2, c2, and so on.

Back to our button – in the sketch we can see its CC message is supposed to be Channel 1, Number 1 (CC 1-1). Type those in the boxes, and it’s good to go. Leave the ‘z’ and ‘c’ alone for now. Fill in the rest of the layout according to the list at right (if you tick the centered box on the rotary settings, they’ll have a center detent).

That’s all the controls for deck A. Now just copy/paste them to make the controls for Deck B. If you’re working with the iPad layout, paste the controls in, then drag them around so they’re symmetrical. To help tell them apart, try changing their color! For iPhone, right click on the gray bar at the top of the layout and choose “Add Page”, then paste the controls there. The advantage of copying/pasting the controls like this is that all the MIDI settings we picked are the same. We can just go through each control and change the channel from 1 to 2 (be careful of controls where you set more than one variable, you’ll need to change each one independently).

Your layout should now look similar to this (on iPad):

When making layouts like this, I usually give identical controls the same number, but with different channels for different decks. So both volume faders are number 6, deck A is channel 1 and deck B is channel 2. This is just an organizational trick, you can set it up with every control on channel 1 if you like.

MOVING YOUR LAYOUT TO A DEVICE

Most personal WiFi networks seem to be okay with this kind of traffic, but in general school- or business-provided WiFi tends to not play well with TouchOSC (this has to deal with which communication ports are open on the network and how many other people are using it). And what if you’re in a venue that doesn’t have WiFi?

Make your own! You can run TouchOSC over an ad-hoc network, meaning your laptop can act as a wireless router and broadcast its own WiFi- a little local, private network just for your DJ gear to use.

For OS X:

  1. Click on the WiFi icon in the menu-bar and enable it if it hasn’t been already
  2. Select “Create Network” from the drop-down menu
  3. Enter a name for your network – do not set a password. This process can be a little dodgy and it seems that my iPad occasionally has trouble with secured networks.
  4. Join the network from your iOS/Android device

On Windows 7:

  1. Click Start, then Connect To
  2. Select “Set Up A Connection Or Network”
  3. Follow the steps in the Wizard

Getting the TouchOSC ecosystem running over WiFi and having so many different bits of software in sync is tricky from a technical perspective. In my time using it, I’ve found that the following steps seem to work pretty consistently.

  1. Start with all software and wireless closed / turned off
  2. Either have both your computer and mobile device join the same WiFi network, or make an ad-hoc network
  3. Start the Bridge (and the Editor if you’re going to use it)
  4. Start TouchOSC on your mobile device
  5. Click the little ‘i’ icon in the corner to get into the TouchOSC settings on your device
  6. Select “MIDI Bridge” from the menu, and make sure it’s enabled
  7. Your computer should show up under “Found Hosts”; select it and the “Host” field should change to match your computer’s IP address. If it bothers you about settings for OSC, go to the Host field under OSC and write out the same IP from the MIDI menu.
  8. Start Traktor
  9. Either import a mapping for your TouchOSC device, or make a new “Generic MIDI” mapping and set the In-Port to “TouchOSC Bridge”
  10. If you touch a control on your device that is set to send a MIDI message, you should see the CTRL light flicker in Traktor. This means you’re good to go! (Instructions on how to load your layout onto your device are below)

Sometimes when connecting to an ad-hoc network from your iOS device, the little WiFi symbol in the corner won’t show up for a long time, occasionally even not at all. Sometimes it works in this state and sometimes it doesn’t  – I’d recommend either making a new ad-hoc network and trying again, or rebooting both devices if you continue to have problems. In any case, remember that making the WiFi network is always the first step when setting this stuff up.

After making your own layout, sync it to your device. Go to the Editor and click the green Sync arrow in the top menu bar. The program will look for devices on the network that want to download a template. From your mobile device, touch the ‘i’ icon again to go into the settings, then choose Layout > Add, and wait for your computer to show up in the Hosts list. Click on it and it’ll start downloading. Now back out to the main menu and hit “Done” to go to your custom interface.

Now that you have the layout on your device and it’s all connected, it’s ready to be mapped in Traktor. You can map this layout yourself if you like, or you can use the .tsi file I made.

The above layout and mapping are downloadable on Maps.

DESIGNING YOUR OWN

MIDI controllers and their mappings quickly become very complicated. A good first step is to figure out what hole in your setup this app is going to fill – what functionality does it need to have? If you’re going to use it as the main source of mixing and transport control, it’ll need EQ controls (rotaries are good for that), volume controls (faders), some buttons for play/pause, and maybe another small grid of buttons for jumping around cue points. If you’re doing effects, you might want some different control surfaces like XY pads. Paper sketches are a great way to go about this kind of design. I also make dummy layouts in the editor, without taking the time to assign MIDI notes to them, just so I can see how it works ergonomically on a real device.

Once you come up with a compelling design, it’s time to figure out how you want the MIDI messages to be configured. Because you’re going to be mapping this yourself, you can choose how clever you want to be about setting this up. If I have repeated sets of controls, like EQ controls for 4 decks, I’ll assign them the same CC number but on different channels. That way, when I’m building the MIDI map, I know that the High knob is always CC 3, on channel 1 for deck A, 2 for B, and so on. If you have multiple controllers with custom mappings, they could send conflicting messages, so you’ll need to keep them all on separate channels.

DAVE’S SPECIAL BREW / CUSTOM MAPPING

I’ve spent the past couple months in London, and when packing to come over here, baggage weight limits forced me to leave my trusty S4 at home. I still wanted to be able to practice or maybe play a small gig, so I decided to bring just my iPad and Midi Fighter Pro.

I use the Kontrol S4 for the brunt of my DJ work, and it’s great but it doesn’t have the kind of control I want over effects. I originally found TouchOSC on a quest for ways to use my iPad as a more intuitive effects pad. I generally have the S4 in charge of mixing, cueing, and transport, and the iPad as an extension of the setup reserved just for effects and other fun in-the-moment play.

This is the first really involved layout I designed for myself. Held vertically, the XY pads are easily reachable by thumb, and the pads at the bottom can be played with a free hand while the iPad is held with the other.

I used the pads for cue juggling (toggling between the four decks with the buttons on the left). The XY pad on the left controlled filter and delay, and the right had gater, flanger, and ringmod respectively. It was conceived in a fit of excited, inspired nonsense and is a little bit overkill when actually used in the field.

I was planning to use the iPad for mixing, cueing, loops, and transport, so I had to build something new and rock solid. I spent a lot of time sketching out/mocking up layouts but couldn’t figure out anything compelling.

One day I was reading the DJTT review of the Electrix Tweaker and was inspired by its funky design. That led to the layout I’ve been using ever since:

This can handle hotcues (mostly just for navigating around tracks, my Midi Fighter Pro mapping has much better controls for that), loops, mixing, seeking, and browser navigation. The gray buttons in the middle row select the decks – it’s currently using deck A on the left, and B on the right. The grids of loop values is set to 8 for both decks right now, and the arrows below are beat jump controls. I made a short video explaining both this and the mapping on my Midi Fighter Pro, if you’re curious.

Watch the video and download DSharp’s Special Brew Mapping.

Thanks for reading this crash course on TouchOSC  – the best way to learn this stuff is through experimentation. If you have questions I’ll be hanging around in the comment section below!

Dave Sharples is a former DJTT intern who loves MIDI maps and burritos. 

  • M.R. Carter
  • Pingback: Dj Studio On Android | Computer DJ Midi()

  • tomas

    Hello, i want to make release FX button like the RMX 1000 has (same break vinyl effect). Is it possible in traktor ? please ?

  • dot1

    how is it possible to make a VU meter for a volume fader, so far I have put a fader behind the main fader but what are the next steps to make it receive track audio output information?

  • CONTAX

    I’m using the galaxy note 2 , can someone tell me whats the size of the screen that I need to put on costum ?

  • tombike33

    I am on Android, and I don’t know if it is possible to add layout on the ToucOSC without connection with Wi-Fi ? Because I can find my PC only in the MIDI Bridge page and there is not the ”Add” button in the Layout page.

  • Axos

    i installed and did everything said here, but i can’t get the CRTL light in Traktor to turn on, i think it is because i have windows 64 bits, could anyone with x64 make it work?

    • Axos

      (i think it’s MidiBridge that only works for x32 bits (btw the installer say ….midibridge_x32 o sth like that))

  • Mave

    Hi Guys, I installed touchOSC onto my Sony Xperia phone with android system. When I try to add layouts I realize that there isn’t any add button under layout menu. Is this feature is only for iOS or something else?

  • hardcoreplur

    RELEASE THIS FOR WINDOWS 8/RT!!!! My surface would be sooooo dope with this app.

  • Anonymous

    I totally miss custom layout creation on for my Android powered Nexus 7! It would have been a major difference!

    • Tom

      You could check out OSCPad for Android. I just added beta support for loading custom TouchOSC layouts. Still lots of work to do though.

  • Nick Boggan

    Hello, I’ve had TouchOSC for a little while now but I would like to know if anyone has figured out how to map the drum rack in Ableton Live to the drum machine in TouchOSC. If I could get some help with this It would be VERY appreciated, Thank You!

  • so touchOSC is on android now… looks like i wont be needing an iPad after all

  • Ive had this since the early days it was developed. But I could not for the life of me get it to talk with my PC. ANd I hated the Idea of buying a cable. Im glad this tutorial came up. Maybe it will help push things forward.

  • Kontrol

    I have an S4 and MF3D and never realllly considered getting an iPad or utilizing my iPhone 5 (hopefully the latest verision of OSC is atleast updated to accompny the bigger screen i now have) but after reading this article I will DEFINITELY be designing all day at work (thank you DJTT once agian for decreaseing my work productivity – hahah) ..and download the software tonight when i get home.

    Its really amazing what you can do nowadays with a single piece of hardware.

    Side not i guess I should check out Lemur app too huh?……

  • I’m not using touch stuff (yet) but I like the read a lot (and secretly makes me think about getting one too ;))

  • There’s a very slick Android app called Control that also does OSC via touch screens but you can design your own layouts and OSC messages using Javascript.

  • I like the tweed iPad case! Who makes it and where can I get it?

    • Thanks! It’s the Tunefolio Urban, I got it on Amazon I think.

  • Dave:

    Just one question, when you’re assigning midi notes to the controls, what do you do to avoid conflict with another controller? I mean, how do you know which notes are available to use? (i.e. if your S4 has already assigned a CC1 note for let’s say “play”)…

    My question might be silly, maybe TouchOSC creates its own midi notes, I don’t know…

    thanks

    • Traktor knows what messages are coming from what device, so it knows that CC1 on Channel 1 coming from a midi fighter isn’t the same as CC1 on Channel 1 coming from an APC. The Native Instruments controllers communicate through HID, which is a whole other ball game, so they wouldn’t interfere anyway. The only real instance I’ve seen where this has been troublesome is when you have multiple devices going through the touchOSC bridge. When you’re making the maps, the in and out ports are set to “TouchOSC Bridge”, so if you have two mapping files that both have that setting, then Traktor can’t tell one CC1 Channel 1 from the other.

  • Dj Bloodhound

    all of this network setup and wireless connectivity makes me feel like it is very unstable. when i plug things into my mixer i know its going to work 99.9% of the time, and even my laptop seems pretty trustworthy, but anything over wifi just seems like a shot over the mountains

    • Dj Bloodhound

      i mean, it was really unstable when it came out, and now i thought maybe this was going to show some improvements, but its still just as unstable it seems.

      • It’s a little less concrete than other setups, but once you get the process down it’s pretty solid. I used it to play a gig out and had no trouble. It is good to have a backup device that doesn’t require wifi though.

  • I bought this to try out on my iPhone before I got my controller. While I did like that I could assign any control anywhere, I found two problems with touch screens (other than not being able to be re-skinned with any image I wanted): 1) There’s no velocity sensitivity and 2) There’s no physical boundary of the interface controls which means your eyes have to look at the controller to watch over your adjustments.

    I know this might sound petty, but when you think about all the time the DJ spends looking at their stuff versus the time they spend on their fans, you get why this is important. People don’t dislike Computer DJs because their music mixes are bad, they dislike computer DJs because it looks like they’re checking their e-mail while they’re up on stage which translates to “How do you expect us to have fun when you’re not looking like you’re having fun?”

    • I agree, one of the ways to counteract it is to have controls that are simplified so that you only have a couple big things you can’t miss. If you’ve got just two giant XY pads, you’ll definitely be able to connect with the crowd more easily

  • I thought I would finally be getting a tutorial for getting the android version of touchOSC to work. Guess not.

  • zagor

    Is there any chance to play with this app without wi-fi ? I mean just with a single cable ?

    • TouchOSC supports CoreMidi, which is a feature that lets Apple devices send/receive midi messages over cables, but it’s hard to get that set up. To go from an iPad, there’s an adaptor called the Camera Connection Kit that plugs in the bottom and gives you a USB port that can carry midi messages. It’s the wrong shape port though, and you need to feed it into a hub then back into your computer I think

  • Sketching out your ideas on paper should always be the first step, but having designed multiple templates, I have one more suggestion. Whatever you use TouchOSC, Lemur or something else – space will always be limited. Don’t overdo your template by including controls you won’t use. Design the interface ergonomically with buttons, knobs and faders big enough to press without messing up other controls that happen to be close by.

  • Smasherelly

    I’ve been meaning to set up a touchosc mapping for my ipod touch and Traktor, but recently i noticed that when I connected via adhoc the wifi symbol didnt show up, so I thought there was a problem. Just tried your tip of just testing it anyway and I did see the midi signal show up in Traktor. Thanks for that tip. Thinking of picking up an ipad soon and also trying out Lemur. Thanks for the tutorial

  • there are workarounds for getting custom mappings into the android version, but there are less available controls and no labels. enough is there to get the right stuff done, but it’s not as well fleshed out as the ios version 🙁

    • Maybe with the right kind of attention from DJTT the dev might be coaxed into working on the android side a bit more. My nexus 7 NEEDS touch OSC. 🙂

      • DD

        it doesn’t look like there will be proper support for android at any time soon :(((
        no news regarding this since like 1 year. using the hack works but not being able to use labels sucks.

        i hope some day there will be an app as good as touchosc for android.

        • Try OSCpad instead, it’s like 3 or 4 bucks in the play store. They have an online editor which lets your export the layouts as .JSON files. After you’ve put them on your tablet/phone, you can load them using the “load external layout” button.

          It only has XY-pads, buttons and sliders, but in most cases that will do. Labels can also be made if you insert a button and adjust the colors so you don’t see it anymore. Lines for example can be made with the XY-pads and setting the width to “1”.

          It’s not as great as TouchOSC, that’s for sure, but it beats changing code in the TouchOSC app to get your layout on the device.

  • Good read, but I find it a lot easier to do this things with the Lemur app than in Touch OSC. But thats just my opinion.

    • Phatbob

      Totally with you on Lemur.

      More advanced in terms of phsyics and scripting by miles. And a busy community uploading templates and modules.

      Also, TouchOSC appears to basically be abandonware at this point, whereas Liine just updated Lemur about a month ago and V4 is about to drop.

      I think Lemur is well worth the extra investment.

      • Skyjuice

        I abstolutly agree, Lemur is much more flexible, and you can find plently of usefull templates on the Internet.

        • TouchOSC is great, but Lemur is worth $50 for sure.

      • Latest Lemur update has just been released a few hours ago. 😉

    • Yeah, the Lemur app is really, really slick. I’ve always wanted to play with it, but it’s $50

    • ToOntown

      Lemur is well worth the $50 considering what you’d pay for any other controller with the same capabilities.