Javascript can`t see python function exposed with eel

Question

asked Apr 6, 2021 in Python by laddulakshana (16.4k points)
closed Jun 24, 2023 by Anamika Chakravarty

I utilized @eel.expose a similar route as in the documentation, however it doesn't work. I'm attempting to send data about weather from pyowm to javascript, however, javascript doesn't perceive python function. Here is my python code:

import eel
import pyowm
owm = pyowm.OWM("78e8414197f287eb489f857bf10fa96a")
eel.init("web")
eel.start("main.html", size=(700, 700))
@eel.expose
def getWeather(place):
mgr = owm.weather_manager()
observation = mgr.weather_at_place(place)
w = observation.weather
temp = w.temperature('celsius')['temp']
return temp

Html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather</title>
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="text" id="location" placeholder="Enter city and country" required="" value="New York, USA">
<button id="getWeatherButton">GET WEATHER</button>
<div id="result"></div>

<script type="text/javascript">
document.getElementById("getWeatherButton").onclick = async function displayWeather() {
let place = document.getElementById("location").value;
let temp = await eel.getWeather(place)();
document.getElementById("result").innerHTML = temp;
};
</script>
</body>
</html>

closed

4 Answers

answered Jun 24, 2023 by Anamika Chakravarty (19k points)

Best answer

import eel

import pyowm

owm = pyowm.OWM("78e8414197f287eb489f857bf10fa96a")

@eel.expose

def getWeather(place):

    return owm.weather_manager().weather_at_place(place).weather.temperature('celsius')['temp']

eel.init("web")

eel.start("main.html", size=(700, 700))

HTML code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Weather</title>

    <script type="text/javascript" src="/eel.js"></script>

    <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

    <input type="text" id="location" placeholder="Enter city and country" required="" value="New York, USA">

    <button id="getWeatherButton">GET WEATHER</button>

    <div id="result"></div>

    <script type="text/javascript">

        async function displayWeather() {

            let temp = await eel.getWeather(document.getElementById("location").value)();

            document.getElementById("result").innerHTML = temp;

        }

        eel.expose(displayWeather);

        document.getElementById("getWeatherButton").onclick = displayWeather;

    </script>

</body>

</html>

This version keeps the essential functionality of the original code while simplifying it by removing unnecessary variable assignments and minimizing code structure.

hari_sh · Answer 1 · 2021-04-06T12:58:43+0000

Look at the below code, eel.start() should be in the end of the code:

import eel
import pyowm
owm = pyowm.OWM("78e8414197f287eb489f857bf10fa96a")
eel.init("web")
@eel.expose
def getWeather(place):
mgr = owm.weather_manager()
observation = mgr.weather_at_place(place)
w = observation.weather
temp = w.temperature('celsius')['temp']
return temp
eel.start("main.html", size=(700, 700))

Looking for a good python tutorial course? Join the python certification course and get certified.

For more details, do check out the below video tutorial...

Balram111 · Answer 2 · 2023-06-24T15:13:45+0000

Based on the provided code, it seems that the issue lies in the way you are calling the getWeather() function from JavaScript. Here's a modified version of your code with the necessary changes:

import eel

import pyowm

owm = pyowm.OWM("78e8414197f287eb489f857bf10fa96a")

eel.init("web")

@eel.expose

def getWeather(place):

    mgr = owm.weather_manager()

    observation = mgr.weather_at_place(place)

    w = observation.weather

    temp = w.temperature('celsius')['temp']

    return temp

eel.start("main.html", size=(700, 700))

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Weather</title>

    <script type="text/javascript" src="/eel.js"></script>

    <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

    <input type="text" id="location" placeholder="Enter city and country" required="" value="New York, USA">

    <button id="getWeatherButton">GET WEATHER</button>

    <div id="result"></div>

    <script type="text/javascript">

        async function displayWeather() {

            let place = document.getElementById("location").value;

            let temp = await eel.getWeather(place)();

            document.getElementById("result").innerHTML = temp;

        }

        eel.expose(displayWeather);

        document.getElementById("getWeatherButton").onclick = displayWeather;

    </script>

</body>

</html>

The changes include:

Moving the eel.start() function call after the eel.expose decorator and function definition.

Adding the line eel.expose(displayWeather); before assigning the onclick event.

Removing the size=(700, 700) argument from the eel.start() function call (you can adjust the size using CSS).

These modifications should ensure that the getWeather() function is recognized and called correctly from the JavaScript code.

Similu · Answer 3 · 2023-06-24T15:14:49+0000

In your provided code, there seems to be an issue with calling the getWeather() function from JavaScript. To address this, consider the following revised code:

Python code:

import eel

import pyowm

owm = pyowm.OWM("78e8414197f287eb489f857bf10fa96a")

@eel.expose

def getWeather(place):

    mgr = owm.weather_manager()

    observation = mgr.weather_at_place(place)

    w = observation.weather

    temp = w.temperature('celsius')['temp']

    return temp

eel.init("web")

eel.start("main.html", size=(700, 700))

HTML code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Weather</title>

    <script type="text/javascript" src="/eel.js"></script>

    <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

    <input type="text" id="location" placeholder="Enter city and country" required="" value="New York, USA">

    <button id="getWeatherButton">GET WEATHER</button>

    <div id="result"></div>

    <script type="text/javascript">

        async function displayWeather() {

            let place = document.getElementById("location").value;

            let temp = await eel.getWeather(place)();

            document.getElementById("result").innerHTML = temp;

        }

        eel.expose(displayWeather);

        document.getElementById("getWeatherButton").onclick = displayWeather;

    </script>

</body>

</html>

Please note the following changes:

The eel.start() function call is now placed after the eel.expose decorator and the getWeather() function definition.

The line eel.expose(displayWeather); is added before assigning the onclick event.

The size=(700, 700) argument is removed from the eel.start() function call. You can adjust the size using CSS styles.

By making these adjustments, the getWeather() function should be properly recognized and called from the JavaScript code.

Javascript can`t see python function exposed with eel

4 Answers

Related questions

Browse Categories