/Scanpath-Evaluator

Web app which allows users to view and evaluate previously collected eyetracking data

Primary LanguageJavaScript

Scanpath Evaluator

Currently hosted on Heroku

Datasets

To keep this repository clean, all datasets containing TSV-formatted scanpath & AOI data have been moved to Google Drive. You can also download them already zipped together from here.

Local install

In order to run the app locally, clone this repository (development branch), download required packages (see below), compile SCSS files to CSS and fire it up via your IDE (main.py) or command line.

However, in order to run it properly, you will also need to set up the PostgreSQL database. All tables can be created automatically via SQLAlchemy's ORM - see the Base.metadata.create_all(engine) command in database.py (application re-launch is required).

If you want to save yourself some time, here is a template database backup containing 1 guest user and all the datasets linked above. You can use this file to set up your database within seconds by using the pgAdmin app or CLI. The guest user credentials can be found in the config.py file.

Dependencies:

Back-end:

  • Python (2.7.X)
  • Flask (0.12.X)
  • PostgreSQL (SQLalchemy + psycopg2)
  • Passlib

Front-end:

  • AngularJS 1.5.11
  • UI-Bootstrap JS - to get rid of jQuery required by default Bootstrap
  • UI-Router - to handle client-side navigation
  • Bootstrap 3 CSS
  • Angular-Breadcrumb
    • ncy-breadcrumb: marks element where the breadcrumbs panel will be placed. UI-Router configuration determines displayed text content and state hierarchy.
  • Bootstrap Nav Tree - for navigating between user datasets, tasks etc.
    • abn-tree: hierarchical tree navigation directive based on a custom-format JSON object.
  • ng-file-upload - for uploading user data
  • ng-csv - for exporting user calculations

Constraints:

  • File size - 100MB for scanpath data/10MB for AOI data
  • AOI count - maximum of 52 AOIs (26 lowercase + 26 uppercase characters)
  • AOI shape - exactly 4 vertices for each AOI (rect/square)
  • Nested and overlapping AOIs - try to avoid this for correct results
  • The original AOI image and its resolution must exactly match the uploaded AOI data

TODOs:

  • Write unit tests (Python & JS)
  • Upgrade backend to Python 3.X
  • Upgrade frontend to AngularJS 1.6.X
  • Upgrade frontend JS to ES6
  • Lazy load Angular modules & create a custom Bootstrap build
  • Allow users to download their uploaded data in JSON/TSV format
  • Exception & error logging
  • Write some more tests