Skip to content

Latest commit

 

History

History
269 lines (207 loc) · 8.38 KB

getting-started.md

File metadata and controls

269 lines (207 loc) · 8.38 KB
Raw

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) and a text editor, even though using your IDE of choice might be convenient.

If you're using VSCode, the Live Server extension 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.

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 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>
  <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. 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>
  <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> documentation for more information.

<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> and <py-repl> documentation for more information about these elements.

<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 documentation for more information.

<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>
  <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>