The year was 2007. Twitter was still fairly young, and was used by mostly the techie crowd. For BarCampMilwaukee2 I put together a bit of code using Perl, cron, HTML/CSS and ended up with this kiosk-sort of thing that we projected on the wall during the event.
Here’s a mock-up of what it looked like. I had just started testing it around August 2007 using the @web414 account on Twitter. Oh, keep in mind that there were some apps do to this sort of thing back then, but most were written in Flash, or AIR or something else that required specific hardware/software that I couldn’t use for whatever reason. Oh, and just a bit of history, I’ve been building kiosks out of old machines since 2002 or so. These are machines that would find no other use, so I do my best to put them to good use.
So for this particular modern-day kiosk experiment, I wanted to use the Eee PC 701 I got in 2007. It’s not my main portable since I got a MacBook, but I still find uses for it. The idea was to have it sit on my desk with a constant stream of Tweets rolling by…
I’m (currently) running EasyPeasy on the Eee PC, and it can run Adobe AIR apps, so I figured I’d give TweetDeck a try. Sure it’s in beta, but what isn’t, eh? Anyway, while TweetDeck is a nice app, it’s infuriating that it can’t display one really wide column. I know it’s infuriating because it’s a feature people seem to ask for in the support forums. TweetDeck wasn’t doing it for me.
Next up was Spaz. I really like all the ideas behind Spaz, it’s a nice little application. You can even edit the CSS to tweak the interface. That’s a handy feature!
I didn’t do much with the CSS tweaking, as I just wasn’t feeling it with Spaz. There was a lot of application UI to deal with, and I didn’t feel like tweaking an AIR app that much. Still, Spaz is nice for what it does. The developer’s blog has some Twitter gripes, but then, who doesn’t!?
Next up was Buzzbird, an XULRunner-based application. If you’ve never hear of XULRunner, it’s basically a method of building applications the same way Firefox and Thunderbird are built, using XUL to create the interface. This is a technology I really wish we would have seen take off a bit more, as it’s great to work with.
Giving the CSS a tweak in Buzzbird was simple. Inside the Buzzbird folder (under Linux) is a chrome folder, and in there is a skin folder, and in there is a classic folder. CSS and images live there.
If you’re using a Mac, you just do the right-click ‘Show Package Contents’ trick and drill down a little bit. Also, if you are using Mac OS X 10.6 Buzzbird does not work (as of my writing this) though it does work on Mac OS X 10.5.
Buzzbird is a nice XULRunner-based application that is multi-platform and open source. The development seems pretty active on it as well. (And just like Spaz, the developer has some Twitter gripes…)
Next up was… Firefox. I happen to really like Firefox, and one feature I really like is that (on Linux) it has a “kiosk mode” that let’s you hit F11 and it makes all the browser chrome go away, and leaves you with a full-screen view of your browser viewport – no controls – just content. I love that! Especially on the small screen of the Eee PC, which shows just 800×600 resolution. But this isn’t the normal Twitter view, and the normal Twitter view also doesn’t automagically refresh itself, so there’s work to be done. (Note: I finally did find a kiosk extension for Mac OS X, it’s Full Fullscreen.)
First off, we need the page to reload. Believe me, I dug through all sorts of Greasemonkey user scripts claiming to make a page reload, or specifically claiming to make Twitter reload. None of them worked. Maybe they used to, but they didn’t for me. What finally did work was an extension called ReloadEvery. It worked when nothing else would. (Be nice and don’t make it reload too often, remember, every page load uses someone’s resources.)
So besides ReloadEvery we’ve also got Stylish installed, which lets us easily tweak the CSS for any web site. It’s pretty simple. So after just a little bit of CSS hacking (and I mean a little, I really didn’t spend much time on it) we’ve got a look that minimizes some of the stuff we don’t want to see, and emphasizes more of what we do want to see.
Here’s the CSS for “Twitter Kiosk” I put into Stylish.
/* Twitter Kiosk */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
#logo { display: none !important; }
#status_update_box { display: none !important; }
#header { margin-top: -16px !important; }
#heading { display: none !important; }
#side_base { display: none !important; }
#container { width: 100% !important; }
.subpage { width: 100% !important; }
#timeline { width: 100% !important; }
.status-body { width: 93% !important; }
It’s not perfect. As you can see the page is still showing the notification of new tweets, and some of the links at the top. I didn’t bother trying to get rid of those bits, but it should be pretty trivial to hide them as well.
Anyway, this thing is ready to run, and can just exist on the Eee PC sitting on my desk, or be connected via VGA to a larger external monitor, projector, or television. And best of all, it works in Firefox, which is everywhere, and requires just two extensions, and a little bit of CSS.
So the big question is, can I run it on older hardware with older software? ReloadEvery claims to work as far back as Firefox 1.5, though Stylish claims to requires Firefox 3.0 or higher. Full Fullscreen (for your Mac kiosk) has older versions that should work with older Firefoxes. Firefox 3.x says it needs Mac OS X 10.4 or higher, so that tosses out a lot of older Macs unless you look at Firefox 2.x or older. Still, you can experiment if you wish and see what you can cobble together. Who knows, I just might do that myself. (Maybe even on Linux.)
No matter what you do, have fun and keep on hacking…
Note: This was all written before #newtwitter happened, so I’m not sure any of it will still work. If it does, let me know… thanks!