MIDDLE EAST TECHNICAL UNIVERSITY

NORTHERN CYPRUS CAMPUS

Computer Engineering Program

CNG 492

Final Report

Name of Students : Serkan Karabulut

: Mehmet Can Atalay

Name of the Project : ViSTA

Table of Contents 
   
Introduction ................................................................................................................................................. 5 
What is ViSTA? .......................................................................................................................................... 5 
Why this project is being developed? ........................................................................................................ 5 
How it is being achieved? ......................................................................................................................... 5 
Backgrounds, Aims & Organization .......................................................................................................... 5 
Formulation of Design Problem ................................................................................................................ 5 
Constraints ................................................................................................................................................... 6 
System Requirements Specification ........................................................................................................... 7 
Functional Requirements .......................................................................................................................... 7 
Non Functional Requirements ................................................................................................................... 7 
Performance Requirements ................................................................................................................... 7 
Safety Requirements .............................................................................................................................. 7 
Graphical User Interface ............................................................................................................................ 8 
System Models ............................................................................................................................................. 8 
Architecture Diagram ................................................................................................................................ 8 
System Process Model ............................................................................................................................. 11 
Use Case Diagram .................................................................................................................................. 13 
Sequence Diagram .................................................................................................................................. 14 
Context Diagram ..................................................................................................................................... 15 
Data Flow Diagrams ............................................................................................................................... 15 
List of Functions ...................................................................................................................................... 17 
Special Data Structure ............................................................................................................................ 19 
Testing Plan ............................................................................................................................................... 19 
Testing Strategies .................................................................................................................................... 19 
Test Items ................................................................................................................................................. 19 
Summary of Features to be Tested .......................................................................................................... 20 
Summary of Features not to be Tested .................................................................................................... 20 
Item Pass-Fail Criteria ........................................................................................................................... 20 
Test Schedule ........................................................................................................................................... 21 
Testing Report ........................................................................................................................................... 21 

Test Items ..................................................................................................................................................... 21 
Summary of Completed Tests .................................................................................................................. 24 
Summary of Failed Tests ......................................................................................................................... 25 
Software Quality Attributes ..................................................................................................................... 25 
Reliability ................................................................................................................................................ 25 
Robustness ............................................................................................................................................... 25 
Usability .................................................................................................................................................. 25 
Maintainability ........................................................................................................................................ 25 
Project Management ................................................................................................................................. 26 
Assumptions ............................................................................................................................................. 26 
Stake Holders .......................................................................................................................................... 26 
Project Estimation ................................................................................................................................... 26 
Functional Points Estimation .............................................................................................................. 26 
Non-Functional Points ........................................................................................................................ 27 
Computation ........................................................................................................................................ 27 
Project Tasks & Durations ...................................................................................................................... 28 
Milestones ................................................................................................................................................ 28 
GANTT Chart .......................................................................................................................................... 29 
Task Allocation Chart ............................................................................................................................. 29 
Activity Diagram ..................................................................................................................................... 30 
User Manual ............................................................................................................................................... 31 
Deployment Manual .................................................................................................................................. 31 
Installation Manual ................................................................................................................................... 31 
REFERENCES .......................................................................................................................................... 32 
 
 
   

TABLE OF FIGURES 
 
Figure 1: GUI of ViSTA ............................................................................................................................... 8 
Figure 2: Architecture Diagram Level 0 of ViSTA ....................................................................................... 8 
Figure 3: Architecture Diagram Level 1 of ViSTA ....................................................................................... 9 
Figure 4: Architecture Diagram Level 2 of ViSTA ..................................................................................... 10 
Figure 5: System Design ............................................................................................................................. 11 
Figure 6: System Modules ........................................................................................................................... 12 
Figure 7: Use Case Diagram of ViSTA ....................................................................................................... 13 
Figure 8: Sequence Diagram of ViSTA ...................................................................................................... 14 
Figure 9: Context Diagram .......................................................................................................................... 15 
Figure 10: Tool Module Data Flow Diagram .............................................................................................. 15 
Figure 11: Data Module Data Flow Diagram .............................................................................................. 16 
Figure 12: Process Module Data Flow Diagram ......................................................................................... 17 
Figure 13: Visualization Module Data Flow Diagram ................................................................................ 17 
Figure 14: One-participant Performance Measures ..................................................................................... 23 
Figure 15: Two-participant performance measures ..................................................................................... 24 
Figure 16: Gantt chart .................................................................................................................................. 29 
Figure 17: Task allocation chart .................................................................................................................. 29 
Figure 18: Activity diagram ........................................................................................................................ 30 
 
 
 
 
   

