The brythonmagic extension has been tested on:
In [10]:
import IPython
IPython.version_info
Out[10]:
Just type the following:
In [11]:
%install_ext https://raw.github.com/kikocorreoso/brythonmagic/master/brythonmagic.py
In [12]:
%load_ext brythonmagic
And load the brython js lib in the notebook:
In [13]:
from brythonmagic import load_brython_dev
load_brython_dev()
In order to load javascript libraries in a safety way you should try to use https instead of http when possible (read more here). If you don't trust the source and/or the source cannot be loaded using https then you could download the javascript library and load it from a local location.
The brythonmagic provides you a cell magic, %%brython, to run brython code and show the results in a html div tag below the code cell.
You can use several options:
div container in case you want to 'play' with it in other cell. If you don't define an output the div will have and id with the following format 'brython-container-[random number between 0 and 999999]'-S, --scripts: Use this option to run code previously defined in other Brython code cells. The values should be the provided values in the -s/--script option in other Brython code cells.
-f, --fiddle: With this option, the code in the cell will be automatically uploaded to gist.github.com/ as an anonymous gist with several files in it. This files will be used to create an anonymous 'fiddle' on jsfiddle.net. Finally, some links will be printed in the output linking to the gist and the fiddle. See an example here (https://gist.github.com/anonymous/b664e8b4617afc09db6c and http://jsfiddle.net/gh/gist/library/pure/b664e8b4617afc09db6c/)
-e, --embedfiddle: With this option, the code in the cell will be automatically uploaded to gist.github.com/ as an anonymous gist with several files in it. This files will be used to create an anonymous 'fiddle' on jsfiddle.net. Finally, some links will be printed in the output linking to the gist and the fiddle and an iframe will be created showing the fiddle on jsfiddle.net.
[WARNING] This options may change as the brythonmagic is in active development.
The following example shows the use of the -p, --print option.
[HINT] The result of the print is shown in the javascript console of your browser.
In [4]:
%%brython -p
print('hello world!')
In the following example can be seen the use of the -c, --container. The -p is also used to show you the result. See the id attribute of the div tag created:
In [18]:
%%brython -c my_container -p
from browser import document, html
# This will be printed in the js console of your browser
print('Hello world!')
# This will be printed in the container div on the output below
document["my_container"] <= html.P("This text is inside the div",
style = {"backgroundColor": "cyan"})
In this example you can see how the data are passed to brython from python using the -i or --input option. First, we create some data in a regular Python cell.
In [6]:
data_list = [1,2,3,4]
data_tuple = (1,2,3,4)
data_dict = {'one': 1, 'two': 2}
data_str = """
Hello
GoodBye
"""
# A numpy array can be converted to a list and you will obtain a brython list
import numpy as np
data_arr = np.empty((3,2))
data_arr = data_arr.tolist()
And now, the created data are passed to Brython and used in the Brython code cell. Remember that only Python lists, tuples, dicts and strings are allowed as inputs.
In [19]:
%%brython -c p2b_data_example -i data_list data_tuple data_dict data_str data_arr
from browser import document, html
document["p2b_data_example"] <= html.P(str(data_list))
document["p2b_data_example"] <= html.P(str(type(data_list)))
document["p2b_data_example"] <= html.P(str(data_tuple))
document["p2b_data_example"] <= html.P(str(type(data_tuple)))
document["p2b_data_example"] <= html.P(str(data_dict))
document["p2b_data_example"] <= html.P(str(type(data_dict)))
document["p2b_data_example"] <= html.P(data_str.replace('Hello', 'Hi'))
document["p2b_data_example"] <= html.P(str(type(data_str)))
document["p2b_data_example"] <= html.P(str(data_arr))
document["p2b_data_example"] <= html.P(str(type(data_arr)))
In this example you can see how to create some HTML code in a cell and then use that HTML code in the brython cell. In this way you do not need to create the HTML code via scripting with Brython.
In [8]:
html = """
<div id="paragraph">Hi</div>
"""
In [20]:
%%brython -c html_ex -h html
from browser import document
document["paragraph"].style = {
"color": "yellow",
"fontSize": "100px",
"lineHeight": "150px",
"textAlign": "center",
"backgroundColor": "black"
}
With this option you are creating a reference of the code in the Brython cell (e.g., an id of the HTML script tag created to run the Brython code). So, if you need to use the code of the Brython cell in a future Brython cell you could reference it by its id. Let's see this on an example (the -p option is used to show you the generated code and how the id of the script tag is created):
In [10]:
%%brython -s my_dummy_function
def dummy_function(some_text):
print(some_text)
This option could be used to call code created in a previous Brython code cell using its id (see the -s option above). In the following code cell we will use the dummy_function created in another Brython code cell. The dummy_function was created in a script tag with an id="my_dummy_function".
[HINT] The result of the Brython code cell below is shown in the javascript console of your browser.
In [11]:
%%brython -S my_dummy_function
dummy_function('Hi')
With this option, the code in the cell will be automatically uploaded to gist.github.com/ as an anonymous gist with several files in it. This files will be used to create an anonymous 'fiddle' on jsfiddle.net. Finally, some links will be printed in the output linking to the gist and the fiddle.
In [12]:
%%brython -f
from browser import alert
alert('hello world from jsfiddle!')
With this option, the code in the cell will be automatically uploaded to gist.github.com/ as an anonymous gist with several files in it. These files will be used to create an anonymous 'fiddle' on jsfiddle.net. Finally, some links will be printed in the output linking to the gist and the fiddle and an iframe will be created showing the fiddle on jsfiddle.net.
In [13]:
%%brython -e
from browser import alert
alert('hello world from jsfiddle!')
First step should be to read the brython documentation. You can find the docs here:
http://brython.info/doc/en/index.html?lang=en
In the following section I will show you some dummy examples.
In this example let's see how to pop up an alert window. This could be an standard 'Hello world!' example in the Brython world.
In [14]:
%%brython
from browser import alert
alert('Hello world!, Welcome to the brythonmagic!')
In this example we just write inside a <div> ten numbers using a <P> tag for each number.
[HINT] To see the line numbers in the code cell just go to the cell and press <CTRL>-m and then l.
P tag and write the value of i inside. Finally, add the P element to the selected div, in this case the div with "simple_example" id attribute.
In [21]:
%%brython -c simple_example
from browser import document, html
for i in range(10):
document["simple_example"] <= html.P(i)
In the following cell we create a multiplication table. First, we create a table tag. We append the table rows and cells (TR and TD tags) and, finally, we append the final table to the div with "table" id attribute.
In [22]:
%%brython -c table
from browser import document, html
table = html.TABLE()
for i in range(10):
color = ['cyan','#dddddd'] * 5
table <= html.TR(
html.TD(str(i+1) + ' x 2 =', style = {'backgroundColor':color[i]}) +
html.TD((i+1)*2, style = {'backgroundColor':color[i]}))
document['table'] <= table
In the following example we draw a shape using the HTML5 canvas. Also, we add some controls to stop and animate the shape. The example has been adapted from the javascript example available here.
In [23]:
%%brython -c canvas_example
from browser.timer import request_animation_frame as raf
from browser.timer import cancel_animation_frame as caf
from browser import document, html
from time import time
import math
# First we create a table to insert the elements
table = html.TABLE(cellpadding = 10)
btn_anim = html.BUTTON('Animate', Id="btn-anim", type="button")
btn_stop = html.BUTTON('Stop', Id="btn-stop", type="button")
cnvs = html.CANVAS(Id="raf-canvas", width=256, height=256)
table <= html.TR(html.TD(btn_anim + btn_stop) +
html.TD(cnvs))
document['canvas_example'] <= table
# Now we access the canvas context
ctx = document['raf-canvas'].getContext( '2d' )
# And we create several functions in charge to animate and stop the draw animation
toggle = True
def draw():
t = time() * 3
x = math.sin(t) * 96 + 128
y = math.cos(t * 0.9) * 96 + 128
global toggle
if toggle:
toggle = False
else:
toggle = True
ctx.fillStyle = 'rgb(200,200,20)' if toggle else 'rgb(20,20,200)'
ctx.beginPath()
ctx.arc( x, y, 6, 0, math.pi * 2, True)
ctx.closePath()
ctx.fill()
def animate(i):
global id
id = raf(animate)
draw()
def stop(i):
global id
print(id)
caf(id)
document["btn-anim"].bind("click", animate)
document["btn-stop"].bind("click", stop)
In Brython there is a javascript library that allows to access objects available in the javascript namespace. In this example we are using a javascript object (D3.js library) from Brython.
So, in order to allow Brython to access to D3 first you should load the D3 library.
In [24]:
from brythonmagic import load_js_lib
load_js_lib("http://d3js.org/d3.v3.js")
Now, we can access D3 objects(see example below). In the result you can see how the circle change its color when the mouse is over the circle.
In [26]:
%%brython -c simple_d3
from browser import window, document, html
d3 = window.d3
container = d3.select("#simple_d3")
svg = container.append("svg").attr("width", 100).attr("height", 100)
circle1 = svg.append("circle").style("stroke", "gray").style("fill", "gray").attr("r", 40)
circle1.attr("cx", 50).attr("cy", 50).attr("id", "mycircle")
circle2 = svg.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 20)
circle2.attr("cx", 50).attr("cy", 50)
def over(ev):
document["mycircle"].style.fill = "blue"
def out(ev):
document["mycircle"].style.fill = "gray"
document["mycircle"].bind("mouseover", over)
document["mycircle"].bind("mouseout", out)
An example to hide or show the code cells using a button.
In [27]:
%%brython -c manipulating
from browser import document, html
def hide(ev):
divs = document.get(selector = 'div.input')
for div in divs:
div.style.display = "none"
def show(ev):
divs = document.get(selector = 'div.input')
for div in divs:
div.style.display = "inherit"
document["manipulating"] <= html.BUTTON('Hide code cells', Id="btn-hide")
document["btn-hide"].bind("click", hide)
document["manipulating"] <= html.BUTTON('Show code cells', Id="btn-show")
document["btn-show"].bind("click", show)
A more complete D3 example. In this case, first we create some data in Python.
In [28]:
from random import randint
n = 100
x = [randint(0,800) for i in range(n)]
y = [randint(0,600) for i in range(n)]
r = [randint(25,50) for i in range(n)]
red = [randint(0,255) for i in range(n)]
green = [randint(0,255) for i in range(n)]
blue = [randint(0,255) for i in range(n)]
And now, the data is passed to Brython to be used in a D3 plot. In this case, the D3.js library is already loaded so it is not necessary to load it.
In [29]:
%%brython -c other_d3 -i x y r red green blue
from browser import window, document, html
d3 = window.d3
WIDTH = 800
HEIGHT = 600
container = d3.select("#other_d3")
svg = container.append("svg").attr("width", WIDTH).attr("height", HEIGHT)
class AddShapes:
def __init__(self, x, y, r, red, green, blue, shape = "circle", interactive = True):
self.shape = shape
self.interactive = interactive
self._color = "gray"
self.add(x, y, r, red, green, blue)
def over(self, ev):
self._color = ev.target.style.fill
document[ev.target.id].style.fill = "white"
def out(self, ev):
document[ev.target.id].style.fill = self._color
def add(self, x, y, r, red, green, blue):
for i in range(len(x)):
self.idx = self.shape + '_' + str(i)
self._color = "rgb(%s,%s,%s)" % (red[i], green[i], blue[i])
shaped = svg.append(self.shape).style("stroke", "gray").style("fill", self._color).attr("r", r[i])
shaped.attr("cx", x[i]).attr("cy", y[i]).attr("id", self.idx)
if self.interactive:
document[self.idx].bind("mouseover", self.over)
document[self.idx].bind("mouseout", self.out)
plot = AddShapes(x, y, r, red, green, blue, interactive = True)
In the following example we will use OpenLayers to center a map in a specific location, with a zoom and a projection and then we will draw some vector points around the location.
As before, first we should load the OpenLayers.js library.
In [4]:
from brythonmagic import load_js_lib
load_js_lib("http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js")
And now we can create a map.
In [ ]:
%%brython -c ol_map
from browser import document, window
## Div layout
document['ol_map'].style.width = "800px"
document['ol_map'].style.height = "400px"
document['ol_map'].style.border = "1px solid black"
OpenLayers = window.OpenLayers
## Map
_map = OpenLayers.Map.new('ol_map')
## Addition of an OpenStreetMap layer
_layer = OpenLayers.Layer.OSM.new('Simple OSM map')
_map.addLayer(_layer)
## Map centered on Lon, Lat = (-3.671416, 40.435897) and a zoom = 14
## with a projection = "EPSG:4326" (Lat-Lon WGS84)
_proj = OpenLayers.Projection.new("EPSG:4326")
_center = OpenLayers.LonLat.new(-3.671416, 40.435897)
_center.transform(_proj, _map.getProjectionObject())
_map.setCenter(_center, 10)
## Addition of some points around the defined location
lons = [-3.670, -3.671, -3.672, -3.672, -3.672,
-3.671, -3.670, -3.670]
lats = [40.435, 40.435, 40.435, 40.436, 40.437,
40.437, 40.437, 40.436]
points_layer = OpenLayers.Layer.Vector.new("Point Layer")
for lon, lat in zip(lons, lats):
point = OpenLayers.Geometry.Point.new(lon, lat)
point.transform(_proj, _map.getProjectionObject())
_feat = OpenLayers.Feature.Vector.new(point)
points_layer.addFeatures([_feat])
_map.addLayer(points_layer)
# Add a control for the layers
layer_switcher= OpenLayers.Control.LayerSwitcher.new({})
_map.addControl(layer_switcher)
A dummy example using raphaël.js library.
As usual, first we should include the library:
In [6]:
load_js_lib("http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js")
And now let's make a dumb example using JSObject.
In [7]:
%%brython -c raphael_ex
from browser import window
from javascript import JSObject
Raphael = window.Raphael
paper = JSObject(Raphael("raphael_ex", 400, 400))
#Draw rectagle
rect = paper.rect(1,1,398,398)
rect.attr("stroke", "black")
#Draw orbits
for rot in range(90,280,60):
ellipse = paper.ellipse(200, 200, 180, 50)
ellipse.attr("stroke", "gray")
ellipse.rotate(rot)
#Draw nucleus
nucleus = paper.circle(200,200,40)
nucleus.attr("fill", "black")
# Draw electrons
electron = paper.circle(200, 20, 10)
electron.attr("fill", "red")
electron = paper.circle(44, 290, 10)
electron.attr("fill", "yellow")
electron = paper.circle(356, 290, 10)
electron.attr("fill", "blue")
The cells starts by 0 and all the cells (markdown, headings, code,...) has a number. If we want to re-run some cells in a programmatically way it is useful to know the number of the cells to identify them. You can delete the cell numbers using show_cell_number(on = False):
In [8]:
%%brython
from browser import doc, html
def show_cell_number(on = True):
cells = doc.get(selector = '.input_prompt')
for i, cell in enumerate(cells):
if on:
if 'In' in cell.html and '<br>' not in cell.html:
cell.html += "<br>cell #" + str(i)
else:
if 'In' in cell.text:
cell.html = cell.html.split('<br>')[0]
show_cell_number(on = True)
Imagine you have several cells of code and you want just to modify some data and run again these cells as a loop not having to create a big cell with the code of the cells together.
In [9]:
%%brython
from javascript import JSObject
from browser import window
IPython = window.IPython
nb = IPython.notebook
# This is used to prevent an infinite loop
this_cell = nb.get_selected_index()
for i in range(1,10): # Ths will run cells 1 to 9 (the beginning of the nb)
cell = nb.get_cell(i)
if cell.cell_type == "code" and i != this_cell:
cell.execute()
If you want to compile all the code used in a notebook you can use this recipe (use `crtl + Enter` to run the cell if you don't want a bad behaviour):
In [14]:
%%brython
from javascript import JSObject
from browser import window
IPython = window.IPython
nb = IPython.notebook
this_cell = nb.get_selected_index()
total_cells = nb.ncells()
code = ""
first_cell = True
for i in range(total_cells):
cell = nb.get_cell(i)
if cell.cell_type == "code" and i != this_cell:
if first_cell:
code += "# This cell has been generated automatically using a brython script\n\n"
code += "# code from cell " + str(i) + '\n'
first_cell = False
else:
code += "\n\n\n# code from cell " + str(i) + '\n'
code += cell.get_text() + '\n'
nb.insert_cell_below('code')
new_cell = nb.get_cell(this_cell + 1)
new_cell.set_text(code)
Lets modify a little bit the look of the notebook. Warning: The result will be very ugly...
In [16]:
%%brython -s styling
from browser import doc, html
# Changing the background color
body = doc[html.BODY][0]
body.style = {"backgroundColor": "#99EEFF"}
# Changing the color of the imput prompt
inps = body.get(selector = ".input_prompt")
for inp in inps:
inp.style = {"color": "blue"}
# Changin the color of the output cells
outs = body.get(selector = ".output_wrapper")
for out in outs:
out.style = {"backgroundColor": "#E0E0E0"}
# Changing the font of the text cells
text_cells = body.get(selector = ".text_cell")
for cell in text_cells:
cell.style = {"fontFamily": """"Courier New", Courier, monospace""",
"fontSize": "20px"}
# Changing the color of the code cells.
code_cells = body.get(selector = ".CodeMirror")
for cell in code_cells:
cell.style = {"backgroundColor": "#D0D0D0"}
In [ ]: