mirror of
https://github.com/pyscript/pyscript.git
synced 2026-02-24 11:03:39 -05:00
Merge pull request #66 from pyscript/more-how-to
Use pyscript.net urls in getting-started
This commit is contained in:
Fabio Pliger
@@ -7,23 +7,21 @@ This page will guide you through getting started with PyScript.
|
||||
PyScript does not require any development environment other
|
||||
than a web browser. We recommend using Chrome.
|
||||
|
||||
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
|
||||
|
||||
First, go to https://pyscript.net and download the PyScript assets.
|
||||
Unzip the archive to a directory where you wish to write PyScript-enabled
|
||||
HTML files. You should then have three files in your directory.
|
||||
There is no installation required. In this document we'll use
|
||||
the PyScript assets served on https://pyscript.net.
|
||||
|
||||
```
|
||||
├── ./
|
||||
│ ├── pyscript.css
|
||||
│ ├── pyscript.js
|
||||
│ └── pyscript.js.map
|
||||
```
|
||||
If you want to download the source and build it yourself follow
|
||||
the instructions in the README.md file.
|
||||
|
||||
## Your first PyScript HTML file
|
||||
|
||||
Here's a "Hello, world!" example using PyScript using the assets you
|
||||
downloaded from https://pyscript.net.
|
||||
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
|
||||
@@ -33,8 +31,8 @@ open an HTML by double clicking it in your file explorer.
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="pyscript.css" />
|
||||
<script defer src="pyscript.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
</head>
|
||||
<body> <py-script> print('Hello, World!') </py-script> </body>
|
||||
</html>
|
||||
@@ -53,8 +51,8 @@ example we can compute π.
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="pyscript.css" />
|
||||
<script defer src="pyscript.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<py-script>
|
||||
@@ -85,8 +83,8 @@ the `<py-script>` tag write to.
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="pyscript.css" />
|
||||
<script defer src="pyscript.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
@@ -125,8 +123,8 @@ as a shortcut, which takes the expression on the last line of the script and run
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="pyscript.css" />
|
||||
<script defer src="pyscript.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
<py-env>
|
||||
- numpy
|
||||
- matplotlib
|
||||
@@ -143,6 +141,55 @@ import numpy as np
|
||||
x = np.random.randn(1000)
|
||||
y = np.random.randn(1000)
|
||||
|
||||
fig, ax = plt.subplots()
|
||||
ax.scatter(x, y)
|
||||
fig
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Local modules
|
||||
|
||||
In addition to packages you can declare local Python modules that will
|
||||
be imported in the `<py-script>` tag. For example we can place the random
|
||||
number generation steps in a function in the file `data.py`.
|
||||
|
||||
```python
|
||||
# data.py
|
||||
import numpy as np
|
||||
|
||||
def make_x_and_y(n):
|
||||
x = np.random.randn(n)
|
||||
y = np.random.randn(n)
|
||||
return x, y
|
||||
```
|
||||
|
||||
In the HTML tag `<py-env>` paths to local modules are provided in the
|
||||
`paths:` key.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
<py-env>
|
||||
- numpy
|
||||
- matplotlib
|
||||
- paths:
|
||||
- /data.py
|
||||
</py-env>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Let's plot random numbers</h1>
|
||||
<div id="plot"></div>
|
||||
<py-script output="plot">
|
||||
import matplotlib.pyplot as plt
|
||||
from data import make_x_and_y
|
||||
|
||||
x, y = make_x_and_y(n=1000)
|
||||
|
||||
fig, ax = plt.subplots()
|
||||
ax.scatter(x, y)
|
||||
fig
|
||||
|
||||
Reference in New Issue
Block a user