mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-20 02:37:41 -05:00
270 lines
8.4 KiB
Markdown
270 lines
8.4 KiB
Markdown
# Getting started with PyScript
|
|
|
|
This page will guide you through getting started with PyScript.
|
|
|
|
## Development setup
|
|
|
|
PyScript does not require any development environment other
|
|
then a web browser (we recommend using [Chrome](https://www.google.com/chrome/)) and a text editor, even though using your [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) of choice might be convenient.
|
|
|
|
If you're using [VSCode](https://code.visualstudio.com/), the
|
|
[Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
|
|
can be used to reload the page as you edit the HTML file.
|
|
|
|
## Installation
|
|
|
|
There is no installation required. In this document, we'll use
|
|
the PyScript assets served on [https://pyscript.net](https://pyscript.net).
|
|
|
|
If you want to download the source and build it yourself, follow
|
|
the instructions in the [README.md](https://github.com/pyscript/pyscript/blob/main/README.md) file.
|
|
|
|
## Your first PyScript HTML file
|
|
|
|
Here's a "Hello, world!" example using PyScript.
|
|
|
|
Using your favorite editor, create a new file called `hello.html` in
|
|
the same directory as your PyScript, JavaScript, and CSS files with the
|
|
following content, and open the file in your web browser. You can typically
|
|
open an HTML by double-clicking it in your file explorer.
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
<py-script>
|
|
print('Hello, World!')
|
|
</py-script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## A more complex example
|
|
|
|
Now that we know how you can create a simple 'Hello, World!' example, let's see a more complex example. This example will use the Demo created by [Cheuk Ting Ho](https://github.com/Cheukting). In this example, we will use more features from PyScript.
|
|
|
|
### Setting up the base index file
|
|
|
|
Let's create a new file called `index.html` and add the following content:
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<title>Ice Cream Picker</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
In this first step, we have created the index file, imported `pyscript.css` and `pyscript.js`. We are ready to start adding the elements we need for our application.
|
|
|
|
### Importing the needed libraries
|
|
|
|
For this example, we will need to install `pandas` and `matplotlib`. We can install libraries using the `<py-config>` tag so we can import them later. Please refer to the [`<py-config>`](../reference/elements/py-config.md) documentation for more information.
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<title>Ice Cream Picker</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<py-config>
|
|
packages = ["matplotlib", "pandas"]
|
|
</py-config>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### Importing the data and exploring
|
|
|
|
Now that we have installed the needed libraries, we can import and explore the data. In this step, we need to create a `<py-script>` tag to import our dependencies, read the data with pandas and then use `py-repl` to explore the data.
|
|
|
|
You may want to read the [`<py-script>`](../reference/elements/py-script.md) and [`<py-repl>`](../reference/elements/py-repl.md) documentation for more information about these elements.
|
|
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<title>Ice Cream Picker</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<py-config>
|
|
packages = ["matplotlib", "pandas"]
|
|
</py-config>
|
|
|
|
<py-script>
|
|
import pandas as pd
|
|
|
|
from pyodide.http import open_url
|
|
|
|
url = (
|
|
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
|
|
)
|
|
ice_data = pd.read_csv(open_url(url))
|
|
</py-script>
|
|
|
|
<py-repl>
|
|
ice_data
|
|
</py-repl>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Note that we are adding `ice_data` to `py-repl` to pre-populate the REPL with this variable, so you don't have to type it yourself.
|
|
|
|
### Creating the plot
|
|
|
|
Now that we have the data, we can create the plot. We will use the `matplotlib` library to make the plot. We will use the `display` API to display the plot on the page. You may want to read the [`display`](../reference/API/display.md) documentation for more information.
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<title>Ice Cream Picker</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<py-config>
|
|
packages = ["matplotlib", "pandas"]
|
|
</py-config>
|
|
|
|
<py-script>
|
|
import pandas as pd
|
|
import matplotlib.pyplot as plt
|
|
|
|
from pyodide.http import open_url
|
|
|
|
url = (
|
|
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
|
|
)
|
|
ice_data = pd.read_csv(open_url(url))
|
|
|
|
def plot(data):
|
|
plt.rcParams["figure.figsize"] = (22,20)
|
|
fig, ax = plt.subplots()
|
|
bars = ax.barh(data["name"], data["rating"], height=0.7)
|
|
ax.bar_label(bars)
|
|
plt.title("Rating of ice cream flavours of your choice")
|
|
display(fig, target="graph-area", append=False)
|
|
|
|
plot(ice_data)
|
|
</py-script>
|
|
|
|
<py-repl>
|
|
ice_data
|
|
</py-repl>
|
|
|
|
<div id="graph-area"></div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### Select specific flavours
|
|
|
|
Now that we have a way to explore the data using `py-repl` and a way to create the plot using all of the data, it's time for us to add a way to select specific flavours.
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<title>Ice Cream Picker</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<py-config>
|
|
packages = ["matplotlib", "pandas"]
|
|
</py-config>
|
|
|
|
<py-script>
|
|
import js
|
|
import pandas as pd
|
|
import matplotlib.pyplot as plt
|
|
|
|
from pyodide.http import open_url
|
|
from pyodide.ffi import create_proxy
|
|
|
|
url = (
|
|
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
|
|
)
|
|
ice_data = pd.read_csv(open_url(url))
|
|
|
|
current_selected = []
|
|
flavour_elements = js.document.getElementsByName("flavour")
|
|
|
|
def plot(data):
|
|
plt.rcParams["figure.figsize"] = (22,20)
|
|
fig, ax = plt.subplots()
|
|
bars = ax.barh(data["name"], data["rating"], height=0.7)
|
|
ax.bar_label(bars)
|
|
plt.title("Rating of ice cream flavours of your choice")
|
|
display(fig, target="graph-area", append=False)
|
|
|
|
def select_flavour(event):
|
|
for ele in flavour_elements:
|
|
if ele.checked:
|
|
current_selected = ele.value
|
|
break
|
|
if current_selected == "ALL":
|
|
plot(ice_data)
|
|
else:
|
|
filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1)
|
|
plot(ice_data[filter])
|
|
|
|
ele_proxy = create_proxy(select_flavour)
|
|
|
|
for ele in flavour_elements:
|
|
if ele.value == "ALL":
|
|
ele.checked = True
|
|
current_selected = ele.value
|
|
ele.addEventListener("change", ele_proxy)
|
|
|
|
plot(ice_data)
|
|
|
|
</py-script>
|
|
|
|
<div id="input" style="margin: 20px;">
|
|
Select your 🍨 flavour: <br/>
|
|
<input type="radio" id="all" name="flavour" value="ALL">
|
|
<label for="all"> All 🍧</label>
|
|
<input type="radio" id="chocolate" name="flavour" value="COCOA">
|
|
<label for="chocolate"> Chocolate 🍫</label>
|
|
<input type="radio" id="cherrie" name="flavour" value="CHERRIES">
|
|
<label for="cherrie"> Cherries 🍒</label>
|
|
<input type="radio" id="berries" name="flavour" value="BERRY">
|
|
<label for="berries"> Berries 🍓</label>
|
|
<input type="radio" id="cheese" name="flavour" value="CHEESE">
|
|
<label for="cheese"> Cheese 🧀</label>
|
|
<input type="radio" id="peanut" name="flavour" value="PEANUT">
|
|
<label for="peanut"> Peanut 🥜</label>
|
|
</div>
|
|
|
|
<py-repl>
|
|
ice_data
|
|
</py-repl>
|
|
|
|
<div id="graph-area"></div>
|
|
</body>
|
|
</html>
|
|
```
|