Final Report: EcoCAR 2 User Interface Team

04/22/2014

Team Contact Information: Bass, Sarah basss@rams.colostate.edu (970) 481-6497

Garcia, Mike mjgarcia@rams.colostate.edu (719) 369-6343

Kadillak, Garrett kadillak@rams.colostate.edu (303) 304-0860

Pletcher, Brandon bpletch@rams.colostate.edu (303) 854-7653

Affiliations: Department of Energy (DOE)

Argonne National Lab (ANL)

General Motors (GM)

Colorado State University

College of Engineering

o Mechanical Engineering

o Electrical Engineering

Senior Practicum Projects Program

Team Signatures:

XSarah Bass

XMike Garcia

XGarrett Kadillak

XBrandon Pletcher

XDr. Thomas Bradley

Approved by Dr. Peter Young

XDr. Peter Young

Table of Contents Table of Tables ............................................................................................................................................................4

Table of Figures ..........................................................................................................................................................5

Executive Summary ....................................................................................................................................................6

Acknowledgments ......................................................................................................................................................8

1 Project Introduction ................................................................................................................................................9

1.1 Problem Statement ..........................................................................................................................................9

1.2 Background .......................................................................................................................................................9

1.2.1 Safety Background .....................................................................................................................................9

1.2.2 User Interfaces Background ................................................................................................................... 10

1.2.3 Typical Interfaces Currently in Industry ................................................................................................. 11

1.2.4 CAN Bus Background .............................................................................................................................. 11

1.2.5 Hardware Background ............................................................................................................................ 12

2 Project Objectives and Constraints ...................................................................................................................... 13

2.1 Project Objectives .......................................................................................................................................... 13

2.2 Project Constraints ........................................................................................................................................ 14

3 Design Summary ................................................................................................................................................... 14

3.1 Design for Safety............................................................................................................................................ 14

3.2 Design for Consumer Acceptability ............................................................................................................... 15

3.3 Design for Ergonomics ................................................................................................................................... 16

3.4 Design for Performance and Functionality .................................................................................................... 16

4 Design Decisions ................................................................................................................................................... 17

4.1 SWOT Method ............................................................................................................................................... 17

4.2 Analytic Hierarchy Process ............................................................................................................................ 18

4.2.1 Hierarchical Tree’s .................................................................................................................................. 18

4.2.2 Pairwise Comparisons............................................................................................................................. 19

4.2.3 Alternative Comparisons Example ......................................................................................................... 20

4.2.4 Final Results ............................................................................................................................................ 20

4.3 Pros and Cons of UI Designs .......................................................................................................................... 21

4.4 Final Concept ................................................................................................................................................. 22

4.4.1 System Modeling .................................................................................................................................... 22

4.4.2 Feasibility Analysis .................................................................................................................................. 25

4.4.3 Failure Mode Effects Analysis (FMEA) .................................................................................................... 26

5 Final Evaluation .................................................................................................................................................... 28

5.1 Manufacturing and Assembly ........................................................................................................................ 28

5.2 Testing and Refinement ................................................................................................................................ 29

≠5.2 Test and Evaluation Master Plan (TEMP) ................................................................................................ 29

5.3 Project Development Cost Summary ............................................................................................................ 31

6 Conclusions and Recommendations..................................................................................................................... 33

6.1 Design Choices ............................................................................................................................................... 33

6.2 Project Challenges and Achievements .......................................................................................................... 33

Bibliography ............................................................................................................................................................. 35

Appendix A: Glossary ............................................................................................................................................... 36

Appendix B: SWOT Analysis Diagrams ..................................................................................................................... 37

Appendix C: AHP Tables........................................................................................................................................... 40

Appendix D: UI Layout Design Pros and Cons ......................................................................................................... 42

Appendix E: Final User Interface Prototype Layout Design ..................................................................................... 44

Appendix F: Important Information ........................................................................................................................ 47

Appendix G: Programs ............................................................................................................................................. 48

Table of Tables Table 1: EcoCAR 2 User Interface Objectives .......................................................................................................... 13

Table 2: EcoCAR 2 User Interface Constraints ......................................................................................................... 14

Table 3: Hierarchical Tree for Integration of a User Interface ................................................................................ 18

Table 4: Hierarchical Tree for User Interface Design .............................................................................................. 19

Table 5: Objective Pairwise Comparisons and Weighted Objective Values ............................................................ 19

Table 6: User Interface Pairwise Comparison and Integration Weight with Respect to Consumer Acceptability . 20

Table 7: Final Weighted Criteria and Alternatives ................................................................................................... 20

Table 8: Final Concept Weights ............................................................................................................................... 20

Table 9: User Interface Touchscreen Layout 3 Pro/Con Evaluation ........................................................................ 22

Table 10: UI Failure Modes and Effects Analysis ..................................................................................................... 27

Table 11: Final Bill of Materials and Cost for Purchased Components ................................................................... 32

Table 12: Budget for EcoCAR2 User Interface Team ............................................................................................... 32

Table 13: User Interface Integration Weight With Respect to Safety ..................................................................... 40

Table 14: User Interface Integration Weight With Respect to Consumer Acceptability ........................................ 40

Table 15: User Interface Integration Weight With Respect to Reliability ............................................................... 40

Table 16: User Interface Integration Weight With Respect to Performance .......................................................... 40

Table 17: User Interface Integration Weight With Respect to Functionality .......................................................... 40

Table 18: Final Alternatives Weights for the User Interface Integration ................................................................ 40

Table 19: Alternative Selection Weights with Regard to Consumer Acceptability ................................................. 41

Table 20: Final Weights for Alternative Components vs. Consumer Acceptability ................................................. 41

Table 21: Layout 1 User Interface Design Pros and Cons ........................................................................................ 42

Table 22: Layout 2 User Interface Design Pros and Cons ........................................................................................ 42

Table 23: Layout 4 User Interface Design Pros and Cons ........................................................................................ 43

Table of Figures Figure 1: Mean Task Time vs. Driver Tasks While Driving With Different Interfaces .............................................. 10

Figure 2: View of interface in Tesla Model S ........................................................................................................... 11

Figure 3: Representation of CAN Signal Bus ............................................................................................................ 12

Figure 4: Mean Number of Glances to the Display vs. Driver Tasks While Driving with Different Interfaces ........ 15

Figure 5: SWOT Analysis for HUD with a Motion Controller ................................................................................... 17

Figure 6: User Interface Touchscreen Layout 3 Home Screen ................................................................................ 21

Figure 7: User Interface Touchscreen Layout 3 Settings Selection ......................................................................... 21

Figure 8: Final User Interface Design for the Home Screen .................................................................................... 23

Figure 9: Printed Bezel and Tablet Displaying the UI Application ........................................................................... 25

Figure 10: SWOT Analysis for Touch Pads on Steering Wheel ................................................................................ 37

Figure 11: SWOT Analysis for HUD with Touch Pads ............................................................................................... 37

Figure 12: SWOT Analysis for Voice Control ............................................................................................................ 38

Figure 13: SWOT Analysis for Brain-Computer Interface ........................................................................................ 38

Figure 14: SWOT Analysis for Integration of a Larger Display ................................................................................. 39

Figure 15: SWOT Analysis for Integrating With Existing Display ............................................................................. 39

Figure 16: User Interface Touchscreen Layout 1 ..................................................................................................... 42

Figure 17: User Interface Touchscreen Layout 2 ..................................................................................................... 43

Figure 18: User Interface Touchscreen Layout 4 ..................................................................................................... 43

Figure 19: Final User Interface Design for the Settings Screen ............................................................................... 44

Figure 20: Final User Interface Design for the Music Screen .................................................................................. 44

Figure 21: Final User Interface Design for the HVAC Screen ................................................................................... 45

Figure 22: Final User Interface Design for the Navigation Screen........................................................................... 45

Figure 23: Final User Interface Design for the Energy Data Screen ........................................................................ 46

Figure 24: GPS Fully Functional ............................................................................................................................... 47

Executive Summary The User Interface (UI) design team, working on the third and final year of the EcoCAR2 challenge run by

Argonne National Laboratory (ANL) and GE, was tasked with designing a UI that vehicle consumers in the future

would expect to see in a production hydrogen vehicle. The team needed to pay attention to consumer

acceptability, safety and other factors that will affect the customer’s choice of purchasing the vehicle.

Background research showed that UI’s contribute to distraction, which is unsafe for drivers, however the

distraction could be minimized by reducing the amount of glances and time taken to accomplish tasks using the

UI. The end users for this project will expect to use the UI to control different systems such as the AC and music

as well as receive data such as hydrogen levels, battery levels, etc. from the car that is necessary for proper

operation.

Due to the variability in human interaction, the project objectives and requirements were difficult to define.

There are no rules and very few guidelines implemented in the USA at this point in time regarding the design

and function of UI’s in vehicles. The team felt objectives like minimizing the operating time and distractibility

while maximizing the ease of use and reliability would be important factors to consider in the design due to the

customer responses collected as well as the environment of the use of the product. Maintaining a project cost

that was below our budget was also a factor that was desired. Some of the constraints we found that affected

the project were physical limitations such as distance of the UI from the driver, size of the center console in the

vehicle, hardware/software specifications and consciously paying attention to the lack of sharp edges. All of the

members are full time students with jobs so the amount of time to spend on the project was also limited.

Design choices were made using a combination of methods including SWOT diagrams, an Analytical

Hierarchy Process (AHP), and pro con tables. Many of the brainstormed ideas, when analyzed with the SWOT

diagrams, were discarded because of the large amount of risk involved with implementing new and unproven

technology such as a heads up displayed projected onto the windshield. Many of the choices were implemented

into an anonymous consumer survey and then quantitatively analyzed using AHP. The top 5 features that

consumers wanted to have in their vehicle UI were GPS, rear view camera, music and phone integration, and

FM/AM radio. When it came to design for a UI layout we found that by prototyping different design ideas and

then looking at the pros and cons for each item helped solidify what was desired. Users will want to see large

and clearly labeled buttons, important information always available, and that the main options available are on

the display without having to adjust it to show more options.

The team decided to implement a touchscreen device which was proven as the safest method of user input

while operating a vehicle. By reducing the UI design to just three different layers and providing color coding, as

well as the option for the user to change the shade of the color, text, and a larger screen, these options allow

for a faster response time for the driver and a reduction in the amount of glances needed which will improve the

safety. Consumers will want an interface that does not require a great amount of memorization in order to

operate it; minimizing the amount of selections needed results in a faster learning time and ease of use.

Considerations for designing an ergonomic system stem from increasing the consistency and simplicity of the

system while paying attention to the memory constraints all humans have.

It was decided that, only a few months before the deadline, implementing a PC tablet would be the best way

to get rid of messy component interfacing problems. This allowed us to use a CAN bus communication device

called a Kvaser to do the reading and writing which we knew would be one of the larger tasks that needed to be

completed. Once we finalized our components it was necessary to design and produce a bezel to hold the tablet.

Different tests were run in order to check functionality of the programs, wiring and components.

Some of the major challenges that the team faced in this project revolved around documentation,

programming and component integration. Many of the documents consulted were not written for

inexperienced users so they often addressed unknown terms or didn’t provide enough information when giving

directions on how to do a process. Lack of documentation for integrating software to hardware or hardware to

hardware caused a significant amount of time to be spent researching the components and donated software

which often yielded more frustration than success. It is worth mentioning that almost all EcoCAR2 teams are not

using the donated hardware and software for this exact reason. Thanks to recruiting a few computer science

majors and searching for resources online our team accomplished more than we thought possible. The project

was able to be completed with only 27% of the allotted $5,000 budget.

Acknowledgments We would like to acknowledge and extend our gratitude to the following people who made this entire project

and report possible. To Dr. Bradley for being our advisor for the project and making sure the team and project

were on the track to success. For advice given by our Graduate Teaching Assistants (GTA) Jake Bucher, Ben

Geller and Shawn Salisbury who have vast knowledge about the car and were able to help provide solutions to

our problems. A special thank you goes to Dr. Donahue and Dr. Stansloski for leading the class and providing

valuable feedback for our project. Bill Beggs, our contact at GM, was extremely helpful in trying to find solutions

to our problems and even gave important information that would have been overlooked if not for his dedication

to finding answers for us. We are particularly grateful for the help provided by Mark Heim and Conor Lansford

from the computer science department on campus, if it wasn’t for them we could not have gotten as far as we

did in programming. Assistance in locating the correct connector pin out diagrams, by Jon Dellenbauch of the

local Dellenbauch dealership, helped us overcome one of our biggest hurdles in signal wiring. Without the help

and assistance of these people our project would not have gotten as far as it has, thank you all!

1 Project Introduction

1.1 Problem Statement

The history behind CSU’s Vehicle Innovation Team (VIT) is characterized by its involvement with

the Department of Energy’s (DOE) Advanced Vehicle Technology Competitions (AVTC). The DOE has

sponsored more than 45 AVTC’s running over the span of 26 years; 10 of which have been run through

the Argonne National Laboratory (ANL) [1]. The current competition, EcoCAR 2: Plugging into the

Future started in 2011 and is set to wrap up in May 2014. The competition is extremely challenging: a

Chevrolet Malibu must be redesigned to reduce environmental impact while maintaining factors such

as safety, performance, functionality, and consumer acceptability [1]. In order to do this the User

Interface (UI) team needed to gain an understanding of the underlying history and nature that goes

along with the proposed problem, as well as look into the background of what technology is currently

available and its ability to satisfy the needs of the customer.

The purpose of this project was to design a fully integrated, intuitive, ergonomic, and safe user

interface which will be used by judges at the EcoCAR 2, 3rd year competition, as well as for users of the

