Pick and place exercise

database/exercises/db.sql

@@ -100,6 +100,7 @@ COPY public.exercises (id, exercise_id, name, description, tags, status, templat
 14	laser_mapping	Laser Mapping	Build a map based on sensor readings	{"tags": "ROS2"}	ACTIVE	RoboticsAcademy/exercises/static/exercises/laser_mapping/python_template/
 15	basic_computer_vision	Basic Computer Vision	Basic Computer Vision exercise using React and RAM	{"tags": "ROS2"}	ACTIVE	RoboticsAcademy/exercises/static/exercises/basic_computer_vision/python_template/
 16	follow_road	Follow Road	Follow Road exercise	{"tags": "ROS2"}	ACTIVE	RoboticsAcademy/exercises/static/exercises/follow_road/python_template/
+17	pick_place	Pick and Place	Pick and Place exercise	{"tags": "ROS2"}	PROTOTYPE	RoboticsAcademy/exercises/static/exercises/pick_place/python_template/
 \.
 -- 16	rescue_people_classic	Rescue People Old	Rescue People exercise With Gazebo Classic	{"tags": "ROS2"}	ACTIVE	RoboticsAcademy/exercises/static/exercises/rescue_people_classic/python_template/
 
@@ -140,6 +141,7 @@ COPY public.exercises_universes (id, exercise_id, universe_id) FROM stdin;
 29	14	30
 30	16	32
 31	14	33
+32	17	34
 \.
 -- 30  16  3
 

exercises/static/exercises/pick_place/python_template/ros2_humble/GUI.py

@@ -0,0 +1,81 @@
+import json
+import cv2
+import base64
+import numpy as np
+import threading
+
+from gui_interfaces.general.measuring_threading_gui import MeasuringThreadingGUI
+from console_interfaces.general.console import start_console
+from HAL import getPose3d
+
+# Graphical User Interface Class
+
+class GUI(MeasuringThreadingGUI):
+
+    def __init__(self, host="ws://127.0.0.1:2303"):
+        super().__init__(host)
+
+        self.image_to_be_shown = None
+        self.image_to_be_shown_updated = False
+        self.image_show_lock = threading.Lock()
+
+        # Payload vars
+        self.payload = {'map': '', 'user': ''}
+        self.init_coords = (171, 63)
+        self.start_coords = (201, 85.5)
+
+        self.start()
+
+    # Prepares and sends a map to the websocket server
+    def update_gui(self):
+
+        if np.any(self.left_image):
+            _, encoded_left_image = cv2.imencode(".JPEG", self.left_image)
+            b64_left = base64.b64encode(encoded_left_image).decode("utf-8")
+            shape_left = self.left_image.shape
+        else:
+            b64_left = None
+            shape_left = 0
+
+        if np.any(self.right_image):
+            _, encoded_right_image = cv2.imencode(".JPEG", self.right_image)
+            b64_right = base64.b64encode(encoded_right_image).decode("utf-8")
+            shape_right = self.right_image.shape
+        else:
+            b64_right = None
+            shape_right = 0
+
+        payload_left = {
+            "image_left": b64_left,
+            "shape_left": shape_left,
+        }
+        payload_right = {
+            "image_right": b64_right,
+            "shape_right": shape_right,
+        }
+        self.msg["image_left"] = json.dumps(payload_left)
+        self.msg["image_right"] = json.dumps(payload_right)
+        message = json.dumps(self.msg)
+        self.send_to_client(message)
+
+    # Functions to set the next image to be sent
+    def setLeftImage(self, image):
+        with self.image_lock:
+            self.left_image = image
+
+    def setRightImage(self, image):
+        with self.image_lock:
+            self.right_image = image
+
+host = "ws://127.0.0.1:2303"
+gui = GUI(host)
+
+# Redirect the console
+start_console()
+
+# Expose the user functions
+def showImage(image):
+    gui.setRightImage(image)
+
+def showLeftImage(image):
+    gui.setLeftImage(image)

exercises/static/exercises/pick_place/python_template/ros2_humble/HAL.py

@@ -0,0 +1 @@
+print("HAL initializing", flush=True)

exercises/static/exercises/pick_place/react-components/PickPlace.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import {Fragment} from "react";
+
+import "./css/PickPlace.css";
+
+const PickPlace = (props) => {
+  return (
+    <Fragment>
+    {props.children}
+    </Fragment>
+  );
+};
+
+export default PickPlace;

exercises/static/exercises/pick_place/react-components/SpecificPickPlace.js

@@ -0,0 +1,64 @@
+import * as React from "react";
+import noImage from "../../assets/img/noImage.png";
+
+import "./css/GUICanvas.css";
+
+function SpecificPickPlace() {
+  React.useEffect(() => {
+    console.log("TestShowScreen subscribing to ['update'] events");
+    const callback = (message) => {
+      console.log(message);
+
+      if (message.data.update.image_right) {
+        console.log("image_right");
+        drawImage(message.data.update);
+      }
+      if (message.data.update.image_left) {
+        console.log("image_left");
+        drawLeftImage(message.data.update);
+      }
+
+      // Send the ACK of the msg
+      window.RoboticsExerciseComponents.commsManager.send("gui", "ack");
+    };
+
+    window.RoboticsExerciseComponents.commsManager.subscribe(
+      [window.RoboticsExerciseComponents.commsManager.events.UPDATE],
+      callback
+    );
+
+    return () => {
+      console.log("TestShowScreen unsubscribing from ['state-changed'] events");
+      window.RoboticsExerciseComponents.commsManager.unsubscribe(
+        [window.RoboticsExerciseComponents.commsManager.events.UPDATE],
+        callback
+      );
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        position: "relative",
+      }}
+    >
+      <img
+        className="image"
+        id="gui_canvas_left"
+        style={{ left: "0" }}
+        src={noImage}
+      />
+      <img
+        className="image"
+        id="gui_canvas_right"
+        style={{ left: "50%" }}
+        src={noImage}
+      />
+    </div>
+  );
+}
+
+export default SpecificPickPlace;

exercises/static/exercises/pick_place/react-components/css/GUICanvas.css

@@ -0,0 +1,6 @@
+.image {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  border: 4px black solid;
+}

exercises/static/exercises/pick_place/react-components/css/PickPlace.css

@@ -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%;
+}