Sketchingpy can go anywhere your web development can take you. Unlike desktop Python, requirements are crafted directly in the web document itself. If you haven't written HTML before, we suggest the
Mozilla Developer Network's introduction. With that, here's a minimal example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- PyScript -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css">
<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
</head>
<body>
<py-config>
{
"packages": ["sketchingpy==0.0.9"]
}
</py-config>
<!-- You may need to change this ID to match your code. -->
<div id="sketch-load-message">Loading...</div>
<canvas id="sketch-canvas"></canvas>
<!-- You can link the script as shown below or use py-script to inline -->
<script type="py" src="main.py"></script>
</body>
</html>
This will work with the defaults:
sketch = sketchingpy.Sketch2DWeb(width, height)
However, if you change the IDs of the canvas and loading div, you may need to change you initialization code:
width = 400
height = 500
canvas_id = 'different-canvas'
loading_id = 'different-loading-id'
sketch = sketchingpy.Sketch2DWeb(width, height, canvas_id, loading_id)
Regardless, this easiest approach assumes that you are using the content distribution network (CDN) from PyScript which means that traffic will access outside services beyond the website where the sketch itself is located. For an alternative, see
self-hosting information. Note that the CDN uses sources from other open source projects including those from the PyScript project subject to their permissive
license. For more information, see the
PyScript user guide.