A simple overlay / splash page

[BlankAdventure]

Mentioned this in another thread but thought some others might find it useful. I've used this a few times when I want to toss up a blocking overlay during a long operation. Could also be used as a splash screen during start up, etc.

from nicegui import ui, app
import asyncio

class Overlay(ui.element):
    def __init__(self, message, bg_color=(0,0,0,0.5)):
        super().__init__(tag='div')
        self.message = message
        self.style('position: fixed; display: block; width: 100%; height: 100%;'
                   'top: 0; left: 0; right: 0; bottom: 0; z-index: 2; cursor: pointer;'
                   'background-color:' + f'rgba{bg_color};')
        with self:
            with ui.element('div').classes("h-screen flex items-center justify-center"):
                ui.label(self.message).style("font-size: 50px; color: white;")
        self.hide()

    def show(self):
        self.set_visibility(True)
    
    def hide(self):
        self.set_visibility(False)


@ui.page('/')
async def index():
    async def slow():
        overlay.show()
        await asyncio.sleep(5)
        overlay.hide()
    
    ui.label('something obscured in the background')
    overlay = Overlay('Please be Patient!')
    app.on_connect(slow)

ui.run()

Could easily be extended to show an image, a progress widget, etc.

[thetableman]

This is really cool!

If we tweak it then additonal settings can be customized and you can then use it more like the other Nice GUI elements where you can nest elements using the with statement.

from nicegui import ui, app
from typing import Optional
from nicegui.elements.timer import Timer
from nicegui.element import Element

class Overlay(Element):
    def __init__(self,
                  time_out: Optional[float] = None,
                  click_close: bool = True,
                  color: Optional[str] = 'black',
                  ) -> None:
        
        self.time_out = time_out
        super().__init__(tag='div')
        
        self.classes(f'fixed block w-full h-full z-10 inset-0 cursor-pointer bg-{color} opacity-60')

        self.hide()

        if click_close:
            self.on('click', handler=lambda: self.hide())

    def show(self):
        print('showing')
        self.set_visibility(True)
        if self.time_out is not None:
            Timer(self.time_out, callback=lambda: self.hide(), once=True)

    
    def hide(self):
        self.set_visibility(False)


@ui.page('/')
async def index():
    async def show():
        overlay.show()
    
    ui.label('something obscured in the background')
    overlay = Overlay(time_out=4)
    with overlay:
        with ui.column().classes("h-screen items-center justify-center"):
            ui.label('Please be Patient!').classes('text-white text-xl')
            ui.spinner(size='lg')


    app.on_connect(show)

ui.run()

[falkoschindler]

Nice, @thetableman!

Note that you partly re-implemented a ui.dialog. 😀

class Overlay(ui.dialog):
    def __init__(self, timeout: float, click_close: bool = True) -> None:
        super().__init__()
        self.open()
        if timeout is not None:
            ui.timer(timeout, callback=self.close, once=True)
        if click_close:
            self.on('click', handler=self.close)

@ui.page('/')
def index():
    ui.label('something obscured in the background')
    with Overlay(timeout=4):
        with ui.column().classes('items-center'):
            ui.label('Please be patient!').classes('text-white text-xl')
            ui.spinner(size='lg')