jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

add complex application example

Browse Source
This commit is contained in:
Fabio Pliger
2023-09-05 17:24:08 -05:00
parent c739e23cc5
commit f226506856
3 changed files with 97 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
newdocs/docs/getting-started.md
View File

@@ -136,7 +136,7 @@ First, create a new file called `hello.html` and paste in the following content
**Hint:** In the example below, click on the ➕ icon to read hints about specific sections in the code examples
```html title="hello_world.py"
```html title="hello_world.html"
<!DOCTYPE html>
<html>
<head>
@@ -144,10 +144,7 @@ First, create a new file called `hello.html` and paste in the following content
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My First PyScript APP: Hello World!</title>
<script
type="module"
src="https://esm.sh/@pyscript/core@latest/core.js"
></script> <!-- (1) Load PyScript -->
<script type="module" src="https://esm.sh/@pyscript/core@latest/core.js"></script> <!-- (1) Load PyScript -->
</head>
<body>
<!-- (2) In this case were using the default config, so don't need to specify a `<py-config>` tag -->
@@ -197,15 +194,12 @@ this feature, we'd have the following:
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My First PyScript APP: Hello World!</title>
<script
type="module"
src="https://esm.sh/@pyscript/core@latest/core.js"
></script> <!-- (1) Load PyScript -->
<script type="module" src="https://esm.sh/@pyscript/core@latest/core.js"></script> <!-- Load PyScript -->
</head>
<body>
<!-- (2) In this case were using the default config, so don't need to specify a `<py-config>` tag -->
<!-- In this case were using the default config, so don't need to specify a `<py-config>` tag -->
<!-- (3) run the code that is defined within the <script type="py"> tag-->
<!-- (1) run the code that is defined within the <script type="py"> tag-->
<script type="py" src="main.py">
from pyscript import display # (1)
print('Hello, World!') # print "Hello, World!" to the console
@@ -214,9 +208,11 @@ this feature, we'd have the following:
</body>
</html>
```
3. 🐍 Noticed anything different? Yes, we are passing the python code within the tag itself instead
1. 🐍 Noticed anything different? Yes, we are passing the python code within the tag itself instead
of a separate `main.py` file.
<a href="https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/" class="md-button" target="_blank">open this example on pyscript.com</a>
If you noticed, above we are using `<script type="...">` instead of `<py-script>`. That is another way you
can run code logic in PyScript. The reason we are using `script` in this case is that the `<py-script>`
does not support inline code due to how the browser treats one vs. the other. For all use cases where
@@ -233,166 +229,83 @@ the code is defined in a separate file, both tags are equivalent
## 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.
Now that we know how you can create a simple 'Hello, World!' example, let's use everything
we've learned above see a more complex example.
### Setting up the base index file
Let's create a new file called `index.html` and add the following content:
Just like before, let's create a new `html` file that will contain our application template
and interface. We'll call this file `index.html` and add the following content:
```html
```html title="index.html"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<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>
<script type="module" src="https://esm.sh/@pyscript/core@latest/core.js"></script> <!-- (1) Load PyScript -->
</head>
<body>
<py-config src="pyscript.toml"></py-config>
</body>
</html>
```
<!-- (3) run the code in the `main.py` file -->
<py-script src="main.py"></py-script>
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="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="cherry" name="flavour" value="CHERRIES">
<label for="cherry"> 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>
<div id="graph-area"></div>
</body>
</html>
```
### Select specific flavours
This creates a solid base for our application and we are ready to start adding the elements we need for our application.
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.
### Importing the needed libraries
```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>
For this example, we will need to install `pandas` and `matplotlib`. We can install libraries using the `<py-config>` tag
we already added to the `index.html` file above. All we have to do now is to create the `pyscript.toml` file with the
right dependencies:
<py-config>
```toml title="pyscript.toml"
packages = ["matplotlib", "pandas"]
</py-config>
```
<py-script>
import js
For more information on the configuration files, please refer to the [`<py-config>` documentation](../reference/elements/py-config.md)
### Importing and plotting the data
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) documentation for more information about it.
```python title="main.py"
import pandas as pd
import matplotlib.pyplot as plt
from pyodide.http import open_url
from pyodide.ffi import create_proxy
from pyscript import display
import js
url = (
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
@@ -431,29 +344,6 @@ Now that we have a way to explore the data using `py-repl` and a way to create t
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="cherry" name="flavour" value="CHERRIES">
<label for="cherry"> 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>
```
<a href="https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/" class="md-button" target="_blank">open this example on pyscript.com</a>

17
newdocs/docs/index_original.md
View File

@@ -1,17 +0,0 @@
# Welcome to MkDocs
For full documentation visit [mkdocs.org](https://www.mkdocs.org).
## Commands
* `mkdocs new [dir-name]` - Create a new project.
* `mkdocs serve` - Start the live-reloading docs server.
* `mkdocs build` - Build the documentation site.
* `mkdocs -h` - Print help message and exit.
## Project layout
mkdocs.yml # The configuration file.
docs/
index.md # The documentation homepage.
... # Other markdown pages, images and other files.

2
newdocs/mkdocs.yml
View File

@@ -1,4 +1,4 @@
site_name: My Docs
site_name: PyScript
theme:
name: material