alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Move antigravity to module

Browse Source
This commit is contained in:
Philipp Rudiger
2022-04-26 16:12:33 +02:00
parent 47d20f0e85
commit 16c0cdca89
4 changed files with 47 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
pyscriptjs/examples/antigravity.html
View File

@@ -5,68 +5,11 @@
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head>
<style> <body>
.loading { <b>
display: inline-block; Based on xkcd: antigravity https://xkcd.com/353/.
width: 50px; </b>
height: 50px; <py-script src="antigravity.py"></py-script>
border: 3px solid rgba(255, 255, 255, 0.3); </body>
border-radius: 50%;
border-top-color: black;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<b>
Based on xkcd: antigravity https://xkcd.com/353/.
</b>
<div style="display: flex; flex-direction: row">
<div id="antigravity" style="width: 400px; height: 400px">
<div class="loading"></div>
</div>
</div>
<py-script output="antigravity">
import random
from js import document, setInterval
from pyodide import create_proxy
from pyodide.http import open_url
class Antigravity():
def __init__(self, node):
self.node = node
self.xoffset, self.yoffset = 0, 0
setInterval(create_proxy(self.move), 10)
def move(self):
char = document.getElementById('python')
console.log(char)
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
def _repr_svg_(self):
return open_url('./antigravity.svg').read()
node = document.getElementById('antigravity')
node.replaceChildren()
Antigravity(node)
</py-script>
</body>
</html> </html>

33
pyscriptjs/examples/antigravity.py Normal file
View File

@@ -0,0 +1,33 @@
import random
import sys
from js import document, DOMParser, setInterval
from pyodide import create_proxy
from pyodide.http import open_url
class Antigravity():
url = './antigravity.svg'
def __init__(self, target=None, interval=10, append=True):
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
setInterval(create_proxy(self.move), 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
Antigravity(append=True);

8
pyscriptjs/examples/repl.html
View File

@@ -4,14 +4,18 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Svelte app</title> <title>REPL</title>
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head> </head>
<py-env>
- paths:
- /antigravity.py
</py-env>
<body> <body>
<div> <div>
<py-repl id="my-repl" auto-generate="true"> </py-repl> <py-repl id="my-repl" auto-generate="true"> </py-repl>

1
pyscriptjs/examples/repl2.html
View File

@@ -17,6 +17,7 @@
- numpy - numpy
- paths: - paths:
- /utils.py - /utils.py
- /antigravity.py
</py-env> </py-env>
<body> <body>