Discussed in https://github.com/zauberzeug/nicegui/discussions/61

After discussing several concepts, we tend to break with with ui.page contexts and move towards @ui.page decorators. This simplifies defining page factory functions and is similar to how Flask and FastAPI define routes. In the end, pages are more like routes rather than hierarchical UI elements. Thus defining them like routes makes a lot of sense.

Also, in the flavor of Flask, FastAPI or JustPy, pages should be "private" by default, i.e. without shared state between different clients. A page should only be "shared" when an optional decorator argument is set True.

This change has interesting consequences:

1. Pages are no longer built using (possibly nested!) with expressions. Thus, the (internal) page_stack is obsolete. This removes one source of confusion.
2. The pre-evaluation of ui.run is no longer needed. Since the main script primarily defines functions, we don't need to bother about re-evaluation in case of auto-reload being activated. This complies with the traditional way of running uvicorn and removes another confusing "feature" of NiceGUI.
3. The decorated page functions can be async.

To keep NiceGUI very accessible for new Python developers and to reduce boilerplate code for simple single-page applications, we plan to automatically create an index page if there is none. So the NiceGUI hello-world example should remain unchanged:

from nicegui import ui

ui.label('Hello, world!')

ui.run()

This will be equivalent to the following:

from nicegui import ui

@ui.page('/')
def index_page():
    ui.label('Hello, world!')

ui.run()

TODOs

• [x] get rid of page_stack
• [x] remove context enter/exit from pages class
• [x] use a default main page for ui elements created "globally"
• [x] find better place to create default main page (and maybe remove code duplication with ui.page factory)
• [x] find way to set head and body html for each page
• [x] allow configuring pages through parameters for ui.page
• [x] find way to apply default configurations passed in ui.run to default main page (which already has been created)
• [x] reloading implicitly created index page causes "No page to load" and other server errors
• [x] show 404 page for routes which do not exist (or at least avoid 500 error)
• [x] allow on_connect handler with sessions for non-shared pages (see sessions demo on main.py)
• [x] allow passing page builder functions to ui.link and ui.open
• [x] test/fix await/run java script per page
• [x] remove pre-evaluation of ui.run
• [x] how to exclude costly imports without pre-evaluation of ui.run?
• [x] let JustPy serve Highcharts and Aggrid on demand
• [x] create routes for additional libraries on demand
• [x] introduce environment variable "MATPLOTLIB" to avoid its costly import (don't import if it's "false")
• [x] how to dynamically add a first custom element? routes to js files are added on startup.
• [x] how to dynamically add a first chart or table? js files are excluded from the template.
• [x] update documentation
• [x] fix memory leak for private pages -> this is a starlette issue
• [x] what to do with page routes which are created after startup?
• [x] rethink the strategy of page-reload after adding js dependencies
• [x] NiceGUI serves wrong template folder
• [x] dependencies are not found when running with reload=False
• [x] do we trigger too many reloads after adding dependencies? --> we do not reload anymore
• [x] how to add dependencies on private pages that loose their state when reloading? --> make excludes explicit again
• [x] handle new UI elements in an event callback without container (see Color Theming and JavaScript examples)
• [x] fix wrong title and favicon

I have a page with on_connect handler. In this handler, I start some tasks with asyncio.create_task:

cls.messages_tasks = [
    asyncio.create_task(cls.handle_di_messages(cls.mqtt_client)),
    asyncio.create_task(cls.handle_ai_messages(cls.mqtt_client)),
    asyncio.create_task(cls.handle_tc_messages(cls.mqtt_client)),
    asyncio.create_task(cls.refresh_aout_values(cls.mqtt_client)),
]

Several tasks are ongoing and the last of them is single-shot. They all are async as they request and receive values from MQTT broker. What I experience is that I receive the message from MQTT broker in the last task, but the corresponding UI elements are sometimes not updated.

I suspect this is due to the asynchronous nature of the task:

