Sketchingpy: Web Detailed

Web deployment details

For more advanced users, this page provides additional details on how to deploy Sketchingpy to the web beyond the simple web deployment getting started example.

Fonts

Sketches may refer to system fonts or to fonts registered by CSS. Consider this addition to an HTML file:

<head>
    <link rel="stylesheet" href="./font.css">
</head>

In this example, font.css contains the following:

@font-face {
    font-family: 'IBMPlexMono-Regular';
    src: url('/third_party_site/IBMPlexMono-Regular.ttf')  format('truetype');
}

With this snippet included, a sketch can refer to the newly created font:

sketch.set_text_font('IBMPlexMono-Regular', 12)

Note that Sketchingpy will look for matching web fonts where possible even if a file path is offered so the above snippet is the same as:

sketch.set_text_font('./IBMPlexMono-Regular.ttf', 12)

Fonts may take a moment to load at the start of the sketch execution.

Alternative element IDs

Users with different IDs of the canvas and loading div may need to change the initialization code:

width = 400
height = 500
canvas_id = 'different-canvas'
loading_id = 'different-loading-id'
sketch = sketchingpy.Sketch2DWeb(width, height, canvas_id, loading_id)

Note that this examples uses the canvas_id and loading_id variables but the strings can be passed direclty if preferred.

Multiple Python Files

The py-config element can add additional resources to the environment of your scripts including adding other Python files which can be imported.

<py-config>
{
    "packages": ["sketchingpy==0.3.1"],
    "files": {
        "/a.py": "a.py",
        "/b.py": "b.py"
    }
}
</py-config>

<script type="py" src="main.py"></script>

In this example, a.py and b.py may be imported by main.py like so:

# main.py contents

import a
import b

result = b.func()
a.func(result)

This same approach can be used for inline scripts as well.

Self Hosting

For privacy reasons or for those needing to use browser-based sketches without "full" internet access (like for offline Progressive Web Apps or behind firewalls), developers can also download a copy of the required files for full self-hosting. By default, these assume that they are located in a directory called "third_party" at the root of the server and can be included like so:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <!-- You may need to change these paths to pyscript files. -->
        <link rel="stylesheet" href="/third_party/core.css">
        <script type="module" src="/third_party/core.js"></script>
    </head>
    <body>
        <py-config>
        {
            "packages": ["/third_party/sketchingpy-0.3.1-py3-none-any.whl"]
        }
        </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>

If hosting these files elsewhere, change "third_party" above to the correct path and also update "core.js" using the a simple string replacement like in this Python script:

with open('core.js') as f:
    original_content = f.read()

new_content = original_content.replace('/third_party/', 'YOUR_NEW_PATH')

with open('core.js', 'w') as f:
    f.write(new_content)

Note that zip file use 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. Also, please see the underlying sources as, under certain configurations like use of pypi packages, this "self-hosted" version may still caues external network traffic. Finally, for privacy-sensitive use cases, consider using a browser's web inspector to look for traffic to confirm other servers beyond those intended one are not contacted.

Additional details

See the PyScript user guide for further information.