Add Beautiful Widgets To Your Mac Desktop With Übersicht

Übersicht aims to replace the likes of Geektool, letting you add the output of any console command to your desktop – formatted with HTML5.

We’ve shown you how Geektool, can help you make your Mac truly your own by adding command-based widgets to your desktop. We’ve also covered Nerdtool, an easy to use alternative to Geektool. With these options, why bother with Übersicht at all? Because Übersicht is so much easier to work with.

Even better: if you know how to write HTML – or are confident enough to copy, paste and tweak code until it works the way you want – it’s easy to make your own widgets. Check it out.

Getting Widgets

Download and install Übersicht as you would any other Mac app, launch it and you'll find a new entry in your system tray in the top-right corner. Next, head to the Übersicht widgets page and you’ll find a small selection of things to add to your desktop:

The widgets come as ZIP files, which you should unzip. Then, hit the menubar icon for Übersicht:

You want to open the widget folder, which is going to look like any other folder. Drag widgets here and they’ll show up on your desktop, instantly.

Personally, I can’t function without quick access to a calendar – it makes scheduling articles and meetings a lot simpler. So the first thing I added was a calendar:

This is a lot nicer than the calendar I got working with Geektool, so I’m already quite happy. Another beautiful widget: this clock.

You can’t tell from the screenshot, but that clock is animated.

Of course, you’ll also find a few single purpose tools – like this one for the world cup, which probably won’t be useful by the time you read this:

There are a lot more widgets, many focused on system performance. Check out the gallery if you’re interested.

Moving Widgets

You might notice that you can’t click and drag widgets in order to place them. That’s because where the widgets are positioned is written into the code themselves – but it’s easy to change. Open the index.coffee file in the folder for the widget, then look for something like this:

        left: 4px

        bottom: 4px

In this example, the widget is placed 4 pixels from the left of the screen and 4 pixels from the bottom. If you’d prefer the widget to be placed in the top-right, simply change the word “left” to “right” – you can also change “bottom” to “top”. Change the pixel count to move the widget however you like. Save your edited file and you’ll see the widget move immediately.

Try it; it’s fun.

Once you start playing with these widgets, you might want to try making your own. I know I did. When I showed you how to use NerdTool, I showed you how to add a quote of the day to your desktop. Here’s how I set that up for Übersicht.

I used the Hello World example on the Übersicht home page as a starting point. I then changed the command as follows:

        command: "curl --silent www.brainyquote.com/quotes_of_the_day.html | egrep '(span class=\"bqQuoteLink\")|(div class=\"bq-aut\")' | sed -n '1p; 2p; ' | sed -e 's/<[^>]*>//g'"

This is the same command I used for NerdTool, with the notable addition of the backslashes before all quotation marks. I’m using the backslash as an Escape Character – without it, Übersicht would think my command ends at the quotation mark.

With that done, I tweaked the font to look the way I wanted it to and changed the positioning. Here’s how that looks:

        style: """
left: 0px
bottom: 0px
color: #fff
font-size: 25px
text-shadow: 1px 1px #000000;

"""

I saved all of this into a file named “index.coffee”, which I put in a folder called “quote.widget”. I put this into the Widgets folder, and it worked:

This is pretty basic, of course, and I hit a few snags while getting everything set up. Still, the guessing and testing was fun for me. If you’re experienced, this shouldn’t be hard for you.