Show HN: A virtual whiteboard for working or teaching remotely | Hacker News Reader

Show HN: A virtual whiteboard for working or teaching remotely

whiteboardfox.com

309 pointsMarkMc140 comments

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.

My YouTube video gives a nice overview of the benefits of a virtual whiteboard: http://youtu.be/MDEHFHG1l3Y

What does Hacker News think?

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.

Did you end up using any libraries for the communication, such as socket.io? (http://socket.io/)

No just the standard async Java servlet calls. To be honest I didn't find out about socket.io until half way through the project.

Did you consider doing spline fits to the x,y coordinates and then just saving the spline coefficients instead?

The fit process could likely be done client-side, and could offer some subtle smoothing if wanted?

Anyhow, really nice execution!

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/

Really cool, i'm missing CMD+Z as Redo shortcut

The video shows Mark explaining to Sally how a Facebook login would work on her website with the whiteboard.

A killer missing feature seems to be microphone support, which the video alludes to.

It's easy to add audio via skype/facetime/you-name-it though.

>> 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?

Its critical to integrate all this - else every meeting begins with a struggle to get on the same page with every app and every participant.

Disclaimer: I work at Sococo

I think it's better standalone. I already have a hundred ways to voice chat.

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!

A similar site I built (http://stoodle.org) supports free group voice conferencing through Twilio.

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.

Actually, there are lots of other online whiteboards that have all of these features without requiring a download or plugin.

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?

I don't know what he's using, but Servlet 3.0 and its implementations have support for WebSockets which would work fine for something like this.

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/

Here is a collaborative file that people have affectionately named Bikini Bottom Dinosaur. Check it out for an example. :) http://thesavior.github.io/draw/#0B9XIM4D3BWcWOU44bzVmNWJSd1...

Cool, feels as fast as a native app on my iPad. I like the infinite zooming and panning.

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.

What app does Khan Academy use for precisely 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.

This is (more or less) how SmartBoards work. I had one in almost every classroom from 8th grade on.

How much are smartboards? wondering if ppl can afford it easily.

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.

Speaking of whiteboard photo-digitizing:

https://gist.github.com/lelandbatey/8677901

https://github.com/Flameeyes/unpaper

those links are pretty cool!

This is very cool. Do you think you could convert a cleaned up PDF or jpg from a service like unwhiteboard.com in to a virtual whiteboard?

Disclaimer: I made unwhiteboard.com

I love it - works perfectly... but immediately the feature creeper in me has kicked in. Killer features

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?

Text is also a feature I'd like to see. Sometimes its easier to just type something than gesture each letter

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 agree, these 3 features would push this over the top in terms of usability. This would make remote consulting so much easier too.

Edit: Well done though, awesome 1st cut :)

Re: #2, feature exists. See Options > Insert Pic.

Outstanding! But I would not think to look under "Options" for an active feature like this.

I fully agree, especially for the text (it is hard to write with a mouse!).

In addition, basic shapes like line/rectangle/circle would be welcomed (I am terrible at drawing a circle with a mouse).

I got the exact same feeling after using it for 2 seconds. Then watched his video demo and understood why he did it that way.

He did the product with tablet users in mind.

You can probably use a wacom tablet instead of a mouse. It makes it a lot easier to draw freehand.

Yes typeable text is high on the to-do list (although on a touch-screen tablet it's probably just a efficient to draw the text)

It might be just as efficient in terms of the amount of time taken to draw/type it, but typing it lets people copy/paste and ensures legibility.

A similar site I built (http://stoodle.org) supports these three features in addition to group voice conferencing through Twilio.

Haha, that's awesome :-) thanks for sharing.

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

http://whiteboardfox.com/972-7551-8980

Crowd sourced art is in progress :-). Everyone please join!

Broke it?

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 :)

"Yes it works fine on an iPad"

Understatement - it works really well on an iPad (even my ancient iPad 1).

Very nice. Seems to be vector-based (ie. how the eraser and undo/redo work, and allowing things like pan&zoom).

I'm the author of a similar tool, https://awwapp.com/ , which is bitmap-based, ie the eraser works as it'd on a physical whiteboard, and there's no zoom (or undo/redo).

Great start, looking forward to seeing the future progress!

Care to share income numbers (assuming it is ads based)? thanks

It's not, but we've recently rolled out the ability to add the wihteboard to your own site, which is a paid subscription-based service.

This is freaking awesome. You probably know this but it does not work in IE on windows 8 with a touchscreen. Chrome works fine however. I am guessing it is something to do with the touch events that IE has that are different?

