1

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 is the Error that I get during running normally

Whereas the Output when I open inspect - console image

Desktop :

  • OS: Windows
  • Browser chrome
  • Version 94
gracyashhh
  • 89
  • 1
  • 11

1 Answers1

0

I've solved it after lots of trail and error, since I'm new to JavaScript, Eel and connecting both with Python, I only later realised that in my code, I have tried using

document.getElementById("spl").live("click");

and

document.getElementById("spl").trigger("click");

and while I used

document.getElementById("spl").click();

earlier had missed to expose the JavaScript function, hence when I tried using .click() again after exposing I realise this is what I've been missing the whole time. Although in JavaScript without Eel, as stated here and here works more or less the same, but for some reason when used with Eel creates this weird pausing thing to cause in debugger only and create a websocket error if not.

Glad that I was finally able to find a way that actually works.

gracyashhh
  • 89
  • 1
  • 11