Skip to content

Commit e8bc6c4

Browse files
javizqhjavizqh
committed
Update drones frontend
1 parent dbcf021 commit e8bc6c4

File tree

14 files changed

+133
-344
lines changed

14 files changed

+133
-344
lines changed

‎exercises/static/exercises/drone_gymkhana/react-components/WebGUI.js‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useState, useEffect} from "react";
2-
import { drawImage, drawLeftImage } from "./helpers/showImagesDroneGymkhana";
3-
import noImage from "../../assets/img/noImage.png";
4-
import { events } from "jderobot-commsmanager";
1+
import { useState, useEffect } from "react";
2+
import { events, states } from "jderobot-commsmanager";
53
import { useExercise } from "Contexts/ExerciseContext";
4+
import WebGUIImage from "Components/exercise/WebGUIImage";
5+
import WebGUIContainer from "Components/exercise/WebGUIContainer";
66

7-
import "./css/GUICanvas.css";
87
function WebGUI() {
8+
const [rightImage, setRightImage] = useState(undefined);
9+
const [leftImage, setLeftImage] = useState(undefined);
910
const exerciseContext = useExercise();
1011
const [manager, setManager] = useState(exerciseContext.manager);
1112

@@ -18,48 +19,47 @@ function WebGUI() {
1819
return;
1920
}
2021

21-
const callback = (message) => {
22-
if (message.data.update.image_right) {
23-
console.log("image_right");
24-
drawImage(message.data.update);
22+
const updateCallback = (message) => {
23+
const update = message.data.update;
24+
let image;
25+
if (update.image_right) {
26+
image = JSON.parse(update.image_right);
27+
if (image.image_right != "" && image.shape_right instanceof Array) {
28+
setRightImage(`data:image/png;base64,${image.image_right}`);
29+
}
2530
}
26-
if (message.data.update.image_left) {
27-
console.log("image_left");
28-
drawLeftImage(message.data.update);
31+
if (update.image_left) {
32+
image = JSON.parse(update.image_left);
33+
if (image.image_left != "" && image.shape_left instanceof Array) {
34+
setLeftImage(`data:image/png;base64,${image.image_left}`);
35+
}
2936
}
3037

3138
manager.send("gui", "ack");
3239
};
3340

34-
manager.subscribe(events.UPDATE, callback);
41+
const stateCallback = (message) => {
42+
if (message.data.state === states.TOOLS_READY) {
43+
setLeftImage();
44+
setRightImage();
45+
}
46+
};
47+
48+
49+
manager.subscribe(events.UPDATE, updateCallback);
50+
manager.subscribe(events.STATE_CHANGED, stateCallback);
3551

3652
return () => {
37-
manager.unsubscribe(events.UPDATE, callback);
53+
manager.unsubscribe(events.UPDATE, updateCallback);
54+
manager.unsubscribe(events.STATE_CHANGED, stateCallback);
3855
};
3956
}, [manager]);
4057

4158
return (
42-
<div
43-
style={{
44-
display: "flex",
45-
width: "100%",
46-
height: "100%",
47-
position: "relative",
48-
}}
49-
>
50-
<img
51-
className="image"
52-
id="gui_canvas_left"
53-
style={{ left: "0" }}
54-
src={noImage}
55-
/>
56-
<img
57-
className="image"
58-
id="gui_canvas_right"
59-
style={{ left: "50%" }}
60-
src={noImage}
61-
/>
62-
</div>
59+
<WebGUIContainer>
60+
<WebGUIImage id="left_img" style={{ left: "0" }} src={leftImage} />
61+
<WebGUIImage id="right_img" style={{ left: "50%" }} src={rightImage} />
62+
</WebGUIContainer>
6363
);
6464
}
6565

‎exercises/static/exercises/drone_gymkhana/react-components/css/DroneGymkhanaRR.css‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎exercises/static/exercises/drone_gymkhana/react-components/css/GUICanvas.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/static/exercises/drone_gymkhana/react-components/helpers/showImagesDroneGymkhana.js‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎exercises/static/exercises/follow_road/react-components/WebGUI.js‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useState, useEffect} from "react";
2-
import { events } from "jderobot-commsmanager";
1+
import { useState, useEffect } from "react";
2+
import { events, states } from "jderobot-commsmanager";
33
import { useExercise } from "Contexts/ExerciseContext";
4-
import { drawImage, drawLeftImage } from "./helpers/showImagesFollowRoad";
5-
import noImage from "../../assets/img/noImage.png";
4+
import WebGUIImage from "Components/exercise/WebGUIImage";
5+
import WebGUIContainer from "Components/exercise/WebGUIContainer";
66