I didn't know that! Afraid I don't have a Windows 8 touchscreen device, so haven't tested on that platform. Will look into it....

The brain-shaped thought bubble filled with blue gears is _very_ reminiscent of the devopsdays[1] logo...

[1]: http://devopsdays.org/

SSL, private boards, and some kind of assurance that what we're drawing truly is being erased.

Add that, and we'll pay you money to let us use it. I suspect other companies will, too.

This is handy for remote tutoring. I dropped a math worksheet image onto the whiteboard. Imagine working remotely with a student. Here's a static 'snapshot'.

http://s1.whiteboardfox.com/s/54cb7dbaf913f471.png

Tried this years ago over dialup with some MS app. The technology was flakey and kept getting in the way. This works great.

You hear that? That's the sound of Google's Business Strategy team cueing Wagner's 'Ride of the Valkyries'.

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 :)

Also, needs video/audio chat integration, in case you want to do more than watch the board getting filled up.

Very nice!

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.

Do you have any plans to have a 'broadcast' mode where the person who creates the whiteboard is the only one who can draw on it? I can see itchy student fingers abusing it otherwise in a teaching context... ;-)

Nice first cut. It's actually surprising that it took a full seven years for anybody else to show up Twiddla's [1] space with a true HTML5 whiteboard. Back when we started out, there were half a dozen commercial versions of this exact thing, but all in Flash or Java, and all trying to compete with WebEx.

It think you're on the right path positioning this for use in schools. That's our main use case too, replacing overhead projectors in the classroom, and ruining snow days for an entire generation of kids.

Good luck!

[1] http://www.twiddla.com/

It was more like two years actually :)

Anyway, back in 2007 java and flash were reasonable solutions. Today, not so much.

PS, how do you make any money from twiddla if you give away free educational accounts?

We make the lion's share of our profits from API customers.

I use this kind of thing professionally, for distance tutoring. Looks very nice, draws smoothly. I like the easy "erase" function.

There's one thing stopping me from using it: the URL

I use jotwithme right now, and I can set a session name, then tell people to go there. Here, I have to get the url from my ipad, sent it to myself somehow, and send it to the student.

That's not exactly hard, but it's annoying enough compared to jotwithme that I'd keep using that. But if you had that feature, I'd switch. Jot's erase feature isn't as good.

Back in 2011, when I was starting with node.js I built something I called 'Writeboard' https://github.com/gtramontina/Writeboard . It's not an active project anymore, but I've considered resuming working on it. A rewrite of it is hosted in heroku, at http://writeboard2.herokuapp.com/ -- Check it out.

Totally experimental, by the way...

This tool was pretty responsive to draw with using a tablet, and I'm glad the pen width isn't very large.

I love using a Wacom tablet for drawing diagrams, and wish there was a good shared whiteboard tool that supported pen pressure.

I didn't know if this is possible at first, but a quick search revealed http://muro.deviantart.com/, which supports pen pressure using a plugin.

Any chance you might add that kind of flair to whiteboardfox?

Maybe in the long term, but for now I'm concentrating on other things (like adding typeable text)

Surprised to learn this is Java and long-polling. (These features scream Meteor / DDP to me.) Regardless, it's a v good start. Thanks for sharing!

I would have said WebRTC.

I agree this is a great start. This is a good example of how solid implementation is almost always much more important then "newer/better technologies".

Its a bit of a tangent, but it makes me think how "feature focused" people are when hiring, do you know x/y/z with domain experience in q?

The right questions are, is this candidate a intelligent, a fast learner, reliable, have a track record of producing?

