WCCC Production Systems Status Board

Update: Custom built status boards for monitoring your systems, helpdesk, or NOC can be developed via my web design and development business, Sators.com.

Read an interview with Atlassian regarding the status board project…


So over the past week or two I have built out a status board for the Willow Creek Production Systems department.  It was a pretty fun project for me, I guess I’ll share some details.  :-)  The inspiration began from reading about the Panic Room’s Status Board, so that got the mind working, then the fingers started doing the rest.  Here’s the skinny with a demo video at the bottom:

The Status Board

The status board contains:

  • Kayako SupportSuite Helpdesk Ticket System:
    • Current Ticket Status Count (Top Right)
    • Current Department Count (Columns: Overdue tickets / Open Tickets)
    • Last 5 New Tickets
    • Top 5 Overdue Tickets
    • Ticket Count Trend (Top Left) (If there are more open or closed tickets within the 24h period, doesn’t display if the count is even)
  • Twitter Feed (Search query pulled from MySQL, updated every 15s)
  • Countdown (Again, pulled from MySQL)
  • Calendar
    • Current Date/Time/Day
    • Next 7 Upcoming Events from Google Calendar
  • Current Local Weather
    • Pulled from Yahoo Weather
    • Auto-updating weather image and icons based on current conditions / forecast
    • Today/Tomorrow Forecast with High/Low Temps
  • Outdoor Webcam (AXIS 221 Network Camera)
  • RSS Feed Ticker (List of RSS Feeds pulled from MySQL on rotation, scrolling titles of 5 recent items)

Behind the scenes, when there is a new ticket submitted to the system, it triggers a WebSwitch “On Air” light (cause I didn’t have a big flashing light) that alerts the team when a new ticket arrives, and auto shuts off after the ticket is over 1h old.  You’ll also see in the demo video below that once a new ticket hits the system, the board goes to a full screen “NEW TICKET” alert that briefly displays the submitted information so the team knows whether to spring into action on a critical issue or not.

The board is running on a Mac Mini running Plainview at full screen on a Hannspree LCD TV via DVI > HDMI at 1360×768.  The background gradients are all CSS based, so as the heights of the columns change based off of the current ticket counts relational to each other, the gradients will adjust automatically.  Similarly the rounded corners are all 100% CSS based.  I built the widgets all from scratch.  The system uses jQuery, AJAX, PHP, MySQL, JSON, WebKit, etc. etc. etc.  The majority of the system was built over the course of two days (while my wife was out of town) :-) and tweaked throughout the following week or two.

This is a pretty custom built application – it was nice knowing exactly what browser and exactly what screen resolution to build for.  Because of this, I don’t care that it looks wonky in Firefox, etc.  However, it is a “fluid-ish” design in that most of the design is based off of percentages, etc.  Here’s a demo video:

If you have a similar ticket system or would potentially have any interest in a board like this for your environment or a custom application, drop me an email at matt@sators.com.  I’d be happy to answer any questions via comments below.  The source code for the above board can be found at http://code.google.com/p/sators-status-board/

Check out another status board I did with some similarities to this board.

Thanks!

Icons Provided by: http://icontexto.blogspot.com/; cyberchaos05
Weather Data and Graphics from Yahoo Weather

