Magnetic Poetry in 10 easy steps
Download Source Code: magneticpoetry.zip
If you’ve ever owned a magnetic poetry set, you know what it’s like to wake up and see things written on your refrigerator that make you question the type of people you let into your home.
Imagine the questionable things you might see written on your fridge if anyone with an internet connection could access it. Here’s how you can do exactly that in 10 easy steps using django, jQuery, and sqlite :
1a: create an html page with the “fridge” and magnets
<div id="fridge"> <div class="magnet" style="left: 10px; top: 10px;">magnetic</div> <div class="magnet" style="left: 105px; top: 13px;">poetry</div> </div>
1b: give it some style
#fridge{border:1px solid black; width:600px; height:400px; position:relative;} .magnet{border:1px solid black; border-right:2px solid black; border-bottom:2px solid black; font-family:"courier new",veranda,arial; float:left; padding:0 3px 0 3px; background:white; cursor:pointer; position:absolute;}
1c: add some jQuery UI to make it interactive
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //make the magnets draggable and constrained to the fridge (their parent) $('.magnet').draggable({ containment: 'parent', stack:'.magnet', stop: function(){ //post the magnet id & coordinates back to the server after a move var id = $(this).attr('mid') var coors = [parseInt($(this).css('left')),parseInt($(this).css('top')),parseInt($(this).css('z-index'))] $.get('update/'+id+'['+coors.join(':')+']') } }); }); </script>
You should now have a static fridge that looks something like this
So you’ve got the static dealio together, now it’s time to create the dynamic backend using django and sqlite.
2: create a django project then start an app (I call it “magneticpoetry”)
django-admin.py startproject sample && cd sample python manage.py startapp magneticpoetry
3: create a model for the magnets
class Magnet(models.Model): #text & x,y,z coordinates text = models.CharField(max_length=200) x = models.IntegerField() y = models.IntegerField() z = models.IntegerField()
4: configure the application
This is as easy as updating 3 lines in the settings.py file. First, configure the database (sqlite in this case).
DATABASE_ENGINE = 'sqlite3' # database engine DATABASE_NAME = 'sample.db' # database file name
Second, add the “sample” application to the “INSTALLED_APPS”.
INSTALLED_APPS = ( .., 'sample.magneticpoetry', )
5: setup the app’s database
python manage.py syncdb
6: create a django template
convert the html page from step 1 into a django template, simply placing a loop and tags for the magnets in the “fridge” div container.
<div id="fridge"> {% for m in magnets %} <div class="magnet" style="left: {{ m.x }}px; top: {{ m.y }}px;">{{ m.text }}</div> {% endfor %} </div>
Save the file as magneticpoetry/templates/fridge.html
7: create index and update views in the magneticpoetry/views.py file that was created when starting the ‘magneticpoetry’ app.
from django.http import HttpResponse from django.shortcuts import render_to_response from models import Magnet def index(request): """display all magnets""" return render_to_response('fridge.html',{ 'magnets' : Magnet.objects.all() }) def update(request,id,x,y,z): """update the magnet's coordinates & save""" text = Magnet.objects.get(id=id).text Magnet(id=id,text=text,x=x,y=y,z=z).save() return HttpResponse('updated: %s::%s:%s:%s' % (str(id),str(x),str(y),str(z)))
8: add a couple routes
urlpatterns = patterns('', # index route (r'^/$','magneticpoetry.views.index'), # route for saving movements (r'^/update/(?P<id>\d+)\[(?P<x>\d+):(?P<y>\d+):(?P<z>\d+)\]$','magneticpoetry.views.update'), )
9: add some sample data using the django API
# import the Magnet model >>>from magneticpoetry.models import Magnet # create a couple magnets and save them >>>Magnet(text='hello',x=10,y=100).save() >>>Magnet(text='world',x=20,y=200).save()
10: serve
python manage.py runserver
And that’s it! If you want to make the application publicly available, you can setup an account with a hosting company such as WebFaction and deploy it within minutes.
So try setting one up for yourself and watch the dodgy phrases take shape
You can download the sample project here: magneticpoetry.zip