Back

Explore Courses Blog Tutorials Interview Questions

closed Javascript can`t see python function exposed with eel

0 votes
2 views
in Python by (16.4k points)
closed by

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

0 votes
by (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.
0 votes
by (26.4k points)

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...

0 votes
by (25.7k points)
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.
0 votes
by (15.4k points)
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.

Related questions

0 votes
1 answer
Using a HTML button to call the JavaScript function?
asked Feb 12, 2021 in Web Technology by Jake (7k points)
0 votes
0 answers
How to use an HTML button to call a JavaScript function?
asked Jun 24, 2021 in Web Technology by Jake (7k points)
0 votes
1 answer
Get div height with plain JavaScript
asked Sep 6, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Set cookie and get cookie with JavaScript
asked Aug 28, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...