production hydrogen vehicle in the future. The UI for the EcoCAR is necessary because the user

interface in the car has to provide the information that needs to be displayed, such as the hydrogen

levels, efficiency, or the range of the car to the user. Judges at the EcoCAR competition in June will be

scoring our design based on its ‘Static Consumer Acceptability’ which warrants the update of the user

interface.

Our sponsors have a stake in the claim as well as our advisor, Dr. Bradley, and the rest of the

CSU EcoCAR teams. One major sponsor, the DOE, will be looking to our team to create an innovative

display for the drivers of our hydrogen powered vehicle. The end-users of this project are obviously

the drivers of the vehicle. These end users will be looking to our display to be designed to fit not only

the car needs, but to anticipate what the driver will need in the UI. The UI that our team designed will

directly impact the sale of the vehicle to the end user. As mentioned previously, the government has a

stake in this project but since this project concludes in a competition, the university we represent,

Colorado State University, holds a large stake in this project especially since this is EcoCAR’s third, and

final, year.

1.2 Background

1.2.1 Safety Background

There are two main factors that cause driver distraction: disruptions in cognitive thinking and

disruption in visual awareness. An example of cognitive disruption is when a person calls the driver on

their cell phone and the driver must think about something other than the task at hand: driving. When

a person’s thought process has to switch to how to perform a different task, this is a disruption in

cognitive thinking and it greatly decreases situational awareness [2]. A disruption of this type will cause

a reduction in the amount of time the driver has to react to their surroundings. On the other hand,

every time a driver glances away from the road there will be lateral deviations of the car away from its

intended path. The more dangerous of the two factors is clearly a disruption in cognitive thinking, so

the less the driver has to think about outside of driving, the safer the driver will be. However, the worst

scenario is encountered when both cognitive disruptions and visual distraction are combined. “Large-

scale studies have found that up to 60% of crashes, near-crashes, and incidents can be attributed to

visual distraction from the primary driving task” [2]. Therefore it is critical for the UI system to be

aware of its contributions to distracting the driver and come up with design choices that will minimize

them.

1.2.2 User Interfaces Background

Another objective, specifically with the CSU EcoCAR, is that data such as hydrogen and battery

levels must be displayed to the user. At the start of the project this information was not provided so it

needed to be designed in. One of the major dilemmas that needed to be addressed was whether or

not to use the existing touchscreen for the user interface or to display the information to the user in

another fashion. One study that addresses this problem was done by G. Burnett [2]. Equal numbers of

left and right handed drivers performed simulated driving while using three different methods of

interface: a rotary controller, touchpad, and a touchscreen. The results of the mean task time vs. the

tasks the drivers were asked to accomplish are shown in Figure 1 [2]. The clear winner is the

touchscreen with lowest mean task time and the smallest amount of standard deviation. This also

agrees with the existing products in industry. A current example of this is the Tesla Model S.

Figure 1: Mean Task Time vs. Driver Tasks While Driving With Different Interfaces

1.2.3 Typical Interfaces Currently in Industry

The Tesla Model S features a user interface that is completely immersed in screens to display

data, including the dashboard display behind the steering wheel.

This set up is shown in Error! Reference source not found.. The

17 inch touch screen located in the main center console

completely replaces the physical buttons that this area of the car

would normally have. Everything from air conditioning to door

locks, to music and navigation, can be accomplished by the user

solely through the touch screen. In this vehicle words, numbers,

and icons have more space to be displayed larger which leads to

less glances at the screen in order to accomplish a task [3]. The

implementation of these features helped the Tesla Model S to

be rated the highest by Consumer Reports [4]. Visually appealing

options on the panel behind the steering wheel and the center console are customizable by the user

which leads to better satisfaction.

1.2.4 CAN Bus Background

1.2.4.1 CAN Lines

The user interface for the CSU Ecocar2 car uses a Control Activation Network (CAN) bus as its

message-based protocol for the various control systems within the car. The CAN bus is easily the most

widely used bus network in automobiles because of its reliability [5]. One of the main features of CAN

that make it so reliable is its dual-signal data lines. When a signal is transmitted over a CAN bus, two

signals are actually sent; the CAN_H (CAN high) signal and the CAN_L (CAN low) signal each over its

own line in the bus. The data transmitted over a CAN bus is actually interpreted as the difference (in

volts) between the two signals. Both CAN high and low start in a passive state with the voltage of each

data line being around 2.5V, thus the difference between the two signals is about 0 volts. A difference

of 0 volts between the signals is interpreted as a logic 1 by all components attached to the CAN bus. If

an active high signal is passed through the bus the CAN_H line jumps up to about 3.75V while the

CAN_L bus drops to about 1.25V. This generates a voltage difference of about 2.5V between the two

data lines and is interpreted as a logic 0 by all components attached to the CAN bus. The graph below

in Figure 3 better illustrates the voltage values of the two CAN data lines and the voltages in their

active and passive states [6]. The Benefit to this design is that it is not sensitive to any kind of electric

or magnetic noise; if noise does affect the dual line signal, it will most likely affect both CAN_H and

CAN_L in the same way. Since the data transmitted over the CAN bus is interpreted as the difference

between the two signals, that difference will remain unaffected by the noise.

Figure 2: View of interface in Tesla Model S

Figure 3: Representation of CAN Signal Bus

1.2.4.2 CAN Line Communication

An important aspect of the CAN bus that sets it apart from other bus based interfaces is that

there is no need for a “Master” node. In a typical bus, there is usually a single master node with many

slave nodes. The master node controls the communication on the bus and initiates all conversation

with all other nodes in the bus. The master usually tags which slave node it would like to talk to by

starting each broadcast with an address code that matches up with the address of one of the slave

nodes or by using a selector port that is hardwired from the master to each of the slaves [7]. In our

CAN bus, each node has the ability to broadcast to the bus and each node has the ability to listen to

the bus. The transmitting node can tag the node it would like to speak to by transmitting its unique 11-

bit identifier tag in the Identifier Field (IF) of the message it’s transmitting. All other nodes in the bus

listening to the signal would be able to tell if the message is for them by whether or not its unique

identifier is within the IF of the transmitted message.

To interface our UI with the CAN bus, we used the SDK (Software Developer Kit) provided by

Kvaser. The SDK provides about two dozen APIs (Application Programming Interface) which are C++

functions that control the hardware. Some of the APIs functions include opening a connection to the

CAN bus, reading messages from the CAN bus, writing messages to the CAN bus, and closing the

connection to the CAN bus.

1.2.5 Hardware Background

Initially our design focused on a Freescale donated i.MX6 Series SABRE board for designing

automotive infotainment. However, we had a lot of difficulties getting the board and software to

integrate and were running out of time to get it working well enough that we would complete the

project objectives. Our team decided to go with our backup option which utilized a Windows 8 PC

tablet called the Kupa Lux X15 in order to get rid of having to deal with difficult software and hardware

interfaces. It features 2 USB 3.0 ports, a mini HDMI output, stereo audio jack, and a proprietary 40-pin

docking connector. The actual size was 10.3x7.3x0.53 inches with a 10.1 inch screen. A technical review

from PCmag.com stated that since the screen brightness is adjustable to 400 nits it is possible to see

the screen even in direct sunlight and easy to see at odd angles due to ambient light sensors [8] which

are common features in the newer tablets. These are valuable features to have for a screen that isn’t

going to be viewed directly and is probably going to be exposed to bright light in certain conditions. It

has an above average processor at 1.7 GHz and it has more memory in order to store our programs and

data collected. Of course, it also features Wi-Fi and Bluetooth connectivity, as well as integrated 3G

network connection. The tablet connects through USB to a Kvaser whose products are designed to

interface with CAN lines. Our specific product, the Kvaser Leaf Professional, is perfect for our

application due to its dual high speed lines, necessary for connecting to both the CSU side of CAN as

well as the GM side.

2 Project Objectives and Constraints

2.1 Project Objectives

User interfaces are one of the hardest systems to define in terms of objectives and

requirements because of the variability found in human interaction. Different experience levels of

users and how they use the system will change, as well as their opinions, over time. The team’s

objectives can be located in Table 1 where priority is ranked from highest (1) to lowest (5). We will

need to design and test a product that will have no program bugs or delay in processing time thus

increasing the performance, functionality, and reliability of the system. Although we did want to have

the useful life of the system to be longer than three years, it would be outside of the scope of this

project. Implementing ideas that will reduce the amount of glances away from the road, thus

decreasing the time of distractions, will be especially important in terms of safety. The SAE standard

J2365 addresses the amount of time it takes to complete in vehicle tasks and aims that these tasks are

completed in less than 15 seconds. Often in UI’s settings are layered behind buttons. Each time you

have to click a new button under a previous button is what is considered 1 layer of the UI. Most phones

have around 4 layers to keep interaction as simple as possible and not hide the different settings. Cost

was one of our lowest priorities because we had a lot of donated components and didn’t plan on

spending anywhere near $5,000 even with design changes.

Table 1: EcoCAR 2 User Interface Objectives

Objectives Method of Measurement Priority Rating Target Key:

Processing Time In seconds 1 < 0.005 seconds 1-Very high

Minimizing Distractibility SAE J2365 in seconds 1 < 15 seconds 2-High

Reliability # of program bugs 1 ≈ 0 3-Moderate

Ease of Use Navigation in layers 2 < 4 layers 4- Low

Total Cost US dollars 3 < $5,000 5-Very Low

2.2 Project Constraints

Since the predecessor team did not accomplish any programming or interfacing, this year’s

team was left to focus on the limitations on the hardware and software used to program the custom UI

application. After working with the donated components, struggling to get help interfacing them, and

talking to predecessor teams it was clear that the project could not be completed using them. The

priority constraints that are listed in Table 2 are based on our final hardware configuration. The

processing speed is 1.7 GHz for the tablet. Obviously the constraints focused on safety, such as not

having sharp edges on installed objects and making sure a driver can operate the user interface while

buckled in, will be important to the system. The center console shape is a limited size and further

modifications to it would potentially damage important aspects of the vehicle. Time is a constraint that

cannot be ignored because there never is enough time as student to balance classes, work, and a

personal life. If a higher power is supplied to the tablet it would result in failure, therefore it is another

strong constraint on the project. Some constraints working with Visual studio result with what type of

programming languages it supports. Other constraints are incurred by the software we will be using

but until experienced with remain unknown.

Table 2: EcoCAR 2 User Interface Constraints

3 Design Summary

3.1 Design for Safety

With every user interface, the main objective is to integrate all of the vehicle information that is

available to the user while maintaining safety of the driver. One of the major design choices the group

faced was deciding what type of input would be best for the consumer to use in a vehicle. Looking at

three different types of UI’s and the visual distraction from each, refer to Figure 4 for the mean

number of glances it took drivers to accomplish the tasks in G. Burnett’s study *2+. From the study the

touchpad actually had the lowest task time followed closely by the touchscreen however, the standard

deviation is much smaller than that for the touchpad so it would be safer and more consumer friendly

to install a touchscreen.

Constraints Method of Measurement Acceptable Limits

Must not have sharp edges Presence of Sharp Edges by touch none

Distance from Driver In Inches 20"-30"

Center Console Interface Size In inches (h x w) < 14" x 7.5"

Time spent per member Hours of work per week < 24hr/member (3 hours/credit hour)

Size of the SSD memory on Kupa Lux X15 Hardware specification 128 GB

Processing speed of Kupa Lux X15 Hardware specification 1.7 GHz

Power to Kupa Lux X15 Hardware specification 19 V, 2.1 A, 39.9 Watts

Visual Studio supported languages Software specification Visual basic, JavaScript, C++, C#, F#

Figure 4: Mean Number of Glances to the Display vs. Driver Tasks While Driving with Different Interfaces

In order to design the UI layout for safety, the team needed to reduce the glances it takes to find

an option on the UI which will also decrease the cognitive thinking required. By reducing our design to

just 3 different layers, we were able to reduce the amount of time the user will have to spend glancing

at the screen to find options and how hard they will need to think in order to find those options.

Employing different colored backgrounds and themes for each of the 5 main commands allow the color

to tell the user what screen they are on without needing to look at the screen or read the provided

words. Words are provided to allow for the user to quickly become familiar with the options presented

to them without having to intuitively know the symbols. As the user becomes more familiar they will

select options quicker by viewing just the symbol. By implementing a larger screen not only is visibility

improved but the buttons can then be enlarged so that the user doesn’t need to be as accurate in the

selection of the location of their finger. All of these options allow for a faster response time for the

driver and a reduction in the amount of glances needed which in turn improves the safety.

3.2 Design for Consumer Acceptability

Consumers will want an interface that does not require a prior knowledge in order to operate

the system. Since there are only three layers this allows a faster learning time for the user to become

familiar with the layout and navigation. The UI was designed so that every option available can be

found with a minimal amount of screen changes. There are 6 main tabs discussed in section 4.4 Final

Concept and under these screens on the right hand side are a selection of no more than 6 different

secondary options to select for each tab. For example under music the user can choose AM/FM, AUX,

and profiles. If the user constantly listens to the AM/FM radio they will have selected that button as

their first choice and then every time after when the user selects the music tab it will have

remembered the user’s last selection. This design will reduce the amount of selections the user has to

make by 1 so in the future every time the user wants to select a different channel they just need two

clicks; one for the music tab (if they navigated away from it) and another for a different music channel.

3.3 Design for Ergonomics

The interaction of humans with the UI led to considerations of what would be most suitable to

implement into the design. For example, an increase in the screen size of the user interface allows for a

decrease in accuracy when pushing buttons making the UI friendlier for people who happen to be left

handed or shaky and are less accurate using their right hand. Other considerations for designing an

