Show HN: my collaborative drawing webapp | Hacker News Reader

Show HN: my collaborative drawing webapp

awwapp.com

100 pointssenko35 comments

A small HTML canvas drawing app (and embeddable widget) I did so I could use my (non-iPad) tablet for drawing quick sketches. A few people suggested I add collaboration, which was a nice excuse to play with node.js :)

Tech used: node.js/nowjs for synchronising the drawings, jquery/canvas for the frontend, flask for saving/posting the images.

The syncing doesn't work for me when I open 2 browsers and share it to myself..? Does it just share the initial state (which worked great) or also updates?

It should share the updates too. If it doesn't work for you, could you please let me know which browsers you use (here, tweet to @awwapp or mail me)? Thanks!

Was just about to ask about the syncing. Nice job, it's fun! And thanks for this comment.

We did something similar for Django Dash a couple weeks ago: http://drawnby.jupo.org/

Knocked up in 48 hours with Django, WebSockets and Redis

All open source: https://github.com/stephenmcd/drawnby

Released django-socketio a week later born out of that project: https://github.com/stephenmcd/django-socketio

I was going to try it, but, honest feedback, the fact that I have to login before even giving it a go is a real no-go. Why don't you let me try before signing in?

Fair point and something we considered - we wanted to always have a valid account when drawing so that users could be identified when collaborating together, and with only 48 hours to get everything working the quickest way was to slap on Twitter/Facebook authentication.

Clickable link to a work in progress: http://awwapp.com/draw.html#ScK6YsOrwp

Sorry, the process consumed all the memory and got killed :( Wasn't expecting so much activity on a single board :) Was fun to watch!

Yes, it was a fun five-minutes-community. (The first penis showed up 30 seconds later...)

The mass erasure of 3:30 still haunts us all.

Here is a new shared canvas: http://awwapp.com/draw.html#BW0Gw6c2w4

EDIT: Looks like this one got killed too :(

How many concurrent connections can this take, Senko?

As many as the memory allows (and up to 1024, but was nowhere close that number), and I think that wasn't the problem here - but it seems that once the canvas has been drawn on for long enough, the new users just can't get the previous image. I'll have to refactor the initial loading code, at the moment it naively passes all the previous drawing operations to the client with no regards to the limits.

Sorry about this, hopefully I'll be able to fix these problems soon.

Btw I've also added it to Chrome Web Store, so it can be added to Chrome as an app: https://chrome.google.com/webstore/detail/mhmonflnoepbijmbbf... (nothing fancy, just goes to the website)

Great job. You should add a 'submit to Reddit' button, too!

Thanks! Yeah, perhaps a row of those "submit to your favorite site/forum" social buttons.

This looks awesome. This reminds me a little bit like the facebook application I use to play with before. http://www.facebook.com/graffitiwall

Except this one is more real time, but I would love a replay feature to show what people have been drawing before me.

Every time I try to load a shared link I keep getting a "Cannot Join Shared Drawing" popup error

Sorry about that! Either the drawing is shared no more (eg the one linked in these comments - if that's the case, you'll always get the error trying to go to that drawing), or you've found a bug. In the latter case case, could you please tell me your browser/os combo? here, in a tweet to @awwapp or in the mail (listed in my HN profile page). Thanks!

Ok, I think that must have been the issue. The drawing must be open on the browser window of the person who shares the drawing.

Awesome work. I wanted to let you know that the erase function is not working on Firefox 3.6.19 Mac. I share the image with a Safari browser and the image there is erased when I erase in FF window but the erasure doesn't show up in the FF window I erased in.

Thanks for the report, I'll look into it.

The English copy on the home page needs a slight, but important once-over. "A Web Whiteboard is touch-friendly whiteboard app..." should be written: "Web Whiteboard is a touch-friendly whiteboard app..."

Thanks for catching it! Yeah, not a native speaker, will ask someone to go through it (the wording on the "add to your site" could probably be improved as well)

It would be very helpful if you put a Clear button somewhere more accesible, but hard to click by mistake, such as in the lower left. Also, don't ask me if I want to clearn the page.

Absolutely fun app. tried on iPad2, Chrome13 on Mac, Safari 5.1 on Mac. If you draw fast then the curves become more like straight lines, I am sure you are improving that...

Thanks! Yeah, the app draws a line between the points. This isn't noticable if you're drawing slower (or if the device is fast enough), but if you're driving faster than it can be processed, the lines do show. I'll try to see how to improve on that, the plan is for the app to be useful on Android phones and iPhones as well.

Even in Photoshop, if you draw a very quick curve, you can see individual vertices along it. But Photoshop seems to quickly interpolate curves instead of straight lines, so you get a rough approximation of the curve you're drawing between the vertices. It's pretty good for hiding how it works.

Very nice app, by the way.

Fantastic! I think it's a great idea.

I think you're missing a couple of basic tools:

- Tex

- Basic shapes

Edit: Removed eraser from list. Noticed there was one.

Thanks!

I wanted to stick to the whiteboarding/sketching basics - you get a pen and an eraser. Perhaps it makes sense to add a few more tools, but I'm wary of adding too much, because I want it to be useable on really small screens, without keyboard, and with touch input, as opposed to only mouse.

For a sophisticated HTML drawing app (albeit not collaborative one, and not very usable without a pointing device), take look at the awesome DeviantArt Muro app (http://muro.deviantart.com/).

I like it but maybe add an undo button?

Great work , works perfectly in chrome

What's it written in ?

Great stuff!

Great work!

Reply on news.ycombinator.com