Techno Blender
Digitally Yours.

PyScript.com: a PyScript IDE in the Cloud | by Alan Jones | Apr, 2023

0 50


Wow! He must be a very serious and important programmer if he needs screens that big — I wonder why they’re mostly blank. Photo by Max Duzij on Unsplash

Well, this is good news! It’s not currently obvious what existing IDE or editor is good for building PyScript apps but now, with PyScript.com, we have a dedicated online IDE.

Just how good is it? We are going to find out.

We are going to take a look at the new PyScript online IDE from Anaconda: I’ll introduce the new platform, we’ll take a look at how to get started writing PyScript apps with it and we’ll end up with a fully functional and deployed PyScript app.

PyScript.com

Anaconda Inc. is not shy about what it thinks of its new product.

“The revolutionary platform enables programming for the 99%, advancing Anaconda’s mission to democratize data science and Python development.” — Anaconda Inc.

You doubtless know Anaconda as a vendor of a data science platform based on their own Python distribution. And you may also know them as the inventors of PyScript (if you’ve been following my articles here on Medium you certainly do — see Hello PyScript, What’s new in PyScript in 2023 and others).

Anaconda released PyScript via the PyScript.net website; it’s an open source project that is dedicated to creating Python apps as web pages and it is hosted on GitHub.

PyScript is based on Pyodide, a Python interpreter that has been ported to WebAssembly. WebAssembly being a low-level language that will run in a browser, so this means that you can now run Python programs natively in a browser.

That’s quite a big deal when you think about it.

With PyScript you can write Python apps that communicate with Javascript and the DOM and thus produce Python-centric web apps that require no server — upload them to a web host and they just work!

PyScript.net and PyScript.com

PyScript.com is not to be confused with PyScript.net. The new website is not part of the open source product but a new online programming environment. It is, according to Anaconda:

“a free and flexible coding platform where anyone in the world can create next-generation web applications with Python-powered data interactivity and computation”

And they go on to say that

“the platform is now generally available for free as a software service”.

It won’t, however, be completely free forever. This is given away by the offer of a Founder’s subscription where for $150 you will receive a year’s free access to forthcoming paid-for features (I am currently unclear what they will be but presumably Anaconda thinks that they will be worth paying for. I am guessing — hoping — that the current features will remain free).

So what’s the deal? What do we get with PyScript.com?

Getting Started

First, you need an account. No problem there, head over to the website, sign up and log in.

You will be greeted by the Dashboard where a new project will be waiting for you. The screen will look something like this:

The PyScript.com dashboard — screenshot by author

“Weathered Moon” is the cute name of a default project that has been created for me — yours will be called something different. (And if you don’t think it’s cute enough — or it’s too cute — you can change the name later.)

As you can see there are options to view or edit the site and the dotty menu gives you additional options to delete or copy the project.

Click on ‘Edit’ and the project will open. There will be three panes: on the left a file manager and and editor, and on the right a pane that displays the running project. (If you are using a phone or a small browser window, the configuration may be different.)

The default project comprises three files,

  • index.html: this defines the web page in HTML
  • main.py: this contains the Python code
  • pyscript.toml: this will be empty — we’ll see how it is used later.

Here is a screenshot of the open project — you will not be surprised by what it does!

A screenshot of the author’s default project

The Python program simply prints “Hello World!” and that is what the app does, too (well, what were you expecting!). But there is a little more to the app than this.

As I’ve said pyscript.tomlis empty but let’s look at the HTML. Click on index.html under FILES and it will (of course) pop up in the editor. This is what you will see:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Weathered Moon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>
</body>
</html>

This HTML could be the basis for many PyScript apps. Its format is HTML but there are some PyScript-specific parts. The first two are the <link>and <script> tags that load pyscript.css and pyscript.js. These are required for any app and load the bits that make Python work in the browser.

The next PyScript-specific parts are in the body; <py-config src="./pyscript.toml> loads the configuration. This could be included directly in the tag but it is neater to hide it away in the pyscript.toml file. As I said before, this file is currently empty but we’ll use it soon.