ergonomic system stem from increasing the consistency and simplicity of the system while paying

attention to the memory constraints humans have while trying to multitask.

In order to make the user interface easier to follow, our design utilizes sectioning of the screen.

The stationary row of tabs are the top 6 selections the user will want to get information about and are

located at the top of the screen. At the bottom of the screen is a secondary stationary bar which

displays the most pertinent changing information the driver would want to know. Further menu

selection is always displayed on the right hand side of the screen closest to the driver. Depending on

the function of the screen, each screen has its own constant color; it is possible to make these colors

changeable to the user if they have a different preference. In order to make the system simple for the

user, the most used selections are permanently displayed. The icons used for the interface are familiar

to the user and representative of the function when operated. The intended design uses house for

home, gear for settings, music sign for music, thermometer for HVAC, compass for navigation, and

power cord for energy data. Using common symbols also helps reduce the amount needed for

memorization, when using the UI, because the image replaces needing to read words for experienced

users. The main reduction in memory comes from using only 6 main commands and even fewer

secondary options. Reducing it to these small chunks is easy for the human mind to analyze and

remember.

3.4 Design for Performance and Functionality

In order to make sure that our UI had the best possible performance, we purchased a tablet

with a remarkably fast processor. It only takes 11 seconds for the tablet to start up and 1 second for

the UI to be fully functional. This is just enough time for the driver to buckle up before taking off.

Currently the UI does have the AC controls and data graphs available to be used however they are not

currently functional at this point in time. Right now if one plugs in a music device the amp is fully

functional. When the GPS is plugged into a computer it displays accurate readings of location. Since

this report is due before project completion day many of the functionalities cannot be discussed as

they are not yet functional.

4 Design Decisions

Design decisions for the car’s UI were made based on a combination of using the SWOT method

and Analytic Hierarchy Process (AHP). The combination of these methods allowed two different

approaches to looking at potential solutions for the project. The user interface designs were

prototyped and then evaluated by group members for strengths and weaknesses in the designs.

4.1 SWOT Method

The SWOT method can be applied to a variety of factors, such as design ideas in our case, that

need evaluating in terms of external and internal components that affect the objectives related to

those factors. Our main project alternatives were evaluated based on the strengths and advantages of

the project compared to the weaknesses presented. Comparing the opportunities available, to what

threats could be found, really helped establish a better picture of the benefits and costs that would be

necessary for employing these alternatives. For example, although there are a lot of strengths listed for

the SWOT in Figure 5, which addresses a HUD integrated with a motion controller, there is a larger

threat due to the risk involved with using new technology that hasn’t received a lot of testing and good

reviews. Further SWOT analysis was done for the steering wheel touch pads, HUD with clear touch

panel, voice control, brain computer interface, the current stock touch screen, and a larger touch

screen. These diagrams can be located for reference in Appendix B. It was decided that the brain

control interface, and controlled HUD’s would be more risk than desired to implement into this project.

Figure 5: SWOT Analysis for HUD with a Motion Controller

4.2 Analytic Hierarchy Process

The AHP was developed in order to provide a structured technique to organize and analyze

complex decisions. This technique is used in team environments where often problems occur in

respect to choosing which solution is considered the “best”. Members of cross-functional teams may

each have their own background and experience when deciding for or against a design. Sometimes it is

hard to represent and quantify decisions in a way that other team members can understand them; this

technique accounts for both quantitative and qualitative decision making in order to bridge the gap

and fairly evaluate the solutions. At times this technique also becomes too complex for making

decisions since the matrix size will increase with the number of options available.

4.2.1 Hierarchical Tree’s

In order to decompose a complex problem into analyzable sections it can be represented by

using a hierarchical tree chart. The main objective or problem is closely tied to a list of criteria for the

project. These criteria were chosen in regard to the project sponsor’s goal of reducing the

environmental impact of the EcoCAR 2 while maintaining safety, performance, functionality, and

consumer acceptability. In our case we had two parallel problems; one was to decide on whether or

not to integrate our own user interface or leave the current hardware that is in the vehicle, the other

was what components were going to be necessary to incorporate into the designed interface. There

are two alternatives (Table 3) to dealing with the physical components of the interface, one requires

complete disassembly of the current interface in order to install different components and the other

would require looking into how to interface our system with the current hardware. This meant we

would try to keep the old screen and buttons vs. implementing a new screen, both options would

require implementing new hardware and other components not currently in the car. This process

became more complex when looking at what components to integrate into the system. As seen in

Table 4 there are many options for possible hardware integration such as including GPS, a heads up

display, connecting to portable music players and phones, etc.

Table 3: Hierarchical Tree for Integration of a User Interface

Table 4: Hierarchical Tree for User Interface Design

4.2.2 Pairwise Comparisons

Information must be synthesized to determine the relative rankings of all the possible

alternatives. Using this process allows the team to both qualitatively and quantitatively weigh (and

rank) the alternatives against the objectives by using informed judgments. For our system, safety and

consumer acceptability are the highest priority; therefore these two categories will have a higher

weight than the others. Using pairwise comparisons also allows us to determine how important one

criterion over another is. Safety is twice as important as reliability where it is 3 and 4 times as

important as performance and functionality respectively. The qualitative weighing factors are found

below on Table 5. Priority rankings can be found by squaring the matrix, summing the rows, and

solving for the normalized weight values. A successful comparison of criterion can be seen on the right

of Table 5, where safety and consumer acceptability of the system are the most important criteria

followed by reliability, performance and functionality. This doesn’t mean that the design has poor

performance and functionality it’s just that we didn’t focus on bringing in more components to

improve on what was currently available.

Table 5: Objective Pairwise Comparisons and Weighted Objective Values

4.2.3 Alternative Comparisons Example

These comparisons can also be done in order to weigh alternatives against each other in terms

of a single criterion. An example of implementing the old screen vs. a new screen with regards to

consumer acceptability is demonstrated on the left side Table 6. In a consumer survey questioners

were asked how happy they would be purchasing a vehicle with a variety of different features. The

average for less than a 7” touchscreen, like currently in the car, was 4.8 on a scale where 1= very

unhappy and 10=very happy. An average score of 6.0 was received when asked if it was less than a 10”

touchscreen (what we planned to implement) which provided a 4/5 ratio between the old and new

screens respectively (Table 6). After analyzing the matrix, our response is a 0.44 factor for the old

screen vs. a 0.56 factor (Table 6) for implementing the new larger screen.

Table 6: User Interface Pairwise Comparison and Integration Weight with Respect to Consumer Acceptability

4.2.4 Final Results

A final weighted objectives, criteria, and alternatives table was created and the alternatives

matrix was multiplied by the criteria matrix in order to determine the final concept weights for the

interface design, as seen in Table 7 and Table 8. This concludes that the most benefit for the system

will be gained by implementing a new touchscreen with the rest of the system components. The

alternative components were also evaluated however the main factor that plays a part in the selection

was consumer acceptability because components will generally decrease the safety of the UI. Due to

the difficulties of trying to determine how to judge the reliability, performance, and functionality of the

other components against each other, this process was not used since OTS components should be

close to equal across the board. Further analysis of the user interface and alternatives for integration

can be located in Appendix C and further discussion is found in under the design for safety, consumer

acceptability, ergonomics, and performance and functionality sections.

Table 7: Final Weighted Criteria and Alternatives

Table 8: Final Concept Weights

4.3 Pros and Cons of UI Designs

As a simple way to demonstrate each team member’s ideas of what would be the most

innovative layout to have, as a user interface display, the group spent a few hours to replicate the

designs in Microsoft PowerPoint. In PowerPoint it is possible to link text and boxes so that when

clicked during a slide show it will proceed to a certain slide that corresponds to the button pressed.

This allows the designers to quickly prototype their designs in order to collect input from users as

quickly as possible. A good example of one of the designs can be seen in Figure 6 where there are 4

main options that the user can select. If the user selects the settings button the screen will change to

Figure 7 and if the user hit the home button it would change back to the main screen (Figure 6).

Figure 6: User Interface Touchscreen Layout 3 Home Screen

Figure 7: User Interface Touchscreen Layout 3 Settings Selection

As the group evaluated the different layouts a discussion of the pros and cons were recorded as

seen in Table 9. The simple layout would be easy for users to memorize because there are a small

amount of choices and each choice is clearly recognizable by its individual color. If this layout were

chosen, it would take multiple layers of screens to get to the destination and may be frustrating for a

user to have to go back several options if they get off track. Another con to this design is that it is

inherently limited to a set number of choices so the user cannot see all of the options available at

once. Pro/con tables and figures for the other designs can be found in Appendix D. After evaluating the

different ideas it was found that larger buttons, clearly labeled are more desirable. Having a

permanent bar to display what the user will need at all times is also necessary. It was found that

layout 4 had the most pros and least amount of cons so it was used as a template to do further design.

The final selected concept based off that model is discussed in the final concept section 4.4.1 System

Modeling.

Table 9: User Interface Touchscreen Layout 3 Pro/Con Evaluation

Brandon’s Design Layout #3

Pros Cons

Color scheme incorporation Multiple screens to get to destination

Simple navigation layout Inherently limited to set number of blocks

4.4 Final Concept

4.4.1 System Modeling

The previous year’s team 3D printed the bezel using stereo-lithography that takes the place of

the stock touchscreen and buttons in the car (Figure 9). Stereo-lithography is an extremely expensive

form of 3D printing that uses ultraviolet light to cure a resin. Using stereo-lithography does result in a

higher quality print however it also tends to be a more brittle material subject to fracturing off pieces

under minor forces. Extrusion 3D printing accuracy has greatly improved in the last few years and

easier solutions have been found to create the perfect finish. The reason the predecessor team spent

≈$700 on the bezel was for finish quality, which can easily be done today by using an extrusion 3D

printer and placing the finished product in a heated acetone vapor bath or by sanding to smooth out

the surfaces of the finished piece. This solution is far cheaper and stronger, since PLA plastic is

extruded, and would also make mass production of the product more feasible. For that reason the

team decided to redesign and reprint the bezel in order to fit the Kupa X15 and new switches.

In order to have physical buttons on the bezel, for customer satisfaction, holes needed to be

included to mount two incremental encoders along the middle on the left and right. The encoders act

as continuous rotational knobs and also are a push to select in order to provide physical feedback for

the users. The installed knobs can be seen in the bezel in Figure 9. There are 5 buttons across the top of

the bezel that the previous year’s team ended up wiring elsewhere in the car; we decided to purchase

smaller ones and to move them to the top of the newly designed bezel. The five buttons control the

regenerative breaking, hydrogen and fuel cell enable, audio amp power, and fuel cell charge sustain.

The UI was designed so that every option available can be found with a minimal amount of

screen changes. The stock Malibu UI requires an extra selection in order to see all of the menu options

where ours shows all options without needing to scroll over. There are 6 stationary main tabs: Home,

settings, music, HVAC, navigation, and energy data located along the top of the screen (see Figure 8).

Depending on the function of the screen, each screen has its own constant color; shades of green for

home, blue for settings, purple for music, red for HVAC, orange for navigation, and yellow for energy

data. At the bottom of the screen is a secondary stationary bar which displays the most pertinent

changing information such as any active features, volume, navigation, time and battery life, current

playing music, and a rotational compass. Further menu selection is always displayed on the right hand

side of the screen closest to the driver which will open the third and final navigation layer. The right

rotary knob is used to scroll through and select the user interface options while the left one is used for

music volume. Other sample displays of these screens can be located in Appendix E.

Figure 8: Final User Interface Design for the Home Screen

The home screen was designed in order to be a customizable screen for the user. One of the

options on the home screen could be to access phone contacts, call logs, or a dial pad. If the user is

waiting in the car for it to warm up or for another passenger they access the internet, apps, news and

mail while they wait as long as the car is in park. The home screen also can be used as a favorite or

customized screen where the user selects the car applications they use the most and can drop the app

where they want it on the home screen. This allows the user to have both music and navigation on the

same screen or other preferred items.

The settings tab is where the user can alter the UI settings such as power, synced connections,

wireless and profile selection. The power options are for the display such as backlight brightness and

screen timeout settings. The sync screen is where the driver can choose the settings for syncing to

phones, MP3 players and iPods. Generally this connection is either through Bluetooth or USB. Under

the wireless settings the driver can decide if they want to turn Wi-Fi off or on and what kind of

networks to connect to. The profile selection is for the entire user interface so it will change to the

preferred tab colors, home screen apps, and music favorites.

All music choices can be made on the music tab and radio station tuning can be adjusted from

this tab as well. The features on this screen are XM radio, AM/FM radio, AUX, Profiles, and Pandora.

There will also be a list of buttons that the users can save their favorite stations to. Music volume can

be adjusted from this screen as well using the rotary knobs. One of the features on this screen is the

Profiles selection which allows the user to select a different music preference of someone else that

may or may not be in the car. Switching to a different profile in this tab will not affect the main layout

of the user interface.

The fourth tab from the left is the HVAC settings selection allows the user to adjust the

temperature in the car and turn on the vehicle defrost, fan, heater and Air Conditioner (AC). When on

tab 4 the right rotary knob will control the amount of airflow/temperature if the heater, AC, defrost or

fan are turned on. The user will click on which setting he/she wants to change and then can use the

knob to adjust it. The knob will also be used to adjust the place the airflow should be directed to such

as to the feet or head. The vehicle internal and external temperatures will be displayed on this screen.

The main navigation screen will display a map of the area surrounding the vehicle so that if the

user is familiar with the town but just wants a reference they can have one without lag from the GPS

signal. The main secondary selection on this screen is for settings where the user can adjust the

navigation volume, voice prompt settings, and navigation map modes such as 3D or eagle eye views.

