Hello world example with mobile QR and dark switch

[smojef]

Here is my Hello World, with a few extra features:

• Normal and expansible cards that look the same
• A dynamic QR code to open app with mobile phone
• A dark mode live switch
• Buttons that can open/close expansible elements (new in 1.1.5)
• A logger

Screenshot from mobile phone:

The nicegui framework is very simple to start with, which is addictive!
However, looking at the code below, you will notice that I had to use many HACK: techniques to achieve a nice looking UI.
I wish that all those hacks could be replaced by simple expressions from the nicegui framework.

import io
import socket
from contextlib import contextmanager
import qrcode                   # pip install qrcode
from nicegui import app, ui     # pip install nicegui
import fastapi

def get_local_ip_address():  # HACK: To get the IP address of this application from another computer
    with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
        s.connect(("8.8.8.8", 80))
        return s.getsockname()[0]

def generate_qr_image(link):  # HACK: The QR code feature could be built-in
    qr = qrcode.QRCode(version=1, box_size=10, border=4, error_correction=qrcode.constants.ERROR_CORRECT_L)
    qr.add_data(link)
    qr.make(fit=True)
    return qr.make_image(fill_color="black", back_color="white") 

@app.get('/qr.png')     # published URL of QR code image
def ui_qrcode_page():
    qr_code_img = generate_qr_image(info.qr_link)
    # HACK: The following code is needed to output a dynamic image from nicegui
    buffer = io.BytesIO()
    qr_code_img.save(buffer, format="PNG")  # Save the QR code image to a BytesIO object
    buffer.seek(0)
    return fastapi.Response(content=buffer.read(), media_type="image/png")   # Return image in response

# HACK: There is no easy custom exception handling for events
def set_value(element, value):
    element.value = value
    info.log.push(f"{type(element)} set to {value}")

async def on_dark(event):
    # HACK: Is that the proper way of switching dark mode?
    js = '''const dark = {value};
            Quasar.Dark.set(dark === None ? "auto" : dark);
            if (dark !== None) tailwind.config.darkMode = "class";
            document.body.classList.remove("dark");    
            if (dark === True) document.body.classList.add("dark");
            Quasar.Dark.isActive; '''.replace('{value}', str(bool(event.value)))  # .lower() is not required?
    ret = await ui.run_javascript(js, respond=True) 
    info.log.push(f"Dark mode set to {ret}")

@contextmanager     # For with: yield.  HACK: nicegui could provide a @contextmanager element for styling before 'as' in 'with:'
def ui_card_exp(text, icon, expanded=False):  # HACK: I had to create my custom containers for both to look alike
    """Expansible card container, with common style."""
    with ui.card().tight().classes('w-96'):
        # HACK: for Dark theme.  Using bg-slate-400 (mid tone) with 10% opacity works both for dark and light
        with ui.expansion(text, icon=icon).classes('text-h6 bg-slate-400/10') as exp:
            if expanded:            # HACK: Can't set expanded value in ui.expansion constructor, so add extra logic
                exp.value = True    # expansion().value works since nicegui 1.1.5
            with ui.column().classes('text-base font-normal'): # HACK: Here we need to undo text-h6 of header
                yield exp

@contextmanager     # For with: yield
def ui_card(text, icon):
    """Normal (non expansible) card container, with common style."""
    with ui.card().tight().classes('w-96') as e:
        with ui.row().classes('q-item text-h6 bg-slate-400/10 hover:bg-slate-400/25'):  
            ui.icon(icon).classes('text-2xl self-center pr-[16px]') # Hack to get same look as ui.expansion header
            ui.label(text) 
        yield e

def ui_main():
    with ui_card_exp('Mobile Link', icon='qr_code_2') as exp_qr:
        ui.image('/qr.png') # This calls our custom QR generator
        ui.label(info.qr_link).classes('absolute self-center pt-2 text-black') # overlay url on top of image
    with ui_card('Hello', icon='info'):
        with ui.card_section().classes('space-y-2'):
            ui.label('World')
            with ui.row():
                # HACK: I wanted to disable the buttons, but I could only bind the visibility
                ui.button('Open QR', on_click=lambda: set_value(exp_qr, True)).bind_visibility_from(exp_qr, 'value', value=False)  
                ui.button('Close QR', on_click=lambda: set_value(exp_qr, False)).bind_visibility_from(exp_qr, 'value', value=True)
                ui.label().classes('grow')  # HACK: to align next element to the right in flex mode
                ui.switch('Dark', on_change=on_dark, value=info.dark)
    with ui_card_exp('Log', icon='list_alt', expanded=True):
        with ui.card_section().classes('pt-0 w-full'):
            info.log = ui.log(max_lines=200).classes('w-full h-24 leading-none text-xs')  # HACK: this is not dark
    info.log.push('QR link: ' + info.qr_link) # push() works before run() since nicegui 1.1.4

app.on_startup(lambda: info.log.push(f'App Started.  Dark mode is {info.dark}'))

