Whiteboard websocket version
In 2020 during the corona pandemic I had a lot of teaching of pupils from home over Teams. I did not find any free drawing software that felt like a whiteboard. Paid programs was expensive and my school did not want to pay for one. Onenote was installed on my work pc, but the drawing real estate was too small.
I decided to create my own app. It was a lot of fun! Learning so much javascript on the way!
Try it here: mauroy.no/whiteboard
Screenshot of some text drawn using the mousepad.
I just managed today Jan 16 to get websockets to work together with the load balancer. I use Miguel Grinbergs excellent library Flask-SocketIO for handling the websockets: https://github.com/miguelgrinberg/flask-socketio
All traffic is handled like messages with topics. For instance when websocket connections are established my server responds handing out an ID for each client. See screenshot below. Each client is assigned a different color.
Controls for changing colors and width of lines
Original requirements
- Use as large screen real estate as possible.
- Quick and direct controls for switching colors and width of lines.
Nice to have requirements
- Insert images and draw on top of them.
- Collaborative drawing in real time (like onenote can for shared documents which is a pain in the a$*).
- Download drawing as a svg-file.
- Save drawings to database. Possibility to load old drawings.
- Dragable slider as a timeline so the viewer can go back and forth in time to view the drawing at different stages (almost like a movie).
Current version Jan 16 2025
The app in all its glory :)
Below are some images showing the crude, but extremely efficient controls (in Norwegian).
Controls for changing colors and width of lines
Buttons for deleting, downloading, insert images and undo (which is also implemented using ctrl+z or cmd+z :)