Published in


New TouchOSC Tutorial #1: The Interface Introduction

TouchOSC is a great tool for easily making custom controller for any creation or performance.

TouchOSC MK1 is really good OSC app for IOS and Android.

And Hexler published the New Version TouchOSC, it can almost support everywhere! (Windows / macOS / Linux / iOS / Android)

Let’s talk about New UI of TouchOSC.

Interface on the Top

The interesting thing is. The Desktop & Mobile UI are almost same.

(Left Side is Desktop Version, Right Side is Mobile Version.)

It’s a good thing but bad thing at the same thing. Good is you only need to learn one kind of layout, but Bad is the layout on mobile isn’t intuitive at all.

Anyway, in the most situation I guess you won’t edit the layout from mobile, so it provides the editor on mobile to slightly modify I think it’s good enough.

  • Undo
  • Redo
  • Copy Element
  • Paste Element
  • Delete Element

Of course you can Copy, Paste & Delete multiple elements. Also, you can use “Ctrl/Command + C”, “Ctrl/Command + V”, “Delete” that’s for sure.

  • Add Element
  • (Import): Not sure how to use it currently
  • (Export): Not sure how to use it currently
  • Zoom In/Out
  • Zoom to 1:1: Means zoom to 1:1 match the resolution.
  • Zoom to Fit: Means zoom to all the canvas in the view.
  • Grid: Can toggle some grid showing setup.
  • Perform Mode
  • Connections Setup: Setup MIDI, OSC and Bridge.
  • Editor Network Setup: Setup to editor connection. Link editors on different devices to edit and preview at the same time.

Interface on the Right

  • Navigator: To overview the location of all your elements
  • Document: I called it “Canvas setup”, you can setup the width, height, background colour of canvas.
  • Document Tree: This I called it “Layer”. It shows you the layer of elements.
  • Script

Menu Bar

Just mention two important functions here:

1.Import & Export


In the Desktop, it’s just simply Open & Save. It’ll import & export .tosc file.

Also, can export to XML & Image.


In the Mobile, needing to open side bar first.

And there are “Export” & “Import” buttons, in the “Import” page also include the saved .tosc and you can new a layout file.

2.Layout Examples


Click “Help -> Examples”, you can see many official layout can use.


In the Mobile, open side bar first.

And click the button will show the examples as same as Desktop showing.

Okay, that’s just a quick overview about the interface.

Next we will talk about Elements in TouchOSC.




Just some the tips and tutorials on my creating journey. I think you will find something useful. 😉 Instagram: TouchDesigner Snippet & Works:

Recommended from Medium

Audio course app design

Isaiah Baldissera UI UX Design Mobile App Learning edtech

Tips To Optimize Your Website’s Internal Search

Just what regarding the MattressConstruction

The new WELL AP exam is here!

Working through COVID-19: An interview with Red Hat’s User Experience Design team

Scrabble letters on a table. They spell out “Work from home.”

Digital Media Instructional Design Strategy

Daiwa Lexa 100 Casting Reel Review

Daiwa Lexa 100 Casting Reel1

Consistency and Standards — Examples of Nielsen’s Design Heuristic

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Partical Weng

Partical Weng

A person love new things and extremely futurism.

More from Medium

Ultimate Guide on How to Make a Perfect Promotional Video

New TouchOSC Tutorial #4: Receive Data from TouchDesigner with OSC (CHOP)

My Background Going into the Flatiron School’s Data Science Program — Blog #1

How To Build A Windows Media Player Using Windows Forms.(.NET Framework)