PyScript

What is PyScript

Summary

PyScript is a framework that allows users to create rich Python applications in the browser using HTML's interface and the power of Pyodide, MicroPython and WASM, and modern web technologies.

To get started see the Beginning PyScript tutorial.

For examples see here.

Other useful resources:

The official technical docs.
Our current Home Page on the web.
A free-to-use online editor for trying PyScript.
Our community Discord Channel, to keep in touch .

Every Tuesday at 15:30 UTC there is the PyScript Community Call on zoom, where we can talk about PyScript development in the open. Most of the maintainers regularly participate in the call, and everybody is welcome to join.

Every other Thursday at 16:00 UTC there is the PyScript FUN call: this is a call in which everybody is encouraged to show what they did with PyScript.

For more details on how to join the calls and up to date schedule, consult the official calendar:

Google calendar in UTC time;
iCal format.

Longer Version

PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files into the <head> tag of your html page:

<head>
    <link
        rel="stylesheet"
        href="https://pyscript.net/releases/2024.6.2/core.css"
    />
    <script
        type="module"
        src="https://pyscript.net/releases/2024.6.2/core.js"
    ></script>
</head>
<body>
    <script type="py" terminal>
        from pyscript import display
        display("Hello World!") # this goes to the DOM
        print("Hello terminal") # this goes to the terminal
    </script>
</body>

You can then use PyScript components in your html page. PyScript currently offers various ways of running Python code:

<script type="py">: can be used to define python code that is executable within the web page.
<script type="py" src="hello.py">: same as above, but the python source is fetched from the given URL.
<script type="py" terminal>: same as above, but also creates a terminal where to display stdout and stderr (e.g., the output of print()); input() does not work.
<script type="py" terminal worker>: run Python inside a web worker: the terminal is fully functional and input() works.
<py-script>: same as <script type="py">, but it is not recommended because if the code contains HTML tags, they could be parsed wrongly.
<script type="mpy">: same as above but use MicroPython instead of Python.

Check out the official docs for more detailed documentation.

How to Contribute

Read the contributing guide to learn about our development process, reporting bugs and improvements, creating issues and asking questions.

Check out the developing process documentation for more information on how to setup your development environment.

Governance

The PyScript organization governance is documented in a separate repository.

Release

To cut a new release of PyScript simply add a new release while remembering to write a comprehensive changelog. A GitHub action will kick in and ensure the release is described and deployed to a URL with the pattern: https://pyscript.net/releases/YYYY.M.v/ (year/month/version - as per our CalVer versioning scheme).

Then, the following three separate repositories need updating:

Documentation - Change the version.json file in the root of the directory and then node version-update.js.
Homepage - Ensure the version referenced in index.html is the latest version.
PSDC - Use discord or Anaconda Slack (if you work at Anaconda) to let the PSDC team know there's a new version, so they can update their project templates.

svg enhancement

I was trying to change the width of an svg rect I'd made.:
Made it like:

SVG.rect(x=self.draft_handle.parent.start[0], y=self.draft_handle.parent.start[1],
      width=width, height=height,
      style=style, id="baserect")

Its all good and onscreen. Then I attempt to resize it using:
ltk.find("#baserect").attr("width", width)

But no go for reasons below.

However it can be done by using the regular dom:
ltk.window.document.querySelector("#baserect").setAttribute('width', width)

Jquery has uneven support for SVG. (There is an svg extension for jquery though which make some overrides. Not sure if its in Jquery 3 by default).
I note that when attempting to modify (say) the width of an svg rectangle (using its id), you get:
an object of type = SVGAnimatedLength with roughly this structure:

baseVal: {
    unitType: number,
    value: number,
    valueInSpecifiedUnits: number,
    valueAsString: number
},
animVal: { /* etc */ }

Clearly using this could be good because we could animate with it.
I'm not sure if ALL browsers return the same thing but can the ltk take advantage if it does ??

Halfway down this page is some discussion on this class and Jquery3

https://stackoverflow.com/questions/52958178/why-jquery-cannot-modify-svg-element-width-height-tag-attributes-but-works-fine

pyscript / ltk Goto Github PK

ltk's Introduction

PyScript

What is PyScript

Summary

Longer Version

Try PyScript

How to Contribute

Governance

Release

ltk's People

Contributors

Stargazers

Watchers

Forkers

ltk's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs