Digital Clock Component with Date

[Diegiwg]

I needed to build a clock for my application, and I did the following:

I wrote the following python code in a file called clock.py.

from nicegui import ui
import javascript

async def js_clock():
    source = await javascript.fetch("/static/code/clock.js")
    await ui.run_javascript(code=source, respond=False)

async def clock():
    with ui.card().classes(add="__python__clock-node").style(
        add="display: grid; justify-items: center; gap: 0;"
    ) as c:
        ui.label("").classes(add="__python__clock-time").style(add="font-size: 2rem;")
        ui.label("").classes(add="__python__clock-date")

        await js_clock()
    return c

The import javascript and the javascript.fetch function are responsible for fetching the javascript code (in string) in the clock.js file, available in a static folder with ui.add_static_files.

Javascript code responsible for updating the Clock (in clock.js):

function __python__UpdateClockData() {
    const clock_node = document.querySelector('.__python__clock-node')
    if (!clock_node) return

    const [date, time] = (new Date()).toLocaleString().split(' ')
    
    clock_node.querySelector('.__python__clock-date').textContent = date
    clock_node.querySelector('.__python__clock-time').textContent = time
}

setInterval(__python__UpdateClockData, 1);

[date, time] is receiving a toLocaleString object in PT-BR, so this part has to be properly analyzed and modified to match your own language.

Now to use it, just await clock() anywhere you want the Digital Clock

[morningstarsabrina]

very nice and very clean method. I will try for sure
thank you for sharing this

[falkoschindler]

Thanks for sharing!

I'm just wondering, why do you need so much JavaScript? Do you really need the client time? If not, you can achieve the same result with pure Python:

from datetime import datetime
from nicegui import ui

with ui.card().classes('column items-center gap-0'):
    date = ui.label().style('font-size: 2rem')
    time = ui.label()
    ui.timer(1.0, lambda: date.set_text(datetime.now().strftime('%d/%m/%Y')))
    ui.timer(0.1, lambda: time.set_text(datetime.now().strftime('%H:%M:%S')))

ui.run()

[bcgordon3]

This is a very nice and tight show for the date and time, thank you. How would I allow the user to change the set the time instead of the timer? I'm trying to use nicegui to setup a test, but need the user to set the start time. The clock example they give is good, but the clock itself is just too big.

[falkoschindler]

@bcgordon3 You're right, the date and time elements are pretty large. But you can easily wrap them into a popup. See here for an example.

[bcgordon3]

@bcgordon3 You're right, the date and time elements are pretty large. But you can easily wrap them into a popup. See here for an example.

That is an interesting option, but is there a way to make that use a notify or card instead of menu? Trying it out quickly didn't yield much and I couldn't get the menu to close. I'm fairly new to webui things and hoping to put together quick, useful UI for some test control. I just need the user to be able to select a date and time for the tests to start. Prefer not to have to parse that myself and also not have to have the large clock icon taking up so much real estate.

[falkoschindler]

@bcgordon3 If the button for opening the menu is too large, the Quasar button has various props to tweak its size and shape, e.g. .props('size=xs'). Otherwise it's hard to give advice since your requirement is pretty vague. Maybe you look over NiceGUI's reference and maybe the Quasar components to get an inspiration for your UI, try to implement it and let us know if you run into problems.

[MaiHoangViet1809]

this working, however, when more client connect to the server, more async process of timer will wait at event loop, this will slowdown server unnecessary, these thing should handle at client side better.

btw, solution don't need separate js code from python function, try this:

from nicegui import ui

async def clock():
    with ui.card().classes(add="__python__clock-node").style(
        add="display: grid; justify-items: center; gap: 0;"
    ) as c:
        ui.label("").classes(add="__python__clock-time").style(add="font-size: 2rem;")
        ui.label("").classes(add="__python__clock-date")

        _ =  ui.run_javascript(code="""
                function __python__UpdateClockData() {
                    const clock_node = document.querySelector('.__python__clock-node')
                    if (!clock_node) return
                
                    const [date, time] = (new Date()).toLocaleString().split(' ')
                    
                    clock_node.querySelector('.__python__clock-date').textContent = date
                    clock_node.querySelector('.__python__clock-time').textContent = time
                }
                
                setInterval(__python__UpdateClockData, 1);
        """)
    return c