Multi-touch on MacOS in the Browser

On By Jamie

I am faced, yet again, with making multi-touch work in the browser on MacOS. This has always been a tricky one to solve. There have been working solutions in the past but the ones I can find are broken in one way or another and have become dusty and forgotten. Probably because most people decide to use windows no doubt. So I have come up with a workaround.

This is something straight forward on windows without this convoluted setup, but on Mac multitouch (not multitouch gestures) is non-existant by default. Here is a solution using a Touch-Base driver, UPDD-TUIO, Tuio.js and some hacks that get the broken Tuio.js library working again. This all works as of 02/01/2019. This should probably work on Windows and Linux, but this focuses on MacOS.

Firstly, Head over to Touch-Base and follow steps to work out which driver you need.

Once you have this, you may need to get in touch with Touch-Base directly to get hold of the newest driver that is packaged up with the UPDD-TUIO middleware. They may have it as an option since this post. (The old version of UPDD-TUIO refused to launch on my machine so I have no idea if it works.)

Once you have this up and running, calibrate your display and run the test to make sure it is setup correctly. Make sure UPDD-TUIO is set to start at login if required.

Edit an existing / create new NPM repo and add these dependencies and resolutions to the package:

  "dependencies": {
    "Tuio.js": "https://github.com/jamiemarkwhite/Tuio.js.git",
    "express": "3",
    "jspack": "^0.0.4",
    "socket.io": "0.9"
  },
  "resolutions": {
    "socket.io/policyfile": "0.0.6"
  }

Run the server in node_modules/Tuio.js/src/server.js

The resolutions entry is something I came up with to solve an incompatibility with tuio.js, express and socket.io.

When this is running, you can test a simple canvas example implementation. Run a web server at node_modules/Tuio.js and hit http://host:port/examples.html and hopefully you’ll be able to see some blue blobs on the screen representing your touch points.

I am currently working on converting the TUIO events received in the browser and converting them to TouchEvents. I’ll post an update on that.

This is a very quick and sketchy post, for which I apologise. Improvements later maybe.