And then we have the inclusion of the Python code from main.py in the tag <py-script src="./main.py">.

That’s all nice and neat and pretty straightforward.

Let’s go back to main.py.

print("Hello, World!")

And change it.

print("Hello, Moon!")

Now hit the ‘Run’ button and you’ll see the new output in the righthand pane.

Screenshot by author

What is going on here, exactly? In Python, the print statement writes to the standard output device (usually the screen) in PyScript it writes to a tag called <py-terminal> and unless it is included in the HTML file, this tag is automatically created the first time print is used. So, when print("Hello Moon!") is executed, the tag <py-terminal> is created in the web page and the output of the print statement is written into it.

Frankly, when we are building an app, this is not a particularly useful thing to do. It’s fine for debugging purposes but when building an app, the output that we generate ought to be a part of a web page — in a <div> for example — and to output text into an arbitrary HTML tag we don’t use print, we use display. But more of that shortly.

First, though, we can see the app running in a browser by selecting ‘View Site’ from the menu on the right.

Screenshot by author

I won’t bother with a screenshot here, it is exactly like the preview pane. The thing to be at least slightly surprised by is that the app appears in a new tab in the browser and is being served live from the website. It has its own unique public URL that you can share with anyone. and just to prove the point, here it is:

https://26efd18d-1c15-4b46-b574-58731b341c76.pyscriptapps.com/5b49c512-f88f-493c-9d62-f0d745a298ed/latest/

Now type that into your browser — just kidding, it’s a link, of course.

Let’s plot a graph

We are going to expand on the ‘Hello World’ app a little and make something that shows how Python code and HTML work nicely together.

First, as it is a good starting point, copy your existing project using the menu on the right.

Screenshot by author

And we get a new project

Screenshot by author

To change the title click on the edit button, as indicated, and save it.

We are not going to do anything too fancy, just create a web page with a graph that we plotted in Python. So, we need to adapt the HTML code to accommodate this.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Let's Plot a Graph</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>

<h1>Let's Plot a Graph</h1>
<div id="graph"></div>
</body>
</html>

You can see that this is the same as the index.html that we started with but with a couple of alterations. I’ve changed the title and added two tags at the end of the body, first, a <h1>heading and then a <div> with the id “graph” — this is where the graph will be plotted.

Don’t run this yet (it will still say ‘Hello Moon’), we need to add the Python code to main.py.

import matplotlib.pyplot as plt
import pandas as pd

df = pd.DataFrame()
df['x'] = [1,2,3,4,5,6,7,8,9]
df['y'] = [1,2,3,4,5,6,7,8,9]

fig, ax = plt.subplots()
df.plot("x", "y", ax=ax)

display(fig, target="graph")

After the imports, we create a Pandas dataframe that has two columns for the x and y axes. They each contain the integers 1 to 9. We then create a mathplotlib figure (it’ll be a straight line graph, of course) and then use the PyScript command display to display the figure in the HTML tag with the id “graph”.

Can we run it now? No, be a little patient, please.

We’ve imported the pandas and mathplotlib libraries in the Python code but these do not come as part of the PyScript package. So we need to specify this as part of the <py-config> and have to put the following in <pyscript.toml>.

packages = ["pandas", "matplotlib"]

You can use a whole load of Python packages but they need to be specified in the configuration as well as imported to the Python code. The config section can be used to load external files, such as data files, into the app.

OK, now you can run it.

Screenshot by author

You may have noticed this before but if you view the project on its own web page you will see a link at the bottom.

Screenshot by author

Anyone who can see the link also has access to your code. Clicking on the ‘View Code’ link will open up a non-editable (but probably copyable) version of your project.

So that’s a simple PyScript app and there are a few things worth noting:

  1. The default files which are given to you, pyscript.toml, main.py, & index.html are good starting points to create a new project. So your first step in creating a new project will probably be to copy the default app and rename it.
  2. If you want to use a library you have to specify it in the configuration as well as import it in the Python code.
  3. The PyScript command display is used to write output from the Python code to an HTML tag with a specific id.
  4. Your code is served from the PyScript.com server and can be viewed from its URL. Anyone with that URL can run the app and also view your code (so don’t put any secrets in it).

