Synchronize gamepad-drilling with Drill panel

Author: michal-proc

kalman_gs/node_project/src/common/gamepad-drilling.ts

@@ -5,8 +5,19 @@ import { Topic } from 'roslib';
 const RATE = 10;
 const MAX_SPEED = 100;
 
+type DrillGamepadUpdate = {
+  bridgeB?: number;
+  bridgeC?: number;
+  autonomy?: 0 | 1 | 2;
+  weightRequest?: 0 | 1;
+};
+
 const clampSpeed = (value: number) => Math.max(-MAX_SPEED, Math.min(MAX_SPEED, Math.round(value * MAX_SPEED)));
 
+const dispatchDrillGamepadUpdate = (detail: DrillGamepadUpdate) => {
+  window.dispatchEvent(new CustomEvent<DrillGamepadUpdate>('drill-gamepad-update', { detail }));
+};
+
 window.addEventListener('ros-connect', () => {
   const drillBTopic = new Topic<{ data: number }>({
     ros,
@@ -43,10 +54,12 @@ window.addEventListener('ros-connect', () => {
 
     if (bridgeB !== lastBridgeB) {
       drillBTopic.publish({ data: bridgeB });
+      dispatchDrillGamepadUpdate({ bridgeB });
       lastBridgeB = bridgeB;
     }
     if (bridgeC !== lastBridgeC) {
       drillCTopic.publish({ data: bridgeC });
+      dispatchDrillGamepadUpdate({ bridgeC });
       lastBridgeC = bridgeC;
     }
 
@@ -58,19 +71,24 @@ window.addEventListener('ros-connect', () => {
 
     if (stopButton > 0 && lastStopButton === 0) {
       drillAutonomyTopic.publish({ data: 0 });
+      dispatchDrillGamepadUpdate({ autonomy: 0 });
     }
     if (drillButton > 0 && lastDrillButton === 0) {
       drillAutonomyTopic.publish({ data: 1 });
+      dispatchDrillGamepadUpdate({ autonomy: 1 });
     }
     if (homeButton > 0 && lastHomeButton === 0) {
       drillAutonomyTopic.publish({ data: 2 });
+      dispatchDrillGamepadUpdate({ autonomy: 2 });
     }
 
     if (tareButton > 0 && lastTareButton === 0) {
       drillWeightReqTopic.publish({ data: 0 });
+      dispatchDrillGamepadUpdate({ weightRequest: 0 });
     }
     if (weighButton > 0 && lastWeighButton === 0) {
       drillWeightReqTopic.publish({ data: 1 });
+      dispatchDrillGamepadUpdate({ weightRequest: 1 });
     }
 
     lastStopButton = stopButton;

kalman_gs/node_project/src/components/button.module.css

@@ -1,47 +1,48 @@
 .button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--interactive);
-  padding: 3px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  transition: background-color 0.1s;
-  height: calc(1em + 4px);
-  min-width: calc(1em + 4px);
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-  text-wrap: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--interactive);
+    padding: 3px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    transition: background-color 0.1s;
+    height: calc(1em + 4px);
+    min-width: calc(1em + 4px);
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+    text-wrap: nowrap;
 }
 
 .button:first-child {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  margin-left: 5px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    margin-left: 5px;
 }
 
 .button:last-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  margin-right: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    margin-right: 5px;
 }
 
-.button:hover:not(.disabled) {
-  background-color: var(--active);
+.button:hover:not(.disabled),
+.button.active {
+    background-color: var(--active);
 }
 
 .button:not(:last-child) {
-  border-right: 1px solid var(--background);
+    border-right: 1px solid var(--background);
 }
 
 .button:active:not(.disabled) {
-  background-color: var(--weak-foreground);
-  transition: background-color 0s;
+    background-color: var(--weak-foreground);
+    transition: background-color 0s;
 }
 
 .button.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+    opacity: 0.5;
+    cursor: not-allowed;
 }

kalman_gs/node_project/src/components/button.tsx

@@ -8,29 +8,27 @@ type Props = {
   tooltip?: string;
   onClick?: () => void;
   disabled?: boolean;
+  active?: boolean;
   className?: string;
   style?: CSSProperties;
 };
 
-export default function Button({ children, tooltip, onClick, disabled, className, style }: Props) {
+export default function Button({ children, tooltip, onClick, disabled, active, className, style }: Props) {
+  const buttonClassName =
+    styles['button'] +
+    (className ? ` ${className}` : '') +
+    (active ? ` ${styles['active']}` : '') +
+    (disabled ? ` ${styles['disabled']}` : '');
+
   if (tooltip === undefined || disabled) {
     return (
-      <div
-        className={styles['button'] + (className ? ` ${className}` : '') + (disabled ? ` ${styles['disabled']}` : '')}
-        style={style}
-        onClick={disabled ? undefined : onClick}
-      >
+      <div className={buttonClassName} style={style} onClick={disabled ? undefined : onClick}>
         {children}
       </div>
     );
   } else {
     return (
-      <Tooltip
-        text={tooltip}
-        className={styles['button'] + (className ? ` ${className}` : '') + (disabled ? ` ${styles['disabled']}` : '')}
-        style={style}
-        onClick={disabled ? undefined : onClick}
-      >
+      <Tooltip text={tooltip} className={buttonClassName} style={style} onClick={disabled ? undefined : onClick}>
         {children}
       </Tooltip>
     );