The Roll20 Touch Bar

During ThePandemic™ I started to play Pathfinder online using and Zoom. One of the very minor inconveniences was needing to switch back-and-forth between Roll20 and Zoom so that I could mute my mic or toggle my camera on-and-off (there are many snacks involved and no one wants to hear me crunch. Now, my Macbook has a touch bar, a touch-sensitive panel where most computers have function keys, that different apps use to expose different functionalities. So, the question came into my head, “what if there was a way to use the touch bar to make my ever-so-first-world-problem go away?”

Turns out, the answer is “yes. there is a way,” thanks to BetterTouchTool (BTT). BTT allows you to customize what buttons are displayed on an apps touch bar. Here are the buttons that that now appear on my macbook’s touch bar when the active tab in my browser has Roll20 open:

From the left they are

  1. Open character sheet
  2. Send Zoom a command to toggle camera on/off
  3. Send Zoom a command to toggle mic of/off
  4. Open the dice-rolling window
  5. Open the Journal panel
  6. Open the chat panel and bring focus to the chat window
  7. Open the party’s channel in Slack

To create this I set up a Conditional Activation Group in BTT. As the name implies, this bar only shows up if certain conditions are met. In this case, I told it to display a special touch bar every time the active window title included the phrase Roll20.

Now that I have a toolbar that will appear when I am in the game, and only when I am in the game it is time to put some buttons on it!

Sending Commands to Zoom

BTT allows you to send a keyboard shortcut to another application — even if that app is running in the background — without needing to bring that window to the front. So, in this case, I simply feed ⇧⌘V as a shortcut. When I press my new toggle Zoom video button on the touch bar BTT sends the command to Zoom in the background and the camera turns on and off as appropriate.

I used the same technique for most of the other shortcuts by creating buttons using Roll20’s built in advanced keyboard hotkeys. One interesting twist I found is that everything worked best if I started every command by adding a press of the ⎋ esc key. This is important because it ensures that a text box isn’t active to receive the simulated key presses. For example:

The command in Roll20 to open the chat box is to press C twice. So this command hits escape to make sure that nothing in the browser will accept text, and then presses C twice to bring up the chat box.

Opening the Character Sheet with simulated mouse movements

Unfortunately, Roll20 does not have a keyboard hotkey for opening the character sheet (possibly because it would be difficult to implement if someone was playing multiple characters?). However, BTT does allow you to automate moving the mouse cursor. Since I always play with Roll20 occupying a full screen and the buttons are always in the same place I can automate pressing the J key to open the journal (where one accesses the character sheet), and then magically move the mouse to the location on the screen where the button to open the character sheet is and simulate a click. I then wait 1.5 seconds for the window to load and then click on the tab where the character sheet is located.

And that’s it! Well, that’s most of it. There are fiddly details I passed over, like picking icons and colours for the buttons, but you get the idea.