From the desk of CabelPortland, Oregon 97205

March 8th, 2010

This is probably the busiest year in Panic’s history.

This is good. But a lot of things happening means a high chance that I, the man who lives and breathes Panic and has a giant status board in my head, might not properly explain everything to everyone. Steve and I realized it was high time we made this Cabel Status Board public… using technology!

So, with partial inspiration, Neven, Steve and I built the Panic Status Board. Take a secret, sneek peek:

What’s on the board?

The idea quickly grew beyond “Project Status”, and has become a hub of all sorts of internal Panic information. What you’re actually looking at is an internal-only webpage that updates frequently using AJAX which shows:

E-Mail Queue — number of messages / number of days.

Project Status — sorry for the heavy censorship — you know how it is!

Important Countdowns

Revenue — comparing yesterday to the day before, not so insightful (yet).

Instant Pay-Off

Les, one of our support guys, said it best after a week: “That board is like magic.” Our support turnaround time is faster than it’s ever been. Just the simple act of “publicizing” those numbers — not in a cruel way, but a “where are we at as a group?” way — has kept the support process on-task and, I think, made it a bit more like a video game. (It helps that when all the boxes are at “zero”, a virtual bottle of champagne appears on-screen, and a physical one is likely removed from the fridge.)

We can’t wait to add more data in the future. Open bugs?

Implementation Notes

For the truly curious. Display: I picked the Samsung 460UXN-2 professional display for the thin bezel and lack of branding, airport-style. To my surprise, it had a built-in Windows XP Embedded computer (boo), which meant we didn’t have to waste a machine to drive the display (yay). We loaded Chrome on it, since it has a nice full-screen view — sadly, that meant we had to lose Safari’s beautiful text anti-aliasing. Display Mount: Hard to find a vertical mount! Wound up with the Premier Mounts RFM, and like it. Support Queue: I’m weird, and PHP IMAP libraries felt too heavy for just getting message counts, so I decided to do raw IMAP protocol calls over a socket. Bus Arrivals: this is using the fantastic Tri-Met real-time REST API. Calendar: Steve used the PHP iCalendar library to parse our group Mac OS X Server calendar. Twitter: feeds use Twitter’s simple (little-known?) blogger JSON service. HTML/CSS: Neven says, “This baby is all WebKit candy. The only images here are the icons. The rounded corners, the gradients, the animation – all CSS. Learn -webkit-transform and love it! Oh, I tried using Google Chart for the support graph, but it wasn’t flexible enough. Our little graph is infinitely scalable and stretchable.”

From start to finish, this was about a three-week project.

And no, it didn’t slow down development on [insert the app you want the most here]. Check the board!

PS: For one full year I’ve been promising a blog about the “new” office. If you can believe this, we’re still waiting on a guy to finish processing a couple of nice QTVR’s of the office under construction. With any luck, he’ll be done soon, and I’ll start writing…

Sam Vermette

Ben

Damn, you guys have lots of secret projects! Two of the blurred items looks like they have the Unison and Coda icons, so you’re probably not working on 7 additional apps, but still… Glad to see so many faces next to Transmit!

Anyway, I need to look into the logistics of making a mini version of this for myself. It could be the To Do List of the 21 century.

Jordon

Justin Heideman

Very nice work! It’s great that Safari and Chrome have pushed -webkit-transform to highly adaptable levels. Once upon a time, you’d have to use Quartz Composer for this, but get all mind-f**ky to create a patch beyond the basics.

Andy Matuschak

Patrick Gibson

Amazing as always! You’re right: Google Charts is teh suck. Yours look great, and if you ever want to expand on them without having to do all of the work behind it, check out gRaphaël: http://g.raphaeljs.com/

C.J.

Jessi

John Whittet

There are Safari plugins (e.g., Saft) that will let you run that beautiful browser with its anti-aliased fonts in kiosk (full screen) mode. So long as you can run Safari plugins on Windows… no experience there.

Pope

Billy

Based on your comment about anti-aliasing and your Mac-focus, have you turned on and configured ClearType in Windows? It’s not exactly the same as the Safari anti-aliasing but it’s a million times better than none (though I’ve always thought Safari made things look heavier than it should, but that’s me) .

Jason

R.P. Cameron

Beautiful and informative at the same time. If you really want to go all out on the fonts, you may want to check out ClearviewHwy (http://clearviewhwy.com), the new font for road signs (with lots of research into visibility).

Ben

Countdown to iPad means iPad apps?! It’s my secret little dream for Coda to be on my iPad so I can work from my comfy couch, the coffee shop, or wherever without lugging the 17″ around. Please let it be so. I’ll buy the desktop version too, even though I wouldn’t use it (maybe I would now… hmmm!).

James

Brandon Malicoat

To all the folks mentioning ClearType: I don’t think it would work since the pixels are in a different configuration vertically than horizontally. Unless Windows compensates for this now somehow (they didn’t in the past).

mattydee

Wil Gieseler

If you’d like an interim solution for your anti-aliasing woes, you could check out Cufón, a Javascript tool which will render your text with Canvas and nice anti-aliasing. (http://cufon.shoqolate.com/) It should be able to be dropped in without much modification to your existing source, but depending on how your page updates you might have to make use of Cufon.refresh(); a bit more than usual.

Gordon

Mark

Inspirational! So much better than our current dashboard. We also found it better to kinda publicize general activity so the whole company knows where we stand at any given moment. But the graphics leave much to be desired!

Andy

A little hacky, but if you want to remove the borders of Safari, could you not use the screen’s manual adjusts to make the screen size a little oversized and therefore push the unsightly stuff off the sides of the viewable window and out of sight?

Darrel Girardier

Sulcalibur

Salman

If you would like to get the beautiful anti aliasing of Safari back (instead of using chrome) and still maintaining your full screen view – i came across a full screen browser (specifically for web presentations) called Plainview (i am in no way related to the company)

I dont know if it will work with the Windows XP built into your monitor – but it might! Just trying to help

PS – we’ve been talking about doing something like this at the company for ages and the project always gets put on the backburner – have you thought about turning this into a product of its own???

Bitka

Jonathan

Joe

Wow. Every time I reload this, the page is at a different angle.
The anti-aliasing, by the way, is a million times better in Safari as opposed to Chrome, I didn’t even know it was angled in Safari at first, until I reloaded. Magical.

Jim Ewing

This will make a highly valuable product to have on our new iPads that our team will buy for the management of all things. I hope you will consider creating a real iPad tool that I can build snapshots of stuff that is timely and important to our team. Include an internal twitterlike service in it too so we can get feedback and status and questions pretty realtime. Fab design. Most inspiring.

Halil Köklü

Francis

This board is right good, boys. Anyway I’m probably out off the Unison 48/3 email-queue, and always awaiting for Unison English.lproj xib.files for a french localization, I’m a poor lonesome desperate localizer…

gsf

Eric Peacock

Looks great. I want one of course, but where I work I can imagine the sinkhole a project like this would create.

Great use of progressive enhancement – the nice thing is this would run in any modern browser (probably) and just look funkier in IE. It’s not some fully custom app that isn’t portable and requires recompiling. A good use of web tools for sure.

Can’t say anything good about Windows XP Embedded though. Our Xerox Rip runs on it and it’s flakier than a account manager’s PC loaded up with XP Pro and dozens of apps, etc. I suspect the weekly security patches from MS are the cause since that is the only thing that ever gets installed.

Is one of those pixelated apps a Delicious Library rip-off for organizing Cabel-sponsored snack products? You know, Cabel and Shipley are sworn enemies and all that. Blood must be spilled.

Scott

Mike

You should try and generalize this and make it available as software. I would love to have a copy for the bio lab I work in. The sociology of the idea is perfect. Production goes up with accountability.

Zak

Amazing work Cabel, you’ve inspired us to make our own at our design firm. Are you considering selling this or having it open source once you finalize it? It could be a great small-business productivity app that could do wonders.

James Simpson

Thanks for the awesome idea! Just setup something similar for my website and I’m already loving it! Of course since I am a one man team working out of my apartment, I just made it an internal webpage, but I can image it is hanging on my wall displayed in a nice screen.

Daniel

Damapy

Tom

I had the same idea as this, in a school i work in but it was a little more complex!
Problem was the 40″ wall mounted TV’s only input was HDMI dvi, and i only have an old VGA output on the crappy laptop that was going to tun it, so my ideas stopped there!

Kevin Barbee

WHEN are you going to sell this to ME?
I really really want this–and want to add more data on annual revenue goals, thermometer type displays to revenue targets, length of the line to get into Space Mountain, etc.

Sam Hamilton

Dakota

I’d second the recommendation to use svg/jquery library g.raphaeljs.com which is so sexy, and works swimmingly on webkit. Also very excited for the iPad product, even though I probably won’t be buying an iPad on March 3. Inspirational. Keep up the great work! DR

MicroAngelo

Very nice, I can certainly see how the “game dynamics” idea could work to reduce the outstanding emails.

Could you explain a bit more about how the charts are HTML? What elements are you using? How does it use transitions exactly?

We did a similar “display” device for use in a shop a couple of years back using Opera and its support for SVG: beautiful alpha transparency, curved corners, bevels and the like and it full-screened perfectly. From a coders point of view there were actually zero “images” as everything, even logos, were SVGs which we could edit in a text editor, version using our SVN system etc.

Such a shame SVG has effectively been killed off for the masses by lack of good cross-browser support, but for specific instances where you have more control, I can wholeheartedly recommend it!

Jeff

Saw this the other day on lifehacker and thought it was awesome! I keep checking back to see if the source has been posted or if there are plans to sell it. Consider this my +1 vote for releasing the html/css/js that drives this baby. Keep up the great work!!!

ls

Andrew Blair

Andrew Cox

This just made my day. We’ve recently started doing Kanban with my team and the management is starting to get nervous about our new process and wants to know if we’re going to meet our deadline. I was planning to sit down and work up some good metrics to show where we are and where we need to get to by our target. This just completely blows away what I had in mind.

Now I’m inspired and will be spending the weekend making my own version of a comprehensive status dashboard!

Jonathan Oxer

Very cool. I was so inspired by this story that on the weekend I bought three 22″ monitors (not as cool as yours, but hey, they were cheap) and set up our own version at Internet Vision Technologies: http://jon.oxer.com.au/blog/id/360

Max Dominik Weber

There’s a bug where this article suddenly disappears when you scroll down. (It’s not cut off, the whole page disappears at the same time.) It doesn’t happen here, on the page with the comments, only on the blog’s main page.

Other than that, great status board, and thanks for the hint on -webkit-transform.

Sprogz

What’s the rules behind your Twitter updates;
– how often do you retrieve them?
– do you limit the retrieval to a maximum number of messages?
– do you ticker-tape through all the messages retrieved last time you queried?
– if there are more messages than you can show in the period until the next retrieval, do you just not show the last messages or wait until they’ve all been scrolled through?
– what if there are no new messages since your last retrieval-do you simply continue to show the older messages?

Anyway, what a great idea to keep employees focused and what a nice way to present it.

Bob

Have you considered making a product out of this? Seriously. If you can create something that’s easy to maintain & can handle Powerpoint slides in an elegant manner, you have something you can make money with.

Unfortunately, you’d have to solve the Powerpoint display problem in an elegant manner. Too many businesses use Powerpoint for a digital signage base.

You also might want to look at Cisco’s signage product. Perhaps you could partner with them on this.

Don Van Ausdoll

Thanks for sharing I needed a similar solution in our IT support office. I stole every idea (the display is awesome!)and was up and running in 2 days! While I would love to say I was creative and innovative, I even stole the design with a few changes.

Only issue remaining is Chrome craps out on the Embedded OS 90%of the time. I am looking into putting Windows 7.

Sators

BrokenBinary

I have also managed to recreate the Panic Status Board. If anyone needs tips or if you are looking to have one developed for your business, feel free to email jesse (at) geekplatoon.com for info and pictures.

Great idea Panic !

Sergey

Jason Campbell

Joseph Schmitt

Did you guys have any issues with Chrome not being able to load a lot of web pages? We just got one ourselves and every time we try to go to any complex page in Chrome, we get the “Awww snap” message. Safari, IE, Firefox, and Opera work fine, though.

nine times

Hey, this looks great, and I love tools that help people stay productive and motivated. If you get this thing all polished and humming along, you should consider turning it into a product. Maybe an iPad app?

Ruffin

Ditto the Coda on iPad request. There are times you need (okay, really REALLY want) to get a little work done on the road, and it’s usually approaching an emergency [for your client]. Having a one-stop HTML coding and ftp app would be major money.

JP

Joe

Loving the Panic Status Board…same goes for the other examples in comments. In case you’re interested, Atlassian is running a contest to find the best wallboards, information radiators and status boards. We encourage you all to enter to win some prizes and bragging rights. Fancy high-tech or old-school entries welcome. ultimatewallboard.com

Best Web Design Singapore

greg

So what do you guys (i.e Panic guys) think of the clone on github mentioned above ?
Would you consider using it ? Contributing to it ? Has yours evolved since this post ?
( https://github.com/ajb/statuspanic )

stoomoKeeta

Lonnie Kinley

Hi! Someone in my Myspace group shared this site with us so I came to give it a look. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Fantastic blog and wonderful style and design.

jewel

Thanks again for the open house this past weekend, as a part of xoxo. Loved the status board so much I had to google for it and found this. Hope you’re still thinking of releasing it as an app as I may even have had a dream about it.

Daniel Black

I’m sure this is quite long-in-the-tooth, but since first seeing this when the post was published, I periodically come back to this page when I tell people–often my wife, repeatedly–how I want to show our family’s goings-on. I’m somewhat closer to getting a used display and throwing a Linux box running conky at the problem, but would like to echo enthusiasm for the Panic Status Board app.

Custon made sign

Lisa Karen

But I have the contrary, had constant problems with uploading data. I was tired and decided to switch to the new software. I was very angry long loading, is not possible to work. So now I’m working with the software http://www.easyprojects.net/. Very pleased with the work!

Website Builder Reseller

Very cool. I was so inspired by this story that on the weekend I bought three 22″ monitors (not as cool as yours, but hey, they were cheap) and set up our own version at Internet Vision Technologies,Website Builder Reseller

Bandy

Well I’m buried under spam now, but if you read this, can you tell me what monitor you used? I love the iPad app, but I want something at home to fit a similar dedicated need. Size/brand/mount type would all be really helpful. Thanks!

toms shoes sale

Hey! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My web site looks weird when viewing from my apple iphone. I’m trying to find a theme or plugin that might be able to fix this problem. If you have any suggestions, please share. Appreciate it!

toms shoes sale

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

asima

Nike shox sko

You should phrase any posts which contain a critique without straightaway calling out another customer here or members right from other forums or enthusiast sites. Doing so can purpose messy “flame wars” which can be difficult to extinguish. One good way can be to just phrase everything as being your own opinion. For example, “I personally find Shawn’s thoughts grating, her style over-the-top annoying, and the fact that she wears such a lot of purple makes me think she ought to be mentally unstable” (or what to get). You can stop there. You don’t have to take a to explain how dumbfounded you might be that anyone disagrees together with you.

Kiera @ Digital Tv Aerials

John

Inspirational! So much better than our current dashboard. We also found it better to kinda publicize general activity so the whole company knows where we stand at any given moment. But the graphics leave much to be desired!