A Transparent & Unclickable Window

One thing that’s very fun, particularly on smaller screens, is to run a Coldtype viewer window with a transparent background directly on top of some code that you’re working on. That’s exactly what’s happening in the video below — it’s not a composite of a video and some code, it’s just literally what appears on the screen as I program.

To get something like that to work, there are two steps, because there are actually two different things happening: (1) the window is transparent (this is easy), and (2) the window ignores all mouse interaction (not as easy).

You can see the correct invocation for both at the beginning of that video, but here it is again:

coldtype examples/animations/simplevarfont.py -wt 1 -wp NW -wpass 1 -wc 1
  • -wt stands for --window-transparent — this should work right out of the box
  • -wc stands for --window-chromeless — this should also work straight away
  • -wp NW means --window-pin is set to NW, meaning the window should initially appear at the top-left of the monitor (this can have any compass value (i.e. N, S, SW, SE, etc.) or C for Center).
  • -wpass is the tricky one — it means window-passthrough and relies on a feature of the glfw library that hasn’t made it to the stable release yet.

The unclickable window

We’re leaving the main road here and headed onto dirt. Unfortunately, I don’t know how to do this on Windows, so these instructions are just for Mac OS.

All you need to do (“all you need to do”) is install the “head” of glfw, via brew.

brew install glfw --HEAD

Now the -wpass argument should work.

A semi-transparent window

One other thing you can do is set the opacity of the window itself to something other than the usual fully-opaque. I probably should’ve done this in the video above, where I briefly made my own code invisible because of the blue text overlaying it. I could’ve avoided that by adding -wo 0.5 to the command-line invocation, which would’ve cut the transparency of the whole window in half, meaning even a full-alpha color in the rendered viewer would’ve been transparent (and I could’ve seen all of the code).