Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New exercise] Added Real Follow Person exercise #2129

Open
wants to merge 18 commits into
base: old_manager
Choose a base branch
from
Prev Previous commit
Next Next commit
update to new frontend
lucia committed Jul 5, 2023
commit 23ee6069d4aeef4f0017d34fb004a18b773013d7
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import React, { useEffect, useState } from "react";

import MenuItem from "@mui/material/MenuItem";
import LandscapeIcon from "@mui/icons-material/Landscape";

import { FormControl, InputLabel, Select, Box } from "@mui/material";

const serverBase = `${document.location.protocol}//${document.location.hostname}:8000`;
const exerciseConfig = JSON.parse(
document.getElementById("exercise-config").textContent
);
const exerciseId = exerciseConfig.exercise_id;

export default function MapSelector(props) {
const changeConfig = (circuitPath) => {
const config = JSON.parse(
document.getElementById("exercise-config").textContent
);
config.application.params = { circuit: circuitPath };
config.launch[
"0"
].launch_file = `$EXERCISE_FOLDER/launch/simple_line_follower_ros_headless_${circuitPath}.launch`;
return config;
};

const handleCircuitChange = (e) => {
const config = e;
console.log(JSON.stringify(config));
config['exercise_id'] = exerciseId;
config.height = window.innerHeight / 2;
config.width = window.innerWidth / 2;
window.RoboticsExerciseComponents.commsManager.terminate().then(() => {
window.RoboticsExerciseComponents.commsManager.launch(config);
});
};

const [disabled, setDisabled] = useState(true);
const [circuitOptions, setCircuitOptions] = useState([]);

useEffect(() => {
const callback = (message) => {
if (message.data.state === "ready") {
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 mapsAvailableURL = `${serverBase}/exercises/exercise/${exerciseId}/launch_files`;
fetch(mapsAvailableURL)
.then((response) => response.json())
.then((data) => {
const rosVersionURL = `${serverBase}/exercises/ros_version/`;
let ros_version = 1;
fetch(rosVersionURL)
.then((res) => res.json())
.then((msg) => {
ros_version = msg.version;
// If returns no version, assume 1
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}`];
setCircuitOptions(availableConfigs[`ROS${ros_version}`]);
})
.catch((error) => {
const availableConfigs = {};
availableConfigs[`ROS${ros_version}`] = config[`ROS${ros_version}`];
setCircuitOptions(availableConfigs[`ROS${ros_version}`]);
})
})
.catch((error) => {
console.log("Error fetching circuit options:", error);
});
}, []);

return (
<Box sx={{marginLeft: "20px"}}>
<FormControl>
<InputLabel id={"circuit-selector-label"}>
<LandscapeIcon></LandscapeIcon>
</InputLabel>
<Select
disabled={disabled}
defaultValue={"default"}
labelId="circuit-selector-label"
id={"circuit-selector"}
label={"Circuit"}
onChange={(e) => {
handleCircuitChange(e.target.value);
}}
>
{circuitOptions.map((option) => (
<MenuItem key={option.launch["0"].name} value={option}>
{option.launch["0"].name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from "react";
import {Fragment} from "react";

import "./css/RealFollowPersonRR.css";

const RealFollowPersonRR = (props) => {
return (
<Fragment>
{props.children}
</Fragment>
);
};

export default RealFollowPersonRR;

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
* {
box-sizing: border-box;
}

body, html {
width: 100%; height: 100%;
}

#exercise-container {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}

#exercise-container #content {
width: 100%;
height: 100%;
overflow: hidden;
}

#exercise-container #content #content-exercise {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,35 @@
{% extends "react_frontend/exercise_base.html" %}
{% load react_component %}

{% block react-content %}
{% react_component components/templates/RealFollowPersonReactRAM %} {% end_react_component %}
{% block exercise_header %}
{% endblock %}

{% block react-content %}
{% react_component exercise/real_follow_person_newmanager/RealFollowPersonRR %}

{% react_component components/wrappers/MaterialBox id="exercise-container" %}
{% react_component components/layout_components/MainAppBar exerciseName="Real Follow Person RR" %}
{% react_component exercise/real_follow_person_newmanager/MapSelector %} {% end_react_component %}
{% end_react_component %}
{% react_component components/wrappers/MaterialBox id="content" %}
{% react_component components/wrappers/MaterialBox id="content-exercise" %}
{% react_component components/layout_components/ExerciseControl %}{% end_react_component %}
{% react_component components/wrappers/FlexContainer row %}
{% react_component components/wrappers/FlexContainer%}
{% react_component components/editors/AceEditorRobot %}{% end_react_component %}
{% react_component components/visualizers/ConsoleViewer%}{% end_react_component %}
{% end_react_component%}
{% react_component components/wrappers/FlexContainer%}
{% react_component exercise/real_follow_person_newmanager/ImgCanvas %}{% end_react_component %}
{% react_component components/visualizers/GazeboViewer%}{% end_react_component %}
{% end_react_component %}
{% end_react_component %}
{% end_react_component %}
{% react_component components/views/TheoryView url="https://jderobot.github.io/RoboticsAcademy/exercises/MobileRobots/real_follow_person/" %}{% end_react_component %}
{% react_component components/views/ForumView %}{% end_react_component %}
{% react_component components/message_system/Loading %}{% end_react_component %}
{% react_component components/message_system/Alert %}{% end_react_component %}
{% end_react_component %}
{% end_react_component %}
{% end_react_component %}
{% endblock %}