An address button allows the user to select a destination while the navigation button will just place the

cars current location on the map. A Points of Interest (POI) button will be included so that the user can

select to see what types of locations are near the vehicle. A button will also be used to turn current

traffic information on so that the user can select a faster alternate path.

The final tab will inform the driver of relevant energy data from the car. Both real time and

average data for the overall efficiency of the car can be graphed for the user to see. Data will be

collected from both the fuel cells and hydrogen tanks. The range of the car can be monitored to see

about how far the car has left it can travel and past data on range. Battery cycles may be helpful to the

owner to check charge/drain graphs for any changes in the car. The owner of the vehicle may want to

know how many emissions from CO2 they are saving by driving the hybrid car vs. a gasoline or diesel

vehicle.

Figure 9: Printed Bezel and Tablet Displaying the UI Application

4.4.2 Feasibility Analysis

In order to demonstrate that the UI design concept could meet the design requirements the

team put together a prototype using Microsoft PowerPoint and a touchscreen laptop as discussed in

section 4.3. It was also very feasible to install our current hardware into the vehicle because a 12V

power supply was already available in the car in order to power the UI controller from the previous

year’s team. The i.MX6 board required more power than the tablet so the same connection could be

used with a power adapter in between. Pin out diagrams were located for the current vehicle

connectors which have signal for the rear view camera, steering wheel buttons, and a microphone. The

goal was to splice the connectors and attach our own in order to plug them into the tablet.

Unfortunately, the team ran out of time to find a way to implement these signals into the application.

The team originally made connectors to hook into the CAN bus however after switching to the tablet it

was found the easiest way to connect to both CAN lines was through a Kvaser. The bezel is perfectly

sized (Figure 9) and easily fits into the car, unfortunately the final version is still being printed.

In terms of programming in Visual Studio there is wide variety of documentation available as

support on the Window’s websites including how to get started, tutorials, samples, step by step

instructions, and an active community. Programing languages that are supported include JavaScript

(html, css base), Visual basic, C++, C#, and F# which for the most part are all common languages in

which support was located online and in textbooks. Our team decided to program in JavaScript and

C++ which are well documented and actively used in a lot of the other apps. All of our written code can

be found in Appendix G: Programs. The C++ is used mainly for data collection and signal sending

because it directly interacts with the Kvaser. The JavaScript is best used for visual applications such as

UI’s and websites so it was chosen to be our visual program. In order for the two to interact we

explored several different options. We were hoping that there was a direct communication line

straight from JavaScript to C++ but the two languages could not directly communicate with each other.

So we then looked into writing and reading to an external file using a Common Gateway Interface (CGI)

because it would be faster than having the program languages do it themselves. After some more

research we found someone using Windows RT to create what is called a hybrid code and it allows the

JavaScript to read text from the C++. There wasn’t a lot of help on figuring out how to do this though

and so we had to turn to other methods. After some more research we came across JavaScript Object

Notation (JSON) which is used for programming data processing and machine interfacing in JavaScript.

4.4.3 Failure Mode Effects Analysis (FMEA)

A major portion of this project deals with program development for the Windows app.

Programming problems stem from bugs in the code which can cause system failures and crashes

despite compiling. See Possibly the most common type of failure due to hardware on our project will

be faulty or incorrect wiring and soldering. One type of problem could involve a poor solder joint

resulting in a loss of communication between the Kupa X15 and its components. Another example is

the accidental soldering of a wire to two or more wires. This would result in incorrect signal being sent

to the wrong component resulting in unpredictable and unstable behavior of the peripheral

components. The final wiring error we will consider is that of an accidently grounded wire. This could

be the result of an incorrectly insulated wire that touches the body of the car or poor soldering. The

result of this would be a short in the wire leading to the component not being able to send or receive

signals to and from the board. Since these issues lead to the loss of a secondary function or temporary

loss, the severity would be a slight discomfort or inconvenience to the user, resulting in a rating of 5 or

6. If something like this occurred it would generally be visible or could easily be detected through a

continuity test and therefore are easily detectable. This also helps the occurrence to be low values

because the chance of it happening should be relatively low with experience.

Table 10 for the list of the most major failures that would occur in our project and their Failure

Modes and Effects Analysis (FMEA). Problems that commonly happen come from faulty IO values

(input-output) and memory allocation errors in written code (commonly called memory leaks). These

problems have a severity of rating of around 7 or 8, in which either the functionality is missing but the

interface is still operational (7), or there is a total loss in primary functionality (8). The difficulty with

bugs lies in that bugs are logical errors rather than syntactical. This means that the code must be

carefully scrutinized in order to reveal the root of the problem, requiring precious time. The chances of

occurrences are going to be low (around 1 or 2) in which no observed failures or only isolated failures

will be observed. By implementing white box testing, these problems can be identified and fixed in the

code. White box test plans can be used by the developer of a program, to intentionally break their own

code, in order to better understand the functionality and prevent occurring breaks from happening

again. Since breaks in resulting code after the software is uploaded to the hardware are going to be

difficult to detect prior to breaking, the detection level chosen was a 9 and system reboot will be

necessary. IO and memory allocation can be tested, prior to the final product and distribution to

customers, so the detection level is an 8. Obviously, the team will work hard to identify bugs early and

fix them before competition.

Possibly the most common type of failure due to hardware on our project will be faulty or

incorrect wiring and soldering. One type of problem could involve a poor solder joint resulting in a loss

of communication between the Kupa X15 and its components. Another example is the accidental

soldering of a wire to two or more wires. This would result in incorrect signal being sent to the wrong

component resulting in unpredictable and unstable behavior of the peripheral components. The final

wiring error we will consider is that of an accidently grounded wire. This could be the result of an

incorrectly insulated wire that touches the body of the car or poor soldering. The result of this would

be a short in the wire leading to the component not being able to send or receive signals to and from

the board. Since these issues lead to the loss of a secondary function or temporary loss, the severity

would be a slight discomfort or inconvenience to the user, resulting in a rating of 5 or 6. If something

like this occurred it would generally be visible or could easily be detected through a continuity test and

therefore are easily detectable. This also helps the occurrence to be low values because the chance of

it happening should be relatively low with experience.

Table 10: UI Failure Modes and Effects Analysis

5 Final Evaluation

5.1 Manufacturing and Assembly Our project didn’t consist of very much manufacturing. Initially we drilled holes in the previous year’s

bezel in order to add rotary knobs; this was before we redesigned the bezel in order to fit the tablet. The

mechanical team installed a steel bar in order to move the battery box up an inch which just so happened to be

welded over the bottom holes for mounting the amp into the backseat. This meant that a redesign for mounting

the amp was necessary and we instead manufactured a bracket that attached to the top of the trunk and

bottom of the amp at around a 45° angle.

In order to create our UI we needed to assemble all of our components. The main feature of our UI is

the Kupa X15 PC tablet therefor every other component will be a direct link from something in the car to

software on the tablet. Some of the items we needed to assemble were for powering the tablet and connecting

to CAN, music, GPS, phone/music player, rearview camera and steering wheel buttons which were requested by

consumers in a survey.

The power to the tablet starts with a 12 volt 4 ampere power cable which was installed from the

previous year’s team. This happens to be the same amount of power that the generic cigarette lighter in your

car runs off. We purchased a cigarette lighter which we can splice to the power cable once we cut off the old

connector. The only power adapter charger we could find online that had the correct 5.5x2.5 mm connector for

our tablet and ran off 12V around 2.1 amperes just so happened to be one that you plug into a cigarette lighter.

This completes the assembly of getting power from the car to the tablet. Ideally for an automotive manufacturer

they would bypass this type of component interfacing and just supply what power the tablet needs to run.

In order to connect to CAN we need to plug in a two channel Kvaser through USB. There are only two

USB ports on the tablet so a 4 way split was purchased. The Kvaser is then plugged into the vehicle’s CAN bus. In

order to read and write to the bus a software program called CANlib was downloaded. It can be programmed in

C++ and contains its own libraries for talking to the CAN bus. Windows apps are written in Visual Studios and it

supports the programming languages listed in section 2.2 Project Constraints. The libraries from other programs

can be installed into Visual Studio and used to program with so by taking the CANlib files we were able to use

C++ to read and write from the bus.

There are a lot of connections that we are still trying to figure out. The team ended up purchasing a USB

FM radio receiver and recorder however we were unable to find, at this point, a way to integrate it into Visual

Studio. The predecessor team purchased a GPS device but went with the wrong kind of connector so we ended

up having to purchase a new cord that links to USB in order to use it on the tablet and i.MX6 board.

Unfortunately, after exploring how to get navigation in a Windows app, it turns out the only way is to have an

active 3G connection and that means paying for a data plan. At this point we don’t have the time to figure out

how to get a functional navigation program and have not decided on whether purchasing a data plan is worth it

until we know we can get navigation to work. In order to connect to phones and music players we either need to

use Bluetooth or connect through USB. This needs to get further investigated. On the i.MX6 board there was a

camera port that was labeled for which micro USB pins needed to be signals and ground however we do not

have the same luxury on connecting it to the tablet so this task was also put on hold in order to complete more

important parts of the UI. The same was true for trying to connect to the steering wheel signals for control.

5.2 Testing and Refinement

5.2 Test and Evaluation Master Plan (TEMP)

5.2.1 Purpose

The purpose of the TEMP is to document the tasks and activities that will need to be performed

on the UI in order to have a successful implementation of the project. It was important to pay

attention to what tests were to be performed in order to insure that the data collected was

representative of the desired results and can be evaluated for adequate performance. One of the most

important types of communication lines that needed to be tested were the CAN bus signals which need

to be receiving and transmitting signals to certain components. These communications could be tested

using the Kvaser and our program or by using free CANlib software. Another key area that needed to

be tested was wiring and connector connections to make sure they are secure and will not break. After

soldering connections a continuity test was performed to make sure that no wires were crossed or

accidently grounded. Visual inspections were also done on all connections prior to securing with tape

and then testing. Interfaces between OTS components and the Kupa X15 tablet needed to be tested for

compatibility and performance. The UI design layout is major component could not be overlooked in

the testing phase and required user acceptance tests. Standard debugging methods build into Visual

Studio were used to check for correctness of the program.

5.2.2 Background

The previous year’s team tested the custom designed bezel to make sure it fit into the car and

would be stable. This meant that as long as we did not change the CAD for the mounting points and

outside dimensions that any re-print should fit as intended. Most of the components ordered were Off

the Shelf (OTS) and the manufacturer will have done prior testing to make sure the component works

as intended. Of course, it is good to double check that the components work prior to integrating them

into the system should one of the components be faulty. The team will do all testing on the UI

components and interfaces at the designated location at the Motorsports Engineering Research Center

(MERC).

Vehicles are subjected to a variety of extreme environments. The UI needs to be able to operate in

temperatures conditions from around -40 to 50°C however the Kupa X15 tablet is rated for 0 to 104°C

because it will also be generating heat in those conditions. Although the tablet doesn’t fall within the

appropriate range we were constrained on screen size when deciding which tablet would fit into the

vehicle and bezel. A touch capacitive screen will not be able to pick up a signal from a user wearing

gloves unless the gloves had the touch capacitive finger tips. Most gloves now days are made this way

due to the fact that smart phones are so prevalent. Moisture extremes will vary depending on the

amount of humidity in the air so the electronics should be isolated as much as possible from these

conditions. The tablet is enclosed from outside the car for this reason. In extremely dry weather static

build-up is more likely to damage sensitive components.

5.2.3 Testing Plan

One of the most important communications that need to be tested are the CAN bus signals, which can

be checked by verifying the messages received and sent, were executed by the appropriate

components.

Tests to be performed

o CAN communication

Verification of sending and receiving CAN signals with Kvaser hardware, software

In order to test this functionality, a temporary CAN connector must be

made to run from the car to the Kvaser hardware which will in turn be

connected to a laptop. Moreover, a program must be written to capture

the CAN signals and write them to a file to prove communication. A

snippet of the log file can be found in the appendix.

Verification of sorting CAN signals

The canlib.lib library provides the ability to sort the CAN signals with

ease. Proof of this can be found in the appendix.

Verification of inserting data into JSON format

In order for JavaScript to parse the data, present the current data,

JavaScript requires knowledge of the delimiters separating the data. The

quickest, cleanest process for parsing data is JSON. Proof of this can be

found in the appendix

o Interfaces are correct and secure

Wiring

Check continuity on all soldered wiring connections with multimeter. This

will be done as the wiring is put into place.

Static-Test to make sure static discharge does not affect the system.

o Software

Using White box testing method for software development for code developed

by team (Standard debugging methods). White box testing is the developer

testing the corner cases, debugging the code to produce the expected software

behavior. An excellent example of this event is when the battery indicator was

not incrementing past a certain integer value. Brandon, the JavaScript lead,

noticed this problem during testing and subsequently corrected the logic with

the ‘else if’ statements.

5.3 Project Development Cost Summary

Our advisor requested our budget be below $5000, however more funds could have been

raised if the money was needed. The UI team from the previous year left us touch screens to use for

prototyping (included in i.MX 6 gift-in-kinds) which would have been a major expense at the beginning

of the project. Freescale Electronics also donated components however we ended up not using them in

our final design. The pricing for these items are located under the gifts-in-kind column on Table 11. Our

team has its own Linux laptop to program with however after switching over to a Windows device all

members started using their own laptops to program on. The switch also meant that we needed to

purchase some more components.

Very few components needed to be ordered this year in order for the team to complete the

intended design. Since consumers like to have physical buttons, rotary knobs and encoders were

purchased to mount into the bezel. A converting cable for the GPS was purchased to connect it

