Skip to content

Commit

Permalink
Merge pull request #2775 from JdeRobot/update-obst-avoidance-frontend
Browse files Browse the repository at this point in the history 
Update obstacle avoidance frontend
  • Loading branch information
@javizqh
javizqh authored Oct 14, 2024
2 parents de7b30f + 43308fb commit f4ae5a7
Show file tree
Hide file tree
Showing 7 changed files with 274 additions and 236 deletions.
7 changes: 2 additions & 5 deletions exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
from console_interfaces.general.console import start_console
from lap import Lap
from map import Map
from HAL import getLaserData
from HAL import getLaserData, getPose3d

# Graphical User Interface Class

Expand All @@ -15,7 +15,7 @@ def __init__(self, host="ws://127.0.0.1:2303"):

# Payload vars
self.payload = {'lap': '', 'map': ''}
self.map = Map(getLaserData)
self.map = Map(getLaserData, getPose3d)
self.lap = Lap(self.map)

self.start()
Expand Down Expand Up @@ -56,9 +56,6 @@ def reset_gui(self):
# Redirect the console
start_console()

def showImage(image):
gui.showImage(image)

def showForces(vec1, vec2, vec3):
gui.showForces(vec1, vec2, vec3)

Expand Down
11 changes: 9 additions & 2 deletions exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/map.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
from hal_interfaces.general.odometry import Pose3d

class Map:
def __init__(self, laser_object):
def __init__(self, laser_object, pose_callback):
# Car direction
self.carx = 2.0
self.cary = 0.0
Expand Down Expand Up @@ -33,6 +33,7 @@ def __init__(self, laser_object):
self.payload = {}

self.laser_callback = laser_object
self.pose_callback = pose_callback

def setCar(self, newx, newy):
self.carx = newx
Expand All @@ -52,6 +53,7 @@ def setTargetPos(self, newx, newy):

# Get the JSON data as string
def get_json_data(self):
self.payload["pose"] = self.setPose(self.pose_callback())
self.payload["target"] = self.setTarget(self.targetx, self.targety)
self.payload["car"] = self.setArrow(self.carx, self.cary)
self.payload["obstacle"] = self.setArrow(self.obsx, self.obsy)
Expand Down Expand Up @@ -79,6 +81,7 @@ def RTz(self, angle, tx, ty, tz):
def getNextTarget(self):
for target in self.targets:
if target.isReached() == False:
self.setTargetPos(target.pose.x, target.pose.y)
return target
return self.resetTargets()

Expand All @@ -92,7 +95,11 @@ def resetTargets(self):
def reset(self):
for target in self.targets:
target.setReached(False)


# Interpret the Target values
def setPose(self, pose):
return [pose.x, pose.y, pose.yaw]

# Interpret the Target values
def setTarget(self, x, y):
return [x, y]
Expand Down
71 changes: 52 additions & 19 deletions ...tic/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import * as React from "react";
import PropTypes from "prop-types";
import { paintEvent } from "./helpers/map";

import F1Car from "../resources/images/f1-car.svg";
import Arrow from "../resources/images/arrow.svg";
import "./css/GUICanvas.css";

