CODEWITHSUNDEEP
pythonbrython
EddyTheB
EddyTheB

Reputation: 3200

How to import library using Brython

I wish to import my own library in Brython. This page of the documentation purports to show how, by adding the appropriate directory to the python path, but I can't make it work because I can't make Brython import sys.

Here's the simplest example code from the first page of the Brython documentation:

<html>
<head>
<script src="../src/Brython3.2.8/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
  from browser import document, alert

  def echo(ev):
    alert(document["zone"].value)

  document['mybutton'].bind('click', echo)
</script>
<input id="zone"><button id="mybutton">click !</button>
</body>
</html>

And that works fine.

But if I try to import sys:

<html>
<head>
<script src="../src/Brython3.2.8/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
  import sys
  from browser import document, alert

  def echo(ev):
    alert(document["zone"].value)

  document['mybutton'].bind('click', echo)
</script>
<input id="zone"><button id="mybutton">click !</button>
</body>
</html>

Then the html will display but the button will not do anything.

The Console on Chrome shows the following error:

brython.js:6929 XMLHttpRequest cannot load file:///C:/Users/XXXXXXXXX/XXXXXX/src/Brython3.2.8/Lib/sys.py?v=1476283159509. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    $download_module    @ brython.js.6929
    import_py           @ brython.js.6929
    exec_module         @ brython.js.6929
etc etc

So, how can I import sys in brython, and/or how can I import my own library in python?

Thanks.

Upvotes: 6

Views: 5195

Answers (3)

Karl Knechtel
Karl Knechtel

Reputation: 61527

Brython cannot import from any Python package that is part of any Python installation on the user's computer. It works by transpiling to JavaScript and running in the browser's Javascript engine. It has no knowledge of any local Python installations, and does not require any such installations to exist.

To use Python's standard library

Add a script tag to include brython_stdlib.js as well as the base brython.js. Several CDNs provide this already.

The Brython implementation of the Python standard library does not match the reference implementation exactly. See the documentation for details on what is included and how it is organized.

Importing your own code from within the document

For organizational purposes, Python code within the HTML document can be split across multiple <script> tags. The id attribute for the tag gives a "module name" that can be used in import statements in other scripts, as long as that script has already executed. The documentation includes an example:

<script type="text/python" id="module">
def hello():
    return "world"
</script>

<script type="text/python">
from browser import document
import module

document.body <= module.hello()
</script>

The browser will have loaded the first <script> tag first, creating a (JavaScript representation of) a Python module named module that contains the hello function. The second script tag will be able to import that module and use the function as usual in Python.

Importing your own code from the server

Make the files available in the appropriate place as described in the documentation. Brython's implementation of the import statement (equivalently, __import__ builtin function) will attempt to find the code on the server using AJAX.

Importing your own code as a compiled Brython package

As explained in the documentation, use the Brython package (pip install brython) to create a JavaScript file that represents the Python code. (For third-party libraries, also check if such a JavaScript file is already available from a CDN.)

Suppose we have a project that creates a package named example. Navigate to the folder that contains that package (either src or the project folder, according to how the project is organized), then run brython-cli make_package example.

This should generate a example.brython.js file. Put it somewhere on the server, and configure the server to host that file at a specific URL. Then add the corresponding tag to the client page source (or the template that generates that page).

After that it should be possible to import example, from example import ... etc. in the Brython code.

Alternately, use brython-cli modules, as described in the 'Optimization' section, to create a combined library JavaScript file representing the entire server-side part of the project.

Upvotes: 0

imvickykumar999
imvickykumar999

Reputation: 182

Source Code : https://github.com/imvickykumar999/Brython/blob/master/index.html#L36

Deployed Code : https://imvickykumar999.github.io/Brython/

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brython</title>

  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js">
  </script>

  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js">
  </script>

  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous">

</head>
  <body onload="brython()">

    <style>
    body {
        /* background-color: yellow; */
        background-image: url(https://images.unsplash.com/photo-1573196872258-41425124bf5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
/*         background-repeat: no-repeat; */
    }
    </style>

    <script type="text/python">

      from browser import document

      def calc(a, b, o):
        d = { '+' : a+b,
              '-' : a-b,
              '*' : a*b,
              '/' : a/b,
              '%' : a%b
            }

        return f"({a}{o}{b})=({d[o]})"

      a = float(input('Enter first number : '))
      b = float(input('Enter second number : '))
      o = input('Enter the Operator (+,-,*,/,%) : ')

      document <= calc(a, b, o)

    </script>
  </body>
</html>

Upvotes: 0

kchomski
kchomski

Reputation: 3010

You need to include brython_stdlib.js in your html code. So your html should look like this:

<html>
    <head>
        <script src="../src/Brython3.2.8/brython.js"></script>
        <script src="../src/Brython3.2.8/brython_stdlib.js"></script>
    </head>
    <body onload="brython()">
        <script type="text/python">
            import sys
            from browser import document, alert

            def echo(ev):
                alert(document["zone"].value)

            document['mybutton'].bind('click', echo)
        </script>
        <input id="zone"><button id="mybutton">click !</button>
   </body>
</html>

Upvotes: 4

Related Questions