Change Background color of ui.joystick

[LarsEggimann]

Question

In my small app I am using a joystick. I also have a switch for dark-mode. Now i would like to change the background color of the joystick depending on the setting.

Within the browser inspector i found that the following setting changes the background color of the joystick to black:

<div data-joystick="" id="c116">
    <div style="touch-action: none; background-color: rgb(18, 18, 18);">       <- added background-color here
        <div class="nipple collection_0" id="nipple_0_0"
           .....
        </div>
    </div>
</div>

However when i use the styling of nicegui:

self.joystick.style("background-color: rgb(18, 18, 18);")

I get the following html:

<div data-joystick="" id="c116" style="background-color: rgb(18, 18, 18);">          <- nicegui adds the style here
    <div style="touch-action: none;">
        <div class="nipple collection_0" id="nipple_0_0"
       .......
        </div>
    </div>
</div>

This however is one level to high and does not apply the color to the nipple objcet.

how can i set the syle of the joystick at the correct level within my python code?

Thanks in advance!

Cheers,
Lars

[python-and-novella]

[LarsEggimann]

thank you again for the fast answer. sadly this did not work, I should have mentioned that the set_dark_mode function is async (as the plot update takes 0.3 s or so, that way the gui does not stutter).

i get the following error:

[ERROR|base_events|L1821] 2024-08-18 03:26:33,711: Task exception was never retrieved
future: <Task finished name='Task-24' coro=<io_bound() done, defined at C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\run.py:72> exception=RuntimeError('The current slot cannot be determined because the slot stack for this task is empty.\nThis may happen if you try to create UI from a background task.\nTo fix this, enter the target slot explicitly using `with container_element:`.')>
Traceback (most recent call last):
  File "C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\run.py", line 74, in io_bound
    return await _run(thread_pool, callback, *args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\run.py", line 52, in _run
    return await loop.run_in_executor(executor, partial(callback, *args, **kwargs))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\lhep\AppData\Local\Programs\Python\Python312\Lib\concurrent\futures\thread.py", line 58, in run
    result = self.fn(*self.args, **self.kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "c:\Users\lhep\Documents\FLASH Control Software\MasterThesis\code\components\device_manager.py", line 115, in set_dark_mode
    m.set_dark_mode(value)
  File "c:\Users\lhep\Documents\FLASH Control Software\MasterThesis\code\components\stages\stages_connection_manager.py", line 122, in set_dark_mode
    self.component.set_dark_mode(value)
  File "c:\Users\lhep\Documents\FLASH Control Software\MasterThesis\code\components\stages\stages_component.py", line 185, in set_dark_mode
    ui.query(f'#c{self.joystick.id} div').classes(color)
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\elements\query.py", line 67, in __init__
    for element in context.client.elements.values():
                   ^^^^^^^^^^^^^^
  File "C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\context.py", line 47, in client
    return self.slot.parent.client
           ^^^^^^^^^
  File "C:\Users\lhep\Documents\FLASH Control Software\MasterThesis\.venv\Lib\site-packages\nicegui\context.py", line 39, in slot
    raise RuntimeError('The current slot cannot be determined because the slot stack for this task is empty.\n'
RuntimeError: The current slot cannot be determined because the slot stack for this task is empty.
This may happen if you try to create UI from a background task.
To fix this, enter the target slot explicitly using `with container_element:`.

this is where i invoke the darkmode for all my components:

    def set_dark_mode():
        value = app.storage.user.get("dark-mode", False)
        ui_dark_mode.value = value
        asyncio.create_task(run.io_bound(device_manager.set_dark_mode, value))  # type: ignore
        for component in further_components:
            asyncio.create_task(run.io_bound(component.set_dark_mode, value))  # type: ignore
        logger.info("Dark mode toggled to %s", value)

   def set_dark_mode(self, value: bool):
       self.dark_mode = value
       self.plot_plotly.update_layout(template="plotly_dark" if value else "seaborn")
       self.plot_nicegui.update()

       # self.joystick.style("background: #121212;")
       color = "bg-black" if value else "bg-white"
       ui.query(f'#c{self.joystick.id} div').classes(color)

Is there an other way to do this? I would like to keep the set_dark_mode async.

[rodja]

You should do the ui.query in the function which is executed on the main loop (the function where you access the app.storage).

[falkoschindler]

@python-and-fiction Please, don't remove comments, especially after they received responses. This makes it very hard to follow the conversation. Thanks!

[python-and-novella]

@falkoschindler sorry for that. After i make second temporary solution for this , I find that my first solution is definitely wrong.
In

ui.query(f'#c{joystick.id} div').classes('bg-black')

bg-black is quasar’s color,the !important of this will make joystick unusable.
It will cause more problems, so i delete it. Sorry for it again.

[LarsEggimann]

@rodja yes that would maybe work but then i would need the joystick.id in that function. But the joystick is only ever created when a corresponding page is loaded. I would rather avoid passing the ui.joystick around through 4 files before it is used ...

[python-and-novella]

I noticed the css in .venv\Lib\site-packages\nicegui\elements\joystick.vue make the properties background-color\width\height of div in ui.joystick fixed.

<style scoped>
:scope > div {
  background-color: AliceBlue;
  width: 10em;
  height: 10em;
  position: relative;
}
</style>

Then you can use following code to achieve ui.joystick's dark mode by css.

from nicegui import ui

joystick = ui.joystick(color='red',size=50,mode='static').classes('w-96 h-96 bg-white-400 dark:bg-black-400')
ui.query(f'#c{joystick.id} > div').style('background-color:unset;width:100%;height:100%;')
ui.switch('Dark Mode',on_change=lambda e:ui.dark_mode(e.sender.value))

ui.run()

[LarsEggimann]

thank you, this did work!
But I must say, this doesn't seem very convenient xD

[falkoschindler]

This question seems related to this feature request: #1707.
Styling the joystick element is pretty tricky at the moment and we're looking for ways to improve it.
Any recommendations are very welcome!

[LarsEggimann]

Yes, the feature request describes a bit better the same issue I was having.
Sadly, I don't really have a better solution to this. One idea could be to pass the styling options to the ui.joystick element as a parameter. But this is then potentially inconsistent with other ui. elements.

[python-and-novella]

I changed .venv\Lib\site-packages\nicegui\elements\joystick.vue to:

<template>
  <div class='nicegui-joystick'><div></div></div>
</template>
/*
unchanged
*/
<style scoped>
:scope > div {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

Here is a demo of ui.joystick's dark mode by css.

from nicegui import ui

ui.add_css("""
           .nicegui-joystick {
            width: 10em;
            height: 10em;
            }
""")
joystick = ui.joystick(color="red", size=50, mode="static").classes(
    "w-96 h-96 bg-red-100 dark:bg-green-100"
)
with ui.card():
    ui.joystick(color="red", size=50, mode="static")
ui.switch("Dark Mode", on_change=lambda e: ui.dark_mode(e.sender.value))

ui.run()

Or simple demo in one py file:

from nicegui import ui

ui.add_css("""
           .nicegui-joystick {
            width: 10em;
            height: 10em;
            }
"""
)
joystick = ui.joystick(color="red", size=50, mode="static").classes(
    "w-96 h-96 bg-red-100 dark:bg-green-100 nicegui-joystick"
)
ui.query(f'#c{joystick.id} > div').style('background-color:unset;width:100%;height:100%;')
with ui.card():
    joystick2 = ui.joystick(color="red", size=50, mode="static").classes('nicegui-joystick')
    ui.query(f'#c{joystick2.id} > div').style('background-color:unset;width:100%;height:100%;')
ui.switch("Dark Mode", on_change=lambda e: ui.dark_mode(e.sender.value))

ui.run()

@falkoschindler Will the change cause any obvious problem?

[falkoschindler]

Well, the joystick would loose its default background color. And styling this modified joystick is still pretty complicated.

Ideally we wouldn't need to nest the nipplejs component so deeply (<div><div></div></div>). But moving it one layer up breaks the geometry: The nipple is wrongly position depending on the page padding.

[python-and-novella]

Hi, I try to change the default style of joystick. Does someone have more suggestions on it? Maybe someone could style joystick based on my change.
python-and-fiction/nicegui at v1.4.36-dev0
https://github.com/python-and-fiction/nicegui/tree/v1.4.36-dev0

[falkoschindler]

Here is an alternative solution based on @python-and-fiction's approach and Tailwind CSS layers:

ui.add_head_html('''
    <style type="text/tailwindcss">
        @layer components {
            .my-joystick div {
                @apply !bg-red-100 dark:!bg-green-100;
            }
        }
    </style>
''')
ui.joystick(size=50).classes('my-joystick')
ui.switch('Dark Mode', on_change=lambda e: ui.dark_mode(e.sender.value))

Note that we need to mark these classes as "important" using the exclamation mark to overrule the "AliceBlue" default color.

[python-and-novella]

Hi,using important to set container element's background color will make joystick invisible but it still works.

[falkoschindler]

Oh! That's bad. 😕

[falkoschindler]

Version 1.4.36 with PR #3546 has just been released, allowing to simply set width, height and background color on the ui.joystick element.

[LarsEggimann]

you guys are amazing, thank you!