While brainstorming ideas, one of the mentors casually mentioned data collection among a variety of other ideas being important to espionage. This idea of data collection stuck to us as a group and steered our thinking in that direction, leading us along the path of digital footprints and VPNs. We eventually settled on a mouse tracking program that gives real time data on the coordinates and selections done by users. This risky information could potentially be dangerous in the wrong hands, but we thought it perfectly encapsulated the idea of spying and espionage. Spys have no control over their employers, their only job is to obtain secrets or confidential information for them to use. This double edged sword is something we acknowledged while developing this product and although risky, we thought our product could freely embody the spirit and ideals of an espionage agent.

What it does

Recordouille is a program that is able to transfer real time mouse movements and clicks into heat maps to help digital platforms visualize, process, and analyze mouse information and traffic.

How we built it

We divided the project into five main tasks.

  1. The first was to discover solutions for tracking and storing user mouse input.

  2. The next step was to build a flask-based server that would handle connections from the multiple web pages used by our system.

    • An interesting challenge of this step was to detect and overcome the real-time speed requirements of our application.
    • We overcame it by utilizing the socket-io library to establish a sustained connection between the front-end and the server.
  3. We also had to develop a self-normalizing data structure as a next step.

    • It needed to persist the high volume of data coming in real-time from mouse inputs.
    • The data structure also had to be efficient and modular, so that it could adapt to any screen size.
  4. Then, we built a representative shallow website that could leverage real-world use of our application.

    • We used inheritance within the flask api to ensure code readability and reuse.
  5. Finally, the last task was to come up with a way of displaying the input data in an overlay that could reflect the user interaction in a meaningful and efficient manner.

    • We opted for the HTML5 built-in canvas structure since it can quickly display 2D information by using a simple-to-understand coordinate system similar to other graphics frameworks.

Challenges we ran into

  • Managing our time with learning and building the project in a virtual environment.
  • Setting up Flask-SocketIO for allowing data transmission/receival between respective client sites and server.
  • Handling asynchronous events through locks
  • Finding the motivation to continue to learn through the night and continuing the next day to finish the presentation.
  • Attempting to implement Agile Development
  • Having to go back and change everything in the website because it was all hard coded at first.

Accomplishments that we're proud of

  • Implementing Flask-SocketIO
  • HeatMap live recorder from the ground up
  • Whole website
  • What we all learned within this weekend

What we learned

  • Deploying lightweight website with Flask
  • Accessing and managing Github along with figuring out what applications and websites to use while coding.
  • The basics of html, css, and javascript and the basics of how to build a website.

What's next for Recordouille

Our long term goals for Recordouille are to implement machine learning in order to help glean insights about user activities and streamline the data collection process. We are also looking to scale Recordouille into a larger market and begin scanning the websites of bigger and more popular companies.

Share this project:


posted an update

If you run into any import issues, also run the commands within HowdyHack_Website: 'pip install numpy' and 'pip install opencv-python'.

Additionally, to view heatmap website, enter in link within parentheses:
( ).

Currently, the website displays properly in chrome.

Log in or sign up for Devpost to join the conversation.