{
"metadata": {
"name": "",
"signature": "sha256:9c80572eb91c1bb013cd18b7aeb7a032eb5bc38871a012dd57bb6eedbf2ccbc2"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Esta vez vamos a ver como usar una peque\u00f1a librer\u00eda que he creado para poder dibujar en el canvas de HTML5 usando python (v\u00eda Brython)."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"La librer\u00eda la pod\u00e9is encontrar en este [repo alojado en bitbucket](https://bitbucket.org/kikocorreoso/brython-bryplot). Solo voy a usar el m\u00f3dulo `base` y para no complicar el tema lo voy a pegar como c\u00f3digo directamente aqu\u00ed y as\u00ed no habr\u00e1 que importarlo."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Pero primero algunos apuntes:"
]
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"\u00bfPara qu\u00e9 otra librer\u00eda para dibujar?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Por varios motivos:\n",
"\n",
"* Porque encontr\u00e9 algo de tiempo.\n",
"* Porque me da la gana :-P\n",
"* Para aprender a usar `canvas`.\n",
"* Para aprender sobre el DOM, eventos,...\n",
"* Para aprender."
]
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Preparativos antes de empezar."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Para poder usar este engendro dentro del notebook de IPython vamos a usar una extensi\u00f3n creada para ello. La extensi\u00f3n se llama [brythonmagic](https://github.com/kikocorreoso/brythonmagic) (\u00a1qu\u00e9 derroche de creatividad!) y permite usar brython internamente en el notebook de IPython."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Para instalarla solo ten\u00e9is que hacer:"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%install_ext https://raw.github.com/kikocorreoso/brythonmagic/master/brythonmagic.py"
],
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": [
"Installed brythonmagic.py. To use it, type:\n",
" %load_ext brythonmagic\n"
]
}
],
"prompt_number": 86
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Y para poder usarla hacemos:"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%load_ext brythonmagic"
],
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": [
"The brythonmagic extension is already loaded. To reload it, use:\n",
" %reload_ext brythonmagic\n"
]
}
],
"prompt_number": 87
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Adem\u00e1s, hemos de cargar la librer\u00eda javascript brython."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%HTML\n",
""
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
""
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 88
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Cargamos el m\u00f3dulo `base` directamente en el notebook."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Una vez listo para empezar a usar brython en el notebook vamos a meter en la siguiente celda el m\u00f3dulo `base`, citado anteriormente, y que contiene una serie de clases para poder dibujar texto y formas simples (c\u00edrculos, cuadrados, polil\u00edneas,...) en el `canvas`."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%brython -s base\n",
"from browser import document as doc\n",
"import math\n",
"\n",
"## Base classes for higher level objects\n",
"class Figure:\n",
" \"\"\"\n",
" Base class to create other elements.\n",
" \"\"\"\n",
" def __init__(self, canvasid, \n",
" facecolor = \"white\", \n",
" edgecolor = \"black\", \n",
" borderwidth = None):\n",
" \"\"\" \n",
" Parameters\n",
" ----------\n",
" *canvasid*: String\n",
" String indicating the canvas id where the image should be \n",
" rendered.\n",
" *facecolor*: String\n",
" String value containing a valid HTML color\n",
" *edgecolor*: String\n",
" String value containing a valid HTML color\n",
" *borderwidth*: Integer\n",
" Value indicating the width of the border in pixels.\n",
" If not provided it will 0 and the edgecolor will not be\n",
" visible\n",
" \"\"\"\n",
"\n",
" if isinstance(canvasid, str):\n",
" self.id = canvasid\n",
" else:\n",
" raise Exception(\"The canvasid parameter should be a string\")\n",
" \n",
" try:\n",
" self.canvas = doc[self.id]\n",
" except:\n",
" raise Exception(\"No HTML element with id=%s\" %\n",
" self.id)\n",
" \n",
" try:\n",
" self._W = self.canvas.width\n",
" self._H = self.canvas.height\n",
" self._ctx = self.canvas.getContext(\"2d\")\n",
" except:\n",
" raise Exception(\"You must provide the ID of a