through USB to the tablet. In order to avoid messy software hardware interfaces a Kupa X15 PC tablet

was purchased. In order to put it into the car we needed to buy the correct power adapter and

necessary components for splicing into the already available power lines. After modeling the new bezel

and tablet it was noticed that there would not be enough room for the old switches so the team

purchased 5 new ones. A FM music player was purchased in order to find a way to get radio in the car.

In order to connect the tablet to a computer to check the program design a small USB to Ethernet

connector was needed. The Kvaser was purchased from a previous year’s team and was not needed so

we were able to use it. The fabrication costs for the bezel alterations are listed as hours at the mean

average wage of a machinist because the face of the bezel needed to get smoothed down for a better

visual appeal. This project was able to be completed with only 27.4% of the allotted budget. The initial

budget we put together in Table 12 was very close to what was expected to happen and if it is needed

the rest of the money can be used for getting to the competition.

Table 11: Final Bill of Materials and Cost for Purchased Components

Table 12: Budget for EcoCAR2 User Interface Team

Status Item # Quantity Technical Name Cost Type Unit Price Total Actual spending Notes

Acquired 1 1 3D Printed Custom Bezel Purchased $649.85 $649.85 $0.00 Acquired from previous year

Acquired 2 1 Bezel Support Rods-Steel Purchased $26.28 $26.28 $0.00 Acquired from previous year

Acquired 3 1 QNX Car 2 Gift-in-Kind $234,695.00 $234,695.00 $0.00 Acquired from previous year

Acquired 4 1 Freescale IMX.6 Board Gift-in-Kind $1,498.00 $1,498.00 $0.00 Acquired from previous year

Acquired 5 1 Freescale IMX.6 Board Purchased $1,498.00 $1,498.00 $0.00 Acquired from previous year

Acquired 6 1 6 x 8 Touchscreen Purchased $190.00 $190.00 $0.00 Acquired from previous year

Acquired 7 1 GPS receiver Purchased $35.95 $35.95 $0.00 Acquired from previous year

Acquired 8 1 Wi-Fi/Bluetooth Card Purchased $76.99 $76.99 $0.00 Acquired from previous year

Acquired 9 3 Power Cables Purchased $12.40 $37.20 $0.00 Acquired from previous year

Acquired 10 1 USB Cable Purchased $32.86 $32.86 $0.00 Acquired from previous year

Acquired 11 3 Encoder 12mm w/switch Purchased $1.89 $5.67 $12.83 Digikey

Acquired 12 2 Indicating Knob, D-Shaped Shaft Purchased $2.30 $4.60 $9.92 McMaster Carr

Acquired 13 1 USB8 USB Cable Set for BR355/MR350 Purchased $16.95 $16.95 $21.90 GPS cheap

Acquired 14 1 Kupa X15 Lux PC Tablet Purchased $649.00 $649.00 $649.00 Dynamism

Acquired 15 1 19 V, 2.1 A, Power Adapter Charger Purchased $22.99 $22.99 $22.99 Deal Extreme-China

Acquired 16 1 Female Car Cigarette Lighter Purchased $3.58 $3.58 $3.58 Newegg

Acquired 17 5 Toggle Switch SPDT-LED tip Purchased $7.46 $37.30 $37.30 Digikey

Acquired 18 1 ADS Instant FM Music USB Purchased $12.98 $12.98 $12.98 Amazon

Acquired 19 1 Ethernet to USB cord Purchased $1.39 $1.39 $1.39 Focal Price

Acquired 20 1 Kvaser 2 port High Speed Purchased $766.00 $766.00 $0.00 Acquired from Controls Team

Acquired 21 2 New Extruded Bezel Gift-in-Kind $300.00 $600.00 $600.00 Labor/Material Cost

In Progress 22 2 Bezel Alterations Purchased $19.72 $39.44 $0.00 Personal Labor

Totals: $240,260.59 $1,371.89

Bill of Materials

Projected Expenses: Expected

Tangible Items < $600

Raw Materials < $200

Outside Fabrication $0

Intangible Items < $1000

Research < $300

Competition Registration $0

Travel (4 team members) ≈ $1896.11

Flights ≈ $1024

Transportation ≈ $207.5

Hotel Room ≈ $664.61

Total Expenses: $3,997

Projected Income:

MECH 486 Funds $0

Project Advisor < $5000

Gifts-in-kind $236,463

QNX Car 2 $234,965

Freescale iMX.6 Board $1,498

Raised Donations $0

Total Funding: $241,463

6 Conclusions and Recommendations

6.1 Design Choices

It was decided from the research and design decisions that the best system to implement

would be a touchscreen. Other choices that were made in order to improve on safety were to use as

large a screen as possible, reduce the layers, color code options, and include text with the images. In

order to improve the consumer acceptability a survey was given and analyzed. Some design choices

that were made based off the quantitative AHP were to include the following components: GPS,

FM/AM radio, rear view camera, Pandora, steering wheel buttons, and integration to phones and

music players. Unfortunately due to lack of programming expertise implementing all of these features

would have ended up outside our time constraints. Instead we decided to focus on what had to be

displayed in the car which revolved around data display. Other design choices inside the UI design for

consumer acceptability involved including physical buttons, decrease in layers, feature placement, and

saved last selections. Keeping ergonomics of the design in mind it was decided that an increase in

screen size, screen sectioning, constant display of essential information, color coordination, as well as

familiar and representative icons were necessary to include. It is recommended to anyone building a UI

to have a good grasp on how to use Microsoft Photoshop in order to create a clean and appealing UI.

6.2 Project Challenges and Achievements

Some hurdles that represented a major challenge to this project were figuring out how to

interface to the vehicle electrical system, along with how to interface the software to hardware.

Overall, on all aspects of the project, there was either a lack of documentation or ambiguous directions

provided by component sponsors or vendors. This is best exemplified by the CAN communication tiht

the iMx6 AI board. After sifting through all official documentation, our team resorted to the official

EcoCAR message boards for answers. Not surprisingly, other teams had asked the same questions

months ago with no response from QNX employees. Another challenge that was presented at the

beginning of the semester was that it was expected that the electrical engineers on the team would be

doing the programming. Looking at the lack of progress of both the previous year’s team and this

year’s team: it is strongly recommended that if the ME department in the future chooses to do a

project that is primarily programming they should seek to team with computer science majors.

In some instances, when directions are provided, they are either incomplete or written in a

complicated way addressing acronyms or named components that are unfamiliar to someone outside

of the company. For example, when trying to interface the donated software with the Freescale

hardware, this is most often the case. After switching to a Windows based program there was more

documentation and help available for the software but in some areas it was still lacking such as in the

area of program architecture and management of the project. Visual studio uses branching in projects

in order for team members to contribute new code however the documentation explaining how to

manage these processes was not written for inexperienced users.

In order to overcome these hurdles there were a few options available. Our first step when

running into a problem was to search for documentation from our given resources or do outside

research such as consulting the web. Going to the project advisors and GTA’s was another option

because they have firsthand experience with the car. Past team members, dealerships around town

and computer science majors have also been good sources of information. The resources and

guidance provided allowed our team to accomplish more than we thought possible.

Bibliography [1] About EcoCAR 2, ecocar2, [online] 2011, http://www.ecocar2.org/about-ecocar2 (Accessed: 07

September 2013)

[2] G. Burnett, G. Lawson, L. Millen, and C. Pickering. (2011, Jan.). “Designing touchpad user-interfaces

for vehicles: which tasks are most suitable?” Behavior & Information Technology. *Online+. 30(3), pp.

403-414. Available: doi:10.1080/0144929X.2011.553743

[3] E. Evarts. (2013). Driving the Tesla Model S is like using an iPad, thanks to leading-edge interior

[Online]. Available FTP: consumerreports.org Directory: /cro/news/2013/05 File: driving-the-tesla-

model-s-is-like-using-an-ipad-thanks-to-leading-edge-interior/index

[4] E. Evarts. (2013). Video: The Tesla Model S is our top-scoring car [Online]. Available

FTP:consumerreports.org Directory: /cro/news/2013/05 File: video-the-tesla-model-s-is-our-top-

scoring-car/index.htm

[5] S. Corrigan. (2008, July). Introduction to the Controller Area Network (CAN) [Online]. Available: http://www.ti.com/lit/an/sloa101a/sloa101a.pdf [6] (2006, July 6). Q&A – What is CAN? [Online]. Available: http://www.axiomatic.com/whatiscan.pdf [7] S. Kumar, “An Introduction to CAN,” (electrosofts), [Online]. Available: http://electrosofts.com/can/ (Accessed 01 December 2013) [8] Kupa Ultranote X15 Ultra, PC mag, [online] 2013,

http://www.pcmag.com/article2/0,2817,2418667,00.asp (Accessed: 02 February 2014)

Appendix A: Glossary

AC Air Conditioner AHP Analytic Hierarchy Process ANL Argonne National Laboratory AVTC Advanced Vehicle Technology Competitions CAN Control Activation Network DOE Department of Energy FMEA Failure Modes and Effects Analysis HUD Heads up Display IF Identifier Field IO Input Output JSON JavaScript Object Notation MERC Motorsports Engineering Research Center OTS Off the Shelf POI Points of Interest SSD Solid State Drive UI User Interface VIT Vehicle Innovation Team WBS Work Breakdown Structure

Appendix B: SWOT Analysis Diagrams

Figure 10: SWOT Analysis for Touch Pads on Steering Wheel

Figure 11: SWOT Analysis for HUD with Touch Pads

Figure 12: SWOT Analysis for Voice Control

Figure 13: SWOT Analysis for Brain-Computer Interface

Figure 14: SWOT Analysis for Integration of a Larger Display

Figure 15: SWOT Analysis for Integrating With Existing Display

Appendix C: AHP Tables

Table 13: User Interface Integration Weight With Respect to Safety

Table 14: User Interface Integration Weight With Respect to Consumer Acceptability

Table 15: User Interface Integration Weight With Respect to Reliability

Table 16: User Interface Integration Weight With Respect to Performance

Table 17: User Interface Integration Weight With Respect to Functionality

Table 18: Final Alternatives Weights for the User Interface Integration

Table 19: Alternative Selection Weights with Regard to Consumer Acceptability

Table 20: Final Weights for Alternative Components vs. Consumer Acceptability

Appendix D: UI Layout Design Pros and Cons Table 21: Layout 1 User Interface Design Pros and Cons

Garrett’s Design Layout #1

Pros Cons

Quickly navigate Not every icon the user wants is displayed

Figure 16: User Interface Touchscreen Layout 1

Table 22: Layout 2 User Interface Design Pros and Cons

Mike’s Cube Design Layout #2

Pros Cons

Unique and individual Hard to turn cube to see what's on the other side

Limited to 6 sides (3 viewable)

Users could get motion sick from cube

Figure 17: User Interface Touchscreen Layout 2

Table 23: Layout 4 User Interface Design Pros and Cons

Sarah’s Design Layout #4

Pros Cons

Very Organized/Structured

Big buttons on top make navigation easy

Figure 18: User Interface Touchscreen Layout 4

Appendix E: Final User Interface Prototype Layout Design

Figure 19: Final User Interface Design for the Settings Screen

Figure 20: Final User Interface Design for the Music Screen

Figure 21: Final User Interface Design for the HVAC Screen

Figure 22: Final User Interface Design for the Navigation Screen

Figure 23: Final User Interface Design for the Energy Data Screen

Appendix F: Important Information

Figure 24: GPS Fully Functional

Appendix G: Programs C++ Code

Class1.cpp // Include the whole known universe #include "pch.h" #include "Class1.h" #include <fstream> #include <string> #include "canlib.h" #include <iostream> #include <stdio.h> #include "stdlib.h" #include <array> #include <windows.h> #include <dos.h> #include <time.h> using namespace CANComponent; using namespace Platform; using namespace std; //using namespace System; Class1::Class1() { } //Takes an array of bytes and returns a string of bits given a starting point and length static unsigned int parse(int start, int length, unsigned char feed[]){ int arrayStart = (start / 8);//Keeps track of which byte in the array we are on unsigned int output = 0; while (length > 0){ //Check first to see if we are at the end of a byte if ((start % 8) == 7){ output = (output << 1) | (feed[arrayStart] & 1); arrayStart++;//move on to the next byte in the array after this start++; length--; } //if we are not at the end of the byte else{ output = (output << 1) | (feed[arrayStart] >> (7 - (start % 8)) & 1); start++; length--; } } return output; } //This function will reverse the bits in a single Byte of data!!! unsigned char reverseBits(unsigned char msg){ unsigned char result = msg; for (int j = sizeof(msg)* 8 - 1; j; --j){ result <<= 1; msg >>= 1; result |= msg & 1; } return result; } //Initialize the can channel to correct Baud rate and port static int initialize(int channel){ int handle; int stat; canInitializeLibrary(); handle = canOpenChannel(channel, 0); //ARGS: Channel, Flags printf("handle is: %i", handle); canSetBusOutputControl(handle, canDRIVER_NORMAL);

