custom: proof-of-concept for joystick component

custom_test.py

@@ -7,3 +7,5 @@ with ui.card():
 ui.button('Add 100', on_click=lambda: custom.add(100))
 
 label = ui.label()
+
+ui.joystick(on_move=lambda e: print("move", e.vector))

nicegui/elements/joystick.py

@@ -0,0 +1,45 @@
+import justpy as jp
+from .element import Element
+
+class JoystickView(jp.JustpyBaseComponent):
+
+    vue_type = 'joystick'
+
+    def __init__(self, on_move):
+
+        self.pages = {}
+        self.classes = ''
+        self.options = jp.Dict()
+
+        self.on_move = on_move
+
+        super().__init__()
+        self.allowed_events = ['onMove']
+        self.initialize(temp=False, onMove=self.handle_move)
+
+    def add_to_page(self, wp: jp.WebPage):
+
+        wp.add_component(self)
+
+    def react(self, _):
+
+        pass
+
+    def convert_object_to_dict(self):
+
+        return {
+            'vue_type': self.vue_type,
+            'id': self.id,
+            'show': True,
+            'options': self.options,
+        }
+
+    def handle_move(self, msg):
+
+        self.on_move(msg.data)
+
+class Joystick(Element):
+
+    def __init__(self, *, on_move):
+
+        super().__init__(JoystickView(on_move))

nicegui/static/components/joystick.js

@@ -0,0 +1,26 @@
+Vue.component("joystick", {
+  template: `
+    <div v-bind:id="jp_props.id" style="background-color:AliceBlue;position:relative;width:10em;height:10em"></div>
+    `,
+  mounted() {
+    const joystick = nipplejs.create({
+      zone: document.getElementById(this.$props.jp_props.id),
+      color: "CornflowerBlue",
+    });
+    joystick.on("move", (_, data) => {
+      delete data.instance;
+      const event = {
+        event_type: "onMove",
+        vue_type: this.$props.jp_props.vue_type,
+        id: this.$props.jp_props.id,
+        page_id: page_id,
+        websocket_id: websocket_id,
+        data: data,
+      };
+      send_to_server(event, "event");
+    });
+  },
+  props: {
+    jp_props: Object,
+  },
+});

nicegui/static/templates/quasar.html

@@ -67,6 +67,8 @@
         {% endif %}
     {% endif %}
 
+    <script src="https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js"></script>
+
 </head>
 
 

nicegui/ui.py

@@ -15,6 +15,7 @@ class Ui:
     from .elements.slider import Slider as slider
     from .elements.switch import Switch as switch
     from .elements.toggle import Toggle as toggle
+    from .elements.joystick import Joystick as joystick
 
     from .elements.plot import Plot as plot
     from .elements.line_plot import LinePlot as line_plot