One thing that I have not mentioned is how to get back to the dashboard view of your projects.

Screenshot by author

Actually, clicking anywhere on the PyScript logo will get you to this view.

What’s with the rabbit logo? Wouldn’t a Python eat a rabbit, given half a chance? I’m not sure that’s the image of PyScript that we want.

You can also go to the dashboard from the top right menu:

Screenshot by author

A complete app

I promised you an app; it’s fairly simple but here it is. It’s based on the article PyScript, Pandas and Plotly: an Interactive Web App except, to keep things simple it uses matplotlib instead of Plotly. It also uses the Bootstrap Javascript library to make the UI pretty.

It looks like this:

Screenshot by author

The app downloads some weather data¹ and lets you select a chart to display from a drop-down menu. (If you have read my other articles you’ve probably seen a million or so versions of this using different technologies.)

I won’t go into the detailed workings of the app as most of it is explained in the article referred to above or in what we have already covered. There are also comments in the Python code that explain what is going on.

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Weathered App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>

<div class="jumbotron p-2">
<h1>Weather Data</h1>
<p class="lead">
Some graphs about the weather in London in 2020
</p>
</div>

<div class="row">
<div class="col-sm-2 m-2">
<b>Select chart from list:</b>
</div>
<div class="col-sm-4 m-2">
<select class="form-control" id="select" py-change="selectChange()">
<option value="Tmax">Maximum Temperature</option>
<option value="Tmin">Minimum Temperature</option>
<option value="Sun">Sun</option>
<option value="Rain">Rain</option>
</select>
</div>

<div class="row">
<div class="col-sm-6 m-2">
<div id="chart1"></div>
</div>
</div>
</div>
</body>
</html>

The Python:

# Import libraries
import pandas as pd
import matplotlib.pyplot as plt
import js

# Get the data
# Note you can't use the 'requests' package or similar
# so we import the date using a built-in pyodide function
from pyodide.http import open_url

url = 'https://raw.githubusercontent.com/alanjones2/uk-historical-weather/main/data/Heathrow.csv'
url_content = open_url(url)

# Create dataframe for the year 2020
df = pd.read_csv(url_content)
df = df[df['Year']==2020]

# Create a matplotlib chart and display it in "chart1"
# Note append is false so that old charts are overwritten
def plot(chart):
fig, ax = plt.subplots()
df.plot("Month", chart, ax=ax)

display(fig, target="chart1", append=False)

# The is the call back form the dropdown menu
# it gets the value selected and calls plot
def selectChange():
choice = js.document.getElementById("select").value
plot(choice)

# Call plot on startup
plot('Tmax')

And the configuration:

packages = ["pandas", "matplotlib"]

And there is a link to the final app here where you can see it in all its glory, look at the code and copy it, if you feel so inclined.

What do we think?

There are pros and cons to pyscript.com, of course. Here are some that I think are worthy of note:

Pros:

  • It is a simple and easy-to-use IDE
  • Everything you need is on one page
  • What you create is open by default — great we can share!
  • The default app makes a good starting point for a new project
  • The copy facility is good, you could use it to create new projects from old ones, or new versions of existing ones
  • Automatic deployment and free hosting! (The URL is a bit of a nightmare, though)

Cons:

  • What you create is open by default — oh dear, no proprietary code! But I would not be at all surprised to find that a paid-for feature might cater for this at a later date
  • You can’t download a project and copy it to a different development environment
  • It is a bit slow to start up but that is mostly a PyScript thing — maybe the IDE slows startup a bit more, I’m not sure

I think the first pro is the most important. It is very easy to use, the editor works with HTML and Python very well and you get (almost) instant results from any changes that you make to the code. Automatic deployment and hosting are great, too.

All in all, this is a welcome package. It’s clearly not aimed at commercial projects but is a great place to share ideas and experiment with PyScript.

Try it out!


