Use Your Scenes Outside Circuitry
A Python drawing, animation or game you make in Circuitry can run anywhere a web browser does: on your website, in an email attachment, on a friend's phone. This page covers exporting a scene as a web page, putting it on a website, and the open-source library that runs the same scene files on your own computer.
Export as a web page
Open your .py file and choose File → Export as Web Page…. Circuitry writes one .html file that holds the whole scene:
- Your program and Python itself. The page runs Python in the browser, so nobody needs Circuitry or Python installed to see it.
- The images your scene uses. An image loaded by a path next to your file, such as
load_image("textures/brick.png")orTHREE.TextureLoader().load("textures/brick.png"), is packed into the page. Save the.pyfile first, so the images can be found beside it. - three.js, for a 3D scene. A 2D scene leaves it out and stays small.
Open the file in any browser, or send it to someone. On the web and the desktop app the file is downloaded; on iPhone and iPad you choose where to save it.
The first time the page opens it loads Python from the internet (a few seconds), so it needs a connection. Python runs in the background, apart from the drawing, so the scene plays smoothly on phones and tablets too.
A few things work only inside Circuitry: breakpoints, import files (the page has no folder of its own), and an image whose path is built while the program runs, such as load_image(f"frame{i}.png"). Write image paths out in full if you want them packed in.
Put it on your website
The exported file is an ordinary web page, so any website can show it:
- Upload the file to your site, like any other page, and link to it.
- Show it inside another page with an iframe:
<iframe src="my-scene.html" style="width: 100%; aspect-ratio: 16 / 9; border: 0"></iframe>
The scene fills the iframe, starts when it scrolls into view, and pauses when it is out of view or the tab is hidden.
The open-source library: Pyctures
The scene files you write in Circuitry are Pyctures scenes. Pyctures is also a free, open-source Python library (MIT licence), and the same .py files run with it on your own computer, unchanged. Scenes written with the library run in Circuitry too.
pip install pyctures
| Command | What it does |
|---|---|
pyctures run scene.py | Opens the scene in your browser, running your own Python, so numpy and anything else you have installed works. Save the file and it runs again. |
pyctures build scene.py -o scene.html | Makes the same single-file web page as Export as Web Page |
pyctures build scene.py -o site/ | Makes a folder of plain files to put on any web host |
To put scenes straight into your own page, as many as you like, without an iframe:
<div data-pyctures-src="balls.py"></div>
<div data-pyctures-src="knot.py" style="height: 420px"></div>
<script type="module" src="pyctures/pyctures.js"></script>
Each scene fills its box, and all the scenes on a page share one copy of Python.
The code, examples and full instructions are on GitHub: github.com/johnwylie70/pyctures.