Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Brython packages

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes, properties and methods

Events
Mouse events
Keyboard events
Focus events
Drag events

Query string

Using Javascript objects and libraries

Brython-specific built-in modules

browser
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

Widgets
browser.widgets.dialog
browser.widgets.menu

interpreter
javascript

Working with Brython

Options of function brython()
Testing and debugging
Deploying an application

Cookbook

Hello world !
Insert content in an element
HTML markup (bold,italic...)
HTML table
Bind and unbind events
Handle options in a SELECT
Drag and drop
Get the content of an element
Read the content of a file
Store objects locally
Example of onmouseover
 

module browser.timer

Implements methods to allow differed or repetitive execution of functions :

set_timeout(function,ms)
runs the function after ms milliseconds. function takes no argument. Returns an object usable in the following function

It is a wrapper of the setTimeout function in javascript. Official docs can be found here.

In this simple example, the color of the text in the black box will change after 3 seconds.

from browser import document as doc
from browser import timer

def change_color():
    doc['first-text'].style.color = "blue"

def press_button(ev):
    timer.set_timeout(change_color, 3000)

doc['first-button'].bind('click', press_button)

This color will change after 3s

clear_timeout(timer)
cancels the execution of the function defined by set_timeout(). It receives an argument, the id value returned by the set_timeout() call.

It is a wrapper of the cancelTimeout function in javascript. Official docs can be found here.

Let's see the previous example. Now you have the possibility to stop the execution of the action before the 3 seconds that delays in the execution.

from browser import document, timer

idtimer = 1

def change_color_two():
    document['ct-text2'].style.color = "blue"

def press_button_two(ev):
    global idtimer
    idtimer = timer.set_timeout(change_color_two, 3000)
    
def stop_button(ev):
    timer.clear_timeout(idtimer)

document['ct-start'].bind('click', press_button_two)
document['ct-stop'].bind('click', stop_button)


This color will change after 3s

set_interval(function, ms)
launches repeated execution of the function every ms milliseconds and returns an object usable in function clear_interval described below.

It is a wrapper of the setInterval function in javascript. Official docs can be found here.

When possible, you should avoid the use of this function and use request_animation_frame (see below) as an alternative.

clear_interval(timer)
stops the repeated execution of the function defined by set_interval()

It is a wrapper of the clearInterval function in javascript. Official docs can be found here.

Here you could see an example where it is used set_interval and cancel_interval:

import time
from browser import document as doc
from browser import timer

_timer = None
counter = 0

def show():
    doc['_timer'].text = '%.2f' %(time.time()-counter)

def start_timer(ev):
    global _timer,counter
    if _timer is None:
        counter = time.time()
        _timer = timer.set_interval(show,10)
        doc['start'].text = 'Hold'
    elif _timer == 'hold': # restart
        # restart timer
        counter = time.time()-float(doc['_timer'].text)
        _timer = timer.set_interval(show,10)
        doc['start'].text = 'Hold'
    else: # hold
        timer.clear_interval(_timer)
        _timer = 'hold'
        doc['start'].text = 'Restart'

def stop_timer(ev):
    global _timer
    timer.clear_interval(_timer)
    _timer = None
    t = 0
    doc['_timer'].text = '%.2f' %0
    doc['start'].text = 'Start'

doc['start'].bind('click', start_timer)
doc['stop'].bind('click', stop_timer)


0.00

request_animation_frame(*function*)
runs the function repeatedly letting the browser be in charge to update the browser. function uses a fake argument

It is a wrapper of the requestAnimationFrame function in javascript. Official docs can be found here.

cancel_animation_frame(*id*)
cancels the repeated execution of the function defined by request_animation_frame() and uses the value returned by request_animation_frame() as id

It is a wrapper of the cancelAnimationFrame function in javascript. Official docs can be found here.

Here you could see an example where it is used request_animation_frame and cancel_animation_frame:

from browser.timer import request_animation_frame as raf
from browser.timer import cancel_animation_frame as caf
from browser import document as doc
from browser import window as win
from time import time
from browser.html import CANVAS, BUTTON
import math

ctx = doc['raf-canvas'].getContext( '2d' ) 

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-animate'].bind('click', animate)
doc['btn-stop'].bind('click', stop)