Link to plugin page: https://zeroqode.com/plugin/1689634475490x651252494590470700
Demo to preview the plugin:
Live Demo: https://ezcodedemo4.bubbleapps.io/python_ez
Introduction
Use Python programming language in Bubble!
What is PyScript? Well, here are some of the core components:
Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
Environment management: Allow users to define what packages and files to include for the page code to run
Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
All that to say… PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries.
Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should expect things to change often. We encourage people to play and explore with PyScript, but at this time we do not recommend using it for production.
Plugin Element Properties
The plugin contains a Python Script visual element that should be used on a page.
Title | Description | Type |
Python Code and HTML tags | You can use pyscript tags and all of html tags with custom js scripts. | text |
Element ID | Set ID of THIS element and use this attribute in your code for visualization. (<py-script output="THIS ID">) | text |
Workflow example
Main Instruction:
- Place "Python Script" element on your page.
- Set position and other style options.
- In the ID field, you must give a name to the group that you will refer to in the python code.
- In Code field, you can add other HTML tags, Python tags or Javascript code.
- Code visualization will take place in the plugin element.
TAGS:
<py-script>: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
<py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code
<py-env>: The <py-env> element contains a YAML list with the names of libraries to fetch on demand. When you look at the Network tab in your web development tools, you’ll notice that the browser downloads NumPy and Matplotlib from the CDN server or your local HTTP server hosting Pyodide. It also pulls several transitive dependencies required by Matplotlib, amounting to over twelve megabytes in size!
<py-config>: In the earliest days of PyScript, the URL with Pyodide was hard-coded, but the developers recently introduced another custom element called <py-config>, which allows you to specify a URL with the desired version of Pyodide. The content inside of this optional tag is a piece of YAML configuration. You can use the src attribute to provide either a URL with a concrete Pyodide version hosted online or a local file that you’ll download in a bit.
<py-title>: With the PyTitle element, you can quickly add a textual header to your web page, which will appear in uppercase letters and be centered horizontally, provided that you linked the default CSS stylesheet that comes with PyScript.
<py-box>: PyBox is a container element that can arrange its children using the CSS Flexbox layout model in the horizontal direction. It currently uses Tailwind CSS width classes, such as w-1, w-1/2, or w-full, to define the column widths.
<py-button>: PyButton is the first interactive widget in PyScript that lets you call a Python function in response to a user action, like clicking a mouse button. To handle JavaScript’s click event, define an inline function named on_click() inside of your <py-button> element.
<py-inputbox>: PyInputBox is the last widget currently available in PyScript, and it wraps the HTML’s input element and lets you listen to the keypress event on it