My Very Own Panic-inspired Status Board
Posted in Design, on April 13th, 2010 by Carlos.
[Update: You can check out a Live Preview of the Status Board by reading my post, Panic-Inspired Status Board Live Preview Using HTML5 and contentEditable.]
I recently picked up a beauty of a monitor (Dell U2711) which left me with my 24″ Samsung looking for a home. Given that the displays are very different, I wasn’t truly digging the two monitor side-by-side idea, but did want to do something with it so I would have it handy in case when having two monitors makes life easier (working with presentation documents seems to make me wish I had the second monitor).
Anywho, I started to think about the Status Board that Panic created and blogged about a while back and thought I could do something similar to replace the white board I have next to my desk. In fact my second monitor is currently blocking the view of my white board, so I only found it appropriate! I basically wanted a glorified to-do list split up by clients, while having some handy information at my fingertips (time, weather and Twitter feeds). I had and still have some delusions of grandeur which would make this thing fully AJAX enabled where I can drag and drop items and lists, but I had to start somewhere, and I’m not quite there yet. The DIV’s that contain the lists do expand as you type more in, and the DIV’s themselves will automatically position them self in the page columns as the lists grow. It is by no means done, as I have several more tweaks I’d like to make to it.
I will likely break out how I created the Status Board over a few blog postings so I don’t glance over too many of the details, but here’s a quick overview of the elements I used to create it:
- The Status Board is really just a HTML page set to full-screen at 1920×1200 resolution . I had to use Chrome for this as other browsers/methods failed with the two displays. I also wanted to keep it based on Webkit, so I didn’t look at any Mozilla alternatives.
- Several helpful jQuery scripts and plugins including:
- The really nifty HTC-esque clock and weather that is displayed in the corner (jDigiClock)
- Real-time Twitter feed using Juitter
- HTML5 properties such as contentEditable to make the lists editable right on the screen, and localStorage to keep a copy of the list stored on the local machine (really only did this as I need some assistance with saving it to a mysql database)
- CSS3 layout properties such as columns, rounded corners, opacity and shadows
I must say, designing a site that you can control the audience, browser, resolution – everything – was fun, but surprisingly challenging. Old habits die hard, I suppose, but I really shouldn’t get use to developing sites for only one platform.
I’m hoping that this will provide a clever use of a secondary display and that I actually do wind up using it! I’ll do my best to share my findings as I enhance the web app further, at the same time asking for help if anyone is willing to provide it!
How does it look on your iphone?
Well… it’s not designed to be viewed on my iPhone as it is very specifically designed for a 1920×1200 monitor… and given that I’m currently using localStorage rather than storing the data in an actual mysql database, the content wouldn’t be the same on my iPhone vs. my desktop. That.. and given it’s just an internally hosted website (not an a live external web server), I’d only be able to access it from my iPhone when from home.
BUT… when I do manage to get it switched to a mysql server, I might put it up on a protected server, create an iPhone friendly view and have to-do list that follows me around!