class info:         # Using a simple class as a container for global variables
    port = 9000                     # App port
    ip = get_local_ip_address()     # Local IP address
    qr_link = f"http://{ip}:{port}" # App URL for QR code
    dark = True                     # HACK: I need to set the default here, or else can't init ui.switch value in ui_main
    log = None                      # Logger from main page

ui_main()

# By keeping host to default 0.0.0.0, it will respond to both 127.0.0.1 (run) and the local IP address (QR).
ui.run(host='0.0.0.0', port=info.port, dark=info.dark)       

Thanks,

[falkoschindler]

@smojef Thanks for posting this beautiful example app!

I finally found the time to go through all your comments and HACK markers. Let me answer them one-by-one:

1. "To get the IP address of this application from"

   I'm not sure if this is something for NiceGUI to have built-in.

2. "The QR code feature could be built-in"

   Same here. I wouldn't call it "hack". It's the implementation of a missing(?) feature.

3. "The following code is needed to output a dynamic image from nicegui"

   This is mainly related to the QR code generation (3). Once you have a buffer, you can easily serve it with a FastAPI endpoint. To me it's more a proof of what is already possible than what is missing.

4. "There is no easy custom exception handling for events"

   Sure. In Handling UI callback exceptions with decorators #289 we discussed this idea and it will probably be implemented in near future.

5. "Is that the proper way of switching dark mode?"

   Currently there is probably no better way. But in Easy dark mode switching from UI #342 we will discuss and hopefully implement this feature.

6. "nicegui could provide a @contextmanager element for styling before 'as' in 'with:'"

   I'm not sure what you mean. Can't you already add "styling before 'as'"? with ui.card().style(...) as card: ❓

7. "I had to create my custom containers for both to look alike"

   NiceGUI tries to provide Quasar elements mostly in their original form. Therefore ui.expandable and ui.card are visually different. But I could imagine a ui.expandable_card that looks like a ui.card but is expandable. I still wouldn't call it a hack, but simply the implementation of a feature you needed for your application. 💡

8. "for Dark theme. Using bg-slate-400 (mid tone) with 10% opacity works both for dark and light"

   Setting different colors for light or dark mode should work since Tailwind dark: prefix does not work #311.

9. "Can't set expanded value in ui.expansion constructor, so add extra logic"

   Since Expansion value #330 there is a value parameter in the ui.expansion constructor to control its initial state.

10. "Here we need to undo text-h6 of header"

    I see: The expansion content inherits some style properties from its title. This is unfortunate. 😕

11. "I wanted to disable the buttons, but I could only bind the visibility"

    You're right, only a selection of attributes is bindable at the moment. 😕

12. "to align next element to the right in flex mode"

    To my knowledge there are several "hacks" out there to move an element to the right in flex mode, with a dummy element like you did, with some margin set to "auto" or setting a flex property to "space-between". Of course, NiceGUI could be nicer and easier in this regard. But I'm not sure how. 😕

13. "this is not dark"

    With dark:bg-black/10 you can set the background color for dark mode (since Tailwind dark: prefix does not work #311).

14. "I need to set the default here, or else can't init ui.switch value in ui_main"

    True. In Easy dark mode switching from UI #342 we should think about providing a bindable dark mode property even before ui.run.

❓ question to you
💡 new idea/feature
😕 suboptimal, but ok?

[smojef]

@falkoschindler thanks for taking the time. I spent quite some time myself to create this demo. Here is some answers:

1. Maybe not if it was providing a stand-alone desktop window app. But since it is opening on a browser, which encourages being open by a mobile phone on the local network, it would be logical to provide helpers to do so. Therefore, the methods for QR code, local IP and image posting.
2. see 1.
3. None of the nicegui.io/reference example showed how to do that, and figuring it out created some friction. Coule we just return an image without having to import fastapi altogether?
4. Yes, cant wait for it!
5. Yes.
6. Not with custom cards using yield. I could not figure out how to do with ui_card_exp(...).classes(...) as exp_qr:. this is why I suggested nicegui could provide a @contextmanager that handle this case.
7. The main problem is that ui.expandable creates a nice layout for its header (with icon and text) that is not reusable for non-expandable elements. It is also very hard to customize this layout without affecting the content. If ui.expandable was using some sort of ui.header that we could style and reuse, then it would be much more simple and it would not be an issue.
8. Yes. But I would want a quick text-slate-200-i that would invert automatically to text-slate-800 in dark mode, just for convenience of not doubling dark: everywhere for quick compatibility with dark mode.
9. Yes! When is v1.1.5 scheduled for release? I just noticed that my code does not run on standard distribution yet.
10. see 7.
11. Ok
12. I found out that justify-between w-full on the parent container can work also. It is just time consuming to figure it out, but once you remember, it kinda works well.
13. Ok.
14. Yes.

Thanks,

[falkoschindler]

Ok, adding a generic ui.qrcode(content: str) might be a useful addition. But figuring out the own IP/URL is not trivial in general and would be out of scope of such a UI element.
Serving images without importing FastAPI: We would rather leave it as it is for now. Serving arbitrary content is out of scope of NiceGUI. That's why we built on top of FastAPI so you can still do it.
Maybe we can do something about "smart" colors with the new layout builder #117.
Version 1.1.5 has been released last week.