diff --git a/exercises/static/exercises/follow_person/react-components/MapSelectorPerson.js b/exercises/static/exercises/follow_person/react-components/MapSelectorPerson.js deleted file mode 100644 index 3b4c83a8b..000000000 --- a/exercises/static/exercises/follow_person/react-components/MapSelectorPerson.js +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useEffect, useState } from "react"; -import MenuItem from "@mui/material/MenuItem"; -import { FormControl, InputLabel, Select, Box } from "@mui/material"; - -const exerciseConfig = JSON.parse( - document.getElementById("exercise-config").textContent -); -const exerciseId = exerciseConfig.exercise_id; -var ros_version = 2; - -export default function MapSelectorFollow(props) { - - const handleCircuitChange = (e) => { - context.mapSelected = e.name - setSelectedCircuit(e); - let full_config = JSON.parse( - document.getElementById("exercise-config").textContent - ); - let config = full_config[`ROS${ros_version}`][0]; - config.application.params = { circuit: e.name }; - config.launch_file = e.path; - config['exercise_id'] = exerciseId; - config["world"] = "gazebo"; - config["visualization"] = "gazebo_rae"; - config["world"] = "gazebo"; - config["resource_folders"] = "$EXERCISE_FOLDER/launch/ros2_humble"; - config["model_folders"] = "$CUSTOM_ROBOTS_FOLDER/amazon_hospital/models"; - config["launch_file"] = e.path; - config["visualization"] = "gazebo_rae"; - config.height = window.innerHeight / 2; - config.width = window.innerWidth / 2; - window.RoboticsExerciseComponents.commsManager.terminate().then(() => { - window.RoboticsReactComponents.MessageSystem.Loading.showLoading( - "Launching World in Robotics Backend" - ); - window.RoboticsExerciseComponents.commsManager.launch(config).then(()=> { - RoboticsReactComponents.MessageSystem.Loading.hideLoading(); - }).catch((e) => { - RoboticsReactComponents.MessageSystem.Loading.showFailLoading( - `Error launching the world:${e.data.message}. Try changing the world or reloading the page` - ); - }); - }); - }; - - const [disabled, setDisabled] = useState(true); - const [circuitOptions, setCircuitOptions] = useState([]); - const [selectedCircuit, setSelectedCircuit] = useState(""); - - - useEffect(() => { - const callback = (message) => { - if (message.data.state !== "connected") { - setDisabled(false); - } else { - setDisabled(true); - } - }; - window.RoboticsExerciseComponents.commsManager.subscribe( - [window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED], - callback - ); - - return () => { - window.RoboticsExerciseComponents.commsManager.unsubscribe( - [window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED], - callback - ); - }; - }, []); - - useEffect(() => { - const serverBase = `${document.location.protocol}//${document.location.hostname}:7164`; - let requestUrl = `${serverBase}/exercises/exercise/${exerciseId}/launch_files`; - const request = new Request(requestUrl, { - method: "POST", - headers: { - "Content-type": "application/json", - 'X-CSRFToken': context.csrf - }, - }) - fetch(request) - .then((response) => response.json()) - .then((data) => { - const rosVersionURL = `${serverBase}/exercises/ros_version/`; - ros_version = 2; - fetch(rosVersionURL) - .then((res) => res.json()) - .then((msg) => { - ros_version = msg.version; - - if (isNaN(parseInt(ros_version))) { - ros_version = 1; - } - const config = data; - // Selects the configs available for the ROS version installed - const availableConfigs = {}; - availableConfigs[`ROS${ros_version}`] = config[`ROS${ros_version}`]; - console.log(availableConfigs); - setSelectedCircuit(availableConfigs[`ROS${ros_version}`][0]); - setCircuitOptions(availableConfigs[`ROS${ros_version}`]) - context.mapSelected = - availableConfigs[`ROS${ros_version}`][0].name; - }) - setCircuitOptions(data.launch); - - }) - .catch((error) => { - console.log("Error fetching circuit options:", error); - }); - }, []); - - - - return ( - - - - World - - - - - ); -} diff --git a/exercises/static/exercises/follow_person/react-components/ImgCanvas.js b/exercises/static/exercises/follow_person/react-components/SpecificFollowPerson.js similarity index 59% rename from exercises/static/exercises/follow_person/react-components/ImgCanvas.js rename to exercises/static/exercises/follow_person/react-components/SpecificFollowPerson.js index e7dc6c9b9..d062a04c9 100644 --- a/exercises/static/exercises/follow_person/react-components/ImgCanvas.js +++ b/exercises/static/exercises/follow_person/react-components/SpecificFollowPerson.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 (
); + } -ImgCanvas.propTypes = { +SpecificFollowPerson.propTypes = { context: PropTypes.any, }; +export default SpecificFollowPerson; \ No newline at end of file diff --git a/exercises/static/exercises/follow_person/react-components/TeleopLogic.js b/exercises/static/exercises/follow_person/react-components/TeleopLogic.js deleted file mode 100644 index fcdf2fb9f..000000000 --- a/exercises/static/exercises/follow_person/react-components/TeleopLogic.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useContext, useEffect, useState } from "react"; -import PropTypes from "prop-types"; - -const PersonTeleop = () => { - const [disabled, setDisabled] = useState(true); - - 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 true; -}; -PersonTeleop.propTypes = { - context: PropTypes.any, -}; -export default PersonTeleop; diff --git a/exercises/templates/exercises/follow_person/exercise.html b/exercises/templates/exercises/follow_person/exercise.html index f29d7a65f..0e525315a 100644 --- a/exercises/templates/exercises/follow_person/exercise.html +++ b/exercises/templates/exercises/follow_person/exercise.html @@ -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 %}