jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-17 01:00:41 -05:00
Code Issues Projects Releases Wiki Activity

Merge pull request #12 from anaconda/pys-16/improve-examples-ref

Browse Source 
fix examples landing page and some import issues
This commit is contained in:
Fabio Pliger
2022-04-12 15:44:23 -05:00
committed by GitHub
parent 6292341818 c29144d69c
commit 1966f1c8b7
6 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
pyscriptjs/examples/index.html
View File

@@ -7,26 +7,49 @@
<title>PyScript demo</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="build/bundle.css" />
<script defer src="build/bundle.js"></script>
<link rel="stylesheet" href="build/pyscript.css" />
</head>
<body class="container">
<body class="container font-mono">
<h1 class="text-3xl font-bold">PyScript demos</h1>
<hr/>
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html">Simple script</a></h2>
<p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./bokeh_interactive.html" target=”_blank”>Bokeh Interactive</a></h2>
<p>Interactive demo using a Bokeh slider widget to dynamically change a value in the page
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html">Simple script 2</a></h2>
WARNING: This examples takes a little longer to load. So be patient :)
</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./bokeh.html" target=”_blank”>Simple Static Bokeh Plot</a></h2>
<p>Minimal Bokeh demo demonstrating how to create a simple bokeh plot from code</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./panel_kmeans.html" target=”_blank”>KMeans Demo in Panel</a></h2>
<p>Interactive KMeans Chart using Panel
WARNING: This examples takes a little longer to load. So be patient :)
</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_blank”>Simple Panel Demo</a></h2>
<p>Simple demo showing Panel widgets interating with parts of the page
WARNING: This examples takes a little longer to load. So be patient :)
</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
<p>A Python REPL (Read Eval Print Loop). </p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html" target=”_blank”>Simple script</a></h2>
<p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" target=”_blank”>Simple script 2</a></h2>
<p>A dynamic demo of the <code>&lt;py-script&gt;</code> tag</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html">REPL</a></h2>
<p>A Python REPL (Read Eval Print Loop). </p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html">REPL2</a></h2>
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
<h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_blank”>TODO App</a></h2>
<p>Demo showing how would a Simple TODO App would look like in PyScript</code> tag</p>
</body>
</html>
</html>

2
pyscriptjs/examples/repl.html
View File

@@ -7,7 +7,7 @@
<title>Svelte app</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/bundle.css" />
<link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
</head>

2
pyscriptjs/examples/repl2.html
View File

@@ -7,7 +7,7 @@
<title>Svelte app</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/bundle.css" />
<link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
</head>

2
pyscriptjs/examples/simple_script.html
View File

@@ -13,7 +13,7 @@
</head>
<body>
<div id="outputDiv" style="background-color:yellow"></div>
<div id="outputDiv" class="font-mono" style="background-color:yellow"></div>
<py-script target="outputDiv">
from datetime import datetime
now = datetime.now()

8
pyscriptjs/examples/simple_script2.html
View File

@@ -7,15 +7,15 @@
<title>Svelte app</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/bundle.css" />
<link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
</head>
<body>
<div id="outputDiv"></div>
<div id="outputDiv2" style="background-color: blueviolet"></div>
<div id="outputDiv3" style="background-color: yellow"></div>
<div class="font-mono">start time: <label id="outputDiv"></label></div>
<div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div>
<py-script target="outputDiv">
from datetime import datetime
now = datetime.now()

2
pyscriptjs/src/interpreter.ts
View File

@@ -35,7 +35,7 @@ class PyScript:
console.log(f"DATA/IMAGE: {value}")
document.getElementById(element_id).innerHTML = f'<div><img id="plt" src="{value}"/></div>'
else:
document.getElementById(element_id).innerHTML = repr(value);
document.getElementById(element_id).innerHTML = value;
console.log(f"ELSE: {append} ==> {element_id} --> {value}")
@staticmethod