Simple interactive elements example

tirthajyoti · May 1, 2022, 5:56am

Can some examples be put that show simple HTML button interaction to create charts and tables, etc? This is for standard data science users.

For example, generate some random numbers for a given distribution type. A simple dropdown (HTML) of 3-4 distributions and a button (HTML) and when clicked, shows the generated random variates using NumPy. Can even show plots using Matplotlib.

I noticed some widgets examples using Panel, but can we not use HTML elements as widgets? From the concept of the project, this will be most straightforward.

tirthajyoti · May 1, 2022, 10:15am

Actually, I explored and kind of figured out some of these. Here is my basic random number generation script running nicely on Github static page

https://tirthajyoti.github.io/pyscript_random_gen.html

riuunderscoreofficia · May 2, 2022, 12:49pm

Can you provide the github source link for reference?

tanner.wride · May 2, 2022, 3:55pm

Very cool! Thanks for sharing

ricardoprins · May 2, 2022, 4:46pm

github.com

tirthajyoti/PyScript-examples/blob/main/examples/pyscript_random_gen.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>PyScript Random Number Generation</title>

     <link rel="icon" type="image/png" href="favicon.png" />
	 <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" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<py-env>
      - matplotlib
	</py-env>
  </head>

  <body style="margin: 25px 75px 25px 75px;">
	<div class="container-fluid">
	<div class="p-5 text-center bg-light">

This file has been truncated. show original

Brian_Kustra · May 2, 2022, 5:17pm

This is really cool! Has a notebook feel.

steakfrite · May 5, 2022, 9:11am

Thanks! I have been through your code and could you please guide us on how pys-onClick works in your button? I couldn’t find anything on Google about it.

dios-c · May 5, 2022, 9:54am

thank you~ your script explained a lot for me.