Wow! He must be a very serious and important programmer if he needs screens that big — I wonder why they’re mostly blank. Photo by Max Duzij on Unsplash

Well, this is good news! It’s not currently obvious what existing IDE or editor is good for building PyScript apps but now, with PyScript.com, we have a dedicated online IDE.

Just how good is it? We are going to find out.

We are going to take a look at the new PyScript online IDE from Anaconda: I’ll introduce the new platform, we’ll take a look at how to get started writing PyScript apps with it and we’ll end up with a fully functional and deployed PyScript app.

PyScript.com

Anaconda Inc. is not shy about what it thinks of its new product.

“The revolutionary platform enables programming for the 99%, advancing Anaconda’s mission to democratize data science and Python development.” — Anaconda Inc.

You doubtless know Anaconda as a vendor of a data science platform based on their own Python distribution. And you may also know them as the inventors of PyScript (if you’ve been following my articles here on Medium you certainly do — see Hello PyScript, What’s new in PyScript in 2023 and others).

Anaconda released PyScript via the PyScript.net website; it’s an open source project that is dedicated to creating Python apps as web pages and it is hosted on GitHub.

PyScript is based on Pyodide, a Python interpreter that has been ported to WebAssembly. WebAssembly being a low-level language that will run in a browser, so this means that you can now run Python programs natively in a browser.

That’s quite a big deal when you think about it.

With PyScript you can write Python apps that communicate with Javascript and the DOM and thus produce Python-centric web apps that require no server — upload them to a web host and they just work!

PyScript.net and PyScript.com

PyScript.com is not to be confused with PyScript.net. The new website is not part of the open source product but a new online programming environment. It is, according to Anaconda:

“a free and flexible coding platform where anyone in the world can create next-generation web applications with Python-powered data interactivity and computation”

And they go on to say that

“the platform is now generally available for free as a software service”.

It won’t, however, be completely free forever. This is given away by the offer of a Founder’s subscription where for $150 you will receive a year’s free access to forthcoming paid-for features (I am currently unclear what they will be but presumably Anaconda thinks that they will be worth paying for. I am guessing — hoping — that the current features will remain free).

So what’s the deal? What do we get with PyScript.com?

Getting Started

First, you need an account. No problem there, head over to the website, sign up and log in.

You will be greeted by the Dashboard where a new project will be waiting for you. The screen will look something like this:

The PyScript.com dashboard — screenshot by author

“Weathered Moon” is the cute name of a default project that has been created for me — yours will be called something different. (And if you don’t think it’s cute enough — or it’s too cute — you can change the name later.)

As you can see there are options to view or edit the site and the dotty menu gives you additional options to delete or copy the project.

Click on ‘Edit’ and the project will open. There will be three panes: on the left a file manager and and editor, and on the right a pane that displays the running project. (If you are using a phone or a small browser window, the configuration may be different.)

The default project comprises three files,

  • index.html: this defines the web page in HTML
  • main.py: this contains the Python code
  • pyscript.toml: this will be empty — we’ll see how it is used later.

Here is a screenshot of the open project — you will not be surprised by what it does!

A screenshot of the author’s default project

The Python program simply prints “Hello World!” and that is what the app does, too (well, what were you expecting!). But there is a little more to the app than this.

As I’ve said pyscript.tomlis empty but let’s look at the HTML. Click on index.html under FILES and it will (of course) pop up in the editor. This is what you will see:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Weathered Moon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>
</body>
</html>

This HTML could be the basis for many PyScript apps. Its format is HTML but there are some PyScript-specific parts. The first two are the <link>and <script> tags that load pyscript.css and pyscript.js. These are required for any app and load the bits that make Python work in the browser.

The next PyScript-specific parts are in the body; <py-config src="./pyscript.toml> loads the configuration. This could be included directly in the tag but it is neater to hide it away in the pyscript.toml file. As I said before, this file is currently empty but we’ll use it soon.

And then we have the inclusion of the Python code from main.py in the tag <py-script src="./main.py">.

That’s all nice and neat and pretty straightforward.

