Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `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

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

módulo browser.timer

Implementa métodos que permiten la ejecución de funciones de forma repetida o diferida.

set_timeout(funcion, ms, *args)
ejecuta funcion(*args) después de ms milisegundos. Devuelve un objeto que será usado en la siguiente función clear_timeout(), definida más abajo

Es un wrapper de la función javascript setTimeout. La documentación oficial se puede encontrar aquí.

En este ejemplo el color del texto en la caja negra cambiará después de 3 segundos.

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)
cancela la ejecución de la función definida en set_timeout(). Recibe un argumento el valor id devuelto por la llamada a set_timeout()

Es un wrapper de la función javascript cancelTimeout. La documentación oficial se puede encontrar aquí.

Veamos el ejemplo previo. Ahora tienes la posibilidad de parar la ejecución antes de que se cumplan los tres segundos.

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(funcion, ms, *args)
ejecuta funcion(*args) de forma repetida cada ms milisegundos. Esta función devuelve un objeto usable en la siguiente función, clear_interval, definida más abajo

Es un wrapper de la función javascript setInterval. La documentación oficial
se puede encontrar aquí.

Siempre que sea posible, deberías evitar el uso de esta función y usar request_animation_frame (ver más abajo) como alternativa.

clear_interval(timer)
detiene la ejecución repetitiva de la función definida por set_interval()

Es un wrapper de la función javascript clearInterval. La documentación oficial se puede encontrar aquí.

Aquí abajo puedes ver un ejemplo donde se usa conjuntamente set_interval y 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*)
ejecuta la funcion de forma repetitiva dejando que el navegador se encargue de actualizar la ejecución. function usa un argumento falso

Es un wrapper de la función javascript requestAnimationFrame. La documentación oficial se pueden encontrar aquí.

cancel_animation_frame(*id*)
cancela la ejecución de la función definida en request_animation_frame() y como parámetro se usa el valor id devuelto por request_animation_frame()

Es un wrapper de la función javascript cancelAnimationFrame. La documentación oficial se puede encontrar aquí.

Debajo puedes ver un ejemplo donde se usa request_animation_frame y 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)