Introduction

This section will provide a brief description of ViSTA, and expectations of our group. In order to

describe ViSTA, we will ask three questions to ourselves, and answer them. First of all, ViSTA

and it is main purpose will be explained. Also, main reason behind ViSTA will be provided.

Finally, details of development process will be described.

What is ViSTA?

ViSTA is short term for Visualization of Scanpath Trend Analysis. The main goal of the ViSTA

project is visualization of STA algorithm, and gaze map that STA algorithm applied; however,

project should be implemented in a modular way that enables other algorithms to be implemented

easily. Simply, it is a visualization tool for eye tracking data algorithms such as STA.

Why this project is being developed?

STA is a new algorithm that doesn’t have any visualization tool for itself. This is the main reason

why this project is being developed; however there are some other constraints that take this project

far advanced than being a just visualization tool for an algorithm, and that is modularity. There are

so many different visualization methods, scanpath analysis tools, algorithms, and more to come in

each year. Diversity is keyword for eye tracking, and in order to catch this trend, creating a

framework for STA that is ready for change is important.

How it is being achieved?

One of the constraints for this project is modularity, and to achieve that object oriented

programming is important. The other important constraint is diversity, and to overcome this issue

generalizing some cases, and creating standards is important. Also, selecting best visualization

methods is the most important thing in case of diversity. Lastly, for chosen visualization methods

finding best visualization tools, and using them is important. Simply, doing literature survey on

visualization methods is the most important step to achieve ViSTA.

Backgrounds, Aims & Organization

Formulation of Design Problem

The main concern about ViSTA is visualization of STA algorithm. However, only visualizing STA

algorithm is not enough, but visualizing of all raw data is also important

We have been given this project because of STA algorithm does not have its own visualization

tool. There is only text format input and output, and offline access that current implementation

uses.

There are several different visualization techniques for gaze paths and trending paths. One of the

other concern about ViSTA is researching and choosing best technique among them.

Shortly, ViSTA is about choosing best visualization technique for STA algorithm and

implementing it in an online and much more user-friendly environment.

Constraints

1. Economic: In order to build ViSTA project, we created our algorithms and used open

source JS libraries and we did not use any electronic devices. Therefore, ViSTA project

does not require any budget. As a result, economic constraint is not applicable.

2. Environmental: ViSTA project is a web based project. Main needs of the project is a

browser. For either local host or another online server, project is useable.

3. Social: Vista project can be a good pioneer for visualization of eye tracking data. For

visualization, mainly eye tracking data collectors like TOBII produce a software to

visualize own data. However, it will not work for other collectors and to use program

there is a fee. With ViSTA, visualization will be free, developable, portable and fast. For

METU NCC students there will be a chance to improve ViSTA project.

4. Political: ViSTA is a very useful tool for advertising sector. Therefore, for election

camping, ViSTA may be useful.

5. Ethical: For ViSTA project IEEE code of ethics considered.

6. Health and Safety: ViSTA project does not have health and safety constraints.

7. Manufacturability: ViSTA project does not have manufacturability constraints.

8. Sustainability: ViSTA project does not have sustainability constraints.

Literature Review

For ViSTA project, research is as important as implementation and design parts. Therefore,

especially first semester, we spent 2 to 3 month for literature review on visualization methods of

eye tracking data. In this way, we understood the concept and implemented the visualization

techniques more easily. In addition, we were able to find appropriate libraries, which we used for

visualization. Moreover, for the testing we did some literature review in order to understand

concepts, techniques and libraries of the testing. As a result, we found some libraries for testing

and we tried to write scripts, which tested units of the project.

System Requirements Specification

Functional Requirements

• A user selects processing method and an appropriate visualization method.

• A user can provide data with different data structures.

