ui.number update max value during runtime

[eddie3ruff]

Question

Hi,

What's the best practice for updating the ui.number max value during runtime? I initially set it to 0, then I connect to my device and pull the correct max value that I want to update the number input to.

I've tried using the props and it seems to work but I get type errors

new_max = 1000
max_prop_string = f'max={new_max}'
numberField.props(add=max_prop_string)

Traceback (most recent call last):
  File "/home/.local/lib/python3.10/site-packages/nicegui/events.py", line 400, in handle_event
    result = handler(arguments) if expects_arguments else handler()
  File "/home/.local/lib/python3.10/site-packages/nicegui/elements/number.py", line 108, in sanitize
    value = min(value, self.max)
TypeError: '<' not supported between instances of 'str' and 'float'

[falkoschindler]

Hi @eddie3ruff,

Using the props method treats new_max as a string, not as a number. This causes the TypeError.

You can simply set the max property instead:

n = ui.number('Number', value=42, max=100)
n.max = 50

[eddie3ruff]

ah that is much simpler! However, it seems to only work right after the ui.number is created. When I do it from elsewhere in the code, there is no update whereas the props updated the max just fine aside from the TypeErrors. Hmm below is my attempt at a MWE

import threading
import queue
from nicegui import ui

class Controller:
    def __init__(self):

        self.update_queue = queue.Queue()  # Queue for thread-safe communication
        self.lock = threading.Lock()  # Lock for thread-safe access to shared resources

        self.setup_ui()
        ui.timer(0.5, self.process_queue_updates)  # Timer to process updates from the queue
        # self.changeMax() # WORKS!!!
        

    def setup_ui(self):
        ui.separator()
        with ui.expansion('Test', icon='warning_amber').classes('w-full'):       
            with ui.row().classes('w-full'):
                self.test_setpoint = ui.number(label='Test Setpoint [A]', min=0.000, max=0.000, step=0.001, value=0.000, format='%.3f').classes('w-1/3 justify-center')
                ui.button('Change Max', on_click=self.changeMax).classes('ml-4') # DOESN'T WORK!!!

    def changeMax(self):
        with self.lock:
            self.update_queue.put({'type': 'update_setpoint', 'value': 0.003}) 
        
    def process_queue_updates(self):
        """Process updates from the queue to update the UI safely."""
        while not self.update_queue.empty():
            message = self.update_queue.get()
            if message['type'] == 'update_setpoint':
                # max_prop_string = f'max={message["value"]}'
                # self.test_setpoint.props(add=max_prop_string) # WORKS!!! ... but TypeErrors
                self.test_setpoint.max = message['value'] # DOESN'T WORK!!!


controller = Controller()
ui.run()

[falkoschindler]

Ok, it has to do with with your multi-threading setup. We generally don't recommend manipulating the UI somewhere else than on the main thread. Have a look at this FAQ on how to deal with CPU- or IO-bound tasks.

Anyway, the following example is working:

n = ui.number(label='Number', min=0, max=100)

def set_max():
    n.max = 50

ui.button('Set max to 50', on_click=set_max)

[eddie3ruff]

Ok, I will look into replacing my threading with the CPU and IO bound tasks as you mentioned. Last question, and likely a dumb one...why doesn't this work?

from nicegui import ui

class Controller:
    def __init__(self):
        self.setup_ui()

    def change_max(self):
        self.test_setpoint.max = 2

    def setup_ui(self):
        self.test_setpoint = ui.number(label='Test Setpoint [A]', min=0, max=0, step=1, value=0).classes('w-1/6')
        ui.button('Change Max', on_click=self.change_max)

controller = Controller()
ui.run()

[falkoschindler]

Oh, that's weird. The stepper is indeed not working. But after changing max you can enter something like "3" and it turns into "2" when loosing focus. 🤔

[eddie3ruff]

yes, same here. Ok, phew I thought I was going crazy. I'm a noob at this stuff, so apologies for not describing the issue more thoroughly!

[falkoschindler]

No worries! I was confused as well. 😄

I think I understand what's going on: The setter of the min and max properties only call sanitize() to update the value. If the value doesn't change, the client isn't updated. But we need to trigger an update even if the value doesn't change, because the client needs to know the new limits for the stepper buttons to work. I'll fix that.

[eddie3ruff]

awesome, thank you!!

[falkoschindler]

I created PR #2753 to fix this issue.