This is a very simple example that allows you to design a web application that creates custom QR Code based on a message or url a user can type in a form.
It is based on the elaphe python lib (http://code.google.com/p/elaphe/).
Set up
Let's start to set up a python virtual environment and install there the required library.
(I assume the easy install package is already installed).
virtualenv --no-site-packages qrcode
cd qrcode/
source bin/activate
easy_install elaphe
Install web2py
wget http://www.web2py.com/examples/static/web2py_src.zip
unzip web2py_src.zip
cd web2py
./web2py --nogui -a admin
Some coding
Create from the admin console an application called qrcode or any name you like.
Edit the default.py controller and add the following code:
from elaphe import barcode
from gluon.contenttype import contenttype
def index():
form = SQLFORM.factory(
Field('message', requires=IS_NOT_EMPTY())
)
if form.accepts(request.vars, session):
msg=request.vars.message
qrcode=barcode('qrcode', msg, options=dict(version=9, eclevel='M'),
margin=10, data_mode='8bits')
response.headers['Content-Type']="image/png"
qrcode.save(response.body, "PNG")
return response.body.getvalue()
else:
return dict(form=form)
That's it !!!!
The application it's ready. You can now beautify it as you like. Everything is done inside the line 13 and 14 by the [[elaphe http://code.google.com/p/elaphe/]] lib.
Ajax ... please
I'll just show below how to add a small ajax effect to post the message without reloading the full page and get the QR code as a dynamic image.
-create the view default/index.html and put in there the following code:
{{extend 'layout.html'}}
<form id="myform">
<input name="message" id="message" />
<input type="submit" />
</form>
<div id="target"></div>
<script>
jQuery('#myform').submit(function() {
ajax('{{=URL('new_post')}}',
['message'], 'target');
return false;
});
</script>
-Replace your controller with:
from elaphe import barcode
from gluon.contenttype import contenttype
def index():
return dict()
def new_post():
form = SQLFORM.factory(
Field('message', requires=IS_NOT_EMPTY())
)
if form.accepts(request.vars, formname=None):
msg=request.vars.message
return IMG(_src=URL('get_image', vars={'message':msg})).xml()
elif form.errors:
return dict(form=form)
def get_image():
msg=request.vars.message
qrcode=barcode('qrcode', msg, options=dict(version=9, eclevel='M'), margin=10, data_mode='16bits')
response.headers['Content-Type']="image/png"
qrcode.save(response.body, "PNG")
return response.body.getvalue()
Basically, the ajax call just puts an image tag inside the target div** which refers to the method get_image: this method dynamically build the QR code with the query string message.
Comments (0)