joystick: pass options to nipple

custom_test.py

@@ -8,7 +8,7 @@ ui.button('Add 100', on_click=lambda: example.add(100))
 
 label = ui.label()
 
-ui.joystick(on_move=lambda e: print("move", e.vector))
+ui.joystick(on_move=lambda e: print("move", e.vector), color='blue', size=50)
 
 three = ui.three(on_click=lambda e: print("click", e))
 ui.slider(min=0, max=10, on_change=lambda e: three.move_camera(e.value))

nicegui/elements/joystick.js

@@ -5,7 +5,7 @@ Vue.component("joystick", {
   mounted() {
     const joystick = nipplejs.create({
       zone: document.getElementById(this.$props.jp_props.id),
-      color: "CornflowerBlue",
+      ...this.$props.jp_props.options,
     });
     joystick.on("move", (_, data) => {
       delete data.instance;

nicegui/elements/joystick.py

@@ -3,13 +3,13 @@ from .element import Element
 
 class JoystickView(CustomView):
 
-    def __init__(self, on_move):
+    def __init__(self, on_move, **options):
 
         self.on_move = on_move
 
         super().__init__('joystick', __file__, [
             'https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js',
-        ])
+        ], **options)
 
         self.allowed_events = ['onMove']
 
@@ -21,6 +21,6 @@ class JoystickView(CustomView):
 
 class Joystick(Element):
 
-    def __init__(self, *, on_move):
+    def __init__(self, *, on_move, **options):
 
-        super().__init__(JoystickView(on_move))
+        super().__init__(JoystickView(on_move, **options))