Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

the value of textbox won't change from script #6580

Closed
1 task done
peymoon opened this issue Nov 26, 2023 · 6 comments
Closed
1 task done

the value of textbox won't change from script #6580

peymoon opened this issue Nov 26, 2023 · 6 comments
Labels
bug Something isn't working

Comments

@peymoon
Copy link

peymoon commented Nov 26, 2023 •
edited
Loading

Describe the bug

I am trying to get the position of the mouse cursor and print it on the python side. The code shows the coordinates on the GUI but the value is always empty ('') on the python side. Here is my code:
is there anything else that needs to be done to update the value from javascript on the python side?

Have you searched existing issues? 🔎

  • I have searched and found no existing issues

Reproduction

import gradio as gr
html = """
    <head>
      <meta charset="utf-8">
      <title>Example Mouse Tracker</title>
      <style>    
        body {height: 3000px;}
        .dot {width: 2px;height: 2px;background-color: red;position: absolute;}
        .coord-textbox {width: 100px; height: 20px; position: absolute; top: 0; right: 0; background-color: black; color: black; border: 1px solid black; padding: 2px;}
      </style>
    </head>
    <body>
    <div class="coord-textbox" id="coord-display"></div>
    <p>Mouse tracker</p>

    
    """

script = '''

onmousemove = function(e){
    document.getElementById('btn').click();
    var pos = e;

      mouseX = -1;
      mouseY = -1;
    const imageContainer = document.getElementById('img');
    if (typeof pos !== 'undefined'){
        mouseX = pos.x - imageContainer.getBoundingClientRect().left;
        mouseY = pos.y - imageContainer.getBoundingClientRect().top;
    } 

    // Check if the mouse is outside the image
    if (mouseX < 0 || mouseY < 0 || mouseX > imageContainer.getBoundingClientRect().width || mouseY > imageContainer.getBoundingClientRect().height) {
        mouseX = -1;
        mouseY = -1;
    }
    let txt =  document.getElementById('textbox') 
    txt.innerText = 'x: ' + mouseX.toFixed(0) + ', y: ' + mouseY.toFixed(0);

      txt.value = 'x: ' + mouseX.toFixed(0) + ', y: ' + mouseY.toFixed(0);
      let myEvent = new Event("change")
  
      Object.defineProperty(myEvent, "target", {value: txt})
      txt.dispatchEvent(myEvent)    
}    


'''

with gr.Blocks() as block:
    gr.HTML(html)
    gr.Image(type="pil", source="upload", preprocess=None, elem_id="img")
    textbox = gr.Textbox(lines=1, label="Mouse Coordinates", default="x: 0, y: 0", elem_id="textbox")
    btn = gr.Button(value="Clear", elem_id="btn")

    block.load(_js = script)
    @gr.on(triggers=[btn.click], inputs = []  )
    def print_textbox():
        print("loc: " + textbox.value)

    
    
block.launch(debug=True, share=False)

block.close()

Screenshot

No response

Logs

No response

System Info

gradio 3.48.0 , Windoes 10, Python 3.10.13

Severity

Blocking usage of gradio
@peymoon peymoon added the bug Something isn't working label Nov 26, 2023
@abidlabs
Copy link
Member

Hi @peymoon as a starting point, can you please upgrade your code to Gradio 4.x to see if this bug is present on the latest version of Gradio?

@dereklll
Copy link

#6568

@dereklll
Copy link

dereklll commented Nov 27, 2023 •
edited
Loading

Hi all, same problem on the 4.7.1 version of Gradio. I had tried this morning. @abidlabs @peymoon

@peymoon
Copy link
Author

peymoon commented Nov 27, 2023

Hii@abidlabs yes, updates the Gradio to 4 and the issue still persists.

@peymoon
Copy link
Author

peymoon commented Nov 28, 2023

I found out what the issue was. The DOM for the textbox object is not the actual text area into which the input goes, it's the wrapper. So the actual text area inside it should be targeted using querySelector. Setting innerText is wrong because you will just overwrite the contents of the container. Here is the fix.


script = '''

onmousemove = function(e){
    document.getElementById('btn').click();
    var pos = e;

      mouseX = -1;
      mouseY = -1;
    const imageContainer = document.getElementById('img');
    if (typeof pos !== 'undefined'){
        mouseX = pos.x - imageContainer.getBoundingClientRect().left;
        mouseY = pos.y - imageContainer.getBoundingClientRect().top;
    }

    // Check if the mouse is outside the image
    if (mouseX < 0 || mouseY < 0 || mouseX > imageContainer.getBoundingClientRect().width || mouseY > imageContainer.getBoundingClientRect().height) {
        mouseX = -1;
        mouseY = -1;
    }
    let txt =  document.querySelector('#textbox textarea')
    txt.value = 'x: ' + mouseX.toFixed(0) + ', y: ' + mouseY.toFixed(0);
    var event = new Event('input');
    txt.dispatchEvent(event);
}


'''

with gr.Blocks() as block:
    gr.Image(type="pil", sources="upload", elem_id="img")
    textbox = gr.Textbox(lines=1, label="Mouse Coordinates", elem_id="textbox", interactive=False)
    # textbox2 = gr.Textbox(lines=1, label="Mouse Coordinates", elem_id="textbox2", interactive=True)
    btn = gr.Button(value="run", elem_id="btn", visible= False)

    block.load(_js = script)
    @gr.on(triggers=[btn.click], inputs = [textbox]  )
    def print_textbox(textbox):
        print("loc:", textbox)



block.launch(debug=True, share=False)

block.close()`

@peymoon peymoon closed this as completed Nov 28, 2023
@dereklll
Copy link

@peymoon It works for me. Really appreciate your support.

@dereklll dereklll mentioned this issue Nov 29, 2023
Closed
1 task
@CailenR CailenR mentioned this issue May 8, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@abidlabs @dereklll @peymoon