• A user can use defined tool for some processing methods.

• An admin can provide visualization methods.

• An admin can provide processing methods and appropriate converter as well as any

necessary tools.

Non Functional Requirements

Performance Requirements

Since we want to near real time visualization, we need to take following measurements:

1. Low complexity implementations

2. Effective usage of cache

3. Low size image and thumbnails

Safety Requirements

1. System will log every action

2. System will alert the admin in case of critical errors

3. Each user IP will be logged

Graphical User Interface

Figure 1GUI of ViSTA

System Models

Architecture Diagram

Figure 2Architecture Diagram Level 0 of ViSTA

Figure 3Architecture Diagram Level 1 of ViSTA

Figure 4Architecture Diagram Level 2 of ViSTA

System Process Model

As shown at Figure 2, the whole system contains different modules and subsystems, which also contains

some modules. Details of these modules are shown at figure 3.

Figure 5: System Design

Figure 6: System Modules

Use Case Diagram

Figure 7: Use Case Diagram of ViSTA

Sequence Diagram

Figure 8: Sequence Diagram of ViSTA

Context Diagram

Figure 9: Context Diagram

Data Flow Diagrams

ViSTA project is heavily based on data processing. Therefor data flow diagrams are very important since

development of this project in later stages could be very complex. Figure 6-9 shows data flow diagrams

of the system.

Figure 10: Tool Module Data Flow Diagram

Figure 11: Data Module Data Flow Diagram

Figure 12: Process Module Data Flow Diagram

Figure 13: Visualization Module Data Flow Diagram

List of Functions

• listener(String response)

• createDataSelectionList():String

• updateDataList()

• showLoader()

• removeLoader()

• controlVisualMethods()

• clearAOIs()

• drawAOIs()

• readFile(file)

• fileLoader(event)

• projectData(Array fileHeaders, Array fileData, Array originalHeaders) : Array

• parseData(Array projectedData, int fileID)

• filterStimuli(Object stimuliInstant, Function filter) : Boolean

• isCatagoryExist(String catagoryName) : Boolean

• findCatagoryIndex(String catagoryName) : Int

• checkCatagoryName(String catagoryName) : Boolean

• isParticipantExistInCategory(String catagoryName, int participantID) : Boolean

• createVisualMap(Object visualizationData)

• showGazePath (String stimuliName, Function filter)

• createGazePath(String stimuliName, Function filter) : Object

• convertToVisualNode(int index, Array stimuliInstant) : Object

• toRealX(double x) : Double

• toRealY(double y) : Double

• toDataX(double x) : Double

• toDataY(double y) : Double

• toRealValue (double value) : Double

• getListCatagories() : Array

• fetchBackgroundImage(String imgAddress)

• fetchPageTitleToData(String titleAddress)

• isPointAvailable(double x, double y) : Boolean

• generateAOIIndex() : Int

• getAOIIndex(int index) : Int

• addAOIBlock(AOIBlock)

• addAOI(mouseClick)

• removeAOI(int index)

• removeAOIs()

• getAOIHTML : HTML

• getRandomColor : RGB

• showSTAMap(String stimuliName, settings, Function filter)

• isSTAMapApplicaple() : Boolean

• createSTAMap(Array STASequence) : Object

• getSTAData(String stimuliName, settings, Function filter) : String

Special Data Structure

VisJS: Data Structure of VisJS library.

Testing Plan

Testing Strategies

To test ViSTA, we will use MOCHA testing framework. We will do asynchronous testing by using

Mocha on NodeJS. We have done smoke testing while developing current application, and we are

planning to do unit testing in future by using Mocha. After getting a successful product, we want

to do integration testing.

Test Items

1. Unit Testing

The Units:

• Data Module (Serkan Karabulut)

• Visualization Module (Mehmet Can Atalay)

• Algorithm Module (Serkan Karabulut)

• Tool Module (Mehmet Can Atalay)

Methodology: We will use Mocha, to write scripts. Serkan & Can will write testing scripts.

2. Integration Test

Participants: Mehmet Can Atalay

Methodology:

3. Performance Test & Stress Testing

Participants: Serkan Karabulut

Methodology: The most important performance factor in ViSTA is data processing, to

