mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-21 19:25:35 -05:00
149 lines
5.1 KiB
HTML
149 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
|
|
<title>Custom REPL Example</title>
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<link rel="stylesheet" href="repl.css" />
|
|
<link rel="stylesheet" href="./assets/css/examples.css" />
|
|
<link rel="stylesheet" href="./assets/prism/prism.css" />
|
|
<script defer src="./assets/prism/prism.js"></script>
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar" style="background-color: #000000;">
|
|
<div class="app-header">
|
|
<a href="/">
|
|
<img src="./logo.png" class="logo">
|
|
</a>
|
|
<a class="title" href="" style="color: #f0ab3c;">Custom REPL</a>
|
|
</div>
|
|
</nav>
|
|
<section class="pyscript">
|
|
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
|
|
<py-config>
|
|
packages = [
|
|
"bokeh",
|
|
"numpy"
|
|
]
|
|
|
|
[[fetch]]
|
|
files = ["./utils.py", "./antigravity.py"]
|
|
</py-config>
|
|
<div style="margin-right: 3rem;">
|
|
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
|
<div id="output" class="p-4"></div>
|
|
</div>
|
|
</section>
|
|
<section class="code">
|
|
<div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
|
|
<div id="code-section" class="code-section-hidden">
|
|
<p>index.html</p>
|
|
<pre class="prism-code language-html">
|
|
<code class="language-html">
|
|
<div>
|
|
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
|
<div id="output" class="p-4"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
<p>utils.py</p>
|
|
<pre class="prism-code language-python">
|
|
<code class="language-python">
|
|
from datetime import datetime as dt
|
|
|
|
|
|
def format_date(dt_, fmt="%m/%d/%Y, %H:%M:%S"):
|
|
return f"{dt_:{fmt}}"
|
|
|
|
|
|
def now(fmt="%m/%d/%Y, %H:%M:%S"):
|
|
return format_date(dt.now(), fmt)
|
|
|
|
|
|
def remove_class(element, class_name):
|
|
element.element.classList.remove(class_name)
|
|
|
|
|
|
def add_class(element, class_name):
|
|
element.element.classList.add(class_name)
|
|
</code>
|
|
</pre>
|
|
<p>antigravity.py</p>
|
|
<pre class="prism-code language-python">
|
|
<code class="language-python">
|
|
import random
|
|
import sys
|
|
|
|
from js import DOMParser, document, setInterval
|
|
from pyodide.ffi import create_proxy
|
|
from pyodide.http import open_url
|
|
|
|
|
|
class Antigravity:
|
|
|
|
url = "./antigravity.svg"
|
|
|
|
def __init__(self, target=None, interval=10, append=True, fly=False):
|
|
target = target or sys.stdout._out
|
|
self.target = (
|
|
document.getElementById(target) if isinstance(target, str) else target
|
|
)
|
|
doc = DOMParser.new().parseFromString(
|
|
open_url(self.url).read(), "image/svg+xml"
|
|
)
|
|
self.node = doc.documentElement
|
|
if append:
|
|
self.target.append(self.node)
|
|
else:
|
|
self.target.replaceChildren(self.node)
|
|
self.xoffset, self.yoffset = 0, 0
|
|
self.interval = interval
|
|
if fly:
|
|
self.fly()
|
|
|
|
def fly(self):
|
|
setInterval(create_proxy(self.move), self.interval)
|
|
|
|
def move(self):
|
|
char = self.node.getElementsByTagName("g")[1]
|
|
char.setAttribute("transform", f"translate({self.xoffset}, {-self.yoffset})")
|
|
self.xoffset += random.normalvariate(0, 1) / 20
|
|
if self.yoffset < 50:
|
|
self.yoffset += 0.1
|
|
else:
|
|
self.yoffset += random.normalvariate(0, 1) / 20
|
|
|
|
_auto = Antigravity(append=True)
|
|
fly = _auto.fly
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
<script>
|
|
const viewCodeButton = document.getElementById("view-code-button");
|
|
const codeSection = document.getElementById("code-section");
|
|
const handleClick = () => {
|
|
if (codeSection.classList.contains("code-section-hidden")) {
|
|
codeSection.classList.remove("code-section-hidden");
|
|
codeSection.classList.add("code-section-visible");
|
|
} else {
|
|
codeSection.classList.remove("code-section-visible");
|
|
codeSection.classList.add("code-section-hidden");
|
|
}
|
|
}
|
|
viewCodeButton.addEventListener("click", handleClick)
|
|
viewCodeButton.addEventListener("keydown", (e) => {
|
|
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
|
|
handleClick();
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|