TitleBar for native with frameless option

[phoskee]

Reading the documentation on nicegui.io, I was always impressed by the examples with a small window.
So I said to myself, why now that you can pass webview arguments, don't we make it a reality?
The first difficulties I encountered with padding, the nicegui-content css has a default padding of 16px.
I tried to solve ( and not in the easiest way) with:

@ui.page('/')
def page(client: Client):
    client.content.classes(remove='nicegui-content')

It only serves me for testing and I managed to get this:

@ui.page('/')
def page(client: Client):
    client.content.classes(remove='nicegui-content')
    with ui.row().classes('relative w-full h-8 p-2 bg-[gray] pywebview-drag-region'):
        with ui.row():
            ui.icon('circle').classes('text-[13px] text-red-400').on('click', w_close )
            ui.icon('circle').classes('text-[13px] text-yellow-400').on('click', w_minimize )
            ui.icon('circle').classes('text-[13px] text-green-400').on('click', w_maximize )
        ui.label('Awesome Frameless Window').classes('text-sm text-white absolute left-1/2 top-[6px]').style('transform: translateX(-50%)')

app.native.window_args['frameless'] = True
app.native.window_args['easy_drag'] = True

ui.run(native=True, window_size=(400, 200))

pywebview-drag-region gives us the ability to move the window exclusively from the title bar.

This is the result:

Another difficulty was to associate an event with the buttons:
I gave it a read and realized that there is webview.destroy(), webview.minimize(), webview.maximize().

I am not an expert, and I tried to modify native_mode.py:

global global_window
def open_window(host: str, port: int, title: str, width: int, height: int, fullscreen: bool) -> None:
...
  global_window = webview.create_window(**window_kwargs)
      webview.start(storage_path=tempfile.mkdtemp(), **globals.app.native.start_args)
      print('da funzione', global_window)

The intention was then to create:

def get_window():
    return global_window

or

def minimize_windows()
    global_window.minimize()

In order to get them, by test, with:

from nicegui import native_mode
from native_mode import get_window() (or minimize_window())

def w_minimize():
    wind = native_mode.get_window()
    wind.minimize()

Of course all this doesn't work, global_windows doesn't exist etc etc, a little bit also due to my inexperience
I think though that it could be a very good idea, maybe

[phoskee]

There is no point in creating a titlebar if I try to remove it natively with the frameless paramenter, obviously.
Anyway, I did it:

bar.py

from nicegui import ui
import pygetwindow as gw
bgcolor = '#eef5fb'


def titlebar(bool: True) -> None:
    """Title bar

    :param bool: True for MacOS theme
    """

    def w_close():
        windo = gw.getWindowsWithTitle('NiceGUI')[0]
        windo.close()

    def w_min():
        windo = gw.getWindowsWithTitle('NiceGUI')[0]
        windo.minimize()

    def w_max():
        windo = gw.getWindowsWithTitle('NiceGUI')[0]
        windo.maximize()

    def WindowsOS():

        with ui.header().classes(f'w-full h-8 p-2 bg-[{bgcolor}] pywebview-drag-region'):
            with ui.row().classes('gap-1 relative left-[1px] top-[1px] ml-auto mr-0'):
                ui.icon('minimize').classes(
                    'text-[13px] text-black').on('click', w_min)
                ui.icon('crop_square').classes(
                    'text-[13px] text-black').on('click', w_max)
                ui.icon('close').classes(
                    'text-[13px] text-black').on('click', w_close)
            ui.label('Test Title Bar').classes(
                'text-sm text-gray-600 absolute left-1/2 top-[6px]').style('transform: translateX(-50%)')

    def MacOS():

        with ui.header().classes(f'w-full h-8 p-2 bg-[{bgcolor}] pywebview-drag-region'):
            with ui.row().classes('gap-1 relative left-[1px] top-[1px]'):
                ui.icon('circle').classes(
                    'text-[13px] text-red-400').on('click', w_close)
                ui.icon('circle').classes(
                    'text-[13px] text-yellow-400').on('click', w_min)
                ui.icon('circle').classes(
                    'text-[13px] text-green-400').on('click', w_max)
            ui.label('Test Title Bar').classes(
                'text-sm text-gray-600 absolute left-1/2 top-[6px]').style('transform: translateX(-50%)')

    if bool == True:
        return MacOS()
    else:
        return WindowsOS()

maybe it could be an idea for the future to better customize the interface !

[rodja]

Hey @phoskee! Thanks for looking into this :-)
We think NiceGUI native mode could really benefit from a mechanism to control the native window trough NiceGUI code. Unfortunately pywebview and uvicorn (our webserver) want to run in their own process. That means we need some kind of inter-process communication. Your approach with pygetwindow is interesting. But I rather would like to use the APIs provided by pywebview. That way we would not need to reimplement/maintain the native features.

Maybe someone has a good idea/suggestion on how to control the pywebview "window" from another process?

[phoskee]

webview has the same functions, so the question is: If native_mode.py

def open_window(host: str, port: int, title: str, width: int, height: int, fullscreen: bool) -> None:
    while not helpers.is_port_open(host, port):
        time.sleep(0.1)

    window_kwargs = dict(url=f'http://{host}:{port}', title=title, width=width, height=height, fullscreen=fullscreen)
    window_kwargs.update(globals.app.native.window_args)

    webview.create_window(**window_kwargs)
    webview.start(storage_path=tempfile.mkdtemp(), **globals.app.native.start_args)

uses webview to create the window, why not associate it with a variable

window =  webview.create_window(**window_kwargs)

and then call for example

window.minimeze()

?

[rodja]

That was what I meant. But the window variable would not be callable from the other process where the ui.button callbacks etc are running. So there must be some inter-process-communication which makes the window object or a proxy of that available to the main NiceGUI process.

[rodja]

For reference: @polaar came up with an interesting solution to the inter-process-communication problem by using javascript.

[phoskee]

@rodja, is a great solution, a little cumbersome but it works, kinda!

[rodja]

@phoskee could you try out my PR #917? It offers calling methods on the pywebview window via a proxy object app.native.window.

[phoskee]

is great!!!
I couldn't recreate mine function to maximize the window (I can't get the position and size), but toggle_fullscreen is fine too.

[rodja]

Wonderful. I think getting position and size can be implemented fairly easy by adding get_position and get_size async methods to the proxy object and writing the requested data into the response_queue from the pywebview thread. Would you like to give it a try?

[rodja]

I just implemented get_position and get_size. Almost ready for merge, in my opinion...

[phoskee]

Sorry for not answering but I haven't had time thees days

[rodja]

No worries.