Making Thimble

It's been a while since writing on here, is this microphone still on? The past three years I've been spending my spare time on a mac app - specifically a multi-touch gesture to make using design tools like Sketch, Photoshop, and SketchUp faster. If this sounds like something up your alley go sign up at thimblemac.com first, I'll wait for you :) .

Back? Okay, let's dive into how on earth I made this thing.

Discovering Touch

I started thinking about this around the summer of 2012, I finally switched to a mac a couple years earlier and was always impressed at how the trackpad worked compared to anything else - from the materials to how it detected resting thumbs and palms.

Gainfully unemployed that summer, I finally had time to learn Objective-C and play with ideas. There were already popular apps out there that let you 'add' gestures such as drawing characters or tapping fingers a certain way, but I wanted something that didn't require users to build and remember an extended vocabulary for. This meant pairing a single gesture with some interface instead. The gesture in mind was combining a resting thumb on the trackpad with scroll to select, simple as long as there's some processing to ensure it doesn't conflict with anything else.

As far as ideas, the first was a faster way to switch between application windows:

Between having none of my friends try my demo and feeling like it wasn't a big enough pain, I talked myself out of this idea pretty quickly. Simultaneously though, I was working on a web startup and found myself tweaking designs and found it tedious to do little things - especially when cramped at a tiny coffee shop table without my mouse. After talking to a graphic designer that saw the same frustrations, I set off on making another prototype.

Thimble's First Prototype

During the winter of 2013 I made another quick prototype - this time the gesture repurposed for selecting tools within Illustrator.

It was crude, but good enough to get interest at some small design shops and motivate myself to build a teaser site. Without much marketing beyond a reddit post, it lead to some notable tweets and nearly a couple hundred signups. Not quite enough to quit my dayjob, but enough to stay motivated to continue working on it.

I thought I could just fix a few things and 'ship it', but the app had plenty of bugs. Most scary was a seemingly unsolveable one where calling the Illustrator API would hard-crash Illustrator at random times and cause users to lose work. So I took a break for a while then restructured Thimble to support multiple apps, starting with Photoshop. Eventually it got to a point where I was ready to redesign the interface.

Getting more functional

The prototype interface had a lot of issues - it only supported a single row of tools, which couldn't hold enough things to let you entirely avoid an app's toolbar. The interface's main class was an 800+ line 'massive view controller' where the icon positions followed a wacky spacing algorithm rather than a simpler gaussian function. Finally, it looked hilariously dated in a post-Yosemite OSX world, where 'vibrancy' (i.e. blurred transparency) started overtaking greys and gradients. So it was time to scrap it and start anew. I started by plotting gaussian equations in a jupyter python notebook, then migrated to coding the real interface with a separate 'designer' build.

Once I got a decent outline of the new interface figured out, I started diving into making the selection mechanism feel more intuitive.

The tool selection 'blob':

Some of the complaints with the prototype was that there needed to be some better indication when selecting items. At the time the only indication was the selection text change. I initially played with some simple ideas like alternating a background color but it felt either too jarring or too subtle. Inspired a bit by the Google's material design language, the idea of having something that looked like an amorphous blob stretching and jumping when the selected item changes. This involved a bit of learning with CAShapeLayer in terms of preserving the point order between different change directions, but am happy with the result.

The column selector:

Having a column selector at first seemed like a simple affair, just have a long trapezoid-ish object stretch and move like the selector with horizontal movement. But things didn't feel right without having rounded corners on the column selector. To do this right though, the corners on the selector have to move both along the curve of the row selector and the bottom edge curve of the whole interface. Figuring out a way to do interactively trace along curves without doing some bezier math didn't seem easy, though at the end of the day I came up with a hack called CGPathQuery to make this possible.

The column hidden icon indicator:

Maybe I went too far, but one little thing that bothered me was not having some visual indicator to show when icons were hidden after scrolling up a column. So I added some subtle dot indicators that, through CGPathQuery, traverse along the top edge when scrolling horizontally.

Filler Dots

The little grey dots aren't there to indicate missing icons, they're there just for aesthetic reasons. Without them the interface doesn't quite hold it's form together - especially when scrolling on the first or last column.

Scroll direction locking between 'gesture pauses'

I didn't want some type of freeform scroll akin to the Apple Watch homescreen, which meant I needed a way to 'lock' onto either the horizontal or vertical scroll direction. Basically when the gesture starts (or after a pause), the scrolling direction locks to whatever direction you start scrolling in until the gesture pauses or ends. The other thing that happens upon a gesture pause is that the selected tool gets recentered.

Coding it all together

I followed a Model-View-ViewModel structure when redoing the interface - where I usually had ViewModel files containing state then the ViewController/View files containing the stateless rendering functions. This enabled me to have tests written against some of the UI math contained in viewmodels, and have better organization for different aspects driven by a shared viewmodel. I also used ReactiveCocoa to allow me to declare . For more on my ReactiveCocoa experience, check out the 'lessons learned' part of my xcoders talk.

I do regret not rewriting the interface in Swift, but at the time Swift 2 wasn't out yet and ReactiveCocoa Swift support was experimental. Plus, my mind was burdened more with wrapping itself around the reactive paradigms and seeing something work. There's still a ton of other things that I'm not going to bother diving into, but for a fun run-on sentence some of the other work involves hiding (and unhiding) the mouse, changing the render setup when switching between non-retina and retina displays, sniffing packets under wireshark to find a bug in the Photoshop Server sample code, hacks to ensure menu selection via accessibility api works correctly, learning things from iOS Core Animation - Advanced Techniques to make everything work at 60fps, yadda yadda yadda...

What's next?

In the near term, I want to finally ship the beta. I definately have plenty of concerns with whether there's still interest in Thimble due to my own lack of marketing the product. Furthermore the rumor that the new macbook keyboards will have an top row on-screen display for QuickType and app/context-specific buttons seems highly plausible. Right now though, Thimble's still something I find myself using, and hopefully I can others wanting it too. There's still much more to be said about why it took so long to develop and the many mistakes made along the way, but that's a story for another day.

---

Was it worth it?

Time will tell. I've definately learned a lot:
- Fears of the mac osd keyboard.
- Fears that I developed this too slowly
- There wasn't quite enough traction for me to justify quitting my dayjob for it, but still felt like I was learning and discovering for it to be a hobby
- I didn't want to do anything like crowdfunding that would've committed me to shipping something I wasn't happy with sooner

• Sometimes I get frustrated at those that are amazingly successful when their output is that of just more information products rather than tools. It gets you in the social circles, and helps you anchor yourself as that 'authority' figure. Could I have cut the scope of the app? Yeah, that might've saved a few months here and there by supporting less apps (especially not bothering with Photoshop), and ignoring building the seeds for user preferences, but it's hard.

• Could

Why did it take so long to code?

First and foremost, this was a side project. There were occasional bursts of time where I was able to focus for weeks, then . Secondly, I still consider myself a newbie.

Why am I writing all this? Well, I want to help motivate anyone else that dreams of crazy ui to show it's possible.

This is been a fairly lonely process, so if this inspired you I'd love to hear your comments via email or twitter.

TODO: have friends proofread it

#############################old stuff

thimble isn't perfect

• thimble is a power-user tool
• how it isn't quite worthy of first-level design (look for that jon bell term).
• ideas of how it could be that way. (cite ms office ipad pro app)