/dev/stu

Posted by stu at February 25th, 2011

A quick post on using Python Charts to generate nice SVG charts for your django website (I’ve had the code hanging around for ages – so should just post it). The code is based on the examples there, here I integrate it into Django.

To install you’ll need to do

pip install pycha

Heres the code for a simple view to output a chart directly to SVG:

# views.py

from StringIO import StringIO
from django.http import HttpResponse

import cairo

def colors(request):
    in_req = 1

    svg_buffer = StringIO()

    width, height = (500, 400)
    surface = cairo.SVGSurface(svg_buffer, width, height)

    dataSet = (
     ('dataSet 1', ((0, 1), (1, 3), (2, 2.5))),
     ('dataSet 2', ((0, 2), (1, 4), (2, 3))),
     ('dataSet 3', ((0, 5), (1, 1), (2, 0.5))),
    )

    options = {
       'legend': {'hide': True},
       'background': {'color': '#f0f0f0'},
    }

    #import pycha.bar
    #chart = pycha.bar.VerticalBarChart(surface, options)

    import pycha.line
    chart = pycha.line.LineChart(surface, options)
    chart.addDataset(dataSet)
    chart.render()

    del chart
    del surface

    response = ''
    response = HttpResponse(mimetype='image/svg+xml')
    svg_buffer.seek(0)
    response.write( svg_buffer.read() )
    return response

The basic idea is that – instead of the chart outputting to an svg file, the output goes to a buffer, this is triggered by calling the destructors of the chart and it’s cairo surface.  Once the data is in the buffer, it is rewound and played back to the Http Response.

Inline SVG

As is, this won’t work as inline svg, because outputting the XML preamble in the middle of the page will cause problems.  Below is an example that let’s you decide if you need the preamble (full SVG output), or not (SVG fragment for inclusion in a page or another SVG):

# Create your views here.

from StringIO import StringIO
from django.http import HttpResponse
from django.shortcuts import render_to_response

import cairo

XML_PREAMBLE = '<?xml version="1.0" encoding="UTF-8"?>'

def colors_chart(inline = False):
    """
    Generate colours chart

    Set inline to True to disable the XML preamble
    """
    in_req = 1

    svg_buffer = StringIO()

    width, height = (500, 400)
    surface = cairo.SVGSurface(svg_buffer, width, height)

    dataSet = (
     ('dataSet 1', ((0, 1), (1, 3), (2, 2.5))),
     ('dataSet 2', ((0, 2), (1, 4), (2, 3))),
     ('dataSet 3', ((0, 5), (1, 1), (2, 0.5))),
    )

    options = {
       'legend': {'hide': True},
       'background': {'color': '#f0f0f0'},
    }

    import pycha.bar
    chart = pycha.bar.VerticalBarChart(surface, options)

    #import pycha.line
    #chart = pycha.line.LineChart(surface, options)
    chart.addDataset(dataSet)
    chart.render()

    del chart
    del surface

    response = ''

    if inline:
        svg_buffer.seek(len(XML_PREAMBLE))
    else:
        svg_buffer.seek(0)
    return svg_buffer.read()

def colors_svg(request):
    """ render a pure SVG chart """
    response = HttpResponse(mimetype='image/svg+xml')
    response.write(colors_chart(inline = False))
    return response

def index(request):
    """ render a chart into the template """
    chart_svg = colors_chart(inline = True)

    return render_to_response(
        'shapes_index.html',
        { "chart" : chart_svg },
        mimetype='application/xhtml+xml')

An example project with the above code is available here:
pycha_django

[EDIT 25/2/2011] Fixed PyCha URL

Posted by stu at May 12th, 2010

Often it’s useful to be able to store up drawing commands so you can use them later somewhere else (or even just pass them to another thread).

This is a simple drawing model, implemented in cairo, hopefully somebody will find it useful.

Queue

class DrawQueue:
    '''
    A list of draw commands, stored as callables that, are
    passed a set of parameters to draw on from the canvas
    implementation.
    '''
    def __init__(self, render_callables = None):
        self.render_callables = render_callables or deque()

    def append(self, render_callable):
        '''
        Add a render callable to the queue
        '''
        self.render_callables.append(render_callable)

    def render(self, cairo_ctx):
        '''
        Call all the render callables with cairo_ctx
        '''
        for render_callable in self.render_callables:
            render_callable(cairo_ctx)

The queue just accepts callables (any old function), and calls them when you call render, passing them a cairo context you pass in.

To get useful functions you can call closure functions like these:

