python-eel / Eel

A little Python library for making simple Electron-like HTML/JS GUI apps
MIT License
6.38k stars 583 forks source link

Using Eel calling JavaScript function in python only when a condition is True #543

Closed gracyashhh closed 2 years ago

gracyashhh commented 2 years ago

Describe the problem I am trying to call a JavaScript function but only when a if condition evaluates to True in Python. I'm working on a Music player project with Pygame and Eel, I want to call the JS function to change Song cover image automatically without a button click as the previous song ends, which am finding using pygame.mixer.music.get_busy() in python, during when I want to call the 'eel.fine()' but I'm sure why it's not working or how to get this done as am new to Eel

Expected When if condition becomes True function find should be called from python code i.e just want to change cover image when one song ends Code snippet(s) Here is some code that can be easily used to reproduce the problem or understand what I need help with. Note: I have removed most part of the code just to make to understand and have only added the portions that relate to the flow of the code what I need help with.

import eel
from pygame import mixer

eel.init('web')

js='function $fine(){document.getElementById("spl").live("click");}'
def my_update():
    if pausev and not fine:
        if not start and not mixer.music.get_busy():
            #ok=js2py.eval_js(js)
            # ok()
            print("booom")
            eel.fine()  # This is the part I need help with
            play()
            print('new song up')
        else:
            print('old playing still')
    else:
        print('strictly paused')
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Aishu's Magic-Music</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        eel.expose(fine);
      function fine(){
      document.getElementById("spl").live("click");

      }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
    <section class="wellcome_area clearfix" id="home">
      <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-md">
                    <div class="get-start-area">
                        <form class="form-inline">
                            <input type="button" id="repeat" class="submit" value="▶ Shower" onclick="generateQRCode(7)">
                            <input type="button" id="spl" class="submit" value="▶ Play" onclick="generateQRCode(2)">
                            <input type="button" class="submit" value=">> Skip" onclick="generateQRCode(3)">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="welcome-thumb ">
            <img id="qr" class="headshot headshot-1" src="img/bg-img/play.jpg" width="50%">
        </div>
    </section>

</body>
</html>
// main.js
var whatever=1;
var loop_check=1;
function generateQRCode(data) {
    if(data==2){
    change()
     if(whatever==1){
        eel.generate_qr(1)(setImage);
        whatever=0;
    }
    else
    {
        eel.generate_qr(data)(setImage)

    }
    }
    else if(data==7){
    change_loop()
    eel.generate_qr(data)(setImage)
    }
    else{
    eel.generate_qr(data)(setImage)
    }
}
function change() 
{
    var elem = document.getElementById("spl");
    if (elem.value=="|| Pause") elem.value = "▶ Play";
    else elem.value = "|| Pause";

}
function setImage(base64) {
    document.getElementById("qr").src = base64
}

UPDATE It partially works and does not work as expected image Error that I get during running normally

Whereas the Output when I open inspect - console image

Desktop (please complete the following information):