To use a gamepad you now have to set it via the joystick context menu…

…. Added option to decide if context menu should be opened. Also added context menu options to listen for when context menu opens and closes.
robotpy · Jan 15, 2019 · aed4aa2 · aed4aa2
1 parent 4a0b769
commit aed4aa2
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 35 deletions.
diff --git a/robotpy_websim/html/src/assets/js/tags/components/context-menu/context-menu.tag b/robotpy_websim/html/src/assets/js/tags/components/context-menu/context-menu.tag
@@ -28,18 +28,32 @@
       this._y = y;
       this._show = true;
       this.update();
+
+      if (this.opts.onshow) {
+        this.opts.onshow();
+      }
     };
 
     this.hide = () => {
       this._show = false;
       this.update();
+
+      if (this.opts.onhide) {
+        this.opts.onshow();
+      }
     };
 
     this.on('mount', () => {
 
       $(window).on('click', (ev) => {
-        let isLeftClick = this._isLeftClick(ev);
-        if (isLeftClick) {
+        if (!this._isLeftClick(ev)) {
+          return;
+        }
+
+        const clickedOnContextMenu = $(ev.target).closest(this.root).length > 0;
+        const isClosingElement = $(ev.target).is('a, .close');
+
+        if (!clickedOnContextMenu || isClosingElement) {
           this.hide();
         }
       });
@@ -54,7 +68,20 @@
         }
         else if (!clickedOnContextMenu && !clickedOnModal) { 
           ev.preventDefault();
-          this.show(ev.clientX, ev.clientY);
+
+          if (typeof this.opts.shouldShow === 'function') {
+            var show = this.opts.shouldShow(ev);
+          }
+          else {
+            var show = true;
+          }
+
+          if (show) {
+            this.show(ev.clientX, ev.clientY);
+          }
+          else {
+            this.hide();
+          }
         }
         else if (clickedOnContextMenu) {
           ev.preventDefault();

diff --git a/robotpy_websim/html/src/assets/js/tags/golden-layout.tag b/robotpy_websim/html/src/assets/js/tags/golden-layout.tag
@@ -21,8 +21,6 @@ import defaultLayout from './golden-layout-default';
 
     let initialize = _.once((userConfig) => {
 
-      console.log("userConfig.layout:", userConfig.layout);
-
       try {
         let config = JSON.parse(userConfig.layout) || defaultLayout;
         myLayout = new GoldenLayout( config, '.golden-layout' );

diff --git a/...im/html/src/modules/joystick/joystick.css → ...m/html/src/modules/joystick/joystick.scss b/...im/html/src/modules/joystick/joystick.css → ...m/html/src/modules/joystick/joystick.scss
@@ -29,4 +29,15 @@ joystick .form-check-inline {
 joystick .buttons {
   margin-left: 4px;
   margin-top: 15px;
+}
+
+joysticks context-menu {
+  .dropdown-header, form {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  #gamepad-select {
+    width: 200px;
+  }
 }
diff --git a/robotpy_websim/html/src/modules/joystick/joysticks.tag b/robotpy_websim/html/src/modules/joystick/joysticks.tag
@@ -1,6 +1,7 @@
 import './joystick.tag';
-import './joystick.css';
+import './joystick.scss';
 import * as _ from 'lodash';
+import ObservableSlim from 'observable-slim';
 
 <joysticks>
   <div class="joystick" each={joystick in opts.joysticks}>
@@ -14,11 +15,60 @@ import * as _ from 'lodash';
         onupdate={joystick.onUpdate} />
     </virtual>
   </div>
+  <context-menu 
+    container={root} 
+    should-show={shouldShowContextMenu} 
+    joystick-index={opts.contextMenuJoystickIndex}
+    gamepad-index={opts.gamepadIndex}
+    gamepads={opts.gamepads}
+    on-gamepad-select={onGamepadSelect}>
+
+    <div class="Joystick-options">
+      <h6 class="dropdown-header">Joystick {opts.joystickIndex}</h6>
+      <form>
+        <div class="form-group">
+          <label for="gamepad-select">Paired gamepad:</label>
+          <select class="form-control" id="gamepad-select" onchange={opts.onGamepadSelect} value={opts.gamepadIndex}>
+            <option value="-1">None</option>
+            <option value={index} if={gamepad && gamepad.connected} each={gamepad, index in opts.gamepads}>
+              {gamepad.id}
+            </option>
+          </select>
+        </div>
+      </form>
+    </div>
+  </context-menu>
+
+  <style>
+
 
-  <script>
+  </style>
 
+  <script>
     const axisLabels = ['X', 'Y', 'Z', 'T'];
     let joysticks = [];
+    let contextMenuJoystickIndex = -1;
+
+
+    this.shouldShowContextMenu = (ev) => {
+      let $joystick = $(ev.target).closest('joystick');
+        let clickedOnJoystick = $joystick.length > 0;
+        let joystickIndex = $joystick.attr('index');
+
+        if (clickedOnJoystick) {
+          contextMenuJoystickIndex = joystickIndex;
+          return true;
+        } 
+        else {
+          contextMenuJoystickIndex = -1;
+          return false;
+        }
+    };
+
+    this.onGamepadSelect = (ev) => {
+      let value = $(ev.target).val();
+      joysticks[contextMenuJoystickIndex].gamepadIndex = value;
+    };
 
     this.getAxisLabel = (index) => {
       if (axisLabels.length > index) {
@@ -33,7 +83,8 @@ import * as _ from 'lodash';
       joysticks = sticks.map((stick, stickIndex) => {
         return {
           index: stickIndex,
-          gamepad: gamepads[stickIndex] || { connected: false },
+          gamepadIndex: -1,
+          gamepad: { connected: false },
           visible: stickIndex <= 1,
           axes: stick.axes.map((value, index) => {
             return {
@@ -79,46 +130,23 @@ import * as _ from 'lodash';
 
       const gamepads = state.gamepads;
 
-      if (!dataOut.joysticks) {
-        return;
-      }
-
       initialize(dataOut.joysticks, gamepads);
-
-      let changes = false;
 
       for (let i = 0; i < joysticks.length; i++) {
-        const gamepad = gamepads[i];
+        const gamepad = gamepads[joysticks[i].gamepadIndex];
         if (!gamepad) {
-          let oldGamepad = joysticks[i].gamepad;
-          let newGamepad = {
+          joysticks[i].gamepad = {
             connected: false
           };
-          joysticks[i].gamepad = newGamepad;
-          changes = !_.isEqual(newGamepad, oldGamepad);
         }
         else {
-          const oldGamepad = joysticks[i].gamepad;
-          const newGamepad = {
+          joysticks[i].gamepad = {
             connected: gamepad.connected,
             buttons: gamepad.buttons.map(button => {
               return button.pressed;
             }),
             axes: [...gamepad.axes]
           };
-          joysticks[i].gamepad = newGamepad;
-
-          // check if there are differences in the objects. If there are,
-          // then update
-          if (!changes) {
-            changes = !_.isEqual(newGamepad, oldGamepad);
-          }
-        }
-
-        if (changes) {
-          setTimeout(() => {
-            this.update();
-          });
         }
         // Set visibility of joysticks
       }
@@ -129,8 +157,18 @@ import * as _ from 'lodash';
 
       this.updateJoysticks(state);
 
+      if (contextMenuJoystickIndex < 0) {
+        var gamepadIndex = -1;
+      }
+      else {
+        var gamepadIndex = joysticks[contextMenuJoystickIndex].gamepadIndex;
+      }
+
       return {
-        joysticks
+        joysticks,
+        gamepads: state.gamepads,
+        contextMenuJoystickIndex,
+        gamepadIndex
       };
     };