From 4af562d206a26b209f5b73d531a161f2eca4ed21 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Thu, 10 Oct 2024 21:52:57 +0200 Subject: [PATCH 1/8] Remove deprecated functions --- .../python_template/ros2_humble/GUI.py | 3 --- 1 file changed, 3 deletions(-) diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py index 385eb9861..ca4fdae2c 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py @@ -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) From 46eb464791308aa407a3fbedb34dd104acdc9212 Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Thu, 10 Oct 2024 23:01:45 +0200 Subject: [PATCH 2/8] Add f1 svg --- .../resources/images/f1-car-svgrepo-com.svg | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg new file mode 100644 index 000000000..0e1207d24 --- /dev/null +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg @@ -0,0 +1,111 @@ + + + + + + From 9e2183ca38a5b29ac560981470f9f261b421fccc Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 11 Oct 2024 09:34:29 +0200 Subject: [PATCH 3/8] Update svg --- .../resources/images/{f1-car-svgrepo-com.svg => f1-car.svg} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/{f1-car-svgrepo-com.svg => f1-car.svg} (100%) diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg similarity index 100% rename from exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car-svgrepo-com.svg rename to exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg From 619ef2d057cdef33436c82b4b66f24e56e6251bd Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 11 Oct 2024 11:47:50 +0200 Subject: [PATCH 4/8] Adding svg car --- .../SpecificObstacleAvoidance.js | 36 ++++++----- .../react-components/css/GUICanvas.css | 7 +++ .../resources/images/f1-car.svg | 60 +++++++++---------- 3 files changed, 54 insertions(+), 49 deletions(-) create mode 100644 exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js index 936930162..6b0045490 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js @@ -2,12 +2,11 @@ import * as React from "react"; import PropTypes from "prop-types"; import { paintEvent } from "./helpers/map"; +import F1Car from "../resources/images/f1-car.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" - ); React.useEffect(() => { console.log("TestShowScreen subscribing to ['update'] events"); @@ -16,6 +15,10 @@ function SpecificObstacleAvoidance(props) { const data = message.data.update; if(data.map){ const dataToDraw = JSON.parse(data.map) + // TODO: for lasers draw vertical from the center then rotate them accordingly + // TODO: circular lasers and also circular marks every meter + // TODO: For the arrows use the same as the lasers + paintEvent(dataToDraw.target, dataToDraw.car, dataToDraw.obstacle, dataToDraw.average, dataToDraw.laser, dataToDraw.max_range) } @@ -39,19 +42,20 @@ function SpecificObstacleAvoidance(props) { return (
- + height: "100%", backgroundColor: "#363233", position:"relative"}}> + +
); } diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css new file mode 100644 index 000000000..22dda2837 --- /dev/null +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css @@ -0,0 +1,7 @@ +#f1-car { + position: absolute; + width: 100px; + height: 100px; + bottom: 10px; + left: calc(50% - 50px); +} \ No newline at end of file diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg index 0e1207d24..6f52a5d37 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/f1-car.svg @@ -3,13 +3,13 @@ @@ -42,34 +42,28 @@ id="path1" style="stroke-width:0.46855;stroke-dasharray:none" inkscape:label="path1" - d="M 188.46966 0.031114648 C 186.99485 -0.054416344 185.4861 0.03987438 183.9681 0.32487354 C 181.73513 0.74387228 179.59191 1.6167694 177.70491 2.8817655 C 172.57091 6.3257553 169.68178 11.839567 169.70478 17.765549 L 169.7057 18.759388 L 124.56292 18.759388 C 119.05492 18.759388 114.59067 23.223735 114.59067 28.730717 L 114.59067 47.115814 C 114.59067 52.623796 119.05592 57.088059 124.56292 57.088059 L 169.74505 57.088059 C 169.74505 57.088059 169.76335 78.631375 169.76335 78.932372 L 152.92026 85.10863 L 152.92026 73.216428 C 152.92026 67.072446 147.93983 62.092026 141.79586 62.092026 L 123.04379 62.092026 C 116.89982 62.092026 111.92031 67.072446 111.92031 73.216428 L 111.92031 115.30174 C 111.92031 121.44571 116.89982 126.42614 123.04379 126.42614 L 141.79586 126.42614 C 147.93883 126.42614 152.92026 121.44571 152.92026 115.30174 L 152.92026 110.5778 L 167.7409 118.23932 C 166.4149 130.74429 164.4323 143.04519 161.8163 155.08913 L 156.85992 155.08913 C 143.38498 155.08913 132.1319 166.1118 131.8529 179.58277 L 131.77603 183.31012 C 130.27603 206.45706 132.26629 217.37192 137.15429 236.70286 C 138.26226 241.08683 139.60669 245.45957 141.15069 249.70054 L 158.56116 297.51735 L 151.73241 305.45433 L 151.73241 302.21567 C 151.73241 296.07167 146.75201 291.09218 140.60801 291.09218 L 121.04422 291.09218 C 114.90022 291.09218 109.91982 296.07167 109.91982 302.21567 L 109.91982 344.30189 C 109.91982 350.44586 114.90022 355.42629 121.04422 355.42629 L 140.60801 355.42629 C 146.75201 355.42629 151.73241 350.44586 151.73241 344.30189 L 151.73241 325.38418 L 163.66031 311.52261 L 164.28534 313.24032 C 167.04934 320.83029 173.36073 326.45108 180.9207 328.53408 L 180.9207 337.63786 L 167.16894 337.63786 C 161.66097 337.63786 157.19669 342.10305 157.19669 347.61102 L 157.19669 364.86867 C 157.19669 370.37664 161.66197 374.84183 167.16894 374.84183 L 207.67198 374.84183 C 213.17995 374.84183 217.64422 370.37664 217.64422 364.86867 L 217.64422 347.61102 C 217.64422 342.10305 213.17895 337.63786 207.67198 337.63786 L 193.92113 337.63786 L 193.92113 328.52768 C 201.4531 326.44268 207.74814 320.8429 210.51714 313.2879 L 211.1678 311.50979 L 223.10759 325.38693 L 223.10759 344.30372 C 223.10759 350.44769 228.08799 355.42812 234.23199 355.42812 L 253.79578 355.42812 C 259.93878 355.42812 264.92018 350.44769 264.92018 344.30372 L 264.92018 302.21841 C 264.92018 296.07244 259.93978 291.09218 253.79578 291.09218 L 234.2329 291.09218 C 228.08893 291.09218 223.10942 296.07167 223.10942 302.21567 L 223.10942 305.45433 L 216.29073 297.53017 L 233.57217 250.36859 C 235.15517 246.04962 236.53018 241.59614 237.65918 237.13114 C 242.62215 217.5092 244.63232 206.40707 243.00632 182.70613 L 242.94043 179.58277 C 242.65843 166.0768 231.43954 155.08913 217.93157 155.08913 L 213.0118 155.08913 C 210.3728 143.03919 208.36273 130.81878 207.00576 118.48184 L 221.92065 110.64827 L 221.92065 115.30174 C 221.92065 121.44571 226.90106 126.42614 233.04506 126.42614 L 251.79712 126.42614 C 257.94012 126.42614 262.92061 121.44571 262.92061 115.30174 L 262.92061 73.216428 C 262.92061 67.072446 257.94112 62.092026 251.79712 62.092026 L 233.04506 62.092026 C 226.90106 62.092026 221.92065 67.072446 221.92065 73.216428 L 221.92065 85.062873 L 204.87715 78.707249 C 204.87715 78.482249 204.965 57.089889 204.965 57.089889 L 250.278 57.089889 C 255.78597 57.089889 260.25024 52.624629 260.25024 47.117644 L 260.25024 28.730717 C 260.25024 23.222735 255.78497 18.759388 250.278 18.759388 L 205.13156 18.759388 L 205.1343 18.293583 C 205.1553 13.509598 203.46433 8.8036726 200.13033 5.3736828 C 197.01036 2.1636924 192.89409 0.28770762 188.46966 0.031114648 z M 187.42 13.000432 C 188.683 13.000432 189.86919 13.492782 190.76116 14.387779 C 191.65216 15.282779 192.1397 16.470777 192.1357 17.730774 L 191.87397 77.979715 C 191.76197 106.47263 194.91938 134.70201 201.25138 162.04692 C 197.08838 159.94792 192.39189 158.75883 187.42092 158.75883 C 182.44592 158.75883 177.74719 159.95041 173.58222 162.05241 C 179.78819 135.0965 182.88061 106.86893 182.76561 77.998018 L 182.7043 17.732604 C 182.7003 16.470607 183.18784 15.281779 184.07884 14.387779 C 184.97081 13.492782 186.157 13.000432 187.42 13.000432 z M 127.59019 31.758905 L 169.71943 31.758905 L 169.73224 44.089457 L 127.59019 44.089457 L 127.59019 31.758905 z M 205.07482 31.758905 L 247.24981 31.758905 L 247.24981 44.089457 L 205.02082 44.089457 L 205.07482 31.758905 z M 205.12515 92.67315 L 218.60877 97.701826 L 205.75293 104.45462 C 205.47893 100.53562 205.27015 96.608138 205.12515 92.67315 z M 169.52176 92.868074 C 169.38576 96.669062 169.19264 100.45401 168.94064 104.22401 L 156.33006 97.706402 L 169.52176 92.868074 z M 156.85901 168.08865 L 158.72406 168.08865 C 158.67306 168.28465 157.82265 171.54878 157.82265 171.54878 C 156.27665 177.45378 155.836 183.52473 156.514 189.5907 L 162.9163 246.84806 C 164.3133 259.34203 174.84703 268.76376 187.42 268.76376 C 199.99197 268.76376 210.52579 259.34203 211.92279 246.84806 L 218.32508 189.5907 C 219.00308 183.52473 218.56158 177.45384 217.01461 171.54787 C 217.01461 171.54787 216.16511 168.28565 216.11411 168.08865 L 217.92974 168.08865 C 224.41774 168.08865 229.80591 173.36723 229.94091 179.85823 L 230.02511 183.44831 C 231.54808 205.48222 229.77608 215.27578 225.05408 233.94372 C 224.03408 237.97472 222.79325 241.99824 221.36425 245.89724 L 206.51341 286.4259 L 168.35587 286.4259 L 153.36502 245.2539 C 151.97302 241.4249 150.75763 237.47624 149.75663 233.51727 C 145.10766 215.13133 143.35424 205.50486 144.75724 184.01295 L 144.84875 179.85273 C 144.98275 173.36676 150.37004 168.08865 156.85901 168.08865 z M 172.41176 214.75879 L 202.43007 214.75879 L 199.0038 245.40306 C 198.3438 251.31006 193.36389 255.76424 187.42092 255.76424 C 181.47792 255.76424 176.49803 251.31006 175.83803 245.40306 L 172.41176 214.75879 z M 170.19621 350.63738 L 204.64379 350.63738 L 204.64379 361.83957 L 170.19621 361.83957 L 170.19621 350.63738 z " /> + d="m 78.54984,0.03036681 c -1.47481,-0.08553099 -2.98356,0.0087597 -4.50156,0.29375889 -2.23297,0.41899874 -4.37619,1.2918959 -6.26319,2.556892 -5.134,3.4439898 -8.02313,8.9578013 -8.00013,14.8837833 l 9.2e-4,0.993839 H 14.6431 c -5.508,0 -9.97225,4.464347 -9.97225,9.971329 v 18.385097 c 0,5.507982 4.46525,9.972245 9.97225,9.972245 h 45.18213 c 0,0 0.0183,21.543316 0.0183,21.844313 L 43.00044,85.107882 V 73.21568 c 0,-6.143982 -4.98043,-11.124402 -11.1244,-11.124402 H 13.12397 c -6.14397,0 -11.12348,4.98042 -11.12348,11.124402 v 42.08531 c 0,6.14397 4.97951,11.1244 11.12348,11.1244 h 18.75207 c 6.14297,0 11.1244,-4.98043 11.1244,-11.1244 v -4.72394 l 14.82064,7.66152 c -1.326,12.50497 -3.3086,24.80587 -5.9246,36.84981 H 46.9401 c -13.47494,0 -24.72802,11.02267 -25.00702,24.49364 l -0.0769,3.72735 c -1.5,23.14694 0.49026,34.0618 5.37826,53.39274 1.10797,4.38397 2.4524,8.75671 3.9964,12.99768 l 17.41047,47.81681 -6.82875,7.93698 v -3.23866 c 0,-6.144 -4.9804,-11.12349 -11.1244,-11.12349 H 11.12437 c -6.144,0 -11.1244,4.97949 -11.1244,11.12349 v 42.08622 c 0,6.14397 4.9804,11.1244 11.1244,11.1244 h 19.56379 c 6.144,0 11.1244,-4.98043 11.1244,-11.1244 v -18.91771 l 11.9279,-13.86157 0.62503,1.71771 c 2.764,7.58997 9.07539,13.21076 16.63536,15.29376 v 9.10378 H 57.24909 c -5.50797,0 -9.97225,4.46519 -9.97225,9.97316 v 17.25765 c 0,5.50797 4.46528,9.97316 9.97225,9.97316 h 40.50304 c 5.50797,0 9.97224,-4.46519 9.97224,-9.97316 v -17.25765 c 0,-5.50797 -4.46527,-9.97316 -9.97224,-9.97316 H 84.00128 v -9.11018 c 7.53197,-2.085 13.82701,-7.68478 16.59601,-15.23978 l 0.65066,-1.77811 11.93979,13.87714 v 18.91679 c 0,6.14397 4.9804,11.1244 11.1244,11.1244 h 19.56379 c 6.143,0 11.1244,-4.98043 11.1244,-11.1244 v -42.08531 c 0,-6.14597 -4.9804,-11.12623 -11.1244,-11.12623 h -19.56285 c -6.14397,0 -11.12348,4.97949 -11.12348,11.12349 v 3.23866 l -6.81869,-7.92416 17.28144,-47.16158 c 1.583,-4.31897 2.95801,-8.77245 4.08701,-13.23745 4.96297,-19.62194 6.97314,-30.72407 5.34714,-54.42501 l -0.0659,-3.12336 c -0.282,-13.50597 -11.50089,-24.49364 -25.00886,-24.49364 h -4.91977 c -2.639,-12.04994 -4.64907,-24.27035 -6.00604,-36.60729 l 14.91489,-7.83357 v 4.65347 c 0,6.14397 4.98041,11.1244 11.12441,11.1244 h 18.75206 c 6.143,0 11.12349,-4.98043 11.12349,-11.1244 V 73.21568 c 0,-6.143982 -4.97949,-11.124402 -11.12349,-11.124402 h -18.75206 c -6.144,0 -11.12441,4.98042 -11.12441,11.124402 v 11.846445 l -17.0435,-6.355624 c 0,-0.225 0.0879,-21.61736 0.0879,-21.61736 h 45.313 c 5.50797,0 9.97224,-4.46526 9.97224,-9.972245 V 28.729969 c 0,-5.507982 -4.46527,-9.971329 -9.97224,-9.971329 H 95.21178 l 0.003,-0.465805 C 95.23578,13.50885 93.54481,8.8029248 90.21081,5.372935 87.09084,2.1629446 82.97457,0.28695978 78.55014,0.03036681 Z M 77.50018,12.999684 c 1.263,0 2.44919,0.49235 3.34116,1.387347 0.891,0.895 1.37854,2.082998 1.37454,3.342995 l -0.26173,60.248941 c -0.112,28.492913 3.04541,56.722293 9.37741,84.067203 -4.163,-2.099 -8.85949,-3.28809 -13.83046,-3.28809 -4.975,0 -9.67373,1.19158 -13.8387,3.29358 6.20597,-26.95591 9.29839,-55.18348 9.18339,-84.05439 l -0.0613,-60.265414 c -0.004,-1.261997 0.48354,-2.450825 1.37454,-3.344825 0.89197,-0.894997 2.07816,-1.387347 3.34116,-1.387347 z M 17.67037,31.758157 h 42.12924 l 0.0128,12.330552 H 17.67036 Z m 77.48463,0 h 42.17499 V 44.088709 H 95.101 Z m 0.0503,60.914245 13.48362,5.028676 -12.85584,6.752792 c -0.274,-3.919 -0.48278,-7.84648 -0.62778,-11.781468 z m -35.60339,0.194924 c -0.136,3.800988 -0.32912,7.585934 -0.58112,11.355934 L 46.41021,97.705654 Z M 46.93916,168.0879 h 1.86505 c -0.051,0.196 -0.90141,3.46013 -0.90141,3.46013 -1.546,5.905 -1.98665,11.97595 -1.30865,18.04192 l 6.4023,57.25736 c 1.397,12.49397 11.93073,21.9157 24.5037,21.9157 12.57197,0 23.10579,-9.42173 24.50279,-21.9157 l 6.40229,-57.25736 c 0.678,-6.06597 0.2365,-12.13686 -1.31047,-18.04283 0,0 -0.8495,-3.26222 -0.9005,-3.45922 h 1.81563 c 6.488,0 11.87617,5.27858 12.01117,11.76958 l 0.0842,3.59008 c 1.52297,22.03391 -0.24903,31.82747 -4.97103,50.49541 -1.02,4.031 -2.26083,8.05452 -3.68983,11.95352 L 96.59356,286.42515 H 58.43602 l -14.99085,-41.172 c -1.392,-3.829 -2.60739,-7.77766 -3.60839,-11.73663 -4.64897,-18.38594 -6.40239,-28.01241 -4.99939,-49.50432 l 0.0915,-4.16022 c 0.134,-6.48597 5.52129,-11.76408 12.01026,-11.76408 z m 15.55275,46.67014 h 30.01831 l -3.42627,30.64427 c -0.66,5.907 -5.63991,10.36118 -11.58288,10.36118 -5.943,0 -10.92289,-4.45418 -11.58289,-10.36118 z m -2.21555,135.87859 h 34.44758 v 11.20219 H 60.27636 Z" /> Date: Fri, 11 Oct 2024 21:11:36 +0200 Subject: [PATCH 5/8] Lasers done --- .../SpecificObstacleAvoidance.js | 17 +++++++++++---- .../react-components/css/GUICanvas.css | 21 +++++++++++++++++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js index 6b0045490..a1f7072d9 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js @@ -7,6 +7,8 @@ import "./css/GUICanvas.css"; function SpecificObstacleAvoidance(props) { const guiCanvasRef = React.useRef(); + const [laser, setLaser] = React.useState([]) + const [maxRange, setMaxRange] = React.useState([]) React.useEffect(() => { console.log("TestShowScreen subscribing to ['update'] events"); @@ -15,11 +17,11 @@ function SpecificObstacleAvoidance(props) { const data = message.data.update; if(data.map){ const dataToDraw = JSON.parse(data.map) - // TODO: for lasers draw vertical from the center then rotate them accordingly - // TODO: circular lasers and also circular marks every meter // TODO: For the arrows use the same as the lasers paintEvent(dataToDraw.target, dataToDraw.car, dataToDraw.obstacle, dataToDraw.average, dataToDraw.laser, dataToDraw.max_range) + setLaser(dataToDraw.laser) + setMaxRange(dataToDraw.max_range) } // Send the ACK of the msg @@ -42,7 +44,7 @@ function SpecificObstacleAvoidance(props) { return (
+ height: "100%", backgroundColor: "#363233", position:"relative", overflowY:"auto"}}> + {laser.map(element => { + var ang = -element[1] + var length = (element[0] / maxRange)*100; + return ( +
+ )}) + }
); } diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css index 22dda2837..75f6a547d 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css @@ -1,7 +1,24 @@ #f1-car { position: absolute; - width: 100px; + width: 50px; height: 100px; bottom: 10px; - left: calc(50% - 50px); + left: calc(50% - 25px); + 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: 90px; + left: 50%; + transform-origin: 0% 0%; + z-index: 3; } \ No newline at end of file From d85785f281953a1a2c3c27ece6a46d646ed427de Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Fri, 11 Oct 2024 22:36:10 +0200 Subject: [PATCH 6/8] Adding arrows --- .../SpecificObstacleAvoidance.js | 45 ++-- .../react-components/css/GUICanvas.css | 17 ++ .../react-components/helpers/map.js | 210 ------------------ .../resources/images/arrow.svg | 29 +++ 4 files changed, 74 insertions(+), 227 deletions(-) delete mode 100644 exercises/static/exercises/obstacle_avoidance_newmanager/react-components/helpers/map.js create mode 100644 exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/arrow.svg diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js index a1f7072d9..dead6ff61 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js @@ -1,14 +1,18 @@ 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 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]) React.useEffect(() => { console.log("TestShowScreen subscribing to ['update'] events"); @@ -17,17 +21,33 @@ function SpecificObstacleAvoidance(props) { const data = message.data.update; if(data.map){ const dataToDraw = JSON.parse(data.map) - // TODO: For the arrows use the same as the lasers - 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])]) } // 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 @@ -44,19 +64,7 @@ function SpecificObstacleAvoidance(props) { return (
- + height: "100%", backgroundColor: "#363233", position:"relative", overflow:"hidden"}}> {laser.map(element => { var ang = -element[1] @@ -65,6 +73,9 @@ function SpecificObstacleAvoidance(props) {
)}) } + + +
); } diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css index 75f6a547d..dbd2bf054 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css @@ -21,4 +21,21 @@ left: 50%; transform-origin: 0% 0%; z-index: 3; +} + +.arrow { + position: absolute; + z-index: 5; + width: 36px; + bottom: 100px; + 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%); } \ No newline at end of file diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/helpers/map.js b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/helpers/map.js deleted file mode 100644 index 7ef81af20..000000000 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/helpers/map.js +++ /dev/null @@ -1,210 +0,0 @@ - -export function paintEvent(target, car, obs, avg, laser, max_range) { - const mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - - ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); - - // Draw Car - drawCar(); - - // Draw Laser - drawLaser(laser, max_range); - - // Draw target - drawTarget(target[0], target[1]); - - // Draw Distance lines - drawBorders(); - - // Draw arrows - drawArrow(car[0], car[1], "#7CFC00"); - drawArrow(obs[0], obs[1], "#DC143C"); - drawArrow(avg[0], avg[1], "#000000"); -} - -function drawBorders() { - const mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - - const f1_center = [mapCanvas.width / 2, mapCanvas.height / 2]; - const d2 = 10; - const d5 = 55; - const scale = 5; - - ctx.lineWidth = 1; - ctx.strokeStyle = '#000000'; - ctx.stroke(); - - // Rectangle for 10m - ctx.strokeRect(f1_center[0] - (d2 * scale / 2), f1_center[1] - 5, d2 * scale, d2 * scale); - // Rectangle for 25m - ctx.strokeRect(f1_center[0] - (d5 * scale / 2), f1_center[1] - d5, d5 * scale, (d2 + 10) * scale); - - // Text 10m & 25m local-map canvas - ctx.font = "10px Comic Sans MS"; - ctx.fillStyle = "#FFFFFF"; - ctx.textAlign = "center"; - ctx.fillText("2.5 m", mapCanvas.width / 2 + 50, f1_center[1] - d2 + 5); - ctx.fillText("5 m", mapCanvas.width / 2 + 50, f1_center[1] - d5); -} - - - -function drawCar(){ - var mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - - let carsize = 60; - let tiresize = carsize / 5; - - ctx.beginPath(); - - // Connector - ctx.fillStyle = 'black'; - ctx.fillRect(135, 125, 24, 1); - - // Chassis - ctx.fillStyle = 'orange'; - ctx.fillRect(143, 120, 8, 12); - ctx.fillRect(140, 132, 15, 15); - - // Tires - ctx.fillStyle = 'black'; - ctx.fillRect(134, 121, 5, 8); - ctx.fillRect(155, 121, 5, 8); - ctx.fillRect(134, 139, 5, 8); - ctx.fillRect(155, 139, 5, 8); - - ctx.stroke(); - - ctx.closePath(); -} - -function drawLaser(laser, max_range){ - var mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - let py; - let px; - for (let d of laser){ - if (d[0] > max_range){ - py = 120 - max_range * Math.sin(d[1]); - px = 146.5 + max_range * Math.cos(d[1]); - } - else{ - py = 120 - d[0] * Math.sin(d[1]); - px = 146.5 + d[0] * Math.cos(d[1]); - } - - ctx.beginPath(); - - ctx.strokeStyle = "#6897BB"; - ctx.moveTo(146.5, 120); - ctx.lineTo(px, py); - ctx.stroke(); - - ctx.closePath(); - } -} - - -function drawArrow(posx, posy, color){ - var mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - - if(posx == 0 && posy == 0){ - return; - } - - let px = 146.5 - posy * 20; - let py = 120 - posx * 20; - let side; - let ang; - let px1, py1, px2, py2; - - ctx.beginPath(); - - // The main line - ctx.strokeStyle = color; - ctx.moveTo(146.5, 120); - ctx.lineTo(px, py); - - // Sides - side = 3 * Math.hypot(posx, posy); - - if(posx != 0){ - ang = Math.atan2(posy, posx); - } - else{ - ang = Math.PI / 2; - } - - if(posx == 0.0){ - if(posy <=0){ - px1 = px - side * Math.cos(ang - 0.5); - py1 = py + side * Math.sin(ang + 0.5); - px2 = px - side * Math.cos(ang - 0.5); - py2 = py - side * Math.sin(ang + 0.5); - } - else{ - px1 = px + side * Math.cos(ang - 0.5); - py1 = py + side * Math.sin(ang + 0.5); - px2 = px + side * Math.cos(ang - 0.5); - py2 = py - side * Math.sin(ang + 0.5); - - } - } - else{ - px1 = px - side * Math.cos(5 * Math.PI / 6 + ang); - py1 = py + side * Math.sin(5 * Math.PI / 6 + ang); - px2 = px + side * Math.cos(5 * Math.PI / 6 - ang); - py2 = py + side * Math.sin(5 * Math.PI / 6 - ang); - } - - ctx.moveTo(px, py); - ctx.lineTo(px1, py1); - - ctx.lineTo(px2, py2); - ctx.lineTo(px, py); - - ctx.stroke(); - - ctx.closePath(); -} - -function drawTarget(posx, posy){ - var mapCanvas = document.getElementById("local-map"), - ctx = mapCanvas.getContext("2d"); - - if(posx == 0 && posy == 0){ - return; - } - - let px = 146.5 - posy * 20; - let py = 120 - posx * 20; - - ctx.beginPath(); - - ctx.strokeStyle = 'yellow'; - ctx.lineWidth = 2; - - let sx = px - 7; - let sy = py - 5; - let ex = px + 7; - let ey = py + 5; - - ctx.moveTo(sx, sy); - ctx.lineTo(ex, ey); - - sx = px + 7; - sy = py - 5; - ex = px - 7; - ey = py + 5; - - ctx.moveTo(sx, sy); - ctx.lineTo(ex, ey); - - ctx.stroke(); - - ctx.closePath(); -} diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/arrow.svg b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/arrow.svg new file mode 100644 index 000000000..711337acc --- /dev/null +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/resources/images/arrow.svg @@ -0,0 +1,29 @@ + + + + + + + + + + From 71a860aaae034fc230867878e71af6ff9de2deea Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Sat, 12 Oct 2024 11:17:48 +0200 Subject: [PATCH 7/8] Add targets --- .../python_template/ros2_humble/GUI.py | 4 +- .../python_template/ros2_humble/map.py | 11 ++++- .../SpecificObstacleAvoidance.js | 9 ++++ .../react-components/css/GUICanvas.css | 42 +++++++++++++++++-- 4 files changed, 59 insertions(+), 7 deletions(-) diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py index ca4fdae2c..b5c8b8dea 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/GUI.py @@ -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 @@ -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() diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/map.py b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/map.py index 062b5ac16..d466e3002 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/map.py +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/python_template/ros2_humble/map.py @@ -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 @@ -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 @@ -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) @@ -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() @@ -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] diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js index dead6ff61..f0a3d668a 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/SpecificObstacleAvoidance.js @@ -13,6 +13,7 @@ function SpecificObstacleAvoidance(props) { 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"); @@ -30,6 +31,9 @@ function SpecificObstacleAvoidance(props) { 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 @@ -76,6 +80,11 @@ function SpecificObstacleAvoidance(props) { + {targetPose && +
+
+
+ }
); } diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css index dbd2bf054..94f23ac95 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css @@ -1,7 +1,7 @@ #f1-car { position: absolute; width: 50px; - height: 100px; + height: 120px; bottom: 10px; left: calc(50% - 25px); z-index: 4; @@ -17,7 +17,7 @@ rgb(100, 198, 255) 146px ); background-size: 100% 1px; - bottom: 90px; + bottom: 110px; left: 50%; transform-origin: 0% 0%; z-index: 3; @@ -27,7 +27,7 @@ position: absolute; z-index: 5; width: 36px; - bottom: 100px; + bottom: 120px; left: calc(50% - 18px); transform-origin: center bottom; } @@ -38,4 +38,40 @@ .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: 120px; + 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); } \ No newline at end of file From 43308fbefac42ed83e1344271cf99e959f1a176d Mon Sep 17 00:00:00 2001 From: Javier Izquierdo Hernandez Date: Sat, 12 Oct 2024 11:32:10 +0200 Subject: [PATCH 8/8] Resizing car --- .../react-components/css/GUICanvas.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css index 94f23ac95..001d03b83 100644 --- a/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css +++ b/exercises/static/exercises/obstacle_avoidance_newmanager/react-components/css/GUICanvas.css @@ -1,9 +1,9 @@ #f1-car { position: absolute; - width: 50px; - height: 120px; - bottom: 10px; - left: calc(50% - 25px); + width: 61px; + height: 146px; + bottom: 54px; + left: calc(50% - 30.5px); z-index: 4; } @@ -17,7 +17,7 @@ rgb(100, 198, 255) 146px ); background-size: 100% 1px; - bottom: 110px; + bottom: 180px; left: 50%; transform-origin: 0% 0%; z-index: 3; @@ -27,7 +27,7 @@ position: absolute; z-index: 5; width: 36px; - bottom: 120px; + bottom: 190px; left: calc(50% - 18px); transform-origin: center bottom; } @@ -44,7 +44,7 @@ position: absolute; z-index: 4; width: 40px; - bottom: 120px; + bottom: 190px; left: calc(50% - 20px); transform-origin: center bottom; }