Übersicht hacking

[Tweet : nvALT]

As I’ve mentioned (all over the place), I’ve been hacking around with Übersicht for a few days now. It’s been a lot of fun.

Übersicht is GeekTool for even geekier geeks. You edit the widgets manually in CoffeeScript (or JavaScript, if you’re crazy) and Stylus/CSS. Position is determined entirely by CSS, and you need some skill in that area to even start using Übersicht. I’ve gone ahead and built a repository of some of the widgets I’m working on, and there’s a project page up for them with direct downloads.

Some interesting things to note for people interested in hacking away at their desktops:

  • You can load up the interface with all your widgets in your web browser by pointing it to localhost:41416. This is handy if you need more debugging power than the built in debug panel (which you can’t type in). Use $('body').css({background: '#333'}) to make lighter widgets visible.
  • You can build your own version of the server and the wrapping OS X menu bar app from source code. For the true hackers. The server (Node.js) can be run standalone, too.
  • LocalStorage is available, and you can communicate between widgets with it. I’m using this in the LoadChart widget to store load average readings over time (JSON array). I can (I’m not right now) also have the Load widget store its readings in LocalStorage and have the chart widget pick them up without running any commands of its own. There are a lot of possibilities, especially for charting events.
  • CSS3 animations are a blast. They can also be very CPU intensive, especially opacity animations, so watch your step. Note that @keyframe definitions in the root of the stylesheet get borked when its integrated, so they need to be in regular CSS in the render function.
  • All HTML5 elements work, including <audio> and <video>, with full JavaScript control. You can create alarms and other annoyances with simple audio embeds, or create a stunning desktop weather visualization by dynamically loading different videos based on weather API readings.

There’s more, but basically you have all the power of WebKit available. CoffeeScript is fun, Stylus is awesome (hadn’t used it until now), and Übersicht is a rabbit hole for me. As I noted, be careful with CSS3/jQuery animations and refresh rates on CPU-intensive widgets. It’s not hard to crash Übersicht if you try.

Have fun, and check out the project page!