Let’s go back to main.py.

print("Hello, World!")

And change it.

print("Hello, Moon!")

Now hit the ‘Run’ button and you’ll see the new output in the righthand pane.

Screenshot by author

What is going on here, exactly? In Python, the print statement writes to the standard output device (usually the screen) in PyScript it writes to a tag called <py-terminal> and unless it is included in the HTML file, this tag is automatically created the first time print is used. So, when print("Hello Moon!") is executed, the tag <py-terminal> is created in the web page and the output of the print statement is written into it.

Frankly, when we are building an app, this is not a particularly useful thing to do. It’s fine for debugging purposes but when building an app, the output that we generate ought to be a part of a web page — in a <div> for example — and to output text into an arbitrary HTML tag we don’t use print, we use display. But more of that shortly.

First, though, we can see the app running in a browser by selecting ‘View Site’ from the menu on the right.

Screenshot by author

I won’t bother with a screenshot here, it is exactly like the preview pane. The thing to be at least slightly surprised by is that the app appears in a new tab in the browser and is being served live from the website. It has its own unique public URL that you can share with anyone. and just to prove the point, here it is:

https://26efd18d-1c15-4b46-b574-58731b341c76.pyscriptapps.com/5b49c512-f88f-493c-9d62-f0d745a298ed/latest/

Now type that into your browser — just kidding, it’s a link, of course.

Let’s plot a graph

We are going to expand on the ‘Hello World’ app a little and make something that shows how Python code and HTML work nicely together.

First, as it is a good starting point, copy your existing project using the menu on the right.

Screenshot by author

And we get a new project

Screenshot by author

To change the title click on the edit button, as indicated, and save it.

We are not going to do anything too fancy, just create a web page with a graph that we plotted in Python. So, we need to adapt the HTML code to accommodate this.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Let's Plot a Graph</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>

<h1>Let's Plot a Graph</h1>
<div id="graph"></div>
</body>
</html>

You can see that this is the same as the index.html that we started with but with a couple of alterations. I’ve changed the title and added two tags at the end of the body, first, a <h1>heading and then a <div> with the id “graph” — this is where the graph will be plotted.

Don’t run this yet (it will still say ‘Hello Moon’), we need to add the Python code to main.py.

import matplotlib.pyplot as plt
import pandas as pd

df = pd.DataFrame()
df['x'] = [1,2,3,4,5,6,7,8,9]
df['y'] = [1,2,3,4,5,6,7,8,9]

fig, ax = plt.subplots()
df.plot("x", "y", ax=ax)

display(fig, target="graph")

After the imports, we create a Pandas dataframe that has two columns for the x and y axes. They each contain the integers 1 to 9. We then create a mathplotlib figure (it’ll be a straight line graph, of course) and then use the PyScript command display to display the figure in the HTML tag with the id “graph”.

Can we run it now? No, be a little patient, please.

We’ve imported the pandas and mathplotlib libraries in the Python code but these do not come as part of the PyScript package. So we need to specify this as part of the <py-config> and have to put the following in <pyscript.toml>.

packages = ["pandas", "matplotlib"]

You can use a whole load of Python packages but they need to be specified in the configuration as well as imported to the Python code. The config section can be used to load external files, such as data files, into the app.

OK, now you can run it.

Screenshot by author

You may have noticed this before but if you view the project on its own web page you will see a link at the bottom.

Screenshot by author

Anyone who can see the link also has access to your code. Clicking on the ‘View Code’ link will open up a non-editable (but probably copyable) version of your project.

So that’s a simple PyScript app and there are a few things worth noting:

  1. The default files which are given to you, pyscript.toml, main.py, & index.html are good starting points to create a new project. So your first step in creating a new project will probably be to copy the default app and rename it.
  2. If you want to use a library you have to specify it in the configuration as well as import it in the Python code.
  3. The PyScript command display is used to write output from the Python code to an HTML tag with a specific id.
  4. Your code is served from the PyScript.com server and can be viewed from its URL. Anyone with that URL can run the app and also view your code (so don’t put any secrets in it).

