In [24]:

    

import IPython
IPython.version_info


    

    
Out[24]:





(4, 0, 0, '')

In [25]:

    

%install_ext https://raw.github.com/kikocorreoso/brythonmagic/master/brythonmagic.py


    

    




Installed brythonmagic.py. To use it, type:
  %load_ext brythonmagic

In [26]:

    

%load_ext brythonmagic


    

    




The brythonmagic extension is already loaded. To reload it, use:
  %reload_ext brythonmagic

In [27]:

    

%%HTML
<script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>


    

In [29]:

    

%%brython -c my_container
# 假如要列出所產生的 html 則使用 -p
from browser import doc, 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
doc["my_container"] <= html.P("文字位於 div 標註內", 
                              style = {"backgroundColor": "cyan"})


    

In [30]:

    

%%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 doc, 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))

doc['canvas_example'] <= table
# Now we access the canvas context
ctx = doc['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)

doc["btn-anim"].bind("click", animate)
doc["btn-stop"].bind("click", stop)


    

In [ ]: