Show HN: my collaborative drawing webapp

by senko • 15 years ago

100 35 15 years ago

senko11• 15 years ago

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.

robfitz• 15 years ago

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?

senko11• 15 years ago

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!

joeyespo• 15 years ago

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

cstuder2• 15 years ago

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

senko11• 15 years ago

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

cstuder2• 15 years ago

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

dotBen• 15 years ago

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?

stephen_mcd2• 15 years ago

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

o1iver• 15 years ago

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?

stephen_mcd2• 15 years ago

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.

wyclif• 15 years ago

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..."

senko11• 15 years ago

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)

ThePawnBreak• 15 years ago

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.

matiu• 15 years ago

What's it written in ?

brainless• 15 years ago

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

senko11• 15 years ago

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.

bornon5• 15 years ago

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.

senko11• 15 years ago

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)

aagha• 15 years ago

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.

senko11• 15 years ago

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/).

fab1an• 15 years ago

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

senko11• 15 years ago

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

danest• 15 years ago

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.

geogra42• 15 years ago

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

senko11• 15 years ago

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!

geogra42• 15 years ago

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.

tyohn• 15 years ago

I like it but maybe add an undo button?

mbyrne• 15 years ago

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.

senko11• 15 years ago

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

ashishg• 15 years ago

Great stuff!

boscomutunga• 15 years ago

Great work , works perfectly in chrome

ajbatac• 15 years ago

Great work!

Show HN: my collaborative drawing webapp

Related Stories