joystick documentation

main.py

@@ -1,4 +1,3 @@
-
 #!/usr/bin/env python3
 from nicegui import ui, wp
 from contextlib import contextmanager
@@ -210,3 +209,12 @@ with example(ui.line_plot):
         [np.cos(datetime.now().timestamp()) + 0.02 * np.random.randn()],
     ]), active=False)
     ui.checkbox('active').bind_value(line_updates.active)
+
+with example(ui.joystick):
+
+    ui.joystick(
+        color='blue',
+        size=50,
+        on_move=lambda msg: coordinates.set_text(f'{msg.data.vector.x:.3f}, {msg.data.vector.y:.3f}'),
+        on_end=lambda _: coordinates.set_text('0, 0'))
+    coordinates = ui.label('0, 0')

nicegui/elements/joystick.py

@@ -1,3 +1,4 @@
+from typing import Callable, Dict
 from .custom_view import CustomView
 from .element import Element
 
@@ -35,6 +36,21 @@ class JoystickView(CustomView):
 
 class Joystick(Element):
 
-    def __init__(self, *, on_start=None, on_move=None, on_end=None, **options):
+    def __init__(self,
+                 *,
+                 on_start: Callable = None,
+                 on_move: Callable = None,
+                 on_end: Callable = None,
+                 **options: Dict,
+                 ):
+        """Joystick
+
+        Create a joystick using nipple.js.
+
+        :param on_start: callback for when the user toches the joystick
+        :param on_move: callback for when the user moves the joystick
+        :param on_end: callback for when the user releases the joystick
+        :param options: arguments like `color` which should be passed to `nipple.js <https://github.com/yoannmoinet/nipplejs#options>`_
+        """
 
         super().__init__(JoystickView(on_start, on_move, on_end, **options))

nicegui/elements/line_plot.py

@@ -7,7 +7,7 @@ class LinePlot(Plot):
                  *,
                  n: int = 1,
                  limit: int = 100,
-                 update_every=1,
+                 update_every: int = 1,
                  close: bool = True,
                  **kwargs,
                  ):