function SpecificObstacleAvoidance(props) {
const guiCanvasRef = React.useRef();
const [image, setImage] = React.useState(
"https://via.placeholder.com/800x600.png?text=No%20image%20received%20from%20exercise"
);
const meter = 73; // 1m = 73px

const [laser, setLaser] = React.useState([])
const [maxRange, setMaxRange] = React.useState([])
const [carForce, setCarForce] = React.useState([2 * meter, 0])
const [avgForce, setAvgForce] = React.useState([2 * meter, 0])
const [obsForce, setObsForce] = React.useState([2 * meter, -Math.PI / 2])
const [targetPose, setTargetPose] = React.useState(null)

React.useEffect(() => {
console.log("TestShowScreen subscribing to ['update'] events");
Expand All @@ -16,13 +22,36 @@ function SpecificObstacleAvoidance(props) {
const data = message.data.update;
if(data.map){
const dataToDraw = JSON.parse(data.map)
paintEvent(dataToDraw.target, dataToDraw.car, dataToDraw.obstacle, dataToDraw.average, dataToDraw.laser, dataToDraw.max_range)

setLaser(dataToDraw.laser)
setMaxRange(dataToDraw.max_range)
var carForceDist = getDist(dataToDraw.car[0], dataToDraw.car[1])
setCarForce([carForceDist * meter, getAng(dataToDraw.car[0], dataToDraw.car[1])])
var avgForceDist = getDist(dataToDraw.average[0], dataToDraw.average[1])
setAvgForce([avgForceDist * meter, getAng(dataToDraw.average[0], dataToDraw.average[1])])
var obsForceDist = getDist(dataToDraw.obstacle[0], dataToDraw.obstacle[1])
setObsForce([obsForceDist * meter, getAng(dataToDraw.obstacle[0], dataToDraw.obstacle[1])])
var targetDist = getDist(dataToDraw.pose[0] - dataToDraw.target[0], dataToDraw.pose[1] - dataToDraw.target[1])
var targetAng = getAng(dataToDraw.pose[0] - dataToDraw.target[0], dataToDraw.pose[1] - dataToDraw.target[1])
setTargetPose([targetDist*meter, targetAng - dataToDraw.pose[2] - Math.PI])
}

// Send the ACK of the msg
window.RoboticsExerciseComponents.commsManager.send("gui", "ack");
};

const getDist = (x,y) => {
return Math.sqrt(Math.pow(x,2) + Math.pow(y,2))
}

const getAng = (x,y) => {
var ang = Math.PI / 2;
if(x != 0){
ang = Math.atan2(y, x);
}
return ang;
}

window.RoboticsExerciseComponents.commsManager.subscribe(
[window.RoboticsExerciseComponents.commsManager.events.UPDATE],
callback
Expand All @@ -39,19 +68,23 @@ function SpecificObstacleAvoidance(props) {

return (
<div style={{display: "flex", width: "100%",
height: "100%", backgroundColor: "#363233"}}>
<canvas
ref={guiCanvasRef}
id="local-map"

style={{
backgroundColor: "#363233",
marginTop: "5px",
width: "50%",
height: "100%",
margin: "auto"
}}
/>
height: "100%", backgroundColor: "#363233", position:"relative", overflow:"hidden"}}>
<img src={F1Car} id="f1-car"/>
{laser.map(element => {
var ang = -element[1]
var length = (element[0] / maxRange)*100;
return (
<hr className="laser-beam" style={{rotate: "z "+ ang +"rad", width: "calc("+length + "%)"}}/>
)})
}
<img className="arrow green" src={Arrow} style={{height: carForce[0], rotate: "z "+ -carForce[1] +"rad"}}/>
<img className="arrow red" src={Arrow} style={{height: obsForce[0], rotate: "z "+ -obsForce[1] +"rad"}}/>
<img className="arrow" src={Arrow} style={{height: avgForce[0], rotate: "z "+ -avgForce[1] +"rad", zIndex: "6"}}/>
{targetPose &&
<div className="target-container" style={{height: targetPose[0], rotate: "z "+ -targetPose[1] +"rad"}}>
<div id="target"/>
</div>
}
</div>
);
}
Expand Down
77 changes: 77 additions & 0 deletions exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
#f1-car {
position: absolute;
width: 61px;
height: 146px;
bottom: 54px;
left: calc(50% - 30.5px);
z-index: 4;
}

.laser-beam {
position: absolute;
background: repeating-linear-gradient(
to right,
rgb(112, 138, 255),
rgb(112, 138, 255) 73px,
rgb(100, 198, 255) 73px,
rgb(100, 198, 255) 146px
);
background-size: 100% 1px;
bottom: 180px;
left: 50%;
transform-origin: 0% 0%;
z-index: 3;
}

.arrow {
position: absolute;
z-index: 5;
width: 36px;
bottom: 190px;
left: calc(50% - 18px);
transform-origin: center bottom;
}

.green {
filter: invert(82%) sepia(13%) saturate(6762%) hue-rotate(39deg) brightness(105%) contrast(107%);
}

.red {
filter: invert(13%) sepia(87%) saturate(6390%) hue-rotate(343deg) brightness(91%) contrast(89%);
}

.target-container {
position: absolute;
z-index: 4;
width: 40px;
bottom: 190px;
left: calc(50% - 20px);
transform-origin: center bottom;
}

#target {
position: relative;
top: 0;
left: 0;
z-index: 4;
width: 40px;
height: 40px;
}

#target::before,
#target::after {
position: absolute;
content: '';
width: 100%;
height: 6px; /* cross thickness */
border-radius: 6px;
background-color: yellow;
}

#target::before {
transform: rotate(45deg);
}

#target::after {
transform: rotate(-45deg);
}
Loading

0 comments on commit f4ae5a7

Please sign in to comment.