11 ms·
Show HN: A virtual whiteboard for working or teaching remotely
- johnmoore 12y agoOnly 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.
- djokkataja 12y agoIf they're limited by the OS then it's on the way out, because XP is no longer supported.
- rstupek 12y agoIf you're on IE 8, you have bigger issues than this working for you.
- johnmoore 12y agoMy 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.
- MarkMc 12y agoThis 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 http://youtu.be/MDEHFHG1l3Y What does Hacker News think?
- ChuckMcM 12y agoNicely 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 :-)
- rhubarbcustard 12y agoNicely 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?
- MarkMc 12y agoThe 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.
- dceddia 12y agoDid you end up using any libraries for the communication, such as socket.io? (http://socket.io/ http://socket.io/)
- MarkMc 12y agoNo just the standard async Java servlet calls. To be honest I didn't find out about socket.io until half way through the project.
- henningo 12y agoDid 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!
- byoung2 12y agopaper.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/ http://paperjs.org/examples/path-simplification/
- message 12y agoReally cool, i'm missing CMD+Z as Redo shortcut
- leetreveil 12y agoThe 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.
- atmosx 12y agoIt's easy to add audio via skype/facetime/you-name-it though.
- phkahler 12y ago>> 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?
- JoeAltmaier 12y agoIts 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
- staunch 12y agoI think it's better standalone. I already have a hundred ways to voice chat.
- JoeAltmaier 12y agoThat'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!
- divyahansg 12y agoA similar site I built (http://stoodle.org http://stoodle.org) supports free group voice conferencing through Twilio.
- Omnipresent 12y agoThis 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?
- DCKing 12y agoI 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.
- EngVagabond 12y agoThis 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/ http://thesavior.github.io/draw/
- EngVagabond 12y agoHere is a collaborative file that people have affectionately named Bikini Bottom Dinosaur. Check it out for an example. :) http://thesavior.github.io/draw/#0B9XIM4D3BWcWOU44bzVmNWJSd1k http://thesavior.github.io/draw/#0B9XIM4D3BWcWOU44bzVmNWJSd1...
- jmeistrich 12y agoCool, feels as fast as a native app on my iPad. I like the infinite zooming and panning.
- Pxtl 12y agoThe 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.
- samstave 12y agoWhat app does Khan Academy use for precisely this?
- innguest 12y agoI 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.
- bostonpete 12y agoOne 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.
- superuser2 12y agoThis is (more or less) how SmartBoards work. I had one in almost every classroom from 8th grade on.
- thanesh 12y agoHow much are smartboards? wondering if ppl can afford it easily.
- superuser2 12y agoIt 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.
- kewball 12y agoThis 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
- josealicarte 12y agoThis article was awesome, teaching remotely are very effective because other people are busy , they dont have time to go institution.
- deleted 12y ago[deleted]
- joebo 12y agonicely done. I will try using it with my coworkers. The video was helpful with suggestions on zooming to draw text.
- jiri 12y agoVery nice! I gonna use it myself for drawing using tablet on big screen!
- afaqurk 12y agoVery 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.
- jacquesm 12y agoMy 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.
- tartuffe78 12y agohttp://whiteboardfox.com/972-7551-8980 http://whiteboardfox.com/972-7551-8980
- vishnugupta 12y agoCrowd sourced art is in progress :-). Everyone please join!
- unreal37 12y agoBroke it?
- unwind 12y agoI 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.
- wodow 12y agoI 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?
- dblacc 12y agoText is also a feature I'd like to see. Sometimes its easier to just type something than gesture each letter
- nfmangano 12y agoIf you need those features, you're welcome to have a look at my phd project, http://sdcl.ics.uci.edu/research/calico/ 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 https://github.com/uci-sdcl/calico.
- balabaster 12y agoI 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 :)
- 8ig8 12y agoRe: #2, feature exists. See Options > Insert Pic.
- wodow 12y agoOutstanding! But I would not think to look under "Options" for an active feature like this.
- mandor 12y agoI 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).
- eldelshell 12y agoVery nice, but you just made me remember how hard it's to draw with a mouse.
- soneca 12y agoGreat 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.
- louhike 12y agoThe 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.
- cpncrunch 12y agoActually, 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.
- ohaal 12y agoCool idea and implementation. Constructive feedback: A hotkey for undo (Ctrl+Z), or hotkeys in general would be nice. First thing I tried.
- dblacc 12y agoThis is fantastic. How long is a whiteboards lifetime ?
- MarkMc 12y agoThanks :) A whiteboard lasts 30 days at the moment, but that number may change in future
- bitJericho 12y agoIs that from the last date of use?
- khrist 12y agovery nice, responsive. Great job. I was looking for such tool. Feature request, should allow copy paste :).
- bitJericho 12y agoI 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
- cpncrunch 12y agoTry searching for 'online whiteboard' and you'll find lots of them :)
- bitJericho 12y agoHmm maybe I wasn't searching hard enough :D
- kenny_r 12y agoThe brain-shaped thought bubble filled with blue gears is _very_ reminiscent of the devopsdays[1] logo... [1]: http://devopsdays.org/ http://devopsdays.org/
- DanBlake 12y agoI did something like this a few years ago, but we were forced to use flash- http://flockdraw.com http://flockdraw.com
- cpncrunch 12y agoWhy were you forced? html5 was around at the time (and in fact twiddla was launched two years before flockdraw).
- lunixbochs 12y agoOpen 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.
- krmmalik 12y agoOh 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?
- MarkMc 12y agoHaha 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 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 :)
- arethuza 12y ago"Yes it works fine on an iPad" Understatement - it works really well on an iPad (even my ancient iPad 1).
- Brandon0 12y agoThis is very cool! Is there a way to zoom in on desktop? Mouse wheel perhaps?
- MarkMc 12y agoYes - click the Options button
- lazyant 12y agogreat! only missing typing text
- freebs 12y agoMaking it easier to zoom would be nice. Maybe with scrolling?
- jleask 12y agoThat'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 :)
- visarga 12y agoAlso, needs video/audio chat integration, in case you want to do more than watch the board getting filled up.
- oneweirdtrick 12y agoYou hear that? That's the sound of Google's Business Strategy team cueing Wagner's 'Ride of the Valkyries'.
- itry 12y agocome draw with me: http://whiteboardfox.com/3341-4061-6898 http://whiteboardfox.com/3341-4061-6898
- 8ig8 12y agoThis 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 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.
- mentos 12y agoMight this use Firebase?
- jasonkester 12y agoNice 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/ http://www.twiddla.com/
- cpncrunch 12y agoIt 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?
- jasonkester 12y agoWe make the lion's share of our profits from API customers.
- graeme 12y agoI 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.
- senko 12y agoVery 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/ 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!
- Duber 12y agolooks good to me, congratulations
- valar_m 12y agoSSL, 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.
- gavinpc 12y agoDoesn't work if cookies are blocked. Well, it is a "white board," anyway.
- chrisweekly 12y agoSurprised 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!
- tootie 12y agoI would have said WebRTC.
- voidlogic 12y agoI 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?
- MarkMc 12y agoYes 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 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?
- billybofh 12y agoDo 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... ;-)
- dharma1 12y agogoogle drawing -> setup share settings so anyone with link can edit -> scribble https://docs.google.com/drawings/d/11ZmEeCZa_2pAwe9KjHDoAOOKLaBn-C769WahOYr4kmE/edit https://docs.google.com/drawings/d/11ZmEeCZa_2pAwe9KjHDoAOOK...
- har777 12y agoGreat stuff ! I'll try to build my own version using socket.io :)
- hugozap 12y agoI would love to use this, but i don't have a facebook account. I hope you support other login options
- Nemi 12y agoThis 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?
- MarkMc 12y agoI 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....
- junyeeng 12y agoHow long do you take to complete the project? Awesome work!
- devniel 12y agoMy 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 http://notephy.com , I'm just searching a solid support to audio recording with webrtc to improve it.
- niix 12y agoReminds me of http://www.citrix.com/products/talkboard/overview.html http://www.citrix.com/products/talkboard/overview.html
- cdnsteve 12y agoInteresting, seems like TogetherJs or Prezi.
- sidcool 12y agoVery impressed Mark. Nicely done. Do you mind telling the technology stack?
- EngVagabond 12y agoHe 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/ http://thesavior.github.io/draw/
- nfmangano 12y agoBuilding your solution to work without server code is amazing. Also, nice UI.
- thanesh 12y agoyou have to login?
- EngVagabond 12y agoIt uses Google Drive for cloud file storage (syncing and sharing)
- free2rhyme214 12y agoMy only suggestion is to make sure the youtube video plays in HD by default. Excellent work!
- ujjwal_wadhawan 12y agoA zoom in/out with mouse scroll would be good to have.
- hoof_marks 12y agoAwesome!!..with tablet. You can add text support, and login with email id..dont have facebook!
- shervinshaikh 12y agoThis looks similar to Citrix's Talkboard http://www.citrix.com/products/talkboard/overview.html http://www.citrix.com/products/talkboard/overview.html
- j2kun 12y agoA simple chat functionality within the app would be nice...
- samstave 12y agoThere should be an "omeagle" version of this where you draw pics with strangers.
- gtramont 12y agoBack in 2011, when I was starting with node.js I built something I called 'Writeboard' https://github.com/gtramontina/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/ http://writeboard2.herokuapp.com/ -- Check it out.
- gtramont 12y agoTotally experimental, by the way...
- orcinusorca 12y agoVery well done. I can see myself using this in the near future. Thank you for making this.
- gldnspud 12y agoThis 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/ http://muro.deviantart.com/, which supports pen pressure using a plugin. Any chance you might add that kind of flair to whiteboardfox?
- MarkMc 12y agoMaybe in the long term, but for now I'm concentrating on other things (like adding typeable text)
- megablast 12y agoDid something like this myself, a few years ago: https://itunes.apple.com/us/app/remote-whiteboard/id522138867?mt=8 https://itunes.apple.com/us/app/remote-whiteboard/id52213886... Except all you need to follow along is a browser.
- yaddayadda 12y ago@MarkMC - Any idea if your browser whiteboard will with the TouchPico (https://www.indiegogo.com/projects/touchpico-turn-any-surface-into-a-touch-screen/x/1083434 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.)