One thing that I have not mentioned is how to get back to the dashboard view of your projects.

Screenshot by author

Actually, clicking anywhere on the PyScript logo will get you to this view.

What’s with the rabbit logo? Wouldn’t a Python eat a rabbit, given half a chance? I’m not sure that’s the image of PyScript that we want.

You can also go to the dashboard from the top right menu:

Screenshot by author

A complete app

I promised you an app; it’s fairly simple but here it is. It’s based on the article PyScript, Pandas and Plotly: an Interactive Web App except, to keep things simple it uses matplotlib instead of Plotly. It also uses the Bootstrap Javascript library to make the UI pretty.

It looks like this:

Screenshot by author

The app downloads some weather data¹ and lets you select a chart to display from a drop-down menu. (If you have read my other articles you’ve probably seen a million or so versions of this using different technologies.)

I won’t go into the detailed workings of the app as most of it is explained in the article referred to above or in what we have already covered. There are also comments in the Python code that explain what is going on.

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Weathered App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
<script defer data-src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<py-config src="./pyscript.toml"></py-config>
<py-script src="./main.py"></py-script>

<div class="jumbotron p-2">
<h1>Weather Data</h1>
<p class="lead">
Some graphs about the weather in London in 2020
</p>
</div>

<div class="row">
<div class="col-sm-2 m-2">
<b>Select chart from list:</b>
</div>
<div class="col-sm-4 m-2">
<select class="form-control" id="select" py-change="selectChange()">
<option value="Tmax">Maximum Temperature</option>
<option value="Tmin">Minimum Temperature</option>
<option value="Sun">Sun</option>
<option value="Rain">Rain</option>
</select>
</div>

<div class="row">
<div class="col-sm-6 m-2">
<div id="chart1"></div>
</div>
</div>
</div>
</body>
</html>

The Python:

# Import libraries
import pandas as pd
import matplotlib.pyplot as plt
import js

# Get the data
# Note you can't use the 'requests' package or similar
# so we import the date using a built-in pyodide function
from pyodide.http import open_url

url = 'https://raw.githubusercontent.com/alanjones2/uk-historical-weather/main/data/Heathrow.csv'
url_content = open_url(url)

# Create dataframe for the year 2020
df = pd.read_csv(url_content)
df = df[df['Year']==2020]

# Create a matplotlib chart and display it in "chart1"
# Note append is false so that old charts are overwritten
def plot(chart):
fig, ax = plt.subplots()
df.plot("Month", chart, ax=ax)

display(fig, target="chart1", append=False)

# The is the call back form the dropdown menu
# it gets the value selected and calls plot
def selectChange():
choice = js.document.getElementById("select").value
plot(choice)

# Call plot on startup
plot('Tmax')

And the configuration:

packages = ["pandas", "matplotlib"]

And there is a link to the final app here where you can see it in all its glory, look at the code and copy it, if you feel so inclined.

What do we think?

There are pros and cons to pyscript.com, of course. Here are some that I think are worthy of note:

Pros:

  • It is a simple and easy-to-use IDE
  • Everything you need is on one page
  • What you create is open by default — great we can share!
  • The default app makes a good starting point for a new project
  • The copy facility is good, you could use it to create new projects from old ones, or new versions of existing ones
  • Automatic deployment and free hosting! (The URL is a bit of a nightmare, though)

Cons:

  • What you create is open by default — oh dear, no proprietary code! But I would not be at all surprised to find that a paid-for feature might cater for this at a later date
  • You can’t download a project and copy it to a different development environment
  • It is a bit slow to start up but that is mostly a PyScript thing — maybe the IDE slows startup a bit more, I’m not sure

I think the first pro is the most important. It is very easy to use, the editor works with HTML and Python very well and you get (almost) instant results from any changes that you make to the code. Automatic deployment and hosting are great, too.

All in all, this is a welcome package. It’s clearly not aimed at commercial projects but is a great place to share ideas and experiment with PyScript.

Try it out!

FOLLOW US ON GOOGLE NEWS

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.
Leave a comment