stat = canSetBusParams(handle, canBITRATE_500K, 0, 0, 0, 0, 0); canBusOn(handle); if (stat < 0){ printf("canBusOn failed, status = %d\n", stat); exit(1); } return handle; } //BCM_Data1 (0x430): Battery temp static void batteryTemp(unsigned char data[8]){ unsigned char reverseData[8]; //Holds data array with bits revrsed //open files if Brandon needs? for (int i = 0; i < 8; i++){ reverseData[i] = reverseBits(data[7 - i]); } double high_bat_temp = parse(32, 8, reverseData)*0.5 - 40; double low_bat_temp = parse(40, 8, reverseData)*0.5 - 40; //Build JSON object here!!! ifstream JSON; ofstream tempJSON; JSON.open("target.json"); tempJSON.open("temp_target.json"); int count = 0; string word; //JSON >> first; while (!JSON.eof()){ getline(JSON, word); tempJSON << word << endl; if (word.find("high_bat_temp") != string::npos){ tempJSON << "\t\t" << high_bat_temp << ", " << endl; } if (word.find("low_bat_temp") != string::npos){ tempJSON << "\t\t" << low_bat_temp << ", " << endl; } } JSON.close(); tempJSON.close(); remove("target.json"); rename("temp_target.json", "target.json"); } //BCM_status (0x410): High Voltage Stuff: CSU LAN static void highVolt(unsigned char data[8]){ unsigned char reverseData[8]; //Holds data array with bits reversed //open files to write to if Brandon needs??? //Moterolla Convention: 8-bytes //need to reverse bit order in array! for (int i = 0; i < 8; i++){ reverseData[7 - i] = reverseBits(data[i]); } //parse out the data we need from the message double HV_volt = parse(56, 12, reverseData)*0.25; double HV_amp = parse(40, 16, reverseData)*0.025 - 1000; double HV_percent = parse(24, 8, reverseData)*0.5; //Build JSON object here!!! ifstream JSON; ofstream tempJSON; JSON.open("target.json"); tempJSON.open("temp_target.json"); int count = 0; string word; //JSON >> first; while (!JSON.eof()){ getline(JSON, word); tempJSON << word << endl; if (word.find("HV_volt") != string::npos){

tempJSON << "\t\t" << HV_volt << ", " << endl; } if (word.find("HV_amp") != string::npos){ tempJSON << "\t\t" << HV_amp << ", " << endl; } if (word.find("HV_percent") != string::npos){ tempJSON << "\t\t" << HV_percent << ", " << endl; } } JSON.close(); tempJSON.close(); remove("target.json"); rename("temp_target.json", "target.json"); } //12-Volt System (0x1D6) CSU LAN static void twelveVolt(unsigned char data[8]){ //would open files here! See Brandon about unsigned char reversedData[7]; //message is 7 Bytes, Motorolla. Need bits in first byte reversed for (int i = 0; i < 7; i++){ reversedData[i] = reverseBits(data[6 - i]); } double twelve_volt = parse(16, 8, reversedData)*0.0784314; //Build JSON object here!!! ifstream JSON; ofstream tempJSON; JSON.open("target.json"); tempJSON.open("temp_target.json"); int count = 0; string word; //JSON >> first; while (!JSON.eof()){ getline(JSON, word); tempJSON << word << endl; if (word.find("twelve_volt") != string::npos){ tempJSON << "\t\t" << twelve_volt << ", " << endl; } } JSON.close(); tempJSON.close(); remove("target.json"); rename("temp_target.json", "target.json"); } // Filter for hydrogen tank signals, insert data into JSON format for ease of parsing on JavaScript sie static void htank(unsigned char data[8]){ //Open Files to write to FILE *t1p, *t2p, *t3p, *t1t, *t2t, *t3t; fopen_s(&t1p, "tank1_pressure.txt", "a"); fopen_s(&t2p, "tank2_pressure.txt", "a"); fopen_s(&t3p, "tank3_pressure.txt", "a"); fopen_s(&t1t, "tank1_temp.txt", "a"); fopen_s(&t2t, "tank2_temp.txt", "a"); fopen_s(&t3t, "tank3_temp.txt", "a"); //Factors and offsets to get real numbers in C and PSI double temp_factor = 0.217325; double temp_offset = -61.1482; double pressure_factor = 7.93457; double pressure_offset = -812.486; //parse the message into appropriate values double tank1_temp = parse(0, 10, data); double tank2_temp = parse(10, 10, data); double tank3_temp = parse(20, 10, data); double tank1_pressure = parse(30, 10, data); double tank2_pressure = parse(40, 10, data); double tank3_pressure = parse(50, 10, data); //perform necessary math corrections to "raw" data

tank1_temp = (tank1_temp * temp_factor) + temp_offset; tank2_temp = (tank2_temp * temp_factor) + temp_offset; tank3_temp = (tank3_temp * temp_factor) + temp_offset; tank1_pressure = (tank1_pressure * pressure_factor) + pressure_offset; tank2_pressure = (tank2_pressure * pressure_factor) + pressure_offset; tank3_pressure = (tank3_pressure * pressure_factor) + pressure_offset; //Forget JSON! Using C++ only ifstream JSON; ofstream tempJSON; JSON.open("target.json"); tempJSON.open("temp_target.json"); int count = 0; string word; //JSON >> first; while (!JSON.eof()){ getline(JSON, word); tempJSON << word << endl; if (word.find("tank1_temp") != string::npos){ tempJSON << "\t\t" << tank1_temp << ", " << endl; } if (word.find("tank2_temp") != string::npos){ tempJSON << "\t\t" << tank2_temp << ", " << endl; } if (word.find("tank3_temp") != string::npos){ tempJSON << "\t\t" << tank3_temp << ", " << endl; } if (word.find("tank1_pressure") != string::npos){ tempJSON << "\t\t" << tank1_pressure << ", " << endl; } if (word.find("tank2_pressure") != string::npos){ tempJSON << "\t\t" << tank2_pressure << ", " << endl; } if (word.find("tank3_pressure") != string::npos){ tempJSON << "\t\t" << tank3_pressure << ", " << endl; } } JSON.close(); tempJSON.close(); remove("target.json"); rename("temp_target.json", "target.json"); } // Filters the CAN signals for signals that will be displayed on the data graphs static void canRead(int handle){ long int id; //Node ID unsigned char data[8]; unsigned int dlc, flags; unsigned long timeStamp; canStatus stat; FILE *f; fopen_s(&f, "Generic_Data.txt", "a"); //while loop that reads from Kvaser CAN buffer for (int i = 0; i<1000; i++){ do { stat = canRead(handle, &id, &data, &dlc, &flags, &timeStamp); if (stat != canOK) cout << "There was an read error"; //hex 102 = dec 258 if (id == 258){ htank(data); } //Battery Temperature stuff else if (id == 1072) batteryTemp(data); else if (id == 1040) highVolt(data); else if (id == 470)

