Laboratorio 8: Imágenes dinámicas

Objetivos

Durante esta práctica, los alumnos serán capaces de:

Escribir vistas en Django que generen contenido distinto a HTML. Por ejemplo: imágenes dinámicas.

Esta actividad promueve las siguientes habilidades, valores y actitudes: análisis y síntesis, capacidad de resolver problemas, creatividad, y uso eficiente de la informática y las telecomunicaciones.

Descripción de la actividad

NOTA IMPORTANTE: Las actividades de la práctica se pueden elaborar de manera individual o en parejas. El reporte de la práctica de laboratorio debe ser desarrollado de manera individual.

Introducción

Hasta este momento, todos los contenidos dinámicos que se han producido tanto con CGIs como con Django han sido páginas web (documentos HTML). Sin embargo, es posible también producir otros tipos de contenidos, por ejemplo: imágenes, información tabular en formato CSV, documentos PDF, etc. A continuación se demuestra como se puede generar dinámicamente una imagen PNG utilizando la Python Imaging Library (PIL) que viene preinstalada con Python en la distribución de Ubuntu:

Instrucciones preliminares

Crea un nuevo proyecto de Django llamado lab8 y dentro de éste una nueva aplicación llamada imagenes. En esta ocasión no se requieren crear los directorios templates ni static.

Edita el archivo urls.py para añadir la línea que se encuentra resaltada:

from django.conf.urls.defaults import patterns, include, url

# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'lab8.views.home', name='home'),
    # url(r'^lab8/', include('lab8.foo.urls')),
    (r'^ejemplo/$', 'lab8.imagenes.views.ejemplo'),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),
)

Edita el archivo lab8/imagenes/views.py para que contenga el siguiente código:

# coding: utf-8

from django.http import HttpResponse

import Image, ImageDraw, ImageFont

def ejemplo(requests):
    # Crea una imagen en blanco en memoria.
    ancho, alto = 200, 100
    im = Image.new('RGB', (ancho, alto), "white")

    # Crea un objeto de dibujo a partir de la imagen en memoria.
    dibujo = ImageDraw.Draw(im)

    # Dibuja un margen en la orilla de color negro.
    dibujo.rectangle((0, 0, ancho - 1, alto - 1), outline="black")

    # Dibuja dos diagonales, una verde y la otra azul.
    dibujo.line((0, 0, ancho - 1, alto - 1), fill="green")
    dibujo.line((0, alto - 1, ancho - 1, 0), fill="blue")

    # Escribe un texto de color rojo.
    f = ImageFont.load("6x13.pil")
    dibujo.text((10, 40), "Hello World!", fill="red", font=f)

    # Crea la respuesta de HTTP con el content-type apropiado.
    response = HttpResponse(mimetype="image/png")

    # Guarda la imagen en la respuesta de HTTP.
    im.save(response, "PNG")

    return response

Copia los archivos de las fuentes tipográficas 6x13.pil y 6x13.pbm al directorio lab8.
Corre el servidor de desarrollo de Django y visita el siguiente URL dentro de un navegador:

http://localhost:8000/ejemplo/

La salida esperada es la siguiente imagen PNG:

Problemas

Escribe dos vistas en Django que permitan generar imágenes como las que se muestran a continuación:

barras: Dado un URL como el que sigue:

http://localhost:8000/barras/13/7/

Los números 13 y 7 representan cantidades de personas. El primer número son las personas de sexo masculino y el segundo son las de sexo femenino. A partir de esos valores la vista correspondiente debe generar la siguiente gráfica de barras:
pastel: Dado el siguiente URL:

http://localhost:8000/pastel/13/7/

Considerando los números de la misma manera que en la descripción anterior, la vista correspondiente debe generar la siguiente gráfica de pastel:

La documentación de The ImageDraw Module de la PIL explica como hacer este tipo de dibujos.

¿Qué se debe entregar?

Para entregar tu trabajo individual, sigue las siguientes instrucciones:

Escribe el reporte de la práctica tal como se detalla en el documento Reportes de laboratorio. El nombre del archivo fuente de AsciiDoc debe ser reporte_lab8_A0MMMMMMM.txt, en donde A0MMMMMMM corresponde a tu matrícula. A partir del código fuente de AsciiDoc debes generar el archivo HTML correspondiente. Dicho archivo se debe llamar reporte_lab8_A0MMMMMMM.html. Coloca ambos archivos dentro del directorio lab8.
Crea un archivo tarball con todo el contenido del directorio lab8. Nombra a este archivo lab8.tgz. Este archivo se puede crear desde la línea de comando tecleando lo siguiente (asegúrate que te encuentres en el mismo nivel que el directorio lab8):
```
tar czf lab8.tgz lab8
```
Usando el Sistema de Entrega de Tareas Automatizado (SETA), entrega el archivo tarball.

Fecha límite: Martes, Marzo 20.

Evaluación

Esta actividad será evaluada usando los siguientes criterios:

50%	Implementación de los requerimientos.
50%	Reporte de la práctica de laboratorio.
DA	El programa y/o reporte es un plagio.

Desarrollo de aplicaciones distribuidas