Passing data from one to another ui.page

[wurstcasesenario]

I have a ui.page that receives data from an external device. I now need to send this data to another ui.page to process and show it. I tried writing the data into a global dictionary and using .bind_text() to bind it to a label. That worked but I not only visualise it but process it. Has anybody have an idea how to call a function on the second ui.page when receiving data on the first ui.page?

[ed2050]

One option, not particularly elegant, is to save a reference to the components you want to update. The basic idea is something like:

saved = { }

def firstpage () :
    saved ['name1'] = ui.label ()
    saved ['name2'] = ui.card ()

def secondpage () :
    ...
    newdata = receive_external ()
    updatefirstpage (newdata)

def updatefirstpage (newdata) :
    label = saved ['name1']
    card  = saved ['name2']
    modify label or card with newdata....

Caveats

This approach can be quite painful, depending on the number of components to update. It might be easier to save all references from firstpage in a nested structure like saved ['firstpage'] ['name1'] , saved ['firstpage'] ['card1'] ['label2'] etc.

It would be easier if you could just save reference to the root element of firstpage, and traverse that as need in updatefirstpage() to modify components. However I have yet to find a documented way to retrieve the page root (it's possible by mucking around with _ methods but those may change). YOu could use a containing div instead to wrap all elements on firstpage and save that.

Traversing the page is another issue - i.e. using the page root to find all subelements to modify. There was talk awhile ago of adding a search method to find subnodes, perhaps with CSS selector-like syntax. Not sure if that was implemented yet. Search the discussion board and docs. If not, it's possible with node._collect_descendants, but again undocumented and painful.

Multiuser

Finally, the above code assumes only a single user per nicegui server. If you serve multiple users / clients then you need to distinguish them. There may be something in the Request or Client objects that can help, I forget. If not, you'll need to use a per-client token like a cookie or client storage to distinguish one client from another. Then it becomes something like this :

saved = { }

def firstpage () :
    token = unique value per client
    saved [token] ['name1'] = ui.label ()
    saved [token] ['name2'] = ui.card ()

def secondpage () :
    ...
    token = retrieve_token ()
    newdata = receive_external ()
    updatefirstpage (newdata)

def updatefirstpage (newdata, token) :
    label = saved [token] ['name1']
    card  = saved [token] ['name2']
    modify label or card with newdata....

Sorry it's not more detailed. This is just what I remember from the past. There may be more elegant ways to do it.

Hope this helps. love the username 😄

[wurstcasesenario]

Hi ed2050,

Thank you for the quick and detailed response! I've tried your solution and made some progress. However, I am still facing the issue of needing to call a function on the second page when data is received on the first page.

To clarify my problem:

• The first page receives data from an external device.
• This data needs to be processed on a second page, not just visualized.
• I've managed to store the data in a global structure and bind it to the components on the second page.
• However, I need a way to trigger a function on the second page when the first page receives the data.

That's my code so far:

reciever={"data":None}

@ui.page("/one/{data}")
def one(data):
    reciever["data"]=data

@ui.page("/two")
def two():
    ui.label().bind_text(reciever,"data")
    switch=ui.switch("Delete Data")
        
    def processdata():
        if switch.value:
            reciever["data"]=None
        else:
            write_into_database(reciever["data"])

I would appreciate any further suggestions you or anyone else might have on how to solve this issue. Specifically, I'm interested in how I can call the function processdata() on the second page from the first page to start processing the data.

Thanks again for your help!

[ed2050]

Sure. First let's clarify terms. It's imprecise to say that your function processdata is "on the second page". processdata is called a nested function or inner function in python. What you call "the second page" (def two) is actually just a function that builds the page. The second page itself would mean the data object holding all second page objects, which are created by calling two ().

With that out of the way, it's very easy to call processdata () outside of two (). All you need is a reference to it. Functions are python objects just like any other. They can be saved to variables. And a variable is just a name in current scope to access an object. Different names in different scopes can refer to the same object, including functions.

In concrete terms just do this:

reciever={"data":None}
# create a global name to hold your nested function.  name can be anything.
callback = none

@ui.page("/one/{data}")
def one(data):
    reciever["data"]=data
    if callback :    # check if callback has been set yet
        callback ()  # call the function

@ui.page("/two")
def two():
    ui.label().bind_text(reciever,"data")
    switch=ui.switch("Delete Data")
        
    def processdata():
        if switch.value:
            reciever["data"]=None
        else:
            write_into_database(reciever["data"])

    # set the global name 'callback' to refer to your nested function
    global callback
    callback = processdata

It may be better to pass data as an arg to processdata () instead of using global receiver. Then it's more clear where data comes from, and you avoid race conditions with multiprocessing (async, threads, multiple clients, etc).

Also note that callback has the same limitations as my prevous answer: it only works for one client at a time. You need to manage multiple receiver and callback items if multiple clients use this app from the same server.

Hope this helps.

[falkoschindler]

Hi @wurstcasesenario! (Btw, I love your name! 🌭😀)

I wonder why you need to process the data "on the second page". When calling the /one/{data} endpoint, can't you call a UI-independent function to process the data and use binding or ui.refreshable on /two for visualization? Here is an example:

data = {'number': 0}

def process_number():
    print(f'Squaring the number {data["number"]}')
    data['number'] = data['number'] ** 2

@ui.page("/one/{number}")
def one(number: int):
    data['number'] = number
    process_number()
    visualize_number.refresh()

@ui.refreshable
def visualize_number():
    ui.label(f'Here are {data["number"]} boxes:')
    for i in range(data['number']):
        with ui.card():
            ui.label(f'Box {i}')

@ui.page("/two")
def two():
    visualize_number()

[wurstcasesenario]

Hi @falkoschindler, @ed2050,
thank you for taking the time and helping me out. I implemented your code and it now mostly workes. When receiving data on “Page One”, the data is immediately displayed on “Page Two”, the unexpected problem I am facing right now is because I call the function on “Page Two”, on “Page One”. I think before getting into more detail I need to explain my Setup. “Page Two” is open on a Laptop, an Arduino sends data (in this case the sessionid of the Laptop) to “Page Two”. When data is received on “Page Two” it should be compared to the sessionid of the Laptop. But when I try to read the sessionid in the function processdata I don’t get the sessionid of the Laptop but the Arduino. Is there any way to call the function processdata on receiving data, just like if I called it with the Laptop?

reciever=[]
@ui.page ("/one/{data}")#opened by the Arduino
def one(data):
    reciever. append (data)#data is the Laptops sessionid, send by the Arduino
    callback. refresh()

@ui. page ("/two")#open on the Laptop
def two():
    ui. label(app.storage.browser[“id"])#shows sessionid from Laptop
    @ui. refreshable 
    def processdata():
        ui.label(app.storage.browser[“id”])#shows sessionid from Arduino
        for data in reciever:
            if data==app.storage. browser[“id"]:
                ui. label("True")
            else:
                ui. label("False")
    processdata()
    global callback
    callback=processdata

I hope that I described my problem well enough and thank you in advance.

[falkoschindler]

You can add a parameter browser_id to the refreshable that is set during its initial call and omitted when calling .refresh():

numbers = []

@ui.page("/append/{number}")
def append(number):
    numbers.append(number)  # data is the Laptops sessionid, send by the Arduino
    refreshable.refresh()

@ui.page("/")
def overview():
    ui.label(f'ID: {app.storage.browser["id"]}')

    @ui.refreshable
    def render(browser_id: str):
        ui.label(f'ID: {browser_id}')
        for number in numbers:
            ui.label(f'{number == browser_id}')
    render(app.storage.browser["id"])
    global refreshable
    refreshable = render

Note that I renamed some things in your code to better understand what is happening.

[wurstcasesenario]

Thank you so much