twelveVolt(data); else { printf("\nI found a generic signal!!!\n"); printf("and here is the message: "); //print the H2 tank message for (int i = 0; i < 8; i++){ printf("%3u, ", data[i]); fprintf(f, "%3u, ", data[i]); } fprintf(f, "Id: %x\n", id); } } while (stat == canOK); // Sleep(50); } fclose(f); } void cleanUp(int handle) { canClose(handle); } void Class1::main(){ int handle0; //CSU LAN Handle number is 0. GM handle is 1 // Put the handle online at a specific baud rate, tell the handle to only listen to CAN handle0 = initialize(0); canRead(handle0); // Close what you open cleanUp(handle0); }

HTML and CSS

AllTest.html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!--Call JavaScript files--> <link href="/css/main.css" rel='stylesheet' /> <script src="js/energy_chart.js"></script> <script src="js/jquery-2.1.0.min.js"></script> <script src="js/Chart.min.js"></script> <title>jQuery Tabs Demo</title> <style> * { padding: 0; margin: 0; } html { font-family: sans-serif; font-size: 14px; } a { text-decoration: none; } p, h3 { margin-bottom: 15px; } div { height: 100%; } /*Create Top Tabs into list and give them properties*/ .TopTabs li { list-style: none; display: inline;

} .TopTabs { font-size: 18pt; text-align: center; color: black; line-height: 60px; min-width: 30px; max-height: 50px; } .TopTabs a { padding-right: 0px; padding-left: 0px; font-size: 18pt; color: #000; /* display: inline-block; width: 200px; height: 178px; color: #000; text-decoration: none; */ } .HomeTab { float: left; position: absolute; width: 16.66%; height: 18%; left: 0px; top: 0px; } .SettingsTab { float: left; position: absolute; width: 16.66%; height: 18%; left: 16.66%; top: 0px; } .MusicTab { float: left; position: absolute; width: 16.66%; height: 18%; left: 33.33%; top: 0px; } .HVACTab { float: left; position: absolute; width: 16.66%; height: 18%; left: 50%; top: 0px; } .NavigationTab { float: left; position: absolute; width: 16.66%; height: 18%; left: 66.66%; top: 0px; } .DataTab { float: left; position: absolute;

width: 16.66%; height: 18%; left: 83.33%; top: 0px; } .Sub_Tabs { height: 90px; width: 175px; position: relative; left: 10px; top: 20px; } .Sub_Tab_Home { background-color: #CCFF99; border-style: solid; } .Sub_Tab_Settings { background-color: #3385D6; border-style: solid; } .Sub_Tab_Music { background-color: #944DFF; border-style: solid; } .Sub_Tab_HVAC { background-color: #FF8080; border-style: solid; } .Sub_Tab_Nav { background-color: #FFB547; border-style: solid; } .Sub_Tab_Data { background-color: #FFFFC2; border-style: solid; } .Body_Container { position: absolute; top: 18%; left: 0px; width: 100%; height: 66%; } .TopTabs .HomeTab, #HomeBody { background-color: #A4F750; } .TopTabs .SettingsTab, #SettingsBody { background-color: #65C9EB; } .TopTabs .MusicTab, #MusicBody { background-color: #B88CE3; } .TopTabs .HVACTab, #HVACBody { background-color: #F98C8C; } .TopTabs .NavigationTab, #NavigationBody { background-color: #FDBE60; } .TopTabs .DataTab, #DataBody { background-color: #F7F785; } .TopTabImage_Home { width: 125px; height: 125px; padding-top: 20px; }

.TopTabImage_Settings { width: 125px; height: 125px; padding-top: 20px; } .TopTabImage_Music { width: 125px; height: 125px; padding-top: 20px; } .TopTabImage_HVAC { width: 125px; height: 125px; padding-top: 20px; } .TopTabImage_Nav { width: 125px; height: 125px; padding-top: 20px; } .TopTabImage_Data { width: 125px; height: 125px; padding-top: 20px; } </style> <script src="js/jquery-2.1.0.min.js"></script> <!--<script> //var nativeobject = CANComponent.Class1(); //var object = nativeobject.main(); //collect CAN information, store it in file //Original parameter helloString.data, "Title" (new Windows.UI.Popups.MessageDialog(object, "The current handle number is: ")).showAsync().done(); </script>--> <script> // Wait until the DOM has loaded before querying the document $(document).ready(function () { $('ul.TopTabs').each(function () { // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = $(this).find('a'); // If the location.hash matches one of the links, use that as the active tab. // If no match is found, use the first link as the initial active tab. $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]); $active.addClass('active'); $content = $($active[0].hash); // Hide the remaining content $links.not($active).each(function () { $(this.hash).hide(); }); // Bind the click event handler $(this).on('click', 'a', function (e) { // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $(this.hash); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); }); }); </script>

</head> <body> <ul class='TopTabs'> <li> <a href='#HomeBody' class="HomeTab"> <img src='images/Home Settings Img.png' alt='Home Symbol' class='TopTabImage_Home'> <div class="Lable">HOME</div> </a> </li> <li> <a href='#SettingsBody' class="SettingsTab"> <img src='images/Settings_Edited.png' alt='Settings Symbol' class='TopTabImage_Settings'> <div class="Lable">SETTINGS</div> </a> </li> <li> <a href='#MusicBody' class="MusicTab"> <img src='/images/Music_Edited.png' alt='Music Symbol' class='TopTabImage_Music'> <div class="Lable">MUSIC</div> </a> </li> <li> <a href='#HVACBody' class="HVACTab"> <img src='/images/HVAC_Edited.png' alt='HVAC Symbol' class='TopTabImage_HVAC'> <div class="Lable">HVAC </div> </a> </li> <li> <a href='#NavigationBody' class="NavigationTab"> <img src='/images/Navigation_Edited.png' alt='Navigation Symbol' class='TopTabImage_Nav'> <div class="Lable">NAVIGATE</div> </a> </li> <li> <a href='#DataBody' class="DataTab"> <img src='/images/Energy_Edited.png' alt='Data Symbol' class='TopTabImage_Data'> <div class="Lable">DATA</div> </a> </li> </ul> <div class="Body_Container"> <div id='HomeBody'> <div class='Sub_Tabs'> <div class='Sub_Tab_Home'> <div class='Sub_Tab_Home' id="Tab_1"> <h2>Tab 1</h2> </div> <br /> <br /> <div class='Sub_Tab_Home' id="Tab_2"> <h2>Tab 2</h2> </div> <br /> <br /> <div class="Sub_Tab_Home" id="Tab_3"> <h2>Tab 3</h2> </div> <br /> <br /> <div class="Sub_Tab_Home" id="Tab_4"> <h2>Tab 4</h2> </div> <br /> <br /> <div class="Sub_Tab_Home" id="Tab_5"> <h2>Tab 5</h2>

</div> <br /> <br /> <div class="Sub_Tab_Home" id="Tab_6"> <h2>Tab 6</h2> </div> </div> </div> </div> <div id='SettingsBody'> <div class='Sub_Tabs'> <div class='Sub_Tab_Settings'> <div class='Sub_Tab_Settings' id="Tab_1"> <h2>Tab 1</h2> </div> <br /> <br /> <div class='Sub_Tab_Settings' id="Tab_2"> <h2>Tab 2</h2> </div> <br /> <br /> <div class='Sub_Tab_Settings' id="Tab_3"> <h2>Tab 3</h2> </div> <br /> <br /> <div class='Sub_Tab_Settings' id="Tab_4"> <h2>Tab 4</h2> </div> <br /> <br /> <div class='Sub_Tab_Settings' id="Tab_5"> <h2>Tab 5</h2> </div> <br /> <br /> <div class='Sub_Tab_Settings' id="Tab_6"> <h2>Tab 6</h2> </div> </div> </div> <!--Creat the theme representation for background-color changes--> <button class="Colors" id="HomeColor" style="width: 20%; top:5%; left:30%;">Home Color</button> <button class="Colors" id="SettingColor" style="width: 20%; top:20%; left:30%;">Setting Color</button> <button class="Colors" id="MusicColor" style="width: 20%; top:35%; left:30%;">Music Color</button> <button class="Colors" id="HVACColor" style="width: 20%; top:50%; left:30%;">HVAC Color</button> <button class="Colors" id="NavigateColor" style="width: 20%; top:65%; left:30%;">Navigate Color</button> <button class="Colors" id="DataColor" style="width: 20%; top:80%; left:30%;">Data Color</button> <div class="Colors" id="Green1" style="width:10%; top:5%; left:50%; background-color: #99FF99;"></div> <div class="Colors" id="Green2" style="width:10%; top:5%; left:60%; background-color: #66FF66;"></div> <div class="Colors" id="Green3" style="width:10%; top:5%; left:70%; background-color: #33CC33;"></div> <div class="Colors" id="Green4" style="width:10%; top:5%; left:80%; background-color: #009933;"></div> <div class="Colors" id="Green5" style="width:10%; top:5%; left:90%; background-color: #336600;"></div> <div class="Colors" id="Blue1" style="width:10%; top:20%; left:50%; background-color: #66FFFF;"></div> <div class="Colors" id="Blue2" style="width:10%; top:20%; left:60%; background-color: #33CCFF;"></div> <div class="Colors" id="Blue3" style="width:10%; top:20%; left:70%; background-color: #0099FF;"></div> <div class="Colors" id="Blue4" style="width:10%; top:20%; left:80%; background-color: #0033CC;"></div> <div class="Colors" id="Blue5" style="width:10%; top:20%; left:90%; background-color: #000099;"></div> <div class="Colors" id="Purple1" style="width:10%; top:35%; left:50%; background-color: #CC99FF;"></div> <div class="Colors" id="Purple2" style="width:10%; top:35%; left:60%; background-color: #9999FF;"></div> <div class="Colors" id="Purple3" style="width:10%; top:35%; left:70%; background-color: #9966FF;"></div> <div class="Colors" id="Purple4" style="width:10%; top:35%; left:80%; background-color: #9933FF;"></div> <div class="Colors" id="Purple5" style="width:10%; top:35%; left:90%; background-color: #6600CC;"></div> <div class="Colors" id="Red1" style="width:10%; top:50%; left:50%; background-color: #FF0066;"></div> <div class="Colors" id="Red2" style="width:10%; top:50%; left:60%; background-color: #FF5050;"></div>

<div class="Colors" id="Red3" style="width:10%; top:50%; left:70%; background-color: #FF0000;"></div> <div class="Colors" id="Red4" style="width:10%; top:50%; left:80%; background-color: #CC0000;"></div> <div class="Colors" id="Red5" style="width:10%; top:50%; left:90%; background-color: #990000;"></div> <div class="Colors" id="Orange1" style="width:10%; top:65%; left:50%; background-color: #FFCC66;"></div> <div class="Colors" id="Orange2" style="width:10%; top:65%; left:60%; background-color: #FFCC33;"></div> <div class="Colors" id="Orange3" style="width:10%; top:65%; left:70%; background-color: #FF9933;"></div> <div class="Colors" id="Orange4" style="width:10%; top:65%; left:80%; background-color: #FF9900;"></div> <div class="Colors" id="Orange5" style="width:10%; top:65%; left:90%; background-color: #CC6600;"></div> <div class="Colors" id="Yellow1" style="width:10%; top:80%; left:50%; background-color: #FFFF99;"></div> <div class="Colors" id="Yellow2" style="width:10%; top:80%; left:60%; background-color: #FFFF66;"></div> <div class="Colors" id="Yellow3" style="width:10%; top:80%; left:70%; background-color: #FFFF00;"></div> <div class="Colors" id="Yellow4" style="width:10%; top:80%; left:80%; background-color: #CC9900;"></div> <div class="Colors" id="Yellow5" style="width:10%; top:80%; left:90%; background-color: #663300;"></div> <script src="js/SettingsColorHandler.js"></script> </div> <div id='MusicBody' <div class='Sub_Tabs'> <div class='Sub_Tab_Music'> <div class='Sub_Tab_Music' id="Tab_1"> <h2>Tab 1</h2> </div> <br /> <br /> <div class='Sub_Tab_Music' id="Tab_2"> <h2>Tab 2</h2> </div> <br /> <br /> <div class='Sub_Tab_Music' id="Tab_3"> <h2>Tab 3</h2> </div> <br /> <br /> <div class='Sub_Tab_Music' id="Tab_4"> <h2>Tab 4</h2> </div> <br /> <br /> <div class='Sub_Tab_Music' id="Tab_5"> <h2>Tab 5</h2> </div> <br /> <br /> <div class='Sub_Tab_Music' id="Tab_6"> <h2>Tab 6</h2> </div> </div> </div> </div> <div id='HVACBody'> <!--Buttons to activate HVAC controls--> <button id="AC_Button" type="button" style=" font-size: 12pt; border-radius:25px; width: 25%; height: 15%; position: absolute; left: 37.5%; top: 5%; font-size: 30pt; text-align:center"> A/C Max </button> <button id="Pannel_Button" type="button" style="border-radius: 25px; width: 25%; height: 15%; position: absolute; left: 20%; top: 25%; font-size: 30pt;"> Panel </button> <button id="Floor_Button" type="button" style="border-radius: 25px; width: 25%; height: 15%; position: absolute; left: 55%; top: 25%; font-size: 30pt;"> Floor </button> <button id="PanelFloor_Button" type="button" style="border-radius: 25px; width: 25%; height: 15%; position: absolute; left: 20%; top: 75%; font-size: 30pt;"> Panel/Floor

</button> <button id="Defrost_Button" type="button" style="border-radius: 25px; width: 25%; height: 15%; position: absolute; left: 55%; top: 75%; font-size: 30pt;"> Defrost </button> <button id="FanUp" type="button" style="border-radius: 15px; width: 17%; height: 10%; position: absolute; left: 4%; top: 45%; font-size: 30pt;"> Up </button> <button id="FanDown" type="button" style="border-radius: 15px; width: 17%; height: 10%; position: absolute; left: 4%; top: 60%; font-size: 30pt;"> Down </button> <div id="Fan0" style="position:absolute; width: 8%; height: 15%; top: 48.5%; left: 25%; background-color: white;"> </div> <div id="Fan1" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 34%; background-color: white;"> </div> <div id="Fan2" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 43%; background-color: white;"> </div> <div id="Fan3" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 52%; background-color: white;"> </div> <div id="Fan4" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 61%; background-color: white;"> </div> <div id="Fan5" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 70%; background-color: white;"> </div> <div id="Fan6" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 79%; background-color: white;"> </div> <div id="Fan7" style="position: absolute; width: 8%; height: 15%; top: 48.5%; left: 88%; background-color: white;"> </div> <script src="js/HVACTabHandlers.js"></script> </div> <div id='NavigationBody'> <div class='Sub_Tabs'> <div class='Sub_Tab_Nav'> <div class='Sub_Tab_Nav' id="Tab_1"> <h2>Tab 1</h2> </div> <br /> <br /> <div class='Sub_Tab_Nav' id="Tab_2"> <h2>Tab 2</h2> </div> <br /> <br /> <div class='Sub_Tab_Nav' id="Tab_3"> <h2>Tab 3</h2> </div> <br /> <br /> <div class='Sub_Tab_Nav' id="Tab_4"> <h2>Tab 4</h2> </div> <br /> <br /> <div class='Sub_Tab_Nav' id="Tab_5"> <h2>Tab 5</h2> </div> <br /> <br /> <div class='Sub_Tab_Nav' id="Tab_6"> <h2>Tab 6</h2> </div> </div> </div> </div> <div id='DataBody'> <div class='Sub_Tabs'> <div class='Sub_Tab_Data'>

<div class='Sub_Tab_Data' id="High_Voltage"> <h2>High Voltage</h2> </div> <br /> <br /> <div class='Sub_Tab_Data' id="12V_Battery"> <h2>Car Battery</h2> </div> <br /> <br /> <div class='Sub_Tab_Data' id="Hydrogen"> <h2>Hydrogen</h2> </div> <br /> <br /> <div class='Sub_Tab_Data' id="EcoCAR"> <h2>EcoCAR 2</h2> </div> <br /> <br /> <div class='Sub_Tab_Data' id="Tab_5"> <h2>Tab 5</h2> </div> <br /> <br /> <div class='Sub_Tab_Data' id="Tab_6"> <h2>Tab 6</h2> </div> </div> </div> <div id="data0"> </div> <div id="data1"> </div> <div id="data2"> </div> <div id="data3"> </div> <div id="data4"> </div> <div id="data5"> </div> <div id="data6"> </div> <div id='graph0'> <canvas id="energy_canvas0" width="525" height="300"></canvas> </div> <div id='graph1'> <canvas id="energy_canvas1" width="525" height="300"></canvas> </div> <script src="js/EnergyTabHandlers.js"></script> </div> </div> <div class="Bottom_Bar"> <div id="Battery"> <img id="batteryImage" src=""> <div id="Battery_Text"></div> <script> var batteryPercentage = 98; setInterval(function () { if (batteryPercentage >= 95) { document.getElementById("batteryImage").src = "/images/Battery-Levels-100-PercentT.png"; } else if (batteryPercentage >= 85) { document.getElementById("batteryImage").src = "images/Battery Levels 90 Percent.png"; }

else if (batteryPercentage >= 75) { document.getElementById("batteryImage").src = "images/Battery Levels 80 Percent copy.png"; } else if (batteryPercentage >= 65) { document.getElementById("batteryImage").src = "images/Battery Levels 70 Percent copy.png"; } else if (batteryPercentage >= 55) { document.getElementById("batteryImage").src = "/images/Battery Levels 60 Percent copy.png"; } else if (batteryPercentage >= 45) { document.getElementById("batteryImage").src = "/images/Battery Levels 50 Percent copy.png"; } else if (batteryPercentage >= 35) { document.getElementById("batteryImage").src = "/images/Battery Levels 40 Percent.png"; } else if (batteryPercentage >= 25) { document.getElementById("batteryImage").src = "/images/Battery Levels 30 Percent copy.png"; } else if (batteryPercentage >= 15) { document.getElementById("batteryImage").src = "/images/Battery Levels 20 Percent copy.png"; } else if (batteryPercentage >= 5) { document.getElementById("batteryImage").src = "/images/Battery Levels 10 Percent copy.png"; } else document.getElementById("batteryImage").src = "/images/Battery-Levels-0-Percent.png"; }, 500); //setInterval(function () { // batteryPercentage = batteryPercentage + 1; //}, 1000); setInterval(function () { document.getElementById("Battery_Text").innerHTML = batteryPercentage + "%"; }, 1000); </script> </div> <div id="Clock"> <script> setInterval(function () { var date = new Date(); var am_pm; var hour = date.getHours(); var minute = date.getMinutes(); if (hour > 12) { am_pm = "PM"; hour = hour - 12; } else { am_pm = "AM"; } if (minute < 10) { document.getElementById("Clock").innerHTML = hour + ":0" + minute + " " + am_pm; } else document.getElementById("Clock").innerHTML = hour + ":" + minute + " " + am_pm; }, 1000); </script> </div> </div> </body> </html>

main.css .Bottom_Bar { border-style:solid; position:absolute; left:0px;

top:84%; height:16%; width:100%; } .Colors { font-size: 28pt; position: absolute; height: 10%; background-color: white; text-align:center; } /* ID's:*/ #data0 { opacity: 1 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:65%; height:8%; position:absolute; left:30%; top:5%; } #data1 { font-size: 30pt; text-align: center; background-color:#FFFFC2; width:65%; height:8%; position:absolute; left:30%; top:50%; } #graph0 { position:absolute; left:30%; top:15%; } #graph1 { Position:absolute; left:30%; top: 60%; } #data2 { opacity: 0 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:700px; height:90px; position:absolute; left:350px; top:130px; } #data3 { opacity: 0 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:700px; height:90px; position:absolute; left:350px; top:240px; } #data4 {

opacity: 0 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:700px; height:90px; position:absolute; left:350px; top:350px; } #data5 { opacity: 0 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:700px; height:90px; position:absolute; left:350px; top:460px; } #data6 { opacity: 0 ; font-size: 30pt; text-align: center; background-color:#FFFFC2; width:700px; height:90px; position:absolute; left:350px; top:570px; } #Clock { font-size: 44pt; height:60%; width:33.3%; top:30%; left:33.3%; text-align: center; position:absolute; } #Battery { font-size:48pt; height: 100%; width: 33.3%; top: 0px; left:66.6%; text-align:center; position:absolute; } #batteryImage { top: 5%; height: 50%; width:90%; }

JavaScript

EnergyTabHandlers.js //Create a new energy chart class to help us //Turn the different graphs on and off var energyChart = new EnergyChart("energy_canvas0"); var energyChart1 = new EnergyChart("energy_canvas1"); var HighVoltageData = new Array(0, 1, 2, 3);

//Create the different chart colors and data //setInterval(function() //{ // //HighVoltageData.push(CANComponent.Class1().main().HV_volt); // HighVoltageData = (3,2,1,0); // energyChart1.toggleLine(highVoltageSettings); // //HighVoltageCurrentData.push(object.HV_amp); //}, 10000) //Create the different chart colors and data var highVoltageSettings = { name: "High_Voltage", fillColor: "rgba(220,100,100,0.2)", //Red strokeColor: "rgba(220,100,100,1)", pointColor: "rgba(220,100,100,1)", pointStrokeColor: "#fff", data: HighVoltageData }; var highVoltageCurrentSettings = { name: "High_Voltage_Current", fillColor: "rgba(100,100,220,0.2)", //Blue strokeColor: "rgba(100,100,220,1)", pointColor: "rgba(100,100,220,1)", pointStrokeColor: "#fff", data: [4, 3, 2, 1] }; var hydrogenPressureSettings = { name: "Hydrogen_Pressure", fillColor: "rgba(220,100,100,0.2)", //Red strokeColor: "rgba(220,100,100,1)", pointColor: "rgba(220,100,100,1)", pointStrokeColor: "#fff", data: [1, 2, 1, 2] }; var hydrogenTempSettings = { name: "Hydrogen_Temp", fillColor: "rgba(100,100,220,0.2)", //Blue strokeColor: "rgba(100,100,220,1)", pointColor: "rgba(100,100,220,1)", pointStrokeColor: "#fff", data: [2, 1, 2, 1] }; var batteryTempSettings = { name: "Battery_Temp", fillColor: "rgba(220,220,100,0.2)", //Yellow strokeColor: "rgba(220,220,100,1)", pointColor: "rgba(220,220,100,1)", pointStrokeColor: "#fff", data: [1, 2, 2, 1] }; var batteryVoltageSettings = { name: "Battery_Voltage", fillColor: "rgba(220,100,220,0.2)", //Purple strokeColor: "rgba(220,100,220,1)", pointColor: "rgba(220,100,220,1)", pointStrokeColor: "#fff", data: [2, 1, 1, 2] }; var HV_current = highVoltageCurrentSettings.data[highVoltageCurrentSettings.data.length - 1]; var HV_voltage = highVoltageSettings.data[highVoltageSettings.data.length - 1]; var batteryVoltage = batteryVoltageSettings.data[batteryVoltageSettings.data.length - 1];

var batteryTemp = batteryTempSettings.data[batteryTempSettings.data.length - 1]; var hydrogenTemp = hydrogenTempSettings.data[hydrogenTempSettings.data.length - 1]; var hydrogenPressure = hydrogenPressureSettings.data[hydrogenPressureSettings.data.length - 1]; //Click handlers for each of the UI buttons //They just turn the graphing for that dataset on and off $("#High_Voltage").click(function (e) { document.getElementById("graph0").style.opacity = 1; document.getElementById("graph1").style.opacity = 1; document.getElementById("data2").style.opacity = 0; document.getElementById("data3").style.opacity = 0; document.getElementById("data4").style.opacity = 0; document.getElementById("data5").style.opacity = 0; document.getElementById("data6").style.opacity = 0; energyChart.toggleLine(highVoltageSettings); energyChart1.toggleLine(highVoltageCurrentSettings); document.getElementById("data0").innerHTML = ("High Voltage: " + HV_voltage + " V"); document.getElementById("data1").innerHTML = ("High Voltage Current: " + HV_current + " A"); }); $("#12V_Battery").click(function (e) { document.getElementById("graph0").style.opacity = 1; document.getElementById("graph1").style.opacity = 1; document.getElementById("data2").style.opacity = 0; document.getElementById("data3").style.opacity = 0; document.getElementById("data4").style.opacity = 0; document.getElementById("data5").style.opacity = 0; document.getElementById("data6").style.opacity = 0; energyChart.toggleLine(batteryVoltageSettings); energyChart1.toggleLine(batteryTempSettings); document.getElementById("data0").innerHTML = ("Battery Voltage: " + batteryVoltage + " V"); document.getElementById("data1").innerHTML = ("Battery Temperature: " + batteryTemp + " C"); }); $("#Hydrogen").click(function (e) { document.getElementById("graph0").style.opacity = 1; document.getElementById("graph1").style.opacity = 1; document.getElementById("data2").style.opacity = 0; document.getElementById("data3").style.opacity = 0; document.getElementById("data4").style.opacity = 0; document.getElementById("data5").style.opacity = 0; document.getElementById("data6").style.opacity = 0; energyChart.toggleLine(hydrogenTempSettings); energyChart1.toggleLine(hydrogenPressureSettings); document.getElementById("data0").innerHTML = ("Hydrogen Temperature: " + hydrogenTemp + " C"); document.getElementById("data1").innerHTML = ("Hydrogen Pressure: " + hydrogenPressure + " psi"); }); $("#EcoCAR").click(function (e) { document.getElementById("graph0").style.opacity = 0; document.getElementById("graph1").style.opacity = 0; document.getElementById("data2").style.opacity = 1; document.getElementById("data3").style.opacity = 1; document.getElementById("data4").style.opacity = 1; document.getElementById("data5").style.opacity = 1; document.getElementById("data6").style.opacity = 1; document.getElementById("data2").innerHTML = ("High Voltage Current: " + HV_current + " A"); document.getElementById("data0").innerHTML = ("High Voltage: " + HV_voltage + " V"); document.getElementById("data3").innerHTML = ("Battery Voltage: " + batteryVoltage + " V"); document.getElementById("data4").innerHTML = ("Battery Temperature: " + batteryTemp + " C"); document.getElementById("data5").innerHTML = ("Hydrogen Temperature: " + hydrogenTemp + " C"); document.getElementById("data6").innerHTML = ("Hydrogen Pressure: " + hydrogenPressure + " psi"); document.getElementById("data1").innerHTML = ("Fuel Cell Voltage: " + 30 + " V"); });

energy_chart.js

/*********Class for manipulating and displaying energy graph***************/ var EnergyChart = function (id, optionalChartData, optionalChartOptions) { this.ctx = document.getElementById(id).getContext("2d"); var chart = new Chart(this.ctx); //Use passed in data if it was passed in if (optionalChartData !== undefined) { this.chartData = optionalChartData; } else { this.chartData = { labels: ["1", "2", "3", "4"], datasets: [] }; } //Use passed in options if they were passed in if (optionalChartOptions !== undefined) { this.chartOptions = optionalChartOptions; } else { this.chartOptions = { animation: false }; } this.lineGraph = chart.Line(this.chartData, this.chartOptions); //Redraw chart with data and options passed in var reDrawChart = function (inChartData, options) { this.lineGraph = chart.Line(inChartData, options); } /* //Add a single x,y pair to the data this.addData = function (dataX, dataValue) { this.chartData.labels.push(dataX); this.chartData.datasets[0].data.push(dataValue); reDrawChart(this.chartData, this.chartOptions); } */ //Change data used in chart and refresh chart this.changeChartData = function (inData) { this.chartData = inData; reDrawChart(this.chartData, this.chartOptions); } //Change options used in chart and refresh chart this.changeChartOptions = function (inOptions) { this.chartOptions = inOptions; reDrawChart(this.chartData, this.chartOptions); } /* //Remove a data set if it is in the chart this.removeDataIfExists = function(fieldName) { for (var x = 0; x < this.chartData.datasets.length; x++) { if (this.chartData.datasets[x].name === fieldName) { this.chartData.datasets.splice(x, 1); this.changeChartData(this.chartData); return true; } } } */ this.removeAllDatasets = function () { this.chartData.datasets.splice(0, this.chartData.datasets.length); } //Turns on and off the particular line in the chart //according to what is passed in this.toggleLine = function (settings) { this.removeAllDatasets() this.chartData.datasets.push(settings);

this.changeChartData(this.chartData); } }