def paint_closure():
    def paint(ctx):
        ctx.paint()
    return paint

def fill_closure():
    def fill(ctx):
        ctx.fill()
    return fill

def set_source_rgb_closure(r, g, b):
    def set_source_rgb(ctx):
        ctx.set_source_rgb(r, g, b)
    return set_source_rgb

def moveto_closure(x, y):
    def moveto(ctx):
        ctx.move_to(x, y)
    return moveto

def rectangle_closure(x, y, w, h):
    def rectangle(ctx):
        ctx.rectangle(x, y, w, h)
    return rectangle

Adding commands to the queue is simple:

dq = DrawQueue()
dq.append(set_source_rgb_closure(1, 1, 1))
dq.append(paint_closure())
dq.append(moveto_closure(10, 0))
dq.append(rectangle_closure(0, 0, 20, 20))
dq.append(set_source_rgb_closure(0, 0, 0))
dq.append(fill_closure())

This is the same drawing model I’m using in my branch of shoebot, I’m hoping to expand it to be multithreaded; while a foreground thread adds commands a background thread is executing them.

Here it is all put together in a simple example to draw a black rectangle

from collections import deque
import cairo

class DrawQueue:
    '''
    A list of draw commands, stored as callables that, are
    passed a set of parameters to draw on from the canvas
    implementation.
    '''
    def __init__(self, render_callables = None):
        self.render_callables = render_callables or deque()

    def append(self, render_callable):
        '''
        Add a render callable to the queue
        '''
        self.render_callables.append(render_callable)

    def render(self, cairo_ctx):
        '''
        Call all the render callables with cairo_ctx
        '''
        for render_callable in self.render_callables:
            render_callable(cairo_ctx)

#### drawing closures
def paint_closure():
    def paint(ctx):
        ctx.paint()
    return paint

def fill_closure():
    def fill(ctx):
        ctx.fill()
    return fill

def set_source_rgb_closure(r, g, b):
    def set_source_rgb(ctx):
        ctx.set_source_rgb(r, g, b)
    return set_source_rgb

def moveto_closure(x, y):
    def moveto(ctx):
        ctx.move_to(x, y)
    return moveto

def rectangle_closure(x, y, w, h):
    def rectangle(ctx):
        ctx.rectangle(x, y, w, h)
    return rectangle

#### /drawing closures

dq = DrawQueue()

# Add some commands to the drawing queue
dq.append(set_source_rgb_closure(1, 1, 1))
dq.append(paint_closure())
dq.append(moveto_closure(10, 0))
dq.append(rectangle_closure(0, 0, 20, 20))
dq.append(set_source_rgb_closure(0, 0, 0))
dq.append(fill_closure())

# Create a surface and context
surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, 200, 200)
ctx = cairo.Context(surface)

# run defered rendering
dq.render(ctx)

surface.write_to_png('output.png')

Posted by stu at February 3rd, 2010

Cairo is a 2D vector graphics api used by Firefox, Gtk and other desktop projects.

I’m going to show here that it can also be used to generate web content, using Django.

I’m going to port two examples from the Michael Urmans Cairo Tutorial for PyGTK Programmers.

To understand the cairo and it’s drawing model I’d recommend his his Cairo Tutorial for Python Programmers.

Note: In this example I’ll be generating SVGs…  as I.E. (as of 2010) does not support them, you might want to generate PNG or PDF – if you need to do this with cairo, look for one of the many cairo tutorials on the web.

The example django project can be downloaded at the end of the article.

(more…)

Posted by stu at August 21st, 2009

I recently came across Java2Python.  As I’m interested in Cairo I thought it would be interesting to try porting one of the example tutorials from ZetCode.

I’ll run through the steps involved in porting then try and reach some conclusions at the end .

1. Get setup

This is easiest in Linux, I’m running Ubuntu (in vmware), and installed

antlr 2.x
python2.5.x
sun java6
pygtk
java-gnome

You can install them like this:

# sudo apt-get install antlr python2.5 sun-java6-bin libjava-gnome-java

Then install Python2Java with easy_install

# sudo easy_install-2.5 java2python

To test if it’s working run j2py -i.  It should complain there is no file:

# j2py -i
Usage: j2py [options]

j2py: error: -i option requires an argument

If you get any other errors your missing some packages.

2. Get the Java Code from the Simple Example.

Save the ‘simple.java’ example as ‘GSimple.java’

If java-gnome is running ok, compiling and running it you should see a window:

# javac GSimple.java
# java GSimple