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

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"></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
• rdering from Code 3

Reflection

Team May12-25