Pyscript button

Question

I'm confused. I'm trying to run pyscript button example from - https://jeff.glass/post/7-guis-pyscript/ (first example - counter)

This is the HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, World!</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
        <p id="counter-target">Some Placeholder Text</p>
        <py-button>
                def on_click(event):
                        add_one()
        </py-button>
<py-script src="myscript.py"></py-script>
</body>
</html>

This is the PYTHON CODE:

internalCount = 0
target = "counter-target"
PyScript.write(target, str(internalCount), append=False)

def add_one():
    global internalCount
    internalCount += 1
    PyScript.write(target, str(internalCount), append=False)

It's showing me the button (using VSC Live server), but nothing happens once clicking on it... also Visual studio code is showing me this error. I don't understand. I shouldn't import anything, right? Thanks

Of course you do. If you're going to use the PyScript module, then you have to import it. Did you install it? — Tim Roberts
– Tim Roberts, Commented Jul 10, 2022 at 0:55
Your code should run fine in a browser. I don't think Pylance has support for PyScript. — John Hanley
– John Hanley, Commented Jul 10, 2022 at 1:38

d r · Accepted Answer · 2022-07-13 09:01:49Z

2

Define two scripts: myscript.py

def add_one(event):
    pyscript.write("output", str(global_vars['internalCounter']), False)
    global_vars['internalCounter'] += 1

and globals.py

global_vars = {"internalCounter": 1}

declare both of them inside your html file in py-env section:

<py-env>
paths
    ./globals.py
    ./myscript.py
</py-env>

be sure to have identation of 4 spaces (no tab chars).
In html declare two pyscript nodes with src attributes pointing to your scripts:

<py-script src='globals.py'></py-script>
<py-script src='myscript.py'></py-script>

change button node as in html below (use pys-onclick) as well as make a div for output. Complete index.html looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello, World!</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
paths
    ./globals.py
    ./myscript.py
</py-env>
    </head>
    <body>
        <py-script src='globals.py'></py-script>
        <py-script src='myscript.py'></py-script>   
        <div id="main">
            <p id="counter-target">Some Placeholder Text</p>
            <py-button pys-onclick="add_one">
            </py-button>
            <div id="output">Outputs here</div>
        </div>
    </body>
</html>

This way you have defined a dictionary (globals.py) where you can manipulate global variables (can define them as you like) within a session. In your myscript.py you can have functions and functionalities that you need for your app. You can in the same manner add more scripts if needed. For it to be working you should declare scripts as paths within py-env section of html and add pyscript node for each of them with src attribute pointing to .py scripts. As you have py-button defined then your on click event is pys-onclick. I added a div for output too as you can see but it can be done differently too. There should be an id for pyscript.write() function to be operational. Regards...

edited Jul 13, 2022 at 9:01

answered Jul 13, 2022 at 7:19

d r

8,6622 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Voronov Over a year ago

At the moment the HTML attribute 'pys-onClick' is deprecated. Developers recommend to use 'py-click="myFunction()"' instead.

Roman Voronov Over a year ago

Also your way of defining button in the HTML is outdated. This form is correct at the moment: <button py-click="current_time()" id="get-time" class="py-button">Get current time</button> Source: docs.pyscript.net/latest/tutorials/py-click.html

Collectives™ on Stack Overflow

Pyscript button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related