7-
import "./css/GUICanvas.css"
87
function WebGUI() {
8+
const [rightImage, setRightImage] = useState(undefined);
9+
const [leftImage, setLeftImage] = useState(undefined);
910
const exerciseContext = useExercise();
1011
const [manager, setManager] = useState(exerciseContext.manager);
1112

@@ -18,36 +19,47 @@ function WebGUI() {
1819
return;
1920
}
2021

21-
const callback = (message) => {
22-
console.log(message);
23-
24-
if (message.data.update.image_right) {
25-
console.log("image_right");
26-
drawImage(message.data.update);
22+
const updateCallback = (message) => {
23+
const update = message.data.update;
24+
let image;
25+
if (update.image_right) {
26+
image = JSON.parse(update.image_right);
27+
if (image.image_right != "" && image.shape_right instanceof Array) {
28+
setRightImage(`data:image/png;base64,${image.image_right}`);
29+
}
2730
}
28-
if (message.data.update.image_left) {
29-
console.log("image_left");
30-
drawLeftImage(message.data.update);
31+
if (update.image_left) {
32+
image = JSON.parse(update.image_left);
33+
if (image.image_left != "" && image.shape_left instanceof Array) {
34+
setLeftImage(`data:image/png;base64,${image.image_left}`);
35+
}
3136
}
3237

33-
// Send the ACK of the msg
3438
manager.send("gui", "ack");
3539
};
3640

37-
manager.subscribe(events.UPDATE, callback);
41+
const stateCallback = (message) => {
42+
if (message.data.state === states.TOOLS_READY) {
43+
setLeftImage();
44+
setRightImage();
45+
}
46+
};
47+
48+
49+
manager.subscribe(events.UPDATE, updateCallback);
50+
manager.subscribe(events.STATE_CHANGED, stateCallback);
3851

3952
return () => {
40-
manager.unsubscribe(events.UPDATE, callback);
53+
manager.unsubscribe(events.UPDATE, updateCallback);
54+
manager.unsubscribe(events.STATE_CHANGED, stateCallback);
4155
};
4256
}, [manager]);
4357

4458
return (
45-
<div style={{display: "flex", width: "100%", height: "100%", position:"relative"}}>
46-
<img className="image" id="gui_canvas_left" style={{left: "0"}}
47-
src={noImage}/>
48-
<img className="image" id="gui_canvas_right" style={{left: "50%"}}
49-
src={noImage}/>
50-
</div>
59+
<WebGUIContainer>
60+
<WebGUIImage id="left_img" style={{ left: "0" }} src={leftImage} />
61+
<WebGUIImage id="right_img" style={{ left: "50%" }} src={rightImage} />
62+
</WebGUIContainer>
5163
);
5264
}
5365

‎exercises/static/exercises/follow_road/react-components/css/GUICanvas.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/static/exercises/follow_road/react-components/css/followRoadRR.css‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎exercises/static/exercises/follow_road/react-components/helpers/showImagesFollowRoad.js‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎exercises/static/exercises/labyrinth_escape/react-components/WebGUI.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from "react";
2-
import { events } from "jderobot-commsmanager";
2+
import { events, states } from "jderobot-commsmanager";
33
import { useExercise } from "Contexts/ExerciseContext";
44
import WebGUIImage from "Components/exercise/WebGUIImage";
55
import WebGUIContainer from "Components/exercise/WebGUIContainer";
@@ -19,7 +19,7 @@ function WebGUI() {
1919
return;
2020
}
2121

22-
const callback = (message) => {
22+
const updateCallback = (message) => {
2323
const update = message.data.update;
2424
let image;
2525
if (update.image_right) {
@@ -38,10 +38,20 @@ function WebGUI() {
3838
manager.send("gui", "ack");
3939
};
4040

41-
manager.subscribe(events.UPDATE, callback);
41+
const stateCallback = (message) => {
42+
if (message.data.state === states.TOOLS_READY) {
43+
setLeftImage();
44+
setRightImage();
45+
}
46+
};
47+
48+
49+
manager.subscribe(events.UPDATE, updateCallback);
50+
manager.subscribe(events.STATE_CHANGED, stateCallback);
4251

4352
return () => {
44-
manager.unsubscribe(events.UPDATE, callback);
53+
manager.unsubscribe(events.UPDATE, updateCallback);
54+
manager.unsubscribe(events.STATE_CHANGED, stateCallback);
4555
};
4656
}, [manager]);
4757

0 commit comments

Comments
 (0)