run programmatically an ipyvuetify button

Question

Assume I have a code with a button coded in ipyvuetify

v_btn_load  = vue.Btn(class_='mx-2 light-red darken-1', 
                           children=[vue.Icon(left=True, children=['get_app']),'Load data'])

def on_click_load(widget, event, data):
    #pseudo code: load file
    print("button run")
                
v_btn_load.on_event('click', on_click_load)

How do I run (click) programmatically the v_btn_load button?

v_btn_load.click() does not work

Thanks

Answer 1

the "on_click_load" is still a local python function, so you can simple access it in your script. Just fill out the variables you do not need with dummies (probably widget and event) and fill the data variable according to your needs.

If you need some input from the client, than it is more difficult. I know no way to remote control the client side. The only thing I got working so far is to extend VuetifyTemplate with a private class and specify some JS code to be run when 'Mounted'. This will run the code on display, but is not the same as triggering a click act:

Here is a simple example which directly copies the content of a variable to the local clipboard without any display element:

import ipyvuetify as v
from traitlets import Unicode, observe


class toClipboard(v.VuetifyTemplate):
    """Copies a given string directly to the users clipboard.

       Parameters:
           clipboardValue - The value to offer for copying to the clipboard

       Example:
           tunnel = toClipboard(clipboardValue='VALUE_TO_COPY')       

           Upon change of the variable 'clipboardValue', it's content will be automatically pushed to the clipboard
       """

    clipboardValue = Unicode('').tag(sync=True)

    template = Unicode('''
        <script>
          export default {
            mounted () {
              var tmpElement = $('<textarea>').val(this.clipboardValue).appendTo('body').select();
              document.execCommand('copy');
              $(tmpElement).remove();
            },
          }
        </script>''').tag(sync=True)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        
        self.observe(self.pushToClipboard, names=('clipboardValue'))
        
        display(self)


    def pushToClipboard(self, change):
        display(self)

As an additional bonus this example uses the observe function of traitlets to redisplay the JS as soon as the value of the variable changes. This is a cheap workaround to create a bit similar behaviour.

I use the example above not in real GUIs, but as a lazy way in a Jupyther Notebook to automatically copy the result of a calculation to my local clipboard.

Answer 2

looking at the description of the v.Btn class I found this :

 |  ----------------------------------------------------------------------
 |  Methods inherited from ipyvue.VueWidget.Events:
 |  
 |  fire_event(self, event, data)
 |  
 |  on_event(self, event_and_modifiers, callback, remove=False)

I then assume that

v_btn_load.fire_event('click', None)

should do trick