Skip to content

Commit dd20036

Browse files
ryescholinsamderanovavrushang1234taesungh
authored
Display sensor values in control station GUI (#81)
* sensor values in control station * chk * chk * chk * Display current FSM state in control panel (#61) * Add new Faulted state for pod failures (#78) Add faulted to podop * Added sensor values to gui * Added sensor values to GUI * Added sensor values to GUI while solving issues for frontend * fix serde error * uncomment * remove checks * Final commit * Final commit * Made some UI changes * Made some changes tothe UI * Update control-station/src/services/PodSocketClient.ts Co-authored-by: Taesung Hwang <[email protected]> * Changed datatypes * Sending distance and speed * Changed interface name * Made serverResponse Partial * Made serverResponse Partial --------- Showing sensor values to the sensor boxes in GUI. Changed the size of statusIndicator to fit more sensorBoxes. Co-authored-by: Sam Der <[email protected]> Co-authored-by: vrushang1234 <[email protected]> Co-authored-by: Vrushang Anand <[email protected]> Co-authored-by: Taesung Hwang <[email protected]>
1 parent c22567b commit dd20036

File tree

11 files changed

+92
-26
lines changed

11 files changed

+92
-26
lines changed

‎control-station/src/components/ControlPanel/ControlPanel.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
display: flex;
66
justify-content: space-evenly;
77
align-items: center;
8+
position: fixed;
9+
bottom: 0;
810
}
911

1012
.button {

‎control-station/src/components/SensorBoxes/Sensors/SensorBox.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
margin-top: 1%;
66
margin-bottom: 1%;
77
background: #e0e0e0;
8+
position: relative;
89
}
910
.SensorContainer {
1011
width: 65vw;
@@ -20,6 +21,7 @@
2021
display: flex;
2122
justify-content: center;
2223
align-items: center;
23-
height: 90%;
24+
height: auto;
2425
font-size: 3rem;
26+
position: relative;
2527
}

‎control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import "./SensorBox.css";
22

3-
function SensorBox() {
3+
interface SensorBoxProps {
4+
title: string;
5+
value: number;
6+
}
7+
8+
function SensorBox({ title, value }: SensorBoxProps) {
49
return (
510
<div className="sensorbox">
6-
<h3 style={{ textAlign: "center", height: "10%" }}>Title</h3>
7-
<p className="sensor-value">0</p>
11+
<h3 style={{ textAlign: "center", height: "10%" }}>{title}</h3>
12+
<p className="sensor-value">{value}</p>
813
</div>
914
);
1015
}

‎control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1+
import { useContext } from "react";
12
import SensorBox from "./SensorBox";
2-
3+
import PodContext from "@/services/PodContext";
4+
import StatusIndicator from "@/components/StatusIndicator/StatusIndicator";
35
function SensorContainer() {
6+
const { podData } = useContext(PodContext);
7+
const {
8+
wheel_encoder,
9+
downstream_pressure_transducer,
10+
upstream_pressure_transducer,
11+
lim_temperature_port,
12+
} = podData;
413
return (
514
<div className="SensorContainer">
6-
<SensorBox />
7-
<SensorBox />
8-
<SensorBox />
9-
<SensorBox />
15+
<SensorBox title="Speed" value={wheel_encoder.velocity} />
16+
<SensorBox title="Distance" value={wheel_encoder.distance} />
17+
<SensorBox title="PT1" value={downstream_pressure_transducer} />
18+
<SensorBox title="PT2" value={upstream_pressure_transducer} />
19+
<SensorBox title="Lim Current" value={lim_temperature_port} />
20+
<StatusIndicator />
1021
</div>
1122
);
1223
}

‎control-station/src/components/StatusIndicator/StatusIndicator.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
.status-indicator {
22
background-color: lightgray;
33
border-radius: 10px;
4-
padding: 1rem;
5-
margin: 2rem;
4+
display: flex;
5+
flex-wrap: wrap;
6+
justify-content: space-around;
67
}
78

89
.group {
9-
margin-bottom: 1rem;
10+
margin-bottom: 0.1rem;
11+
margin-left: 1rem;
12+
width: 40%;
1013
}
1114

1215
.state-text {

‎control-station/src/components/StatusIndicator/StatusIndicator.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ function StatusIndicator() {
1010
const { state } = podData;
1111

1212
return (
13-
<div className="status-indicator">
13+
<div className="sensorbox status-indicator" style={{ fontSize: "1rem" }}>
1414
{Object.values(State).map((s) => {
1515
return (
1616
<div key={s} className={`group ${s.toLowerCase()}-state`}>
1717
<span className={`circle` + (s === state ? " active" : "")}></span>
18+
<br />
1819
<div className="state-text">{s}</div>
1920
</div>
2021
);

‎control-station/src/services/PodSocketClient.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export enum State {
1515
interface ServerToClientEvents {
1616
connect: () => void;
1717
disconnect: (reason: Socket.DisconnectReason) => void;
18-
serverResponse: (data: string) => void;
18+
serverResponse: (data: Partial<PodData>) => void;
1919
}
2020

2121
interface Message {
@@ -30,9 +30,25 @@ interface ClientToServerEvents {
3030
halt: (ack: (data: string) => void) => void;
3131
}
3232

33+
interface WheelEncoder {
34+
distance: number;
35+
velocity: number;
36+
}
37+
38+
interface Gyroscope {
39+
pitch: number;
40+
roll: number;
41+
}
42+
3343
export interface PodData {
3444
connected: boolean;
3545
state: State;
46+
gyroscope: Gyroscope;
47+
wheel_encoder: WheelEncoder;
48+
downstream_pressure_transducer: number;
49+
upstream_pressure_transducer: number;
50+
lim_temperature_port: number;
51+
lim_temperature_starboard: number;
3652
messages: Message[];
3753
}
3854

@@ -117,8 +133,9 @@ class PodSocketClient {
117133
this.setPodData((d) => ({ ...d, connected: false, state: State.Disconnected }));
118134
}
119135

120-
private onData(data: string): void {
136+
private onData(data: Partial<PodData>): void {
121137
console.log("server says", data);
138+
this.setPodData((d) => ({ ...d, ...data }));
122139
}
123140

124141
private addMessage(response: string, newState: State): void {

‎control-station/src/services/usePodData.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@ import PodSocketClient, { PodData, State } from "./PodSocketClient";
33

44
function usePodData() {
55
const [podData, setPodData] = useState<PodData>({
6-
state: State.Disconnected,
76
connected: false,
7+
state: State.Disconnected,
8+
gyroscope: { roll: 0, pitch: 0 },
9+
wheel_encoder: { distance: 0, velocity: 0 },
10+
downstream_pressure_transducer: 0,
11+
upstream_pressure_transducer: 0,
12+
lim_temperature_port: 0,
13+
lim_temperature_starboard: 0,
814
messages: [],
915
});
1016

‎control-station/src/views/Dashboard/Dashboard.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { SensorData, StatusIndicator } from "@/components";
1+
import { SensorData } from "@/components";
22

33
function Dashboard() {
44
return (
55
<div>
66
<SensorData />
7-
<StatusIndicator />
87
</div>
98
);
109
}

‎pod-operation/src/components/gyro.rs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
use mpu6050::Mpu6050;
22
use rppal::hal::Delay;
33
use rppal::i2c::I2c;
4+
use serde::Serialize;
45

56
pub struct Gyroscope {
67
mpu6050: Mpu6050<I2c>,
78
}
89

10+
#[derive(Serialize)]
911
pub struct Orientation {
1012
pub pitch: f32,
1113
pub roll: f32,

0 commit comments

Comments
 (0)