• if the response comes quicker than the page is rendered, it's ok
• if the response comes after the websocket connection is established, it's ok
• but if the response comes between the page has been loaded, but before the websocket connection is up, then the component update is lost.

Please share your thoughts on the matter - am I right? Is it possible to check it somehow?

I currently fixed it by awaiting the single-shot task instead of putting it to the common list of running tasks. Is this fix good or it's a hackish way to work around the problem?

The recent changes to page creation with the release of 0.9.0 renders the example discussed in #50 unfeasible:

class MainPage(ui.page):
    def __init__(self):
        super().__init__('/', dark=True)
        with self:
            ui.label('Hi!')

MainPage()

I have tried adapting the code (using PageBuilder) in the simple example, but failed to get it running as before.

from nicegui import ui
from nicegui.globals import page_builders
from nicegui.page import Page
from nicegui.page_builder import PageBuilder


class MainPage(Page):
    def __init__(self):
        super().__init__(dark=True)

        ui.label('Hi!')


async def page_builder() -> Page:
    return MainPage()


def index_page():
    builder = PageBuilder(shared=False, function=page_builder)
    page_builders.setdefault('/', builder)


index_page()

ui.run()

results in

    raise RuntimeError('cannot find parent view, view stack is empty')
RuntimeError: cannot find parent view, view stack is empty

I have just recently migrated a great chunks of previously justpy code to the above inheritance approach including additional element/group classes (such as header, layout, pagecontainer, ...) and am now seeking ways to make it work, again.

@falkoschindler: could you please guide me here, again? Thanks!

This issue is possibly related to #85.

As written in https://github.com/zauberzeug/nicegui/pull/101#issuecomment-1268344725 we would like to see the Quasar progress types as NiceGUI elements. This should be straight forward as @hroemer showed in pull request #101.

There is a method called clear which removes the children of a container. But is there a way to remove the specific child component? In addition, this method removes JustPy objects, but does it remove corresponding NiceGUI wrappers?

In the button example,

from nicegui import ui

def button_increment():
    global button_count
    button_count += 1
    button_result.set_text(f'pressed: {button_count}')

button_count = 0
ui.button('Button', on_click=button_increment)
button_result = ui.label('pressed: 0')

ui.run()

How can I have separate button counts for different multiple browser windows?

Discussed in https://github.com/zauberzeug/nicegui/discussions/97

This is indeed a limitation of our current simple property parsing: https://github.com/zauberzeug/nicegui/blob/f417d7a64b43f00e52dd843445a8a9d8b9b366b9/nicegui/elements/element.py#L93

Task List:

• [x] write integration test (skip execution until issue is fixed)
• [x] unit-test str_to_dict function which is used by element.props
• [x] allow multi-word values in props
• [x] enable integration test if everything is running
• [x] review

I am new to nicegui. I tried the examples listed in the API reference, but some elements such as table, toggle, etc., do not work for me. The code I used was a copy-paste from the nicegui site:

from nicegui import ui
slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
ui.linear_progress().bind_value_from(slider, 'value')
ui.run()

The error message I get is: AttributeError: 'Ui' object has no attribute 'linear_progress'

For toggle (and some other elements), I can't get the value of the toggle into a variable. For example:

toggle1 = ui.toggle([1, 2, 3], value=1)
print(f"Value of toggle1 = {toggle1}")

does not print out. If I use a callback function, I can, at best print out / notify the value of the variable with e.value, but can't assign it to a variable in the main function, even though I use something like return e.value from the callback.

Is there something I'm doing wrong; is there some comprehensive nicegui document I can refer to for help?

I have the following code:

        df = pandas.read_excel(data)  # read Excel containing datetime values
        table = ui.table({})
        table.view.load_pandas_frame(df)

It works and the data is displayed.