understand performance of data converting and visualization; we will increase the number

of entries in dataset.

4. Security Testing

Participants: Serkan Karabulut

Methodology: Proxies for algorithm modules are using network sockets; therefore, data

transfer could be vulnerable to sniffing.

Notes: Since security is an external concern, there will not be any correction for this

testing’s outcome.

Summary of Features to be Tested

Unit Test

Data Module will be tested since it is core component of the project. Data module is responsible to

parse, map and manipulate raw data that user entered. Since everything starts with that data

manipulation, data module becomes vital.

Visualization module uses an external library, which is VisJS. In order to make sure VisJS can

communicate seamlessly, we will test visualization module. Besides, we should assert that

visualization module draws nodes and edges correctly. Otherwise, there will be inconsistency

between raw data and the visualized data.

Algorithm module is responsible connection between external visualization algorithm and our

system. We should test if the connection can establish correctly. Besides connection, we should

confirm if algorithm takes inputs and returns outputs. In addition, we will check if the output is

converted to our data structure.

Integration Test

We will check if data module can send the data to visualization module without any problem. After

this connection tested, we will look at if visualization module can get the data from algorithm

module seamlessly. Shortly we will check if modules can communicate among them.

Performance Test

While using a timer we will look at the performance measures of the system. While testing we will

load different sizes of raw data.

Security Test

We will check whether we can sniff the data while being posted to server.

Summary of Features not to be Tested

Tool Module will not be tested since it will be an external library, and library developers already

have done libraries testing.

Item Pass-Fail Criteria

For data module, if data is grouped according to stimuli name, which represents link of the image,

and order of elements of the raw data is in our structure, item passes the test. Otherwise, item fails

the test.

For visualization module, if nodes and edges are created correctly and VisJS can communicate

with our system seamlessly, item passes the test.

For algorithm module, if communication can be establish correctly, algorithm can take and return

data without any problem, convert returned data into our data structure and determines nodes and

edges correctly, item passes the test.

If there is not any problem while sending and receiving data between modules, items pass the test.

If we cannot sniff the data while it is being posted, then item passes the test.

Test Schedule

This schedule is starting from 17.04.2017.

Test type

Duration

Done by

Unit

2 weeks

Serkan Karabulut

Integration

1 weeks

Mehmet Can Atalay

Security

1 weeks

Serkan Karabulut, Mehmet

Can Atalay

Performance

1 weeks

Serkan Karabulut

Testing Report

Test Items

1. Unit Testing

Unit testing has done by using mocha-chai JavaScript library. While testing we created

dummy data sets and modified functions to analyze results easily.

• Data Module

Data module had several cases. To pass the test it should satisfy some conditions

such as:

✓ Data module should store the data taken from user.

✓ Data modules should rearrange the data into our data structure

✓ Data module should group data according to stimuli name which refers to

address of the image

All the features above were tested and ViSTA passed all of them.

For the first feature, we created a dummy data set and modified the functions related.

For the data set, there were four element inside. When we started to test, we can

able to see dummy input data set was parsed and stored correctly. For the second

feature, we just modified related functions. While testing we saw that sequence of

the data converted into our data structure. For the last feature of the data module

testing, we check that if the data that is converted our structure is grouped according

to stimuli name. After modify functions that are executed for this feature, we saw

results of the test were satisfy the feature.

• Visualization Module

Like data module, several cases needed to be passed. Those cases were:

✓ Converted data should be converted into visualizable objects.

✓ Module should create edges and nodes.

✓ Module should communicate with Vis.js library.

Those cases above were core requirements to pass the test.

For the first case, data should be converted into Vis.js data set. We checked that

after related functions, if the Vis.js data set has the data, which was converted by

data module, or not. For the second case, we checked edges and nodes Vis.js data

set. According to status which was decided parsing part, if a node has “ScreenRec”

like off screen messages, it should not produce any edge between this edge and its

neighbor edge. For the last case, we were able to understand that since while

creating edge and nodes, storing them and converted data as Vis.js dataset, we can

say that Vis.js library and ViSTA can communicate each other.

• Algorithm Module

To test algorithm module we created some test cases. Those cases were:

✓ Creates STA input

