Team May12-25

Alex WilkinsKevin Wells

Daniel MearsLe 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"></select>' +

'<li><select id="step' + id +

'"class="stepBox"></select>' +'</li>

);

$('#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