HVACTabHandlers.js var AC_On = false; var Pannel_On = false; var Floor_On = false; var PannelFloor_On = false; var Defrost_On = false; var FanLevel = 0; $("#AC_Button").click(function (e) { if (AC_On == false) { AC_On = true; } else AC_On = false; }); $("#Pannel_Button").click(function (e) { if (Pannel_On == false) { Pannel_On = true; } else Pannel_On = false; }); $("#Floor_Button").click(function (e) { if (Floor_On == false) { Floor_On = true; } else Floor_On = false; }); $("#PannelFloor_Button").click(function (e) { if (PannelFloor_On == false) { PannelFloor_On = true; } else PannelFloor_On = false; }); $("#Defrost_Button").click(function (e) { if (Defrost_On == false) { Defrost_On = true; } else Defrost_On = false; }); $("#FanUp").click(function (e) { if (FanLevel <= 7) { FanLevel++; } switch (FanLevel) { case 1: { document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'white'; //document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 2: { //document.getElementById("Fan0").style.backgroundColor = 'black'; document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white';

//document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 3: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 4: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 5: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; document.getElementById("Fan4").style.backgroundColor = 'black'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 6: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; document.getElementById("Fan5").style.backgroundColor = 'black'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 7: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; //document.getElementById("Fan5").style.backgroundColor = 'black'; document.getElementById("Fan6").style.backgroundColor = 'black'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 8: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; //document.getElementById("Fan5").style.backgroundColor = 'black';

//document.getElementById("Fan6").style.backgroundColor = 'black'; document.getElementById("Fan7").style.backgroundColor = 'black'; } break; default: { document.getElementById("Fan0").style.backgroundColor = 'white'; //document.getElementById("Fan1").style.backgroundColor = 'white'; //document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; } }); $("#FanDown").click(function (e) { if (FanLevel > 0) { FanLevel--; } switch (FanLevel) { case 1: { //document.getElementById("Fan0").style.backgroundColor = 'black'; document.getElementById("Fan1").style.backgroundColor = 'white'; //document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 2: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 3: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 4: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break;

case 5: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 6: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; //document.getElementById("Fan5").style.backgroundColor = 'black'; document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; case 7: { //document.getElementById("Fan0").style.backgroundColor = 'black'; //document.getElementById("Fan1").style.backgroundColor = 'black'; //document.getElementById("Fan2").style.backgroundColor = 'black'; //document.getElementById("Fan3").style.backgroundColor = 'black'; //document.getElementById("Fan4").style.backgroundColor = 'black'; //document.getElementById("Fan5").style.backgroundColor = 'black'; //document.getElementById("Fan6").style.backgroundColor = 'black'; document.getElementById("Fan7").style.backgroundColor = 'white'; } break; default: { document.getElementById("Fan0").style.backgroundColor = 'white'; //document.getElementById("Fan1").style.backgroundColor = 'white'; //document.getElementById("Fan2").style.backgroundColor = 'white'; //document.getElementById("Fan3").style.backgroundColor = 'white'; //document.getElementById("Fan4").style.backgroundColor = 'white'; //document.getElementById("Fan5").style.backgroundColor = 'white'; //document.getElementById("Fan6").style.backgroundColor = 'white'; //document.getElementById("Fan7").style.backgroundColor = 'white'; } break; } });

SettingsColorHandler.js var home = document.getElementsByClassName("HomeTab"); var setting = document.getElementsByClassName("SettingsTab"); var music = document.getElementsByClassName("MusicTab"); var hvac = document.getElementsByClassName("HVACTab"); var navigate = document.getElementsByClassName("NavigationTab"); var data = document.getElementsByClassName("DataTab"); $("#HomeColor").click(function () { $("#Green1").click(function () { document.getElementById("HomeBody").style.backgroundColor = "#99FF99"; home[0].style.backgroundColor = "#99FF99"; }); $("#Green2").click(function () { document.getElementById("HomeBody").style.backgroundColor = "#66FF66"; home[0].style.backgroundColor = "#66FF66"; }); $("#Green3").click(function () {

document.getElementById("HomeBody").style.backgroundColor = "#33CC33"; home[0].style.backgroundColor = "#33CC33"; }); $("#Green4").click(function () { document.getElementById("HomeBody").style.backgroundColor = "#009933"; home[0].style.backgroundColor = "#009933"; }) $("#Green5").click(function () { document.getElementById("HomeBody").style.backgroundColor = "#336600"; home[0].style.backgroundColor = "#336600"; }) }) $("#SettingColor").click(function () { $("#Blue1").click(function () { document.getElementById("SettingsBody").style.backgroundColor = "#66FFFF"; setting[0].style.backgroundColor = "#66FFFF"; }); $("#Blue2").click(function () { document.getElementById("SettingsBody").style.backgroundColor = "#33CCFF"; setting[0].style.backgroundColor = "#33CCFF"; }); $("#Blue3").click(function () { document.getElementById("SettingsBody").style.backgroundColor = "#0099FF"; setting[0].style.backgroundColor = "#0099FF"; }); $("#Blue4").click(function () { document.getElementById("SettingsBody").style.backgroundColor = "#0033CC"; setting[0].style.backgroundColor = "#0033CC"; }) $("#Blue5").click(function () { document.getElementById("SettingsBody").style.backgroundColor = "#000099"; setting[0].style.backgroundColor = "#000099"; }) }) $("#MusicColor").click(function () { $("#Purple1").click(function () { document.getElementById("MusicBody").style.backgroundColor = "#CC99FF"; music[0].style.backgroundColor = "#CC99FF"; }); $("#Purple2").click(function () { document.getElementById("MusicBody").style.backgroundColor = "#9999FF"; music[0].style.backgroundColor = "#9999FF"; }); $("#Purple3").click(function () { document.getElementById("MusicBody").style.backgroundColor = "#9966FF"; music[0].style.backgroundColor = "#9966FF"; }); $("#Purple4").click(function () { document.getElementById("MusicBody").style.backgroundColor = "#9933FF"; music[0].style.backgroundColor = "#9933FF"; }) $("#Purple5").click(function () { document.getElementById("MusicBody").style.backgroundColor = "#6600CC"; music[0].style.backgroundColor = "#6600CC"; }) })