Introducing TIDraw - simplest possible digital whiteboards

It’s not a SPLOT per se, because it’s intended for use in face-to-face learning rather than online. SPLF2FT?

At the Taylor Institute, we have a bunch of active learning classrooms - we call them “learning studios”. They’re designed to enable active group collaboration, through the design of the rooms, to the furniture available, and the technology provided. There are 50" touch-enabled “collaboration carts” ¹ that can run almost any web-based tool.

One of the more common uses of the displays involves digital whiteboards. Each display has an actual physical whiteboard beside it, but the digital whiteboard integrates with the AV systems that run the room. Which means we can do things like say “hey - group 1 is doing some cool stuff. check it out!” and push their display to the projector (or even to all other displays in the room) for everyone to see. Much harder to do with traditional whiteboards.

So, when Limnu closed down at the end of 2017, we were stuck. It was by far the best digital whiteboard tool, and we were without that functionality for a while. We switched to AWWBoard, which is good, but seemed to have issues with our touch displays ². We were about to license an AWWBoard account for each collaboration cart (there are 37 of these on the main floor, plus a few more upstairs), so this would have become a pretty significant annual expense.

I was off for a couple of days this week, and between appointments for myself and for my parents I decided to try cobbling something together that could be self-hosted. I didn’t want one of the main tools that we rely on to be at risk of a company pivoting (ala Limnu) or charging more than I’m comfortable committing funds for every year (ala AWWBoard).

And so TIDraw was born. I used the really great (and lightweight) LiterallyCanvas library to turn a simple HTML5 element into a whiteboard. That part worked in about 5 minutes. Then, I had to build a way to save snapshots of whiteboards as needed. Which took… longer… because of my rusty googling-and-coding skills. But I eventually got it to do what I had in mind. Anyone can use TIDraw, and if they hit “Save”, it converts the canvas to a .png file and uploads it to the server, where it’s available on a “Saved Whiteboards” page. Images are displayed in reverse-chronological order, and are automatically deleted after 7 days.

It’s the Simplest Possible Face-To-Face Tool for digital whiteboards. No logins. No chat or audio or video calls built-in. Because it’s a whiteboard, there isn’t a bunch of security around it.

Part of the draw of Limnu and AWWBoard (which is a really good whiteboard tool - don’t get me wrong!) was the possibility for collaborative drawing - having people draw on their iPads/laptops/phones while sharing a whiteboard on The Big Screen™. And, the infinite canvas - zoom and pan on and on and on as needed. Both features really never got used though - they demo well, but in practice, people just used the collaboration cart touch display without additional whiteboard drawers connected, and very rarely strayed beyond the limits of the screen that is shown initially. (and the infinite whiteboard and multitouch zoom/pan caused endless problems as people accidentally brushed against the display and sent their drawing into 1% scale or caused some other unintentional weirdness). TIDraw is simple, but that’s a strength. There’s less to go wrong, there’s less to learn. And for what 99% of people use the digital whiteboards, it does it perfectly.

(actual drawing area not restricted to the inside of that circle)

Works fine on the TI’s Collaboration Carts

Saved images displayed as a gallery for easy downloading or cloning

It seems to work well pretty much anywhere - mac/win/ios/(probably android?). Works great on an iPad with a pencil stylus. Works on the TI Collaboration Carts using the felt stylus or finger. Perfect.

I’ve got a few things I want to tweak - most notably, a way to display the saved whiteboards better on Chrome and Firefox. They are .png files with transparent backgrounds, and Chrome kind of freaks out and doesn’t display the image over a white background, so the whiteboard image looks pretty crappy. Firefox uses a grey background to display .png files, which also looks crappy with a transparent drawing on top.(fixed, thanks to a tip from Tom Woodward)

I also want to add a bit more security around the image-saving code, to prevent bad hombres from doing things like hand crafting an “image” file that could then be executed on the server somehow…