Merge pull request #3135 from JdeRobot/issue-3041

Follow Person teleop mode resolved and working

Author: javizqh

exercises/static/exercises/follow_person/react-components/MapSelectorPerson.js

@@ -1,9 +1,9 @@
-import * as React from "react";
-import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
 import noImage from "../../assets/img/noImage.png";
 import "./css/GUICanvas.css";
+import PropTypes from "prop-types";
 
-export default function ImgCanvas() {
+function SpecificFollowPerson(props) {
   const [image, setImage] = React.useState(
     noImage
   );
@@ -36,13 +36,38 @@ export default function ImgCanvas() {
       );
     };
   }, []);
+
+  
+
+  useEffect(() => {
+    listen_key();
+  }, []);
+
+  function listen_key() {
+    window.addEventListener("keypress", function (event) {
+      if (event.code === "KeyS") {
+        window.RoboticsExerciseComponents.commsManager.send("gui", "key_s");
+      } else if (event.code === "KeyW") {
+        window.RoboticsExerciseComponents.commsManager.send("gui", "key_w");
+      } else if (event.code === "KeyA") {
+        window.RoboticsExerciseComponents.commsManager.send("gui", "key_a");
+      } else if (event.code === "KeyD") {
+        window.RoboticsExerciseComponents.commsManager.send("gui", "key_d");
+      } else if (event.code === "KeyX") {
+        window.RoboticsExerciseComponents.commsManager.send("gui", "key_x");
+      }
+    });
+  }
+
   return (
     <div style={{display: "flex", width: "100%", height: "100%", position:"relative", justifyContent: "center"}}>
       <img className="image" id="gui_canvas" src={image}/>
     </div>
   );
+
 }
 
-ImgCanvas.propTypes = {
+SpecificFollowPerson.propTypes = {
   context: PropTypes.any,
 };
+export default SpecificFollowPerson;

exercises/static/exercises/follow_person/react-components/ImgCanvas.js renamed to exercises/static/exercises/follow_person/react-components/SpecificFollowPerson.js

@@ -20,7 +20,7 @@
                         {% react_component components/visualizers/VncConsoleViewer%}{% end_react_component %}
                         {% end_react_component%}
                         {% react_component components/containers/FlexContainer%} 
-                            {% react_component exercise/follow_person/ImgCanvas %}{% end_react_component %}
+                            {% react_component exercise/follow_person/SpecificFollowPerson %}{% end_react_component %}
                             {% react_component components/visualizers/GazeboViewer%}{% end_react_component %}
                         {% end_react_component %}
                 {% end_react_component %}
@@ -45,7 +45,7 @@
                     {% react_component components/visualizers/ConsoleViewer%}{% end_react_component %}
                         {% end_react_component%}
                         {% react_component components/wrappers/FlexContainer%} 
-                            {% react_component exercise/follow_person/ImgCanvas %}{% end_react_component %}
+                            {% react_component exercise/follow_person/SpecificFollowPerson %}{% end_react_component %}
                             {% react_component components/visualizers/GazeboViewer%}{% end_react_component %}
                         {% end_react_component %}
                 {% end_react_component %}