Interactive GUI for Emergency Light Team May12-25 Alex Wilkins Bar - PowerPoint PPT Presentation

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

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

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

Project Purpose 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 Team May12-25

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

Requirements 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 Team May12-25

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

Prototype v1 Team May12-25

Prototype v2 Team May12-25

High-Level Module Overview Team May12-25

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

Grid Implementation  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 Team May12-25

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

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

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

Flash Patterns Continued  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 $('#patternList' + id).append( class="patternBox"></select>' + '<li><select id="step' + id + '"class="stepBox"></select>' + '</li> ); $('#delButton'+id).on("click", function(){ $('#patternList').remove }); Team May12-25

Flash Patterns Implementation  Play function uses jQuery effects queue  Wrap custom function and add to queue 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

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

Final Implementation Dragging and dropping light heads Team May12-25

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

Final Implementation Configuring flash pattern Team May12-25

Final Implementation Configuring flash pattern - result Team May12-25

Reflection  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 Team May12-25