Is it possible to render JavaScript inside a panel.HTML pane?

Panel
, ,
1

Hi,

I’m trying to run some HTML/JavaScript inside a panel.HTML pane. Running via a local webserver works:

image

But nothing appears if I run this code with python, and in the JavaScript browser console I get a few messages like:
image
image
image

import panel as pn

pn.extension()

html_pane = pn.pane.HTML("""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code goes here
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);

        scene.add(cube);

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>
""")

html_pane

Thanks for any help!

2

I think you might want to use ReactiveHTML
https://panel.holoviz.org/explanation/components/components_custom.html

1 Like
3

I really appreciate all your help @ahuang11, will give this a go.

4

hey @asmith26 you shoud use iframe (HTML — Panel v1.6.1 )

import panel as pn

pn.extension()

# The HTML content to be embedded
html_content = """
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Three.js Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    </head>
    <body>
        <script>
            // Your Three.js code goes here
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer();

            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new THREE.Mesh(geometry, material);

            scene.add(cube);

            camera.position.z = 5;

            const animate = function () {
                requestAnimationFrame(animate);

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render(scene, camera);
            };

            animate();
        </script>
    </body>
    </html>

        """

# Convert the HTML content to a data URI
import base64
encoded_html = base64.b64encode(html_content.encode()).decode()
data_uri = f"data:text/html;base64,{encoded_html}"

# Create iframe with the data URI
iframe = f"""
<iframe src="{data_uri}" width="100%" height="400" frameborder="0"></iframe>
"""

# Create Panel HTML pane with the iframe
html_pane = pn.pane.HTML(iframe, sizing_mode="stretch_width")

# Serve the pane
html_pane.servable()
1 Like