✓ Parse output of STA

✓ STA nodes and edges are created

Those cases above are tested and ViSTA passed them.

For the first case, at first we checked if a user is able to take areas of interest or not.

Then we checked if module could combine and convert areas of interest and data,

which is converted by data module. For the second case, we check if result of the

STA is in correct form. Then, we looked at if the module could parse the output of

the STA. At the last point, we focused on if nodes and edges were created or not.

2. Integration Test

For the integration test, all the modules should work together without causing issues for

each other. To test it we run the project. While all the features working, there were not any

issues.

3. Performance Test & Stress Testing

For the test performance, we used Google Chrome’s performance profiler.

Figure 14: One-participant Performance Measures

The picture above (Figure 14) shows performance measures of ViSTA with one participant.

We can see that parsing part takes the most of the time. In addition, we can see that how

nodes and edges are storing. In the performance measures, we are able to see that library

that we are using to draw the nodes and edges (Vis.js) is quite fast.

Figure 15: Two-participant performance measures

In this picture, we can able to see that what happens when we add second participant.

Difference between two measures, nodes and edges are added to previous one like parsed

data saved onto previous data according to stimuli name.

4. Security Testing

Since we are not using SSL, someone can sniff the data. However, security is not our

concern.

Summary of Completed Tests

For unit and integration test, every element passed. To test unit test, we modified functions and

learned mocha-chai JavaScript library. For integration test, we combined each module, run the

project, and look for any bug or crash. Since there was not any crash or bug, test is passed. For

performance test since we have a bit long timing for loading, we had still better time result than

any exist application like TOBII.

Summary of Failed Tests

We only failed from security test. However, security is not a concern for us. If any user wants to prevent

sniffing, they just need to add SSL protocol.

Software Quality Attributes

Reliability

ViSTA will be used for academic researches as well as commercial studies. Therefore, precision is

one of the most important thing in our system. Just like precision, correct visualization is also an

important issue, thus color palettes and other visual properties must be selected to ensure reliability

of visualization.

In order to achieve reliability literature survey is one of the most important necessity. Also,

blending literature survey with validation will ensure reliability of the system. In case of precision,

testing of different data sets is important.

Robustness

There will be lots of different data sets, processing methods and visualization methods. Interaction

of different data sets and these methods could create some unexpected errors, crashes, and even

cause corruption of data. In order to system to be sturdy handling these exceptions and rescue

mechanism are important. Also, because of expandability error handling and notification is

important.

In order to achieve robustness testing is the most important step. Testing system with lots of

different data sets, and testing these data sets with combination of different methods will raise some

exceptions. Creating a system to handling this errors and exceptions to warn the developers is

important.

Usability

Usability is the main concern of ViSTA. ViSTA should give users sensation of real good and easy

usage. To achieve that following design patterns like Material Design, and designing visual blocks

in plain and simple is important. Also, user accessibility is really important.

Maintainability

ViSTA must be design in a modular way to simplifying further development. Best way to do that

is following object oriented design patterns, and creating a framework before implementing

algorithms.

Project Management

Assumptions

We are assuming following conditions,

• User can upload more than one gaze path data for one participant.

• User can upload more than one gaze path data for multiple participant.

• User may select different visualization techniques.

• More than one trending path may be drawn.

• User may use tools for easy user accessibility.

Stake Holders

The stake holders of ViSTA are following,

• Yeliz Yeşilada <yyeliz@metu.edu.tr>

• Şükrü Eraslan <seraslan@metu.edu.tr>

• Researchers

• Advertisement Companies

Project Estimation

Functional Points Estimation

1. Inputs:

o Data File Selection Modal

o Processing Method Selection Menu

o Visualization Method Selection Accordion

o Visualization Result Selection Bar

2. Outputs

o Loading Screen

o Visualization Method Result(s)

o Statistical Result Sheet

o Error Messages

3. Inquiries:

o Tracking Data Queries

o Area of Interest Queries

o Data Conversation Queries

4. Logical Internal Files:

o Tracking Data

o Area of Interest Data

o Processed Data

5. External Interface Files:

o Visualization Elements Data

Non-Functional Points

1. Data Communications : 1

