CS 346 (W23)
Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage

Whiteboard

You will design and build a digital whiteboard - similar to something that we would have in a classroom, but meant to be used to collaborate online! The whiteboard is initially a large blank canvas; users can write on it, sketch simple diagrams, or even insert images. Multiple people can connect to the whiteboard from different systems and collaborate together in real-time!

Example: FigJam

figjam

Required Features

There are four specific deliverables for this project:

  • Core infrastructure
  • GUI application
  • Web service

Core Infrastructure

  • Your source code should be stored in your team’s GitLab repository.
  • You must document your requirements in the project wiki, and use issues in GitLab to track your work.
  • You must use a Gradle project, with the project structure provided in-class.
  • You are expected to write unit tests for all of your code, and add appropriate code comments.
  • You are also expected to produce some form of installer, so that a user (or TA) could install and run your application without needing to build it from source!
  • We will examine your source code! You should strive for well-structured and readable code.

Client Application

Your main application is a desktop application. You are expected to implement the following standard desktop functionality:

  • A top-level menu bar that lists major functions, and indicates the hotkeys for each feature (e.g. File, Edit, View menu and submenus).
  • Window resizing, so that the user can resize and reposition the application. You should save the window size and position on exit, and restore that size and position when they relaunch it.
  • Minimize/mazimize buttons function as expected.

In addition to the platform requirements, you should support the following features:

  • Multi-user login. You should prompt the user for username/password and use these to authenticate against your service.
  • Changes made by one person should be shown in real-time on other user’s applications. (No “manual sync” required).
  • Once logged in, the whiteboard will be loaded automatically.
  • There are tools that support:
    • drawing (multiple pen styles and colours),
    • inserting text (multiple fonts, sizes and colours).
    • inserting shapes (rectangles, plus one or more additional shapes)
    • editing existing content
    • selecting and moving content around the whiteboard
    • erasing content
  • Your application will need to save some local data (for window size and position). Other data should be saved on your remote service. See below.
  • Your client application should work equally well on Windows, Linux or macOS.

Service

You will need to build a web service so your data can be shared across multiple systems.

  • A user should be able to launch multiple instances of the application, and have the instances load and use this remote data. You should determine what data is appropriate to save in this fashion.
  • Your application should communicate with the web service using HTTP protocol.
  • Data should be saved so that if the web service is stopped and restarted, the data will persist.

Additional Features

The requirements above represent the minimal set of requirements for this project. Here we’ve listed some other ideas that might be interesting to implement! Pick-and-choose, or brainstorm your own.

  • Add themes! Dark, Light, Solarized etc.
  • Stylize the toolbars e.g. a fancy VS Code style, expanding toolbar.
  • Allow users to save/restore different whiteboards so that they can save their progress. Data would need to be saved in the cloud.
  • Add specialised tools e.g. class diagram templates, or arrows/boxes that people can use to draw more professional looking diagrams.
  • Flag the annotations on the board with a username. Establish permissions based on username and limits editing each others content (e.g. a user could set a flag to make her image “read-only” and restrict others from erasing it).
  • Export as an image or PDF.

Examples