Event functions for p5.Element elements possibly not working?

[misolietavec]

I successfully compiled and tested examples sketch_000 - sketch 009 with pyodide (some with minor changes). Also I have a running example of simple Arkanoid (breakout) game. But there is a problem with sketch_010. I think this minimal code from p5.js reference shows it (not sure if draw() is needed, I tried with and without it):

button = None

def setup():
    createCanvas(100, 100)
    background(0)
    button = createButton('click me')
    button.position(0, 0)
    button.mousePressed(changeBG)

def changeBG():
    val = random(255)
    background(val)

def draw():
    pass

In Firefox development console there is an error each time the mouse button is pressed:
Uncaught TypeError: t.call is not a function mousePressed http://0.0.0.0:8000/static/p5.js:3

sketch_010 works with transcrypt, so maybe, there are some (as yet) not implemented features in pyodide compilation?

I like the concept of pyp5js with pyodide. In Slovakia high schools, many are using pygame (or pygame zero) for teaching with game programming. I think, web approach is better suited for the future, especially in connection with Jupyter (and holoviz panel?).

Last commits (apr. 17-th) were great, I use 0.5.2 version.

[berinhard]

Hi @misolietavec! Thanks for opening this issue. Porting the examples to pyodide is something that I wanted to do for a while but didn't have time. If you're ok with that, feel free to open a PR with the new examples. I'll only ask you to organize it in a way we have 2 final working versions: one for transcrypt and another for pyodide. We could structure it as docs/examples/transcrypt and docs/examples/pyodide, what do you think?

Anyway, this issue with the sketch_010 is something to review, for sure.

[misolietavec]

@berinhard , thanks for comment. I think, the subdirectories in /docs/examples are OK. For now, I can make PR for pyodide versions of sketch_000 - sketch_009.

[misolietavec]

As I wrote in first comment, there are error messages from browser Javascript console if using mouse event functions (e.g. mousePressed) with canvas elements (eg. buttons, even with canvas itself). What works for now is to define event function "globally" and check manually if mouse position is inside element, as in following code:

val = 0
b_width = 100
b_height = 30

def setup():
    createCanvas(b_width, 100)
    background(0)
    button = createButton('Click')
    button.position(0, 0)
    button.size(b_width,b_height)

def inButton(x,y):
    return (0 < x < b_width) and (0 < y < b_height)
    
def mousePressed():
    global val
    x, y = mouseX, mouseY
    if inButton(x,y):
        val = random(255)
        background(val)

def draw():
    pass

@berinhard, hope this will help with debugging :-)

[misolietavec]

Using the (not so clever) strategy from previous comment I was able to compile sketch_010 with pyodide. See PR #167.