Categories
Uncategorized

The Like Tracker Kiosk

Like Tracker Kiosk

You may remember my post about the Sir Like-A-Lot, which was a kiosk to show how many “Likes” your Facebook page has. I built it for an event that z2 Marketing had last fall. Well, with it being Raspberry Pi week over at Make Magazine, I was asked to write up a proper how-to, so there’s now a nice step-by-step description in the Project section titled Build a Raspberry Pi “Like” Tracker Kiosk.

It was a good challenge, as I ended up starting from scratch multiple times, as I wanted to make sure I didn’t miss any steps. Typically, when I build something like this, it’s a bit unstructured, where you install things, configure things, and finally get it working, and then realize your notes are sorely lacking. I also wanted to make things as simple as possibly, and with Perl, that’s not always easy!

Anyway, I hope you enjoy the Project, and hopefully I can contribute more in the future.

Categories
Uncategorized

Sir Like-A-Lot

Sir Like-A-Lot

My latest project was sort of a failure, but I’m going to post about it anyway, because such things are important.

For a recent event I wanted to create a unique way for people to LIKE something, and get a reward for it, so I grabbed a Raspberry Pi and got to work. The idea was pretty simple, a full screen display showing the number of Facebook likes, with the URL for people to visit the page (on their mobile devices) and like it. The display would then update in “near” real-time (Well, every 10 seconds) and there would also be a surprise…

Step #1 is always configuring the Raspberry Pi. I installed Raspbian, had it set to boot to the desktop, and installed the packages I needed, mainly Apache and Chromium, since I’d be using a local web server and web browser for the display.

Getting the Raspberry Pi to work as a kiosk display was next. I didn’t want any menus or OS parts showing, so I used Chromium running in kiosk mode. My /etc/xdg/lxsession/LXDE/autostart file looked like this:

# config to launch Chromium in kiosk mode and load our application
@xset s off
@xset -dpms
@xset s noblank
@chromium --kiosk --incognito http://127.0.0.1/likealot/

We got rid of the part that lets a screensaver run, and added in the bits to fire up Chromium in full-screen kiosk mode. (Oh, one note about Kiosk mode, it does not hide the mouse pointer, but we’ll deal with that later.)

LIKES

The results on the screen looked like this. Full screen, no browser or OS bits showing. I like this solution as it can be used for pretty much anything you can code up as a web page.

The display is set to refresh every 10 seconds, so it’s pretty up-to-date, and you’re really only limited by what you can display in a browser (Chromium) running on Linux (on a Raspberry Pi, in this case.)

As for the code, it’s less than 50 lines of Perl running as a CGI, and about a dozen lines of HTML in an HTML::Template file. There’s also a little CSS and an image.

Speaking of the CSS, it was the solution to hiding the mouse pointer for Chromium running in kiosk mode. I just added this bit:

/*
 * using CSS to hide the pointer
 */
* { cursor: none !important }

For an informational kiosk you just want people to look at and not have to interact with using a mouse or keyboard, this solution works well.

JSON

You might be saying “Hey! How do you get the number of likes!?” Well, you just ask JSON, or http://graph.facebook.com/?ids=z2marketing to be more precise. Facebook Graph API data holds the key, you just need the value.

Oh, there was one more really fun bit! When someone liked the page and the page refreshed and the number increased, you’d hear applause!

The original idea was to just have the CGI do a system call to play the file using aplay. That did not work. I also tried mpg321 and that didn’t work. In the end I went the other way around and added… another Perl script! There’s a cron job that runs on startup, which launches a Perl script, which loops forever and looks at the counter file that the CGI uses. Every time the counter file changes (due to the CGI updating the number) the Perl script uses aplay to play the applause file.

The end result is pretty good. A person sees the display, goes to Facebook, likes the page, and within 10 seconds the display updates and you hear some applause!

I planned on making a sign or adding some text to entice people take action and get a “reward”. And of course the URL isn’t as helpful on a mobile device where you probably use an app instead of a browser, but this is all a good start.

