Home javascript Python eel, JS, Html

Python eel, JS, Html

Author

Date

Category

I do graphical interface for the program in python with the help of eel. How to make so that at the touch of a button in html page displays the data specified in python?
Here is an example:

import eel
eel.init ( "web")
@ eel.expose
def get_upp (place):
  text = "start"
  return text
eel.start ( 'index.html', size = (700, 700))
& lt;! doctype HTML & gt;
& lt; html & gt;
& lt; Head & gt;
  & lt; Meta Charset = "UTF-8" & gt;
  & lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
  & lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1.0" & gt;
  & Lt; script src = "eel.js" & gt; & lt; / script & gt;
  & Lt; link rel = "stylesheet" href = "style.css" & gt;
  & lt; Title & gt; Document & lt; / Title & gt;
& lt; / Head & gt;
& lt; Body & gt;
  & Lt; div class = "box" & gt;
    & Lt; button id = "btn" & gt; Start & lt; / button & gt;
    & Lt; div id = "info" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & Lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" & gt; & lt; / script & gt;
  & lt; script & gt;
    async function display_upp () {
      let res = await ell.get_upp (place) ();
      document.getElementById ( 'info') innerHTML = res.;
    }
    jQuery ( '# btn'). on ( 'click', function () {
      display_upp ();
    });
  & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

I need to text with Python output to a tag by pressing

button


Answer 1, Authority 100%

When you run the code at present opens a browser window, press CTRL + SHIFT + I , to open the console, where you can catch a significant portion of errors JS.


  1. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js a version of jQuery is not there, you can change, for example, 3.3.1

  2. ell.get_upp (place) (); The first eel , secondly, ReferenceError: place is not defined variable is not declared. It is necessary in advance to give it the desired value.

test.py

import eel
eel.init ( "web")
@ eel.expose
def get_upp (place):
  text = "start"
  return (text, place) # just to make sure that the parameter also works.
eel.start ( 'index.html', size = (700, 700))

web / index.html (a piece of JS is also possible to make a separate file)

& lt;! doctype HTML & gt;
& lt; html & gt;
& lt; Head & gt;
 & lt; Meta Charset = "UTF-8" & gt;
 & lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
 & lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1.0" & gt;
 & Lt; script src = "eel.js" & gt; & lt; / script & gt;
 & lt; Title & gt; Document & lt; / Title & gt;
& lt; / Head & gt;
& lt; Body & gt;
 & Lt; div class = "box" & gt;
  & Lt; button id = "btn" & gt; Click Me & lt;! / Button & gt;
  & Lt; div id = "info" & gt; & lt; / div & gt;
 & lt; / div & gt;
 & Lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt; & lt; / script & gt;
 & lt; script & gt;
  $ ( '# Btn'). On ( 'click', async function () {
   let place = prompt ( 'Enter the place:', 'Russia');
   let res = await eel.get_upp (place) ();
   $ ( '# Info') html (res).;
  });
 & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

* In addition, pay attention of the reader who is not familiar with the eel : it is assumed that next to the file test.py is the folder web , inside it : index.html

pip install Eel

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions