Team May12-25 Alex Wilkins Kevin Wells Daniel Mears Le Uong Interactive GUI for Emergency Light Bar...
-
Upload
matthew-james -
Category
Documents
-
view
215 -
download
0
Transcript of Team May12-25 Alex Wilkins Kevin Wells Daniel Mears Le Uong Interactive GUI for Emergency Light Bar...
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