Now, I mentioned a failure, so I should explain that part. For anything like this, where it needs to run for hours reliably and not just be a quick technology demo, you need some burn-in time. I had this running for a week with no issue. The first issue that came up was, what to do if you lose the Internet connection. (Hey, we use Time Warner, it happens!) You really don’t want to see a default Apache 500 error page, so the error page looked just like the main page, but with a message that said ‘Please stand by…”. That 500 page was set to redirect to the main page after 10 seconds, which would deal with occasional Internet or network outage situations. Since we were also using a WiFi connection with the Raspberry Pi, there’s always the chance of losing the WiFi connection. This didn’t seem to happen much, but it’s something you may need to deal with.

I also set Apache to not do any logging, as there’s really nothing valuable gained from logging after you’ve got everything running. It also helps to write less data to the SD card that holds the system because… corruption.

Oh yes, corruption! Every now and then I would reboot the system to make sure it would start up properly. It almost always did. Except when it didn’t. Once the Pi booted and there was a warning that the file system needed repair, so I repaired it, and all seemed well. I tested again for another week, and things seemed good. But then…

The day of the event, I had to move the system into place, and when I did that, and started it up, Linux would not boot. Even after 13 years I am still not enough of a Linux expert to fix every problem it throws at me, and I was stuck, and had a dozen other things to do, so it was dead.

I did the dozen other things and then ended up reinstalling Raspbian and trying to quickly reconfigure it, and get all my files in place, and got everything working except the audio… and the WiFi. There are a few tricks to getting audio working properly on the Raspberry Pi. I eventually got it working, but it was too late to deploy it. Oh well…

So next time, I will have a BACKUP SD card ready to put in place when the first one destroys itself. Or maybe I’ll just build two complete Raspberry Pi systems. Backups are good. Backups are good. Backups are good.

But don’t worry, I’ll take all the successful bits of this project and re-implement it in some other way in the future.

Categories
Uncategorized

Twitter Kiosk Hacking

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.

tk000oldapp

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…

tk001tweetdeck

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.

tk002spaz

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!

tk003spaz

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!?

tk004buzzbird

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.

tk005buzzbird

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.

tk006buzzbird

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…)

tk007firefox

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.)

tk009addons

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.)

tk010stylish

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; }

tk008firefox

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.

tk011eeepc

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!

Categories
Uncategorized

Kiosk2

Just because I can’t participate in BarCampEarth, doesn’t mean I can’t participate in BarCampEarth…

A few months back, my pals at Z2 Marketing gave me an old Mac, so my challenge became “what can I do with it?” You might remember such projects as MacKiosk which was a photo kiosk built using an old Apple Workgroup Server 80. Well, this is Kiosk2 , which is built using an old PowerComputing PowerCenter 150. Ten years ago this was a killer workstation, featuring a 150 MHz PowerPC 604 processor. Nowadays it’s almost useless…

A little MacPerl magic, a copy of the always exellent JPEGView, and an AppleScript applet to kick things into gear, and we’ve got our kiosk!

Kiosk2

So what about BarCampEarth? Well, I built this thing to use at BarCampMilwaukee, the idea being we set it up and as people upload and tag photos with "barcampmilwaukee" they will appear on the screen. So since this weekend is BarCampEarth, we decided to test it all using the tag "barcampearth"

So far it’s working ok. There is a weird flicker when the images load, so I’ll have to work on that, and in earlier testing I’ve had the Mac lock-up on me, but a reboot fixes that problem. Old hardware put to good use… hooray!





Categories
Uncategorized

blogchalk, 7-11

blogChalking is a neat idea. Of course syndic8 had their meta-data thingy for location long ago… I wish the syndic8 way of doing things caught on, as it would probably open up more possibilities in the future… oh well… here it goes (with appropriate tweaks): Google! DayPop! Etc! This is my blogchalk: English, Perl, United States, Wisconsin, Oconomowoc, Fowler Park!

It’s Big Gulp Day! Do you know why?

I started to draw up plans for the MacKiosk, I’m a little worried about portability and the size/weight aspects of it. Ah, no one said designing and building a kiosk would be easy…