We all use blackboard to communicate with other members of our class, however when trying to show math problems off, typing them into a text field isn't the best option. What we really need, is a drawing platform that is easily implemented into blackboard so that no extra steps have to be performed. We need something that could draw text so that others could see what we are trying to convey without having to suffer. And when thinking of this, why not also incorporate a text chat and display user files so that others could really get the picture.

What it does

The whiteboard app allows blackboard users to cooperate together on difficult assignments that don't fit quite well in a standard text field. We all hate typing out math problems or having to describe pictures, so why not just draw it right there on the blackboard platform without problems. Along with real-time drawing between users, the platform also allows them to share files that they feel are important to the topic.

How I built it

We first developed a drawing system within javascript canvas that follows the mouse to draw lines of varying sorts. once completing this we continued to add features onto it, adding different colors, stroke options, and a clear page ability. once finishing this, we began to send the data to fire base in order to provide real time data transmission between users. the canvas is stored as a base64 image and then re-rendered on the client side of another user. The file system uploads local files into the database and stores them for users to access as time goes on, and uses both jquery and listening events to provide on time refresh results.

Challenges I ran into

When sending the base64 image, the database has a large set of latency in between draws. This caused one user to be extremely behind, or to just not work at all. This was solved by running it on a separate thread to allow the users to run multiple draw requests at once, and then to limit the requests entirely with delays. Another issue was correctly parsing the data that was taken from the database, as the data ranged from 10,000 characters to 100,000 characters of length, meaning processing time had to be kept efficient in order to properly display the data.

Accomplishments that I'm proud of

As a first time use of fire base, I was able to successfully send data to the database in very large sequences. The data sets were sent, then pulled down, and parsed with ease after fine tuning to many of the listening events within the file. The file upload and download system has similar features, except for the management system and auto refresh with uses jquery to properly display new files.

What I learned

I learned a lot from this experience, especially about databases, as this was a relatively new experience to me. I learned how to make requests to databases, store data, and synchronize multiple platforms with little to no latency. I also learned how to utilize jquery in order create dynamic pages that would append values to the document.

What's next for Whiteboard

Since we didn't fully incorporate the chat system, that would be a first on the list of features to add on. We would also better provide solutions to latency and a compression algorithm for the large base64 files, as they would become to large once the user was drawing for a while on the same whiteboard. The API interpretation would also be worked upon, as we would need to properly pull in more data to give users more choices.

Built With

Share this project: