Pass JavaScript Variable Value to Python with Eel

Question

I have a python program using eel library to build a nice GUI.

In the GUI I have a variable within a JS function that I need to pass to Python to store in a variable.

Any ideas why this is?

Answer 1

You can read the below Github article. Maybe this will help.

https://github.com/samuelhwilliams/Eel

Return values While we want to think of our code as comprising a single application, the Python interpreter and the browser window run in separate processes. This can make communicating back and forth between them a bit of a mess, especially if we always had to explicitly send values from one side to the other.

Eel supports two ways of retrieving return values from the other side of the app, which helps keep the code concise.

To prevent hanging forever on the Python side, a timeout has been put in place for trying to retrieve values from the JavaScript side, which defaults to 10000 milliseconds (10 seconds). This can be changed with the _js_result_timeout parameter to eel.init. There is no corresponding timeout on the JavaScript side.

Callbacks When you call an exposed function, you can immediately pass a callback function afterward. This callback will automatically be called asynchronously with the return value when the function has finished executing on the other side.

For example, if we have the following function defined and exposed in Javascript:

eel.expose(js_random);
function js_random() {
  return Math.random();
}

Then in Python, we can retrieve random values from the Javascript side like so:

    def print_num(n):
        print('Got this from Javascript:', n)

# Call Javascript function, and pass explicit callback function
eel.js_random()(print_num)

# Do the same with an inline lambda as callback
eel.js_random()(lambda n: print('Got this from Javascript:', n))
(It works exactly the same the other way around).

Synchronous returns In most situations, the calls to the other side are to quickly retrieve some piece of data, such as the state of a widget or contents of an input field. In these cases it is more convenient to just synchronously wait a few milliseconds then continue with your code, rather than breaking the whole thing up into callbacks.

To synchronously retrieve the return value, simply pass nothing to the second set of brackets. So in Python we would write:

n = eel.js_random()()  # This immediately returns the value
print('Got this from Javascript:', n)

You can only perform synchronous returns after the browser window has started (after calling eel.start()), otherwise obviously the call with hang.

In Javascript, the language doesn't allow us to block while we wait for a callback, except by using await from inside an async function. So the equivalent code from the Javascript side would be:

async function run() {
  // Inside a function marked 'async' we can use the 'await' keyword.

  let n = await eel.py_random()(); // Must prefix call with 'await', otherwise it's the same syntax
  console.log("Got this from Python: " + n);
}

run();