Allow setting the size of ui.joystick

[falkoschindler]

It's currently pretty tricky to change the size of a ui.joystick, i.e. the size of the square drag area. Simply using .style() or .classes() does not work, since it only changes the size of the joystick container, not the drag area itself.

A workaround is to address the drag area with custom CSS definitions like this:

ui.add_head_html('''
<style>
    .custom-joystick[data-joys] div {
        width: 200px;
        height: 200px;
    }
</style>
''')
ui.joystick(color='blue').classes('custom-joystick')

But we might want to provide a simpler API.

[Veng97]

Not only is it tricky to set the size (still), the on_move event callback also doesnt propagate the rest of the metadata from nipple.js.
Currently only the normalized x/y coordinates are sent with the JoystickEventArguments.
I think the JoystickEventArguments should also contain the rest of the metadata, most notably force.

[falkoschindler]

You're right, @Veng97.
But there's a workaround. You can use a generic event subscription to get the raw event data:

ui.joystick().on('move', lambda e: print(e.args))

The output is something like this:

{'data': {'identifier': 0, 'position': {'x': 82.515625, 'y': 110.3828125}, 'force': 0.17946059042482002, 'pressure': 0.5, 'distance': 8.973029521241001, 'angle': {'radian': 1.8886922747315606, 'degree': 108.2140961410814}, 'vector': {'x': -0.05609375, 'y': 0.17046875}, 'raw': {'distance': 8.973029521241001, 'position': {'x': 82.515625, 'y': 110.3828125}}, 'instance': {'position': {'x': 85.3203125, 'y': 118.90625}, 'frontPosition': {'x': -2.8046875, 'y': -8.5234375}, 'ui': {}, 'identifier': 0, 'id': 0, 'options': {'size': 100, 'threshold': 0.1, 'color': 'white', 'fadeTime': 250, 'dataOnly': False, 'restJoystick': True, 'restOpacity': 0, 'mode': 'dynamic', 'lockX': False, 'lockY': False, 'shape': 'circle'}}, 'lockX': False, 'lockY': False, 'direction': {'x': 'left', 'y': 'up', 'angle': 'up'}}}

[falkoschindler]

I'll close this feature request as resolved in version 1.4.36.