5 ms·

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 M

• ChuckMcM 12y ago
  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 :-)
• rhubarbcustard 12y ago
  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?
  • MarkMc 12y ago
    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.
    • dceddia 12y ago
      Did you end up using any libraries for the communication, such as socket.io? (http://socket.io/ http://socket.io/)
      • MarkMc 12y ago
        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.
    • henningo 12y ago
      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!
      • byoung2 12y ago
        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/ http://paperjs.org/examples/path-simplification/
• message 12y ago
  Really cool, i'm missing CMD+Z as Redo shortcut
• leetreveil 12y ago
  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.
  • atmosx 12y ago
    It'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 ago
        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
        • staunch 12y ago
          I think it's better standalone. I already have a hundred ways to voice chat.
          • JoeAltmaier 12y ago
            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!
  • divyahansg 12y ago
    A similar site I built (http://stoodle.org http://stoodle.org) supports free group voice conferencing through Twilio.
• Omnipresent 12y ago
  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?
  • DCKing 12y ago
    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.
• EngVagabond 12y ago
  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/ http://thesavior.github.io/draw/
  • EngVagabond 12y ago
    Here 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 ago
    Cool, feels as fast as a native app on my iPad. I like the infinite zooming and panning.
  • Pxtl 12y ago
    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.
    • samstave 12y ago
      What app does Khan Academy use for precisely this?
    • innguest 12y ago
      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.
• bostonpete 12y ago
  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.
  • superuser2 12y ago
    This is (more or less) how SmartBoards work. I had one in almost every classroom from 8th grade on.
    • thanesh 12y ago
      How much are smartboards? wondering if ppl can afford it easily.
      • superuser2 12y ago
        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.
• kewball 12y ago
  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