CODEWITHSUNDEEP
pythonpyscript
Pavol Bujna
Pavol Bujna

Reputation: 179

Pyscript button

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

pyscript error

Upvotes: 1

Views: 1679

Answers (1)

d r
d r

Reputation: 7846

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...

Upvotes: 2

Related Questions