Yes the Java async messaging stuff required some pretty deep understanding, especially ironing out a couple of deadlock bugs (ironically drawing a diagram in whiteboard fox helped me understand the deadlocks: https://s1.whiteboardfox.com/s/420876221780898a.png)

I would have much preferred a solid framework or library. Maybe I didn't spend enough time researching the alternatives to writing it myself.

But then again I wonder if a library would have had the low-level flexibility I needed. For example, I found that one of the most frustrating things when using whiteboard fox was that your internet connection would go down and you wouldn't know about it. So you would not realise that there was a problem and think that the other person had simply stopped drawing. My solution was to add a 5-second heartbeat so that the browser could display a 'disconnected' message when it didn't get the heartbeat. Would a high-level library allow me the option of such a heartbeat?

@MarkMC - Any idea if your browser whiteboard will with the TouchPico (https://www.indiegogo.com/projects/touchpico-turn-any-surfac...) which is an inexpensive touchscreen projector. (I'm just thinking these would be a great combination of technologies.)

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.

Hmmm - send me a screenshot. I'll take a look.

"You have mail". Good luck. :)

Great work! My feature request: similar to the "insert pic", create an insert slide. You upload a .PPT and select which slide you want to use.

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.

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 would love to use this, but i don't have a facebook account. I hope you support other login options

or you can use it without login-in

+1 ... supporting twitter and google oauth would make me use it too.

You don't need to log in at all - just bookmark the whiteboard pages you want to keep!

My respect for use the java stack, I like it. Here another guy to tried to build his own whiteboard a few years ago http://notephy.com , I'm just searching a solid support to audio recording with webrtc to improve it.

google drawing -> setup share settings so anyone with link can edit -> scribble

https://docs.google.com/drawings/d/11ZmEeCZa_2pAwe9KjHDoAOOK...

Did something like this myself, a few years ago:

https://itunes.apple.com/us/app/remote-whiteboard/id52213886...

Except all you need to follow along is a browser.

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

Try searching for 'online whiteboard' and you'll find lots of them :)

Hmm maybe I wasn't searching hard enough :D

This looks similar to Citrix's Talkboard http://www.citrix.com/products/talkboard/overview.html

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.

Reminds me of http://www.citrix.com/products/talkboard/overview.html

I did something like this a few years ago, but we were forced to use flash- http://flockdraw.com

Why were you forced? html5 was around at the time (and in fact twiddla was launched two years before flockdraw).

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.

This article was awesome, teaching remotely are very effective because other people are busy , they dont have time to go institution.

come draw with me:

http://whiteboardfox.com/3341-4061-6898

Tic-tac-toe over the internet is actually pretty fun.

oh, it was a lot of fun until somebody erased everything.

Yeah, I almost finished my drawing of Elsa (from Disney's Frozen) :/

nicely done. I will try using it with my coworkers. The video was helpful with suggestions on zooming to draw text.

Awesome!!..with tablet. You can add text support, and login with email id..dont have facebook!

My only suggestion is to make sure the youtube video plays in HD by default. Excellent work!

Very well done. I can see myself using this in the near future. Thank you for making this.

There should be an "omeagle" version of this where you draw pics with strangers.

Doesn't work if cookies are blocked. Well, it is a "white board," anyway.

Very nice, but you just made me remember how hard it's to draw with a mouse.

Very impressed Mark. Nicely done. Do you mind telling the technology stack?

He has commented below that the 'front end is GWT, back end is Java servlets. Database was originally MySQL but switched to Prevayler for performance reasons.'

I have built a similar tool that is also an HTML5 / Canvas collaborative drawing app which uses Google Drive for storage and has no server code beyond that. It works offline (and syncs up with collaborators when you come online) and runs in Chrome, Firefox, Safari, iOS, and Android and supports touch. http://thesavior.github.io/draw/

Building your solution to work without server code is amazing. Also, nice UI.

you have to login?

It uses Google Drive for cloud file storage (syncing and sharing)

This is very cool! Is there a way to zoom in on desktop? Mouse wheel perhaps?

Yes - click the Options button

Very nice! I gonna use it myself for drawing using tablet on big screen!

Great stuff ! I'll try to build my own version using socket.io :)

Making it easier to zoom would be nice. Maybe with scrolling?

A simple chat functionality within the app would be nice...

A zoom in/out with mouse scroll would be good to have.

How long do you take to complete the project? Awesome work!

This is fantastic. How long is a whiteboards lifetime ?

Thanks :)

A whiteboard lasts 30 days at the moment, but that number may change in future

Is that from the last date of use?

Only works in Internet Explorer 9, doesn't work in IE 8 in some companies they only allow you to use IE only and only upgrade the browser if they install a new OS.

If they're limited by the OS then it's on the way out, because XP is no longer supported.

If you're on IE 8, you have bigger issues than this working for you.

My work mate is using IE8 I am using IE9 just happened to try it out. But found out you can do the same thing in microsoft lync which I didn't know you could do.

Interesting, seems like TogetherJs or Prezi.

very nice, responsive. Great job. I was looking for such tool. Feature request, should allow copy paste :).

Might this use Firebase?

looks good to me, congratulations

great! only missing typing text

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.

We might start using it right away :-)

missing typing and SSL.

Reply on news.ycombinator.com