But if I comment the last line and run load_pandas_frame in, say, button click handler function, nothing is displayed, and even table.update() doesn't help. Digging into JustPy sources, it seems that an error is thrown on update saying datetime objects are not JSON serializable. It is silently swallowed by NiceGUI, only "Problem with websocket update, ignoring" message is printed. But why does it work at the page creation time?..

Is there any way of gracefully shutting down the server after use? I am using it to have a configuration page for a larger project and once the configuration is completed the main part of the project takes over and no more configuration is needed. I would like to kill everything UI related at that point.

Running on a Raspberry Pi, NiceGUI is fairly CPU intensive (although still usable). I tried changing the binding_refresh_interval value, via a ui.run() parameter, but it doesn't seem to make any difference on CPU usage.

Until now favicons are collected in a global dictionary. During startup a function create_favicon_routes() is called to create routes for all favicons in this dictionary. This is because we need wait until ui.run(..., favicon=...) has been called because it might define a default favicon.

But this does not work for pages that are also created during startup (but a bit later) or even dynamically caused by a user event.

from nicegui import ui

ui.label('The favicon is correct on the index page.')

def startup():
    @ui.page('/sub')
    def page():
        ui.label('There is no favicon route for this page because it was only created during startup.')

ui.on_startup(startup)

ui.run(favicon='favicon.ico')

This PR proposes to create routes directly when initializing pages. Even though we need to wait for the favicon argument in ui.run, we can already create routes and let the callback access the fallback favicon when called. This simplifies things (no need for the global dictionary anymore) and works more robustly, since pages can be created at any time and favicons will be routed.

ui.open() doesn't seem to work when used in a function that gets called while loading a page or clicking a button. Code used is an exact copy of the authentication example from:

https://github.com/zauberzeug/nicegui/blob/main/examples/authentication/main.py

The function that get's called after login button is pressed:

def try_login(session_id: str, username: str, password: str) -> None:
    if (username, password) in users:
        session_info[session_id] = {'username': username, 'authenticated': True}
    ui.open('/')

Hi,

would it possible to open large files >10Mb for data analysis? The upload function seems not to work for this. In pure python one would open a file and iterate through it line by line (loading only one line at a time to RAM).

with open("log.txt") as infile:
    for line in infile:
        print(line)

i want to open a microcontroller serial trace and visualize certain events on a timeline as a plot (timeline or matplotlib)

If the following code is run and accessed from multiple tabs the sphere is duplicated.

from nicegui import ui

with ui.scene() as scene:
    sphere = scene.sphere().move(0, -4, 0)
    ui.timer(0.1, lambda: sphere.move(0, sphere.y + 0.5, 0))

ui.run()

This is caused by the connect event send by each tab. It was meant to initialize the scene. But this does not work with our index_client. This special client is used when elements are not enclosed in an @ui.page decorator. So the tab which connects first will receives the init-commands also from the second tab.

• [x] create pytest reproduction
• [x] ensure connect event from ui.scene is only send to the client which connects
• [ ] code review
• [ ] extend solution to also work for other "connect" events (like we have with ui.interactive_image).
• [ ] revisit reconnect behaviour (it looks like there may be send multiple connect commands from a single tab)

In https://github.com/zauberzeug/nicegui/pull/211 we started to load Highcharts dependencies on demand. In this issue we will discuss and implement a more general solution.

• [x] rename vue.py into dependencies.py
• [x] add a flag optional to the Dependency class to avoid code duplication in register_component()
• [x] move the URL generation for extras from chart.py to dependencies.py
• [ ] How to generalize this approach to for other elements?

The connection can break down with "ValueError: Too many packets in payload" if lots of data need to be transferred. This happens due to a packets limit from engineio. It can be fixed by increasing the limit (see see https://github.com/miguelgrinberg/python-engineio/issues/142) before importing nicegui:

from engineio.payload import Payload
Payload.max_decode_packets = 500

from nicegui import ui

...

We should increase this limit directly in NiceGUI so users do not run into the issue in normal scenarios.