This is little 'scratch-your-own-itch' project I started working on about 9 months ago. Front end is GWT, back end is Java servlets. Database was originally MySQL but switched to Prevayler for performance reasons.
Nicely done, website is nice and it's great that you can just click and get started straight away. In your comment you said you moved away from mySQL, what exactly do you store in the DB? Which leads to the question: how do you transfer the drawing data between clients? I guess it's not a case of uploading a Canvas as an image?
The drawing is basically a list of strokes, and a stroke is a list of points - that is, (x, y) coordinates. So the database is mostly a huge table of (x,y) coordinates.
Uploading the entire canvas would far too inefficient - I simply upload the points.
The transfer between two clients uses a technique called 'long polling'. That is, the client sends an HTTP request to the server, and the server doesn't respond until it has received a message (ie. stroke) from another client.
paper.js has a nice method to do this. I actually used it in a whiteboard app I made as a proof of concept. Rather than saving every X,Y coordinate, it uses a configurable number of points and handles and makes bezier curves. http://paperjs.org/examples/path-simplification/
>> It's easy to add audio via skype/facetime/you-name-it though.
Really? I don't think running another app to get audio is a very user friendly solution, and you'll never be able to record a session. How about Opus and webRTC or similar?
That's the problem - are they the same ways everyone in your meeting uses? How much time is wasted on each 'conference call' working out who's there, who has the number, where's Bob!
Looking at all the feature requests here I can't help but think that you guys are reinventing TeamSpeak. The only difference I see is that with TeamSpeak you first must install a client whereas this runs in a browser.
Nicely done. A few of my favorite features are missing (like a text tool for nicer text, and an arrow tool) but when used with a tablet and stylus its pretty nice. It is always a question for me how much is 'drawing tool' and how much is whiteboard emulation. To my mind I always wish I had some extra tools on a 'real' whiteboard which aren't there :-)
This looks awesome!! Using servlets how did you make it so that the changes on the whiteboard take effect on all browser windows? or is that something GWT does?
This is another HTML5 / Canvas collaborative drawing app that I built which uses Google Drive for storage and thus runs completely locally. Works offline and runs in Chrome, Firefox, Safari, iOS, and Android and supports touch. http://thesavior.github.io/draw/
The one thing my wife (a math teacher) has always been craving is a video solution for these - that is, write equations or annotate a document on our android tablet while she narrates, then upload the video to YouTube. Last I checked there wasn't a good offering on the play store for this.
I do that with Screenflow and a Wacom Intuos Pro, and that's a very simple set up.
I understand it's not a solution for the Android tablet, but I also thought I wanted to draw on a tablet and I've been happy with my set up - I can sit up and look forward and it feels better that way, than it would if I looked down towards my drawing hand and the tablet screen.
Just a thought. I'm one of those people who would never buy a Wacom Cintiq because I see the decoupling of "object to draw on" and "object to look at while drawing" as an incredible advantage.
One feature that would make this a killer app in my mind is the ability to import a photo of a whiteboard and have the virtual whiteboard reconstruct what was on the whiteboard in the future.
We often take a picture of the whiteboard at the end of the discussion -- being able to continue to edit that whiteboard at some point in the future would be very handy.
It depends. There are many types of SmartBoard installations:
1) SmartBoard is a giant LCD. Never seen this in the wild, but it exists. ~$8k.
2) Control-surface-only SmartBoard with integrated specialized projector. It hangs off the top-front of the board about 2 feet into the room, and covers the SmartBoard frame perfectly. Alignment is less of an issue since it can't move relative to the board. ~$6.5k.
These can be installed on a wall (labor costs) or on a wheeled cart (parts cost).
3) Control-surface-only SmartBoard installed on a wall, projector permanently installed on the ceiling. You (most likely) need a contractor to make the VGA/DVI run, install the projector mount in the ceiling, buy a projector, put the projector on it, align it, get an electrician to run power to the ceiling, etc.
This is what I most commonly see in classrooms. I worked for a contractor one summer, and a team of three of us could do ~4 classrooms in a day.
The board itself is around $2k. Projector + installation probably brings it up to around $3.5k.
4) Control-surface-only SmartBoard installed on a wall, projector sitting on a tabletop or A/V cart. Standing in front of the board to use it casts a shadow. There's an art form to standing the right amount off to the side. Some teachers were good at it, some weren't.
Smart Board would still be around $2k, and you can buy a ~$700 projector that'll do the trick.
I don't know what it costs to wall-mount the board in any of these configurations. Presumably if you have a couple of guys and drills, you can do it yourself and it'll only cost time.
My quick-and-dirty hack for a one way version of this is to open skype using screen sharing and then to run 'gimp' while using the chat & voice for instruction/questions.
I tried opening "my" whiteboard in a second tab in Firefox (on Windows). The second tab's view is distorted, it reminds me of having a badly programmed modulo register on the Amiga.
Which doesn't say much to most, I guess... It looks as if the scan lines are mis-aligned, i.e. as if some pixels in each line is missing from each, causing the resulting image to be slanted and distorted.
If you need those features, you're welcome to have a look at my phd project, http://sdcl.ics.uci.edu/research/calico/, check out the second video. Admittedly, it's a java application rather than a webpage, but a few companies have found it useful so far. The project is available on github here: https://github.com/uci-sdcl/calico.
I just tried stoodle, but I'm not seeing the data being replicated across windows. e.g I have some doodles here in http://stoodle.ck12.org/class/53f619cc417e3 but when i open this link in another chrome tab (or a different browser ffox), I am not seeing anything
The problem is that it will then become an interactive powerpoint, not a whiteboard anymore. It sounds more like a new product to me, not just a simple new feature.
Actually, it is a very commonly used feature...many teachers using online whiteboards for tutoring will upload a preprepared word doc/ppt worksheet and then the student will write in the answers.
I played around with something like this when I was a kid (it was a group of kids drawing anime characters if I recall). Every once in a while I search for something like that and I can never find it. Now it's back :D
Open the same Flockdraw URL in two side-by side windows and draw in one of them. Compare that to the WhiteboardFox video or Twiddla demo.
WhiteboardFox says a few seconds is "fast syncing". Flockdraw's sync is realtime (try it for yourself).
The kind of latency and overhead I wanted when building Flockdraw is only really feasible in JS when using WebSockets (which wasn't even fully standardized until 2011) but was doable in Flash in 2009.
Oh my god. I love this!
I've been waiting for a simple polished solution for this for years and years. When skype came along and then we got skype extensions, I thought they'd solve this, but oh no. Every solution that has come out so far has been mediocre at best. I'm glad someone decided to tackle this properly.
I haven't had chance to try on iPad, but from the homepage it seems it'll work fine there as well?
Haha thank you! Yes it works fine on an iPad - in fact better than an laptop because using a finger to draw is so much more fluid and intuitive than a mouse or touchpad. Here's a video of me using WhiteboardFox.com to draw with my iPad: http://youtu.be/MDEHFHG1l3Y?t=1m10s
And yes I had the same thoughts last year when I was looking to work with a remote programmer: "Surely, surely someone has a half-decent solution?!". At the time, no. Now, yes :)
I don't think this should have typing of any kind. I think it will be faster and easier if stays as it is. The focus should be in making it even more reactive/real time.
That's something I've had on my todo list for ages. As others have said though, it'd be great to be able type text as drawing letters with a mouse always takes ages and looks rubbish.
SVG export would be nice too, perhaps a paid for extra :)
142 comments
[ 5.5 ms ] story [ 239 ms ] threadMy YouTube video gives a nice overview of the benefits of a virtual whiteboard: http://youtu.be/MDEHFHG1l3Y
What does Hacker News think?
Uploading the entire canvas would far too inefficient - I simply upload the points.
The transfer between two clients uses a technique called 'long polling'. That is, the client sends an HTTP request to the server, and the server doesn't respond until it has received a message (ie. stroke) from another client.
The fit process could likely be done client-side, and could offer some subtle smoothing if wanted?
Anyhow, really nice execution!
A killer missing feature seems to be microphone support, which the video alludes to.
Really? I don't think running another app to get audio is a very user friendly solution, and you'll never be able to record a session. How about Opus and webRTC or similar?
Disclaimer: I work at Sococo
I understand it's not a solution for the Android tablet, but I also thought I wanted to draw on a tablet and I've been happy with my set up - I can sit up and look forward and it feels better that way, than it would if I looked down towards my drawing hand and the tablet screen.
Just a thought. I'm one of those people who would never buy a Wacom Cintiq because I see the decoupling of "object to draw on" and "object to look at while drawing" as an incredible advantage.
We often take a picture of the whiteboard at the end of the discussion -- being able to continue to edit that whiteboard at some point in the future would be very handy.
1) SmartBoard is a giant LCD. Never seen this in the wild, but it exists. ~$8k.
2) Control-surface-only SmartBoard with integrated specialized projector. It hangs off the top-front of the board about 2 feet into the room, and covers the SmartBoard frame perfectly. Alignment is less of an issue since it can't move relative to the board. ~$6.5k.
These can be installed on a wall (labor costs) or on a wheeled cart (parts cost).
3) Control-surface-only SmartBoard installed on a wall, projector permanently installed on the ceiling. You (most likely) need a contractor to make the VGA/DVI run, install the projector mount in the ceiling, buy a projector, put the projector on it, align it, get an electrician to run power to the ceiling, etc.
This is what I most commonly see in classrooms. I worked for a contractor one summer, and a team of three of us could do ~4 classrooms in a day.
The board itself is around $2k. Projector + installation probably brings it up to around $3.5k.
4) Control-surface-only SmartBoard installed on a wall, projector sitting on a tabletop or A/V cart. Standing in front of the board to use it casts a shadow. There's an art form to standing the right amount off to the side. Some teachers were good at it, some weren't.
Smart Board would still be around $2k, and you can buy a ~$700 projector that'll do the trick.
I don't know what it costs to wall-mount the board in any of these configurations. Presumably if you have a couple of guys and drills, you can do it yourself and it'll only cost time.
https://gist.github.com/lelandbatey/8677901
https://github.com/Flameeyes/unpaper
Disclaimer: I made unwhiteboard.com
My friend's parent is disabled and we thought about doing something like this and hooking it up to a touch-screen monitor for them.
That way the parent can see messages from her kids (in a different city) and vice versa without any effort or typing.
Which doesn't say much to most, I guess... It looks as if the scan lines are mis-aligned, i.e. as if some pixels in each line is missing from each, causing the resulting image to be slanted and distorted.
1. Be able to type in text (any font will do)
2. Drag-and-drop an image to be be able to annotate it over the top (would be excellent design task, e.g. using screenshots of some work-in-progress).
3. Movable objects?
Edit: Well done though, awesome 1st cut :)
In addition, basic shapes like line/rectangle/circle would be welcomed (I am terrible at drawing a circle with a mouse).
He did the product with tablet users in mind.
If teachersare going to use this, many of them will already have a powerpoint to use.
Adding to this, an easy way to navegate betweens different whiteboards of the same author (so it is easy to go to the next slide).
Just my opinion about what might work.
A whiteboard lasts 30 days at the moment, but that number may change in future
[1]: http://devopsdays.org/
WhiteboardFox says a few seconds is "fast syncing". Flockdraw's sync is realtime (try it for yourself).
The kind of latency and overhead I wanted when building Flockdraw is only really feasible in JS when using WebSockets (which wasn't even fully standardized until 2011) but was doable in Flash in 2009.
And yes I had the same thoughts last year when I was looking to work with a remote programmer: "Surely, surely someone has a half-decent solution?!". At the time, no. Now, yes :)
Understatement - it works really well on an iPad (even my ancient iPad 1).
We might start using it right away :-)
SVG export would be nice too, perhaps a paid for extra :)
http://whiteboardfox.com/3341-4061-6898