GateWay/src/views/TEST.vue

<template>
  <div class="home">
    <div class="gamepad-container">
      <div class="gamepad-info">
        <div class="data-card axes-card">
          <h3>遥感数据</h3>
          <div class="data-display">
            <span class="axis-label">X 轴:</span>
            <span class="axis-value">{{ directionAxis0_1 }}</span>
          </div>
          <div class="data-display">
            <span class="axis-label">Y 轴:</span>
            <span class="axis-value">{{ directionAxis0_1 }}</span>
          </div>
        </div>
 
        <div class="data-card buttons-card">
          <h3>按键状态</h3>
          <div class="button-group">
            <div 
              v-for="(button, index) in buttons"
              :key="index"
              class="button-item"
              :class="{ 'pressed': button.pressed  }"
            >
              {{ button.name  }}
            </div>
          </div>
        </div>
 
        <div class="data-card axis9-card">
          <h3>按钮数据（Axis9）</h3>
          <div class="data-display">
            <span class="axis-label">方向:</span>
            <span class="axis-value">{{ directionAxis9 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      interval: null,
      gamepad: null,
      buttons: [
        { name: "Left2", pressed: false },
        { name: "Back", pressed: false },
        { name: "Right Joystick Press", pressed: false }
      ],
      directionAxis0_1: "",
      directionAxis9: ""
    };
  },
  created() {
    window.addEventListener("gamepadconnected",  this.onGamepadConnected); 
    window.addEventListener("gamepaddisconnected",  this.onGamepadDisconnected); 
  },
  beforeDestroy() {
    window.removeEventListener("gamepadconnected",  this.onGamepadConnected); 
    window.removeEventListener("gamepaddisconnected",  this.onGamepadDisconnected); 
  },
  methods: {
    onGamepadConnected(e) {
      console.log("Gamepad  connected:", e.gamepad); 
      this.gamepad  = navigator.getGamepads()[e.gamepad.index]; 
      this.startGamepad(); 
    },
    onGamepadDisconnected() {
      clearInterval(this.interval); 
      this.gamepad  = null;
    },
    startGamepad() {
      this.interval  = setInterval(() => {
        const gamepad = navigator.getGamepads()[0]; 
        if (gamepad) {
          this.updateDirection(gamepad.axes); 
          this.updateDirectionAxis9(gamepad.axes); 
          this.pressKey(gamepad.buttons); 
        }
      }, 50);
    },
    updateDirection(axes) {
      const axis0 = axes[0];
      const axis1 = axes[1];
      if (axis0 >= -0.3 && axis0 <= 0.3 && axis1 <= -0.5) {
        this.directionAxis0_1  = "上";
      } else if (axis0 >= -0.3 && axis0 <= 0.3 && axis1 >= 0.5) {
        this.directionAxis0_1  = "下";
      } else if (axis1 >= -0.3 && axis1 <= 0.3 && axis0 <= -0.3) {
        this.directionAxis0_1  = "左";
      } else if (axis1 >= -0.3 && axis1 <= 0.3 && axis0 >= 0.3) {
        this.directionAxis0_1  = "右";
      } else {
        this.directionAxis0_1  = "未定义";
      }
    },
    updateDirectionAxis9(axes) {
      const axis9 = axes[9];
      const roundedAxis9 = Math.round(axis9  * 100) / 100;
      if (roundedAxis9 <= -0.9) {
        this.directionAxis9  = "上";
      } else if (roundedAxis9 >= 0.0 && roundedAxis9 <= 0.2) {
        this.directionAxis9  = "下";
      } else if (roundedAxis9 >= 0.6 && roundedAxis9 <= 0.8) {
        this.directionAxis9  = "左";
      } else if (roundedAxis9 >= -0.5 && roundedAxis9 <= -0.4) {
        this.directionAxis9  = "右";
      } else {
        this.directionAxis9  = "未定义";
      }
    },
    pressKey(buttons) {
      this.buttons  = [
        { name: "Left2", pressed: buttons[6].value === 1 },
        { name: "Back", pressed: buttons[8].value === 1 },
        { name: "Right Joystick Press", pressed: buttons[11].value === 1 }
      ];
    }
  }
};
</script>
 
<style scoped>
.home {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.gamepad-container {
  width: 450px;
  padding: 2rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
 
.gamepad-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
 
.data-card {
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
}
 
h3 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}
 
.data-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}
 
.axis-label {
  color: #666;
  font-size: 1rem;
}
 
.axis-value {
  color: #34495e;
  font-size: 1.1rem;
  font-weight: bold;
}
 
.buttons-card {
  padding: 1rem;
}
 
.button-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
 
.button-item {
  padding: 0.8rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
 
.button-item:hover {
  background: rgba(46, 204, 113, 0.1);
}
 
.pressed {
  background: #2ecc71;
  color: white !important;
}
 
.pressed:hover {
  background: #27ae60;
}
</style>