drawnby

drawnby copied to clipboard

DrawnBy_ is a collaborative drawing app built by Josh de Blank, Travis White and Stephen McDonald_ for the 2011 Django Dash_. Users are able to create new drawings which anyone can contribute to in real-time. Drawings can then be saved to the DrawnBy gallery where users can view and vote on their favourite drawings.

Technical Overview

Aside from Django, DrawnBy brings together several unique technologies. The HTML5 canvas API_ is used to implement client-side drawing features. These interactions are then sent over the wire using websockets_ via Socket.IO. gevent is used on the server to maintain long running requests, and the key-value server Redis_ is used to store all drawing interactions.

Installation

DrawnBy was built on Ubuntu 10.04_ VPS provided by Linode_. The following packages are required and can be installed via apt::

sudo apt-get update
sudo apt-get install build-essential
sudo apt-get install python-pip
sudo apt-get install python-imaging
sudo apt-get install libevent-dev

Redis can be downloaded, built and run with the following commands::

wget http://redis.googlecode.com/files/redis-2.2.12.tar.gz
tar -xf redis-2.2.12.tar.gz
cd redis-2.2.12
sudo make
./src/redis-server

Development of DrawnBy is managed using the Mercurial_ version control system and hosted on BitBucket_. With Mercurial installed, clone the repository with the following command::

hg clone http://bitbucket.org/stephenmcd/drawnby

The required Python packages can then be installed via pip_ with the following command from the newly created drawnby project directory::

cd drawnby
sudo pip install -r requirements.txt

A database is then required. By default DrawnBy is configured for a SQLite database. Consult the django documentation_ for configuring other database servers. Once configured, the database can be created running the following commands::

python manage.py syncdb
python manage.py migrate

To handle websockets, DrawnBy requires a custom server based on gevent. As such a management command is provided to run the project::

sudo python manage.py runserver_socketio

DrawnBy uses Twitter or Facebook to handle authentication. As such API keys are required for an app with eithe provider. Once API keys are obtained, rename the local_settings.py.template file in the drawnby project directory to local_settings.py and edit this file to set the keys where defined.

.. _DrawnBy: http://drawnby.jupo.org/ .. _Django Dash: http://djangodash.com/ .. _HTML5 canvas API: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html .. _websockets: http://dev.w3.org/html5/websockets/ .. _Socket.IO: http://socket.io/ .. _gevent: http://www.gevent.org/ .. _Redis: http://redis.io/ .. _Linode: http://www.linode.com/ .. _Ubuntu 10.04: http://www.ubuntu.com/ .. _Mercurial: http://mercurial.selenic.com/ .. _BitBucket: https://bitbucket.org/ .. _pip: http://www.pip-installer.org/ .. _django documentation: https://docs.djangoproject.com/en/1.3/ref/databases/ .. _Josh de Blank: http://joshdeblank.com/ .. _Travis White: http://www.traviswhite.com.au/ .. _Stephen McDonald: http://steve.jupo.org/