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.

Sign up for GitHub

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

Add real-time dashboard for viewing connected peripherals on the EV3 #2229

Merged
merged 15 commits into from
Sep 27, 2022
Merged

Add real-time dashboard for viewing connected peripherals on the EV3 #2229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2302994
Add optimised assets for SVG peripherals
RichDom2185 Sep 20, 2022
15641d8
Add customisable SVG assets
RichDom2185 Sep 20, 2022
2ffbc02
Mock up EV3 status UI
RichDom2185 Sep 20, 2022
95306d4
Update sling client dependency version
RichDom2185 Sep 21, 2022
a1641e0
Add types for EV3 peripherals state
RichDom2185 Sep 21, 2022
bcea604
Prototype stateful update of EV3 peripherals status
RichDom2185 Sep 21, 2022
c7a50e7
Update EV3 type definitions
RichDom2185 Sep 21, 2022
feed675
Refactor remote execution logic
RichDom2185 Sep 21, 2022
216d6a5
Update UI for EV3 dashboard
RichDom2185 Sep 21, 2022
ac24a93
Fix incorrectly displayed sensor value
RichDom2185 Sep 21, 2022
1aad08d
Update imports
RichDom2185 Sep 21, 2022
8170959
Remove log statement
RichDom2185 Sep 21, 2022
452b812
Hide dashboard when nothing is plugged in for backwards compatibility
RichDom2185 Sep 22, 2022
87564cd
Merge branch 'master' of https://github.com/RichDom2185/source-academ…
RichDom2185 Sep 22, 2022
33407b2
Update lockfile
RichDom2185 Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"@octokit/rest": "^19.0.3",
"@sentry/browser": "^7.8.0",
"@sourceacademy/sharedb-ace": "^2.0.2",
"@sourceacademy/sling-client": "^0.0.1",
"@sourceacademy/sling-client": "^0.1.0",
"@types/react-syntax-highlighter": "^15.5.3",
"@types/uuid": "^8.3.4",
"ace-builds": "^1.4.14",
Expand Down Expand Up @@ -83,6 +83,7 @@
},
"devDependencies": {
"@craco/craco": "^6.4.5",
"@svgr/webpack": "^6.3.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^14.3.0",
"@types/acorn": "^6.0.0",
Expand Down
309 changes: 309 additions & 0 deletions src/assets/BrickSvg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,309 @@
const BrickSvg = () => (
<div style={{ margin: '2em 1em' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
id="board-Layer_1"
data-name="Layer 1"
viewBox="0 0 110.73 170.04"
width="138.92260644554224"
height="213.33333333333334"
>
<defs>
<linearGradient
id="board-linear-gradient"
x1="-374.89"
y1="432.9"
x2="-374.89"
y2="432.82"
gradientTransform="matrix(110.73 0 0 -106.94 41567.45 46425.3)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#f1f1f1" />
<stop offset="1" stopColor="#7a7a7a" />
</linearGradient>
<linearGradient
id="board-linear-gradient-2"
x1="-376"
y1="450.74"
x2="-376"
y2="450.72"
gradientTransform="matrix(100.11 0 0 -79.18 37697.19 35762.28)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#a8aaa8" />
<stop offset="1" stopColor="gray" />
</linearGradient>
<linearGradient
id="board-linear-gradient-3"
x1="-376.21"
y1="614.94"
x2="-376.21"
y2="614.75"
gradientTransform="matrix(98.29 0 0 -23.36 37033.43 14529.9)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#a8aaa8" />
<stop offset="1" stopColor="#535453" />
</linearGradient>
<linearGradient
id="board-linear-gradient-black"
x1="-382.07"
y1="493.36"
x2="-382.07"
y2="494.25"
gradientTransform="matrix(65.53 0 0 -48.84 25091.11 24228.69)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#6a6a6a" />
<stop offset=".52" stopColor="#6a6a6a" />
<stop offset="1" stopColor="#6a6a6a" />
</linearGradient>
<linearGradient
id="board-linear-gradient-green"
x2="145"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#6a6a6a" />
<stop offset=".52" stopColor="#8CE300" />
<stop offset="1" stopColor="#6a6a6a" />
</linearGradient>
<linearGradient
id="board-linear-gradient-red"
x2="145"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#6a6a6a" />
<stop offset=".52" stopColor="#D02E26" />
<stop offset="1" stopColor="#6a6a6a" />
</linearGradient>
<linearGradient
id="board-linear-gradient-orange"
x2="145"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#6a6a6a" />
<stop offset=".52" stopColor="#F8D039" />
<stop offset="1" stopColor="#6a6a6a" />
</linearGradient>
<linearGradient
id="board-linear-gradient-5"
x1="-743.87"
y1="1256.85"
x2="-743.87"
y2="1257.21"
gradientTransform="matrix(3.03 0 0 -6.22 2312.41 7891.56)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#757575" />
<stop offset="1" stopColor="#393939" />
</linearGradient>
<clipPath id="board-clip-path">
<path fill="none" d="M86.48 149.58h12.38v12.38H86.48z" />
</clipPath>
</defs>
<g id="board-EV3">
<g id="board-brick">
<path
id="board-ev3_body_2"
data-name="ev3 body 2"
d="M2 31.7h106.76a2 2 0 0 1 2 2v103a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-103a2 2 0 0 1 2-2z"
fill="url(#board-linear-gradient)"
/>
<path
id="board-ev3_body_1"
data-name="ev3 body 1"
d="M8.19 127.57h94.35a2 2 0 0 1 2 2v38.53a2 2 0 0 1-2 2H8.19a2 2 0 0 1-2-2v-38.56a2 2 0 0 1 2-2z"
fill="#f1f1f1"
/>
<path
id="board-ev3_screen_grey"
data-name="ev3 screen grey"
d="M7.28 0h96.17a2 2 0 0 1 2 2v75.21a2 2 0 0 1-2 2H7.28a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"
fill="url(#board-linear-gradient-2)"
/>
<path
id="board-ev3_screenborder"
data-name="ev3 screenborder"
d="M18.2 10.47h74.48a3.79 3.79 0 0 1 3.79 3.79v41.86a3.8 3.8 0 0 1-3.79 3.8H18.2a3.8 3.8 0 0 1-3.79-3.8V14.26a3.79 3.79 0 0 1 3.79-3.79z"
fill="#393939"
/>
<path
id="board-ev3_screen"
data-name="ev3 screen"
d="M24 12.44h63.22A2.73 2.73 0 0 1 90 15.17v40.35a2.73 2.73 0 0 1-2.73 2.73H24a2.73 2.73 0 0 1-2.73-2.73V15.17A2.73 2.73 0 0 1 24 12.44z"
fill="#97b5a6"
/>
<path
id="board-ev3_grey_buttom"
data-name="ev3 grey buttom"
d="M6.22 146.68h98.29v21.39a2 2 0 0 1-2 2H8.19a2 2 0 0 1-2-2z"
fill="url(#board-linear-gradient-3)"
/>
</g>
<g id="board-buttons">
<path
id="board-btn_grey"
data-name="btn grey"
d="M48.69 133.94c-5.58-5.39-14.26-14.26-14.26-14.26v-1.82H31a8.27 8.27 0 1 1 0-16.53h3.41V99.5l14.13-14.41h14.11C69 91.61 76.75 99.2 76.75 99.2v2.13H80a8.27 8.27 0 1 1 0 16.53h-3.25v1.82c-7.51 7.73-14 14.26-14 14.26z"
fill="#6a6a6a"
/>
<path
id="board-btn_color"
data-name="btn color"
d="M48.69 133.94c-5.58-5.39-14.26-14.26-14.26-14.26v-1.82H31a8.27 8.27 0 1 1 0-16.53h3.41V99.5l14.13-14.41h14.11C69 91.61 76.75 99.2 76.75 99.2v2.13H80a8.27 8.27 0 1 1 0 16.53h-3.25v1.82c-7.51 7.73-14 14.26-14 14.26z"
fill="url(#board-linear-gradient-black)"
style={{ fill: 'url("#board-linear-gradient-black")' }}
/>
<path
id="board-btn_left"
data-name="btn left"
d="M30.87 103.3h10.39v12.28H30.87a6.14 6.14 0 0 1-6.14-6.14 6.14 6.14 0 0 1 6.14-6.14z"
fill="#a8aaa8"
className="sim-button"
/>
<path
id="board-btn_right"
data-name="btn right"
d="M80 115.58H69.62V103.3H80a6.14 6.14 0 0 1 6.15 6.14 6.14 6.14 0 0 1-6.15 6.14z"
fill="#a8aaa8"
className="sim-button"
/>
<path
id="board-btn_enter"
data-name="btn enter"
d="M49.45 103.3h12a.46.46 0 0 1 .46.45v11.38a.46.46 0 0 1-.46.45h-12a.46.46 0 0 1-.46-.45v-11.38a.46.46 0 0 1 .46-.45z"
fill="#393939"
className="sim-button"
/>
<path
id="board-btn_up"
data-name="btn up"
d="M49.15 87.37l12.74-.15 9.55 9.86L67.5 101v7.13h-3.64v-4.1a3 3 0 0 0-3-3H49.78a2.47 2.47 0 0 0-2.58 2.35v4.77h-3.67V101l-3.94-4z"
fill="#a8aaa8"
className="sim-button"
/>
<path
id="board-btn_down"
data-name="btn down"
d="M61.83 131.54l-12.66.1-9.58-9.85 4-3.91v-7.17h3.6v4.11a3.06 3.06 0 0 0 3 3.06c3 .05 11 0 11 0a2.6 2.6 0 0 0 2.65-2.55v-4.62h3.67v7.17l3.91 3.91z"
fill="#a8aaa8"
className="sim-button"
/>
<path
id="board-btn_part_4"
data-name="btn part 4"
fill="#393939"
d="M54 59.76h3.03v13.8H54z"
/>
<path
id="board-btn_part_3"
data-name="btn part 3"
fill="#9a9a9a"
d="M54 72.96h3.03v6.07H54z"
/>
<path
id="board-btn_part_2"
data-name="btn part 2"
fill="url(#board-linear-gradient-5)"
d="M54 72.96h3.03v6.22H54z"
/>
<path
id="board-btn_part_1"
data-name="btn part 1"
fill="gray"
d="M54 79.18h3.03v5.92H54z"
/>
<path
id="board-btn_back"
data-name="btn back"
d="M13.2 79.18h23.66v5.71c-2.62 2.64-6 6-6 6H15.17a2 2 0 0 1-2-2z"
fill="#a8aaa8"
className="sim-button"
/>
</g>
<g id="board-LEGO_logo" data-name="LEGO logo">
<path
id="board-logo_white_bg"
data-name="logo white bg"
fill="#fff"
d="M86.56 149.66h12.21v12.21H86.56z"
/>
<g id="board-lego">
<g clipPath="url(#board-clip-path)">
<g id="board-logo_part_5" data-name="logo part 5">
<path
id="board-Path_18"
data-name="Path 18"
d="M86.56 161.87h12.21v-12.21H86.56zM98 154.73a4.76 4.76 0 0 1-.24 1.18c-.43 1.27-.91 2.07-2.07 2.07a1.12 1.12 0 0 1-1.16-.7v-.15l-.09.11a1.86 1.86 0 0 1-1.46.72 1.29 1.29 0 0 1-1-.43l-.07-.09-.06.06a1.6 1.6 0 0 1-1.16.42 1.32 1.32 0 0 1-1-.37h-.09l-.07.07a1.55 1.55 0 0 1-1.11.37.87.87 0 0 1-.95-.79.37.37 0 0 1 0-.11 8.15 8.15 0 0 1 1.09-3.1 1 1 0 0 1 .92-.52.78.78 0 0 1 .57.17c.11.11.11.2.13.42v.28l.16-.24a1.6 1.6 0 0 1 1.52-.65 1 1 0 0 1 .9.37v.09l.06-.07a1.8 1.8 0 0 1 1.2-.39 1.53 1.53 0 0 1 1.12.37.69.69 0 0 1 .13.2l.07.11.08-.11a1.59 1.59 0 0 1 1.31-.57 1.27 1.27 0 0 1 1 .35 1.37 1.37 0 0 1 .26 1"
fill="#ffed00"
/>
</g>
</g>
<g clipPath="url(#board-clip-path)">
<g id="board-logo_part_4" data-name="logo part 4">
<path
id="board-Path_19"
data-name="Path 19"
d="M86.56 161.87h12.21v-12.21H86.56zm11.75-6.66a6.73 6.73 0 0 1-.52 1.59 2.28 2.28 0 0 1-2.1 1.55 1.67 1.67 0 0 1-1.36-.54 2.18 2.18 0 0 1-1.48.54 1.73 1.73 0 0 1-1.09-.35 2.12 2.12 0 0 1-1.22.35 1.8 1.8 0 0 1-1-.3 2.19 2.19 0 0 1-1.18.3 1.28 1.28 0 0 1-1.36-1.21 8.26 8.26 0 0 1 1.18-3.34 1.37 1.37 0 0 1 1.22-.8c.59 0 .79.17.9.37a2.24 2.24 0 0 1 1.46-.4 1.51 1.51 0 0 1 1 .33A2.4 2.4 0 0 1 94 153a1.74 1.74 0 0 1 1.36.45 2 2 0 0 1 1.33-.43 1.53 1.53 0 0 1 1.37.61 1.79 1.79 0 0 1 .29 1.55"
fill="#d42715"
/>
</g>
</g>
<g clipPath="url(#board-clip-path)">
<g id="board-logo_part_3" data-name="logo part 3">
<path
id="board-Path_20"
data-name="Path 20"
d="M86.48 162h12.38v-12.42H86.48zm12.2-.18h-12v-12h12z"
fill="#171714"
/>
</g>
</g>
<g clipPath="url(#board-clip-path)">
<g id="board-logo_part_2" data-name="logo part 2">
<path
id="board-Path_21"
data-name="Path 21"
d="M98.25 153.29v-.09h.06s.07 0 .07.05 0 0-.07 0zm.2.17v-.06c0-.05 0-.07-.06-.07a.09.09 0 0 0 .08-.09.07.07 0 0 0-.07-.08h-.17v.3h.07v-.13.07zm-.16-.39a.24.24 0 0 1 0 .48.24.24 0 0 1-.24-.24.26.26 0 0 1 .24-.24m0-.07a.31.31 0 0 0 0 .62.31.31 0 0 0 .31-.31.32.32 0 0 0-.31-.31"
fill="#171714"
/>
</g>
</g>
<g clipPath="url(#board-clip-path)">
<g id="board-logo_part_1" data-name="logo part 1">
<path
id="board-Path_22"
data-name="Path 22"
d="M96.7 153.33a1.73 1.73 0 0 0-1.38.61.66.66 0 0 0-.15-.22 1.47 1.47 0 0 0-1.16-.41 1.87 1.87 0 0 0-1.25.41 1.1 1.1 0 0 0-1-.41 1.7 1.7 0 0 0-1.6.7.52.52 0 0 0-.15-.46.87.87 0 0 0-.63-.2 1.1 1.1 0 0 0-1 .57 8.73 8.73 0 0 0-1.13 3.17 1 1 0 0 0 1 1h.08a1.53 1.53 0 0 0 1.18-.39 1.35 1.35 0 0 0 1 .39 1.61 1.61 0 0 0 1.23-.46 1.36 1.36 0 0 0 1.09.46 1.92 1.92 0 0 0 1.53-.77 1.2 1.2 0 0 0 1.24.75c1.2 0 1.73-.83 2.16-2.12a4.54 4.54 0 0 0 .27-1.2 1.21 1.21 0 0 0-1-1.37 1.29 1.29 0 0 0-.34 0m-8 3.28c.62-.11.79.11.77.33-.07.61-.63.76-1.12.74a.62.62 0 0 1-.69-.55 8.47 8.47 0 0 1 1.07-3 .72.72 0 0 1 .68-.39c.31 0 .37.15.37.33a14.2 14.2 0 0 1-1.07 2.55m2-.57c0 .11-.11.35-.17.59a3.1 3.1 0 0 1 .61-.09c.31 0 .48.14.48.38 0 .59-.66.76-1.11.76a.85.85 0 0 1-.94-.75v-.08a6 6 0 0 1 .67-2.27 1.36 1.36 0 0 1 1.53-.9c.31 0 .68.13.68.44s-.35.56-.68.59h-.5a3.58 3.58 0 0 0-.24.48c.64-.09.9 0 .79.41s-.59.52-1.12.44m3.13-1.55a.46.46 0 0 0-.37.21 6.33 6.33 0 0 0-.64 1.73c0 .28.09.35.22.35s.46-.24.55-.61c0 0-.42 0-.31-.37s.33-.44.68-.46c.7 0 .63.48.57.76a1.81 1.81 0 0 1-1.7 1.6.9.9 0 0 1-1-.79v-.18a5 5 0 0 1 .4-1.55c.37-.87.76-1.48 1.77-1.48.59 0 1.07.22 1 .76a.67.67 0 0 1-.64.68c-.11 0-.52 0-.39-.42 0-.13 0-.24-.15-.24m3.75.75a7.06 7.06 0 0 1-.59 1.61 1.41 1.41 0 0 1-1.37.86.82.82 0 0 1-.94-.86 5.11 5.11 0 0 1 .39-1.63c.31-.83.63-1.51 1.66-1.49s.94 1.05.85 1.51m-.85-.52a9.84 9.84 0 0 1-.63 1.85.33.33 0 0 1-.31.22c-.13 0-.17-.09-.2-.2a7.75 7.75 0 0 1 .7-1.94c.09-.13.18-.16.26-.13s.18.11.18.2"
fill="#171714"
/>
</g>
</g>
</g>
</g>
<g id="board-EV3_logo" data-name="EV3 logo" fill="#f1f1f1">
<path
id="board-ev3_3"
data-name="ev3 3"
d="M36 155a.18.18 0 0 1 .2.16v.84a.16.16 0 0 1-.17.14H34a.36.36 0 0 0-.38.33v1.14a.34.34 0 0 0 .38.3h2c.19 0 .17.14.17.14v.82c0 .08-.06.14-.17.14h-3.43a.2.2 0 0 1-.2-.19v-.05a.38.38 0 0 0-.38-.38h-1.12a.38.38 0 0 0-.38.38v1.64a.37.37 0 0 0 .38.33h6.75a.36.36 0 0 0 .39-.3v-6.89a.36.36 0 0 0-.39-.3H30.9a.34.34 0 0 0-.38.3v1.67a.38.38 0 0 0 .35.38H32a.36.36 0 0 0 .35-.36v-.05a.17.17 0 0 1 .16-.19H36z"
/>
<path
id="board-ev3_v"
data-name="ev3 v"
d="M29.29 153.2H27.7c-.24 0-.33.17-.44.38L25.32 158a.27.27 0 0 1-.19.11.23.23 0 0 1-.19-.14L23 153.58c-.11-.21-.22-.38-.46-.38h-1.62c-.35 0-.41.19-.3.41l3.2 6.73c.17.32.28.38.58.38h1.42a.55.55 0 0 0 .57-.38l3.22-6.73c.11-.22 0-.41-.32-.41"
/>
<path
id="board-ev3_e"
data-name="ev3 e"
d="M19.39 156.1a.34.34 0 0 1 .38.3v1.17a.33.33 0 0 1-.38.3h-5.05c-.11 0-.2.06-.2.14v.82c0 .08.09.14.2.14h5.05a.33.33 0 0 1 .38.3v1.15a.33.33 0 0 1-.35.3h-6.75a.35.35 0 0 1-.38-.3v-6.89a.34.34 0 0 1 .38-.3h6.75a.31.31 0 0 1 .35.28v1.17a.31.31 0 0 1-.33.3h-5.08c-.11 0-.22 0-.22.13v.89c0 .08.09.14.19.14z"
/>
</g>
</g>
</svg>
</div>
);

export default BrickSvg;
44 changes: 44 additions & 0 deletions src/assets/PortSvg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
type Props = {
port: string;
};

const PortSvg = ({ port }: Props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
id="port-svg6348"
viewBox="0 0 49.96 58.93"
// width="50.28571428571429"
// height="59.31419421251287"
>
<g id="port-icn_port" data-name="icn port">
<path
id="port-port_2"
data-name="port 2"
d="M4.48 0h50v58.93h-50z"
transform="translate(-4.48)"
fill="#eaeaea"
/>
<path
id="port-port_1"
data-name="port 1"
d="M9.74 46.49V18.66h17.11v-6.91h4.72V2.59h12.92v8.82h5.06v35.08h-8v7.43H38.9v-7.51h-2v7.5h-2.19v-7.5h-2.16v7.5h-2.1v-7.5H28.6v7.5h-2.1v-7.5h-1.82v7.5h-2.46v-7.5h-1.68v7.5H18v-7.45z"
transform="translate(-4.48)"
fill="#a8aaa8"
/>
<g id="port-text10060" style={{ isolation: 'isolate' }}>
<text
id="port-port_text"
transform="translate(22.21 40.2)"
style={{ isolation: 'isolate', userSelect: 'none' }}
fontSize="16"
fill="#fff"
fontFamily="ArialMT,Arial"
>
{port}
</text>
</g>
</g>
</svg>
);

export default PortSvg;
Loading