Remove arrow key control and open devtools

Author: minggangw

electron_demo/turtle_tf2/README.md

@@ -196,12 +196,21 @@ world → turtle2
 
 **Turtle1 Movement**:
 
-- **W** or **↑** (Up Arrow): Move forward
-- **S** or **↓** (Down Arrow): Move backward
-- **A** or **←** (Left Arrow): Turn left
-- **D** or **→** (Right Arrow): Turn right
+- **W**: Move forward
+- **S**: Move backward
+- **A**: Turn left
+- **D**: Turn right
 
-💡 **Tip**: Click on the 3D visualization area first to ensure keyboard focus, then use the controls above to drive turtle1 around the turtlesim environment.
+💡 **Tip**: Click on the 3D visualization area first to ensure keyboard focus, then use WASD keys to drive turtle1 around the turtlesim environment.
+
+**Camera Controls**:
+
+- **Arrow Keys**: Move camera view
+- **Mouse Drag**: Rotate camera around scene
+- **Mouse Wheel**: Zoom in/out
+- **Right Click + Drag**: Pan camera view
+
+**Note**: Arrow keys are reserved for 3D camera navigation. Use WASD keys exclusively for turtle control to avoid conflicts.
 
 ### Turtle Management
 

electron_demo/turtle_tf2/index.html

@@ -388,20 +388,21 @@
           <label class="control-label">Move Turtle1</label>
           <div class="keyboard-legend">
             <div class="key-combo">
-              <span class="key">W</span> or <span class="key">↑</span> - Forward
+              <span class="key">W</span> - Forward
             </div>
             <div class="key-combo">
-              <span class="key">S</span> or <span class="key">↓</span> - Backward
+              <span class="key">S</span> - Backward
             </div>
             <div class="key-combo">
-              <span class="key">A</span> or <span class="key">←</span> - Turn Left
+              <span class="key">A</span> - Turn Left
             </div>
             <div class="key-combo">
-              <span class="key">D</span> or <span class="key">→</span> - Turn Right
+              <span class="key">D</span> - Turn Right
             </div>
           </div>
           <div class="keyboard-note">
-            💡 Click on the 3D scene to focus, then use keyboard controls
+            💡 Click on the 3D scene to focus, then use WASD keys to control turtle1.<br>
+            🎥 Use arrow keys or mouse to navigate the 3D camera view.
           </div>
         </div>
       </div>

electron_demo/turtle_tf2/main.js

@@ -53,8 +53,8 @@ function createWindow() {
 
   mainWindow.loadFile('index.html');
 
-  // Open DevTools for debugging
-  mainWindow.webContents.openDevTools();
+  // Open DevTools for debugging (commented out for production)
+  // mainWindow.webContents.openDevTools();
 }
 
 // Initialize ROS2 nodes for turtle TF2 demo
@@ -137,7 +137,7 @@ async function createTurtleTf2Broadcaster() {
   turtleTf2Nodes.velocityPublisher = velocityPublisher;
 
   // Subscribe to turtle1 pose
-  node.createSubscription('turtlesim_msgs/msg/Pose', '/turtle1/pose', (msg) => {
+  node.createSubscription('turtlesim/msg/Pose', '/turtle1/pose', (msg) => {
     const now = node.now();
 
     // Create transform message
@@ -206,7 +206,7 @@ async function createTurtleTf2Broadcaster() {
   });
 
   // Subscribe to turtle2 pose if it exists
-  node.createSubscription('turtlesim_msgs/msg/Pose', '/turtle2/pose', (msg) => {
+  node.createSubscription('turtlesim/msg/Pose', '/turtle2/pose', (msg) => {
     const now = node.now();
 
     const transform = {
@@ -286,7 +286,7 @@ async function createTurtleTf2Listener() {
   );
 
   // Create service client to spawn turtle2
-  const spawner = node.createClient('turtlesim_msgs/srv/Spawn', 'spawn');
+  const spawner = node.createClient('turtlesim/srv/Spawn', 'spawn');
 
   let turtleSpawned = false;
   let turtleSpawningServiceReady = false;

electron_demo/turtle_tf2/renderer.js

@@ -36,10 +36,6 @@ let keyState = {
   a: false,
   s: false,
   d: false,
-  ArrowUp: false,
-  ArrowLeft: false,
-  ArrowDown: false,
-  ArrowRight: false,
 };
 
 // Initialize when DOM is loaded
@@ -382,27 +378,21 @@ function setupEventListeners() {
 
 // Setup keyboard controls for turtle movement
 function setupKeyboardControls() {
-  // Track key state
+  // Track key state for WASD keys only
   document.addEventListener('keydown', (event) => {
-    if (event.code in keyState) {
-      keyState[event.code] = true;
-      event.preventDefault();
-    }
-    // Also handle WASD
-    if (event.key.toLowerCase() in keyState) {
-      keyState[event.key.toLowerCase()] = true;
+    // Only handle WASD keys (case-insensitive)
+    const key = event.key.toLowerCase();
+    if (key in keyState) {
+      keyState[key] = true;
       event.preventDefault();
     }
   });
 
   document.addEventListener('keyup', (event) => {
-    if (event.code in keyState) {
-      keyState[event.code] = false;
-      event.preventDefault();
-    }
-    // Also handle WASD
-    if (event.key.toLowerCase() in keyState) {
-      keyState[event.key.toLowerCase()] = false;
+    // Only handle WASD keys (case-insensitive)
+    const key = event.key.toLowerCase();
+    if (key in keyState) {
+      keyState[key] = false;
       event.preventDefault();
     }
   });
@@ -422,17 +412,17 @@ function sendTurtleCommand() {
   const speed = 2.0; // Linear speed
   const turn_speed = 2.0; // Angular speed
 
-  // Check for forward/backward movement (W/S or Up/Down arrows)
-  if (keyState.w || keyState.ArrowUp) {
+  // Check for forward/backward movement (W/S keys only)
+  if (keyState.w) {
     linear_x = speed;
-  } else if (keyState.s || keyState.ArrowDown) {
+  } else if (keyState.s) {
     linear_x = -speed;
   }
 
-  // Check for rotation (A/D or Left/Right arrows)
-  if (keyState.a || keyState.ArrowLeft) {
+  // Check for rotation (A/D keys only)
+  if (keyState.a) {
     angular_z = turn_speed;
-  } else if (keyState.d || keyState.ArrowRight) {
+  } else if (keyState.d) {
     angular_z = -turn_speed;
   }