Find this useful? Take just a moment and give a $1. Thanks!
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
  • J

    Very nice design.

    [Reply]

  • Allen

    WELL DONE! I was also inspired by the Panic board but just don’t have the chops to tackle it yet. You kicked butt here.

    [Reply]

  • Jake

    Great work!

    [Reply]

  • http://blog.grimsy.net grimsy

    Love it. Any thoughts on releasing your framework?
    We run JIRA here and would love to see something like this working with it.

    [Reply]

    danny reply on April 6th, 2010:

    I’d love to see a jira based one as well.

    [Reply]

  • http://www.deanbreaker.com/ Amy

    I’d love to see a jira based one as well.

    [Reply]

  • Mark

    How are you pushing the alert to the screen on a new ticket?

    [Reply]

    Sators reply on April 30th, 2010:

    So with every update of the tickets in the system every 4 seconds, it checks to see if there is a new ticket. If so, it then tells a javascript function to run that will play a sound, display the full screen div, and dim out the background for 15 seconds, then return back. When it displays the ticket, it stores that ticket ID in a mysql table, so that when it checks for new tickets, it see’s what the last ticket it displayed was, then displays the next one if there are any new tickets after the last one. Nice part about this is that if two tickets come in at the same time, it won’t jump or try to display two at once, but queue them up to display one right after the next.

    [Reply]

  • nibb

    Very nice really. But I it would be to stressful in a scenario where you receive like dozens of tickets per minute. I love computers and I had something similar setup, even for the monitoring systems connected to sounds and sms to phones. It was such a big stress I could not handle it anymore. Now I prefer very smooth and light alerts, unless there is a urgency, but then again customers tend to think its always an emergency. Hopefully the new v4 of kayako will handle better this so you can give priority to specific customer but stop the time wasters of pushing all your alerts. T
    he outside cam is a nice touch but I understand why you have it, the room is so dark that after hours inside you would really feel disconnected from the real world. Maybe a open office where nice sun light comes in with a view to the street would be nicer and some plants.

    [Reply]

  • Pingback: Von Polizistinnen, Anzeigen und Netzwerken - Mail, Hersteller, Sachen, SysAdmin, Aber, Genosse - Data Travelers-Blog

  • John

    I would like to see Jira support as well

    [Reply]

  • http://maclife.pl Lutecki

    What you use to marquee text on the buttom?

    [Reply]

    Sators reply on July 4th, 2010:

    That’s using jQuery – essentially it populates the content in a div the width of the content, locates it off the right edge of the screen, then animates it off the left side of the screen. Once it gets past the left edge, move back over to the right, repopulate, and run again.

    [Reply]

    Lutecki reply on July 4th, 2010:

    I guess how it works:) I thought it was a ready script.

    [Reply]

  • Pingback: Link dump for August 3rd | The Queue Blog

  • http://blog.mattsatorius.com/ Sators

    Hello all – help vote for my status board in The Ultimate Wallboard contest at http://bit.ly/awRPUn

    [Reply]

  • http://blog.mattsatorius.com/ Sators

    Felt in a giving mood today – here’s the source code: http://bit.ly/f6AubR

    [Reply]

  • Pingback: Building a NOC/Status Display System | Cave76

  • Tino

    Will this work for V4 Kayako… I just can’t get bars to pupulate… :(

    [Reply]

    Sators reply on May 4th, 2011:

    It will…however in my code that I wrote a year and a half ago never intending it to attract so much interest, my departments are hard coded in there. So, take a look through index.php, statusboard/ajax-json-loads.js and update things to match what data-tickets.php spits out at you. If you load up data-tickets.php, you should see some of your ticket data/departments in there…that means you’re connecting to the database successfully, and it’s on the parsing/javascript side. If data-tickets.php doesn’t show anything, then you aren’t connected right to the MySQL.

    [Reply]

  • http://www.compasstech.org/ Joe

    This is just awesome.  Saw this while at Gurus and had to put it in for us. For some reason, it doesn’t always add the appointments to the correct columns / update them.  As well, can’t get the weather to populate. Any hints? Thanks!

    [Reply]

    Sators reply on August 9th, 2012:

    If by appointments you mean tickets, check the hard coding of ajax-json-loads.js to match your category names.  Follow the steps on this page: http://code.google.com/p/sators-status-board/

    [Reply]

    Joe reply on August 9th, 2012:

    Thanks for quick reply!

    [Reply]

  • Pingback: Sators.com Project Status Board | Inside the Mind of Sators

  • Sal Piro

    I like your implementation of your Status Board. I liked enough to create one based off of your work. I use MSSQL for our figures, there are different world timezones displayed, and for the video I found that I could get the local Fox affiliate web stream. Thanks for the inspiration.

    [Reply]

    Joe Way reply on September 13th, 2012:

    I can’t seem to get the weather to populate. Is there a different code needed? I seem to have it all exactly right and input my local area.

    [Reply]

    Sators reply on September 13th, 2012:

    You might be getting a PHP error – the data is loaded through the /data-weather.php file, so loading that file from a browser should show a JSON feed of the weather if working properly…or an error that you can track down…

    [Reply]