2. Performance : 3

3. Heavily Used Configurations : 1

4. Online Data Entry : 1

5. End User Efficiency: 3

6. Operations Ease : 3

Computation

Program Characteristic

Low Complexity

Medium Complexity

High Complexity

Total

# Inputs

# Outputs

Inquiries

Logical Internal Files

External Interface Files

UTFP = 67

TDI = 12

VAF = 12 * 0.01 + 0.65 = 0.77

ATFP = 67 * 0.77 = 51.6 = 52

COCOMO I

Choosing JavaScript as language, and taking most common value;

LOC = 67 * 40 = 2,680 Lines of Code

Assuming we are organic,

KDSI = 2680/ 1000 = 2.68

MM = 2.4 * (2.68 ^ 1.05) = 6.76 ~ 7

TDEV = 2.5 * (6.76 ^ 0.38) = 5.16 ~ 5

Assuming that we are at Approved product concept stage,

Effort & Size = 7 * 0.50 ~ 7 * 2 = 3.5 ~ 14 MM

Schedule = 5 * 0.80 ~ 5 * 1.25 = 4 ~ 6.25 Months

Project Tasks & Durations

1. Doing literature survey on visualization methods – For 18 weeks

2. Doing literature survey on eye tracking path scanners – For 1 week

3. Doing literature survey on visualization libraries – For 2 weeks

4. Creating a general eye scan path data structure – For 1 weeks

5. Implement node structure – For 1 week

6. Taking eye tracking data from txt and parse it – For 3 week

7. Doing literature survey on screen capturing – For 1 week

8. Implement proxy – For 1 week

9. Implement Python server – For 1 week

10. Establish a connection between server and ViSTA – For 1 week

11. Implement area of interest decider – For 1 week

12. Adjust STA algorithm for ViSTA – For 1 week

13. Using Google material design, improve user interface – For 12 week

14. Putting the code into GitHub – For 1 week

15. Improve Python server – For 3 weeks

16. Testing – For 3 weeks

17. Readjust all codes – For 3 weeks

18. Improve visualization and parsing algorithms – 4 weeks

Milestones

1. Doing literature survey on visualization methods

2. Doing literature survey on visualization libraries

3. Creating data structures

4. Implementing data parser

5. Implementing proxy and python server

6. Implementing STA module

7. Using Google material design, improve user interface

8. Improve Python server for multiple trials

9. Testing

10. Readjust all codes

11. Improve visualization and parsing algorithm

GANTT Chart

Figure 16: Gantt chart

Task Allocation Chart

Figure 17: Task allocation chart

Activity Diagram

Figure 18: Activity diagram

User Manual

• Add the data from “+” sign which locates right bottom corner

• Choose data samples which is in .txt format

• When choosing is done, at the right top corner, a drop down menu appears. From that menu

user can select address or name of the websites that used for background image.

• In the same menu, a user can add participant filters.

• After filtering, gaze path of the chosen stimuli name for raw data will be drawn.

• If user wants to apply STA algorithm, they should choose area of interests.

• Each area can be chosen by clicking the mouse. The area, between a click pair, will be

colored.

• After area of interests are chosen, STA tab will be clickable.

• Whenever user click the STA tab, result will be drawn on the background image with the

area of interests.

Deployment Manual

Deployment process is explained for Netbeans.

• Clone the project from GitHub.

• Right-click to project and choose npm install.

• Right-click project and choose npm-migrate from npm scripts menu.

Installation Manual

Installation process is explained for wamp server.

• From the project folder, copy the content of the www folder.

• Paste the content wamp server’s www folder.

REFERENCES

• Atalay, M.C. & Karabulut, S. (n.d.). ViSTA. Retrieved from

https://github.com/mcanatalay/ViSTA

• Vis.js - A dynamic, browser based visualization library. (n.d.). Retrieved from

http://visjs.org/

• IEEE Code of Ethics. (n.d.). Retrieved from

http://www.ieee.org/about/corporate/governance/p7-8.html

• Mocha - the fun, simple, flexible JavaScript test framework. (n.d.). Retrieved from

https://mochajs.org/

• Introduction - Material design. (n.d.). Retrieved from https://material.io/guidelines/