A great piece missing from online classrooms is the large whiteboard/blackboard normally at the front of the class. These boards provide the teacher with a large amount of space to show their work to the class during a math calculation, or to draw supply-and-demand diagrams for economics. In any case, these whiteboards/blackboards provide immense value to a classroom, and there's no real replacement for them in an online setting.

Teachers could write on their desktop screen with their mouse, but it becomes difficult to do so cleanly and efficiently, especially for larger diagrams/equations. Many teachers turn to a touch screen device for these purposes, but not every teacher has access to a tablet or a large touch screen device.

Currently, the most practical solution is using a small drawing app on a phone. However, it is difficult to write long math equations without needing to have to constantly erase the screen, which can be tedious and also prevents a thorough review of the concepts at the end of the equation, whereas with a large board, you can write out the entirety of an equation and are able to easily go back to certain steps in case students have questions are need clarification. Thus, there arose the need for Tabula.

What it does

Tabula comes in a web app and a mobile app. The two main users of Tabula are the students and teachers. The teachers create a room using the web app and connect to that room with their mobile device, using the mobile app. They are able to draw on the room's canvas with their device and configure settings (e.g. brush color and brush size) from the web app. The students join a room with a room ID and a room password, and they are able to see the canvas which the teacher controls. They are able to see which part of the canvas the teacher is focused on, and get updates when the teacher writes on the canvas in real-time. At the end of a lesson, they are also able to save the canvas to an image file on their computer.

The canvas can be resized indefinitely, and changes can be made to the canvas either from the web app or the mobile app and are synced to both devices and all the students in the room. The teacher can pan the canvas from the mobile phone, which is a game-changing feature because it lessens the dependency for a large screen (e.g. tablets) that not all teachers have access to. Tabula is able to extend beyond a whiteboard/blackboard because it provides an indefinite area to write on and also provides handy features such as the ability to import a file for editing, as well as for the student to have the chance to save the file as an image file on their local machine.

The canvas emulates a whiteboard, so students would be expected to use it how they would normally use a whiteboard. They would take notes, ask questions, and can point out certain parts of the diagram for clarification, which the teacher could then easily provide while referencing their diagram for a better explanation. The different colours are there to emulate the different whiteboard colours that teachers may choose to use to distinguish/emphasize different concepts/ideas, and they can also customize the brush size if they would need to use a variable-sized eraser or based on personal preference.

How we built it

We created the web app using React. We extensively used the capabilities of HTML5 Canvas and also used the Material UI component library for React. We used Node.js + Express for our backend server and decided to use for communication between the client and the server. allowed us to update the client-side React app in real-time with low delay. We used Ionic for the mobile app and used Capacitor to test our app on Android and iOS.

Challenges we ran into

For some of our teammates, this was their first time working with Ionic, which was especially difficult due to lack of experience and lack of proper documentation. As well, some of the features we wished to implement didn't work consistently on both iOS and Android devices, so we occasionally ran into bugs that were hard to track down, as it turned out that it was because of a lack of support from the operating system itself. At the end, we managed to either find a workaround to the issue, or to implement a different feature that could be extended by another optional feature that only works on one OS (the example that comes to mind is the panning of the canvas by tilting; we could not get this feature to work on iOS but it works perfectly fine on Android).

Accomplishments that we're proud of

We are proud of creating an application as advanced as this Tabula, which can be really useful in many ways. We have gotten the application completely functional, while not having used Ionic in the past. We also originally were doubtful with the execution of this idea, as an HTML5 canvas on the web might be difficult to synchronize with a canvas on mobile. Luckily, one of our teammates, Kevin, had previously worked with Ionic which allowed us to use HTML5 functionality (including the element) that make this extremely easy to do (and we are eternally grateful for him, as we could not imagine how much more difficult this would've been had we built the app with React Native).

What we learned

We learned how to build mobile apps using Ionic Framework and connect them in real-time to client web apps with We also learned how to use and maneuver the intricacies with an HTML5 canvas (such as the image disappearing when the canvas is resized, which we worked around by saving the diagrams on the canvas before resize and then importing them back after resizing). We also learned how to handle different gestures on a mobile device (e.g. deviceorientation - the feature that enabled panning by tilting the device, onTouch vs. onClick, etc.)

What's next for Tabula

We could implement in the future the ability for teachers to allow students to draw on the board, so this could even benefit students who may not have access to a tablet and struggle to draw or write with their mouse. We could also further take advantage of the digital format, perhaps by providing convenient features like an undo/redo button or even an option to add text. There's also a lot to be demanded of the mobile app, as it currently only provides functionality to draw, but we could also later add functionalities such as taking a photo from within the app to import into the canvas.


Web App:

Web App GitHub Repo:

Mobile App GitHub Repo:

(Mobile app should be attached as an .apk file)

Share this project: