From 8123f0101a5be9d86bbe0a03416fe445b38ff8e8 Mon Sep 17 00:00:00 2001 From: Albert DeFusco Date: Fri, 29 Apr 2022 16:26:51 -0500 Subject: [PATCH 1/3] getting started --- GETTING-STARTED.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 GETTING-STARTED.md diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md new file mode 100644 index 00000000..919f41aa --- /dev/null +++ b/GETTING-STARTED.md @@ -0,0 +1,49 @@ +# Getting started with PyScript + +This page will guide you through getting started with PyScript. + +## Development setup + +PyScript does not require any development environment other +than a web browser. We recommend using Chrome. + +## 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. + +``` +├── ./ +│ ├── pyscript.css +│ ├── pyscript.js +│ └── pyscript.js.map +``` + +## Your first PyScript HTML file + +Here's a "Hello, world!" example using PyScript using the assets you +downloaded from https://pyscript.net. + +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 + + + + + + print('Hello, World!') + +``` + +Notice the use of the `` tag in the HTML body. This +is where you'll write your Python code. In the following sections we'll +introduce the 8 tags provided by PyScript. + +## The py-script tag + +... \ No newline at end of file From 9cf9da8fab59994746edb19881e6522335175358 Mon Sep 17 00:00:00 2001 From: Albert DeFusco Date: Fri, 29 Apr 2022 18:33:59 -0500 Subject: [PATCH 2/3] fun with pyscript.write --- GETTING-STARTED.md | 69 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 919f41aa..e6a9b877 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -46,4 +46,71 @@ introduce the 8 tags provided by PyScript. ## The py-script tag -... \ No newline at end of file +The `` tag let's you execute multi-line Python scripts and +print back onto the page. For +example we can compute π. + +```html + + + + + + + +print("Let's compute π:") +def wallis(n): + pi = 2 + for i in range(1,n): + pi *= 4 * i ** 2 / (4 * i ** 2 - 1) + return pi + +pi = wallis(100000) +s = f"π is approximately {pi:.3f}" +print(s) + + +``` + +### Writing into labeled elements + +In the example above we had a single `` tag and it printed +one or more lines onto the page in order. Within the `` you +have access to the `pyscript` module, which provides a `.write()` method +to send strings into labeled elements on the page. + +For example we'll add some style elements and provide place holders for +the `` tag write to. + +```html + + + + + + + + +

Today is

+
+
+ +import datetime as dt +pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y')) + +def wallis(n): + pi = 2 + for i in range(1,n): + pi *= 4 * i ** 2 / (4 * i ** 2 - 1) + return pi + +pi = wallis(100000) +pyscript.write('pi', f'π is approximately {pi:.3f}') + + + +``` + + + +## Asynchronous \ No newline at end of file From 997604193cf3ce2caabf9426c89bff84dea504d6 Mon Sep 17 00:00:00 2001 From: Albert DeFusco Date: Fri, 29 Apr 2022 18:53:41 -0500 Subject: [PATCH 3/3] py-env --- GETTING-STARTED.md | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index e6a9b877..16721b0d 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -111,6 +111,42 @@ pyscript.write('pi', f'π is approximately {pi:.3f}') ``` +## Packages and modules + +In addition to the [Python Standard Library](https://docs.python.org/3/library/) and +the `pyscript` module, many 3rd-party OSS packages will work out-of-the-box with PyScript. +In order to use them you will need to delcare the dependencies using the `` in the +HTML head. + +For example, NumPy and Matplotlib are available. Notice here we're using `` +as a shortcut, which takes the expression on the last line of the script and runs `pyscript.write('plot', fig)`. -## Asynchronous \ No newline at end of file +```html + + + + + + - numpy + - matplotlib + + + + +

Let's plot random numbers

+
+ +import matplotlib.pyplot as plt +import numpy as np + +x = np.random.randn(1000) +y = np.random.randn(1000) + +fig, ax = plt.subplots() +ax.scatter(x, y) +fig + + + +``` \ No newline at end of file