Team May12-25 Alex Wilkins Kevin Wells Daniel Mears Le Uong Interactive GUI for Emergency Light Bar Design

 Our Client  Project Purpose  Requirements  Use Cases  Prototypes  Module Breakdown  Tools  Implementation  Testing  Reflection Overview Team May12-25

 Based in St. Louis, Missouri  Design and manufacture warning products used by professionals in emergency and utility situations Client: Code 3, Inc. Team May12-25

Objective: design and create a web-based interface that allows users to easily design and preview emergency light bar configurations Users:  Police officers  Emergency workers Project Purpose Team May12-25

 Mounted rack of lights found on most emergency vehicles  Police cars  Ambulances  Fire response vehicles  Can flash lights in coordinated patterns What is a Lightbar? Team May12-25

Functional  Allow users to create a light bar configuration  Visually present the user-developed light bar and flashing pattern to the user for review Non-functional  Be simple and intuitive enough for the target audience to use  The purpose of each element on the page should be obvious to the user Requirements Team May12-25

 Add/remove light heads  Load preset light bar configuration  Apply flash patterns to light heads  Preview light bar configuration Use Cases Team May12-25

Prototype v1 Team May12-25

Prototype v2 Team May12-25

High-Level Module Overview Team May12-25

 Languages  HTML  CSS  JavaScript  Libraries  JQuery  Testing Tools  Firebug Tools Team May12-25

 Defines constraints on light head configuration placement  For each possible configuration, need to allow the user every combination of those light heads  Each grid builds a directed acyclic graph to do so Grid Implementation Team May12-25

 Uses functions to change the class or attributes of an element.  Example: Light Head Implementation $(“#lightHead0”).addClass(“selected”); Team May12-25

 Assigns anonymous classes to an item’s event list.  Example: Light Head Continued $(‘#lightHead0’).draggable({ stop: function(event, ui){ //The code to execute }, revert: true }); Team May12-25

 Each flash pattern and step has a selection box  These update an array containing the information for the patterns Flash Patterns Implementation $('#pattern'+id).change(function() { //Update array here }); $('#step'+id).change(function() { //Update array here }); Team May12-25

 Add and delete boxes for growing and shrinking pattern array  Allows for greater flexibility when configuring flash patterns  Functions which directly effect the html code shown to the user Flash Patterns Continued $('#patternList' + id).append( class="patternBox"> ' + ' ' + ' ); $('#delButton'+id).on("click", function(){ $('#patternList').remove }); Team May12-25

 Play function uses jQuery effects queue  Wrap custom function and add to queue Flash Patterns Implementation function play(){ playing = window.setInterval( function(){ $("#lightHead" + i).delay(temp[l]); $("#lightHead" + i).queue(function(next) { //Control if light is on or off here } }); } Team May12-25

 Only the Grid module could be fully tested with unit testing  LightHead and FlashPattern modules use a combination of unit testing and manual testing Testing Team May12-25

Dragging and dropping light heads Final Implementation Team May12-25

Dragging and dropping light heads - result Final Implementation Team May12-25

Configuring flash pattern Final Implementation Team May12-25

Configuring flash pattern - result Final Implementation Team May12-25

 What we learned  Communication is key  Research tools for developing even during design phase  Extensions to product  Supporting saving/loading from file  Support printing of the current configuration, in order to assist with customers ordering from Code 3 Reflection Team May12-25