If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

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)


Hosting graciously provided by:
Python Anywhere