What if you could REALLY customize your new Touch Bar?
TL;DR — You can customize the Touch Bar with custom actions, including per app buttons, button groups, icons and even emojis, and it’s awesome. Actual examples and config file below.
I consider myself an early adopter.
Early adopters, if you haven’t met any, are these weird people, who are willing to Beta test software, who are willing to overlook bugs and inconsistencies, are willing to try out a technology in its first iteration.
And this is what the Touch Bar currently is, a first iteration, of what I consider might be a great feature some day.
A lot of apple enthusiasts consider themselves early adopters, as long as they just pre-order a new iPhone, a new mac, or the air pods. But to be an early adopter also means you try to see the benefits of a new technology, it’s potential benefits, not just the ones Apple publishes in their marketing.
To that extent, I believe the new Touch Bar has a LOT of potential. Unfortunately, it takes a while to get there. So let’s try to imagine how it might be useful even now, shall we?
Current touch bar has integrations in most MacOS native apps. As I write this post in Notes, my Touch Bar looks like this:
Virtually every other native app has an integration, including some hidden ones like the screenshot one:
But it’s not enough! (also it’s all gray and boring and looks the same).
Fortunately for us, one of the best “Tinkerer” apps for the mac has an integration for Better Touch Tool, and this integration is the focus of this blog post.
I have immense respect for Andreas Hegenberg the developer behind BTT (better touch tool) and when I saw that he announced an Alpha version of BTT that allows me to customize Touch Bar to use all the crazy options BTT allows, I immediately wanted to play around with it!
Setting it up:
First, you’ll need to download the Alpha version of BTT.
Second, I must warn you, it is an Alpha version, it’s going to have bugs, be ready for them. If you do encounter a bug, please report it here https://github.com/fifafu/BetterTouchTool
Widgets
BTT has the concept of widgets, with currently 2 available. Battery and Time. Widgets for the Touch Bar are pretty cool, but according to Apple Design guidelines for the Touch Bar it shouldn’t be an extension of the screen, and fortunately, when you add a widget, BTT allows you to enable an action as well.
I’ve decided to add the Calendar widget, to show me the date, and have it open the Fantastical app on tap (with a custom shortcut I’ve previously set up for Fantastical)
I’ve also added a custom button for Screenshots, with BTTs custom screenshot feature, which allows me to both save a file to the file system AND have it in my clipboard! In addition, it immediately shows the “selected portion” option of the screenshot tool, which is let’s admit, a pretty convoluted shortcut (CMD+CTRL+shift+4)
The way to add the screenshot was fairly simple. I’ve found an awesome screenshot icon in the Noun project, hit the “+ TouchBar button” option in BTT, named it screenshot, and selected the custom screenshot action from the action dropdown.
This is nice… but… what else can we do, something that might actually be useful?
I wanted to add some window management tools to the TouchBar. Since I rarely work in fullscreen (it barely makes sense on a 27″ screen), window management (moving, resizing, snapping to edges) is quite common during my workflow. BTT has always been awesome at all of this already, but with TouchBar we can take it to the next level as they say.
I wanted the window management buttons to be easily accessible but hidden, so I won’t hit them by mistake, and there’s an option to show different buttons based on different meta keys hit which is pretty cool.
Created a new button (+TouchBar Button in BTT bottom right).
Give it a name and choose an Icon (pro-tip: find icons in the Noun project and drag them onto the “Add Icon” graphic, the provided icons are so-so)
If you want to customize the appearance of your button, hit Advanced Button Configuration.
And you’ll be able to edit the button color, give it some extra padding, and make it show up only when certain meta keys are pressed, CTRL in my case.
You can also choose the Item’s placement in this window, either stick to the left, to the right, or just stay scrollable in the middle (will alight to left by default)
After that I chose a predefined BTT action, out of a wide array of actions:
After a meddling with it some more, choosing different options, different colors, this is what I ended up with, and it all just appears when I hold the ctrl key:
I can now move a window to the left half, right half, center the window (I chose “center window on next monitor” for this), maximize, and most importantly, restore the window to its original size.
Uh Oh!
If you tried to follow along, you might have noticed that your TouchBar doesn’t look like the screenshots above, rather like the screenshot below:
You might have seen that the ESC is now not the leftmost button! Which will drive you insane (trust me) if you have any muscle memory associated with the ESC button (you probably do).
According to Andreas, that’s a system limitation. So let’s try to see what we can do about that. Obviously, we want the ESC key in the leftmost position.
There’s a somewhat hidden “General Touch Bar Settings” button on the top right
The most important part is to disable the “Show MacOS Control Strip”, which might seem counterintuitive, but it allows BTT to take over, and place the ESC in its rightful left-most place!
Worry not! You can still access the Control Strip by holding the FN key if you set the following setting up in Apple Keyboard settings.
Now you can expand the control strip while holding the FN key, but what about specific App Controls (Safari, Notes etc’)?
Currently, you wouldn’t see them at all, you will only see are your custom buttons from BTT
The easiest way to fix that I’ve found so far is to add a custom shortcut in the “keyboard” section of BTT (basically allows you to map every key to almost every other key, action etc’) and have the FN key toggle the App Controls and the BTT custom buttons bar.
To set it up, I went to the Keyboard tab, and added a new key sequence for the FN key, and mapped it to the custom “Toggle BetterTouchTool Touch Bar”
Thus, holding the FN key shows me the expanded control strip (Brightness, volume, all that jazz)
Releasing it will show me App controls if those are available (Notes, Safari etc’)
If I want to see my trusty custom BTT TouchBar actions, I can hit FN again and viola! They appear (with the ESC button in its correct place)
Can we customize contextually per app? Even if that app doesn’t support TouchBar
Two of my most used apps at work are Slack and Pycharm. Let’s give them some Touch Bar love ❤️
Slack
By far the most used shortcut I use in Slack is the Quick Switcher. If you’ve never used it, you’re about to be delighted. Quick switcher is like spotlight for Slack, enabling you to type any name, channel, DM, or group, and immediately switch to it. Its shortcut is CMD+K which is not that hard to remember, but we’re in the realm of context with the Touch Bar, so let’s try to add it to Slack shall we?
First, I added Slack in the “Select Application” part of BTTm on the left side (hit the + sign at the bottom)
Every TouchBar button you add when this App is selected will be shown in the context of Slack only, and will not appear anywhere else (I call it the contextual hide and seek!)
Next, I hit the +TouchButton button and and mapped it to cmd+K which is the shortcut for this feature.
To make it look nicer, I went into the Advanced settings, chose a color, and chose to give it some more padding. I’ve also found an icon in the Noun project that looks fairly similar to that of Slack and dragged that sucker on the Add Icon graphic you see above. (the icon set I found is by Gregor Črešnar HERE)
Another feature of Slack I use a lot is the “All Unreads”, which lets me check out all unread messages across channels and DMs and sort through ’em quickly, and I thought I’d add that one as well. To make thing slightly easier, you can select an action in BTT, and then hit cmd+C to copy and cmd+P to paste it. And then all that’s left is to edit its icon and shortcut and color and description.
And now we’ve made a love child of Slack and Touch Bar and it’s glorious!
Editors, IDEs etc’
The moment I saw the Touch Bar during the apple event, I’ve sent this tweet asking JetBrains to implement TouchBar support in their IDEs!
hey @jetbrains ,ETA on integrating the new touch bar on the macbook pro for IDE related buttons? I’m thinking a button for commit, push, etc
— Alex Wolkov ☭ (@altryne) October 27, 2016
Now we don’t have to wait for them, we can do this ourselves with BTT.
I use Pycharm pretty heavily, so I’ve selected its Application in BTT, and now it’s time to add some buttons. Since TouchBar real-estate is not that huge, and PyCharm has thousands of features, shortcuts, and buttons, I’ll just add the ones that I use quite often and are annoying to use. What do I mean by annoying? Well, the debug steps are mapped to the F buttons. Those precious little F buttons that so many Pro users cried about when Apple announced the TouchBar.
Let’s see how TouchBar can improve upon the very old concept of the F buttons? (As I’m actually doing the setup while writing this article, I’ve left it at this point, and came back after a couple of hours of setting it up, the biggest chunk of time was actually digging through icons.jar inside the Pycharm.app, trying to find the exact icons I want to use)
For Pycharm, the main interesting thing to me was obviously the GIT commands, update, commit etc’ and especially the branches command, which doesn’t have a native shortcut. With BTT, you can set up a sequence of commands, so that’s exactly what I did for branches.
In addition, you can add folders of buttons, that’s what I did for the debugger actions, seeing as I’m not always debugging, and those shortcuts mean something else outside of the debug context in Pycharm, so I’ve added a folder of actions, called it debugger, and put it on the right side of the TouchBar.
This is how the final setup looks like in BTT:
The TouchBar now looks like this when I switch to PyCharm:
And the expanded debugger folder:
And voilà, everything is contextual, with icons, works great!
If you made it this far, I have a treat for you.
As a prize for reading/ skimming / scrolling through, you can now download my settings from BTT and enjoy the above buttons with your own TouchBar. (including icons)
DOWNLOAD BTT custom Touch Bar icons for Slack and Pycharm and Window management
I assume before you import this to BTT, you’ll need to add PyCharm and Slack to the Application sidebar, since it doesn’t look like that setting is being exported.
Please let me know on twitter if you found this interesting, helpful or a total bag of uselessness!
If you enjoyed this article, please go buy BTT and donate some money towards its development.
Disclaimers :
I am not affiliated with BTT, I just love it very much!
The icons were taken from the community edition of PyCharm which is distributed freely.
Originally published at alexw.me on January 15, 2017.
