Skip to content

Commit 4ecc991

Browse files
Matthew-Dobson1Blademaster
Matthew-Dobson
and
1Blademaster
authored
813 fix telemetry dashboard display padding (#823)
* removed jitters from telemetry display * removed mock data * fix resizing of dashboard * comment on use of ch > rem * linter fix * used a 3-col grid with rails to prevent dial shifting * copilot review fix * linter fix * Make distance to home 2dp * Fix display of distance to home --------- Co-authored-by: Kush Makkapati <kush.makkapati@icloud.com>
1 parent e2ec4a4 commit 4ecc991

1 file changed

Lines changed: 98 additions & 85 deletions

File tree

‎gcs/src/components/dashboard/telemetrySection/telemetry.jsx‎

Lines changed: 98 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export default function TelemetrySection({
5151
useEffect(() => {
5252
// Calculate distance from current pos to home pos
5353
if (gpsData.lat && gpsData.lon && homePosition.lat && homePosition.lon) {
54-
const distToHome = distance(
54+
const distToHomeCalculated = distance(
5555
[intToCoord(gpsData.lon), intToCoord(gpsData.lat)],
5656
[intToCoord(homePosition.lon), intToCoord(homePosition.lat)],
5757
{
5858
units: "meters",
5959
},
6060
)
61-
setDistToHome(distToHome.toFixed(2))
61+
setDistToHome(distToHomeCalculated)
6262
}
6363
}, [gpsData, homePosition])
6464

@@ -87,121 +87,134 @@ export default function TelemetrySection({
8787
</div>
8888

8989
{/* Indicators */}
90-
<div className="flex items-center flex-col justify-evenly @xl:flex-row">
90+
<div className="flex items-center flex-col justify-evenly @2xl:flex-row">
9191
{/* Attitude Indicator */}
9292
<div
93-
className="flex flex-row items-center justify-center"
93+
className="grid items-center grid-cols-[8ch_auto_8ch]"
9494
style={{
9595
paddingTop: `${calcIndicatorPadding()}px`,
9696
paddingBottom: `${calcIndicatorPadding()}px`,
9797
}}
9898
>
99-
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
100-
{/* AS and GS values */}
101-
<p className="text-sm text-center">ms&#8315;&#185;</p>
102-
<TelemetryValueDisplay
103-
title="AS"
104-
value={(telemetryData.airspeed
105-
? telemetryData.airspeed
106-
: 0
107-
).toFixed(2)}
108-
fs={telemetryFontSize}
109-
/>
110-
<TelemetryValueDisplay
111-
title="GS"
112-
value={(telemetryData.groundspeed
113-
? telemetryData.groundspeed
114-
: 0
115-
).toFixed(2)}
116-
fs={telemetryFontSize}
117-
/>
99+
<div className="justify-self-end w-[8ch]">
100+
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
101+
{/* AS and GS values */}
102+
<p className="text-sm text-center">ms&#8315;&#185;</p>
103+
<TelemetryValueDisplay
104+
title="AS"
105+
value={(telemetryData.airspeed
106+
? telemetryData.airspeed
107+
: 0
108+
).toFixed(2)}
109+
fs={telemetryFontSize}
110+
/>
111+
<TelemetryValueDisplay
112+
title="GS"
113+
value={(telemetryData.groundspeed
114+
? telemetryData.groundspeed
115+
: 0
116+
).toFixed(2)}
117+
fs={telemetryFontSize}
118+
/>
119+
</div>
118120
</div>
119121

120122
{/* Attitude indicator image */}
121-
<AttitudeIndicator
122-
roll={attitudeData.roll * (180 / Math.PI)}
123-
pitch={attitudeData.pitch * (180 / Math.PI)}
124-
size={`${calcIndicatorSize()}px`}
125-
/>
123+
<div className="justify-self-center flex-shrink-0">
124+
<AttitudeIndicator
125+
roll={attitudeData.roll * (180 / Math.PI)}
126+
pitch={attitudeData.pitch * (180 / Math.PI)}
127+
size={`${calcIndicatorSize()}px`}
128+
/>
129+
</div>
126130

127131
{/* AMSL and AREL values */}
128-
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
129-
<p className="text-sm text-center">m</p>
130-
<TelemetryValueDisplay
131-
title="AMSL"
132-
value={(gpsData.alt ? gpsData.alt / 1000 : 0).toFixed(2)}
133-
fs={telemetryFontSize}
134-
/>
135-
<TelemetryValueDisplay
136-
title="AREL"
137-
value={(gpsData.relative_alt
138-
? gpsData.relative_alt / 1000
139-
: 0
140-
).toFixed(2)}
141-
fs={telemetryFontSize}
142-
/>
132+
<div className="justify-self-start w-[8ch]">
133+
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
134+
<p className="text-sm text-center">m</p>
135+
<TelemetryValueDisplay
136+
title="AMSL"
137+
value={(gpsData.alt ? gpsData.alt / 1000 : 0).toFixed(2)}
138+
fs={telemetryFontSize}
139+
/>
140+
<TelemetryValueDisplay
141+
title="AREL"
142+
value={(gpsData.relative_alt
143+
? gpsData.relative_alt / 1000
144+
: 0
145+
).toFixed(2)}
146+
fs={telemetryFontSize}
147+
/>
148+
</div>
143149
</div>
144150
</div>
145151

146152
{/* Heading Indicator */}
147153
<div
148-
className="flex flex-row items-center justify-center"
154+
className="grid items-center grid-cols-[8ch_auto_8ch]"
149155
style={{
150156
paddingTop: `${calcIndicatorPadding()}px`,
151157
paddingBottom: `${calcIndicatorPadding()}px`,
152158
}}
153159
>
154-
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
155-
{/* HDG and WP values */}
156-
<p className="text-sm text-center">deg &#176;</p>
157-
<TelemetryValueDisplay
158-
title="HDG"
159-
value={(gpsData.hdg ? gpsData.hdg / 100 : 0).toFixed(2)}
160-
fs={telemetryFontSize}
161-
/>
162-
<TelemetryValueDisplay
163-
title="YAW"
164-
value={(attitudeData.yaw
165-
? attitudeData.yaw * (180 / Math.PI)
166-
: 0
167-
).toFixed(2)}
168-
fs={telemetryFontSize}
169-
/>
160+
<div className="justify-self-end w-[8ch]">
161+
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
162+
{/* HDG and WP values */}
163+
<p className="text-sm text-center">deg &#176;</p>
164+
<TelemetryValueDisplay
165+
title="HDG"
166+
value={(gpsData.hdg ? gpsData.hdg / 100 : 0).toFixed(2)}
167+
fs={telemetryFontSize}
168+
/>
169+
<TelemetryValueDisplay
170+
title="YAW"
171+
value={(attitudeData.yaw
172+
? attitudeData.yaw * (180 / Math.PI)
173+
: 0
174+
).toFixed(2)}
175+
fs={telemetryFontSize}
176+
/>
177+
</div>
170178
</div>
171179

172180
{/* Heading indicator image */}
173-
<HeadingIndicator
174-
heading={gpsData.hdg ? gpsData.hdg / 100 : 0}
175-
size={`${calcIndicatorSize()}px`}
176-
/>
181+
<div className="justify-self-center flex-shrink-0">
182+
<HeadingIndicator
183+
heading={gpsData.hdg ? gpsData.hdg / 100 : 0}
184+
size={`${calcIndicatorSize()}px`}
185+
/>
186+
</div>
177187

178188
{/* YAW and HOME values */}
179-
<div
180-
className="flex flex-col items-center justify-center space-y-4 text-center min-w-14"
181-
ref={sideBarRef}
182-
>
183-
<p className="text-sm">m</p>
184-
<TelemetryValueDisplay
185-
title="WP"
186-
value={(navControllerOutputData.wpDist
187-
? navControllerOutputData.wpDist
188-
: 0
189-
).toFixed(2)}
190-
fs={telemetryFontSize}
191-
/>
192-
<TelemetryValueDisplay
193-
title="HOME"
194-
value={distToHome}
195-
fs={telemetryFontSize}
196-
/>
189+
<div className="justify-self-start w-[8ch]" ref={sideBarRef}>
190+
<div className="flex flex-col items-center justify-center space-y-4 text-center min-w-14">
191+
<p className="text-sm">m</p>
192+
<TelemetryValueDisplay
193+
title="WP"
194+
value={(navControllerOutputData.wpDist
195+
? navControllerOutputData.wpDist
196+
: 0
197+
).toFixed(2)}
198+
fs={telemetryFontSize}
199+
/>
200+
<TelemetryValueDisplay
201+
title="HOME"
202+
value={distToHome.toFixed(2)}
203+
fs={telemetryFontSize}
204+
/>
205+
</div>
197206
</div>
198207
</div>
199208
</div>
200209

201210
{/* EKF and VIBE labels */}
202-
<div className="flex flex-row items-center justify-center gap-10 my-4">
203-
<EkfDisplay telemetryFontSize={telemetryFontSize} />
204-
<VibeDisplay telemetryFontSize={telemetryFontSize} />
211+
<div className="grid grid-cols-[1fr_auto_1fr] items-center my-4">
212+
<div /> {/* left filler column */}
213+
<div className="flex justify-center gap-10">
214+
<EkfDisplay telemetryFontSize={telemetryFontSize} />
215+
<VibeDisplay telemetryFontSize={telemetryFontSize} />
216+
</div>
217+
<div /> {/* right filler column */}
205218
</div>
206219

207220
{/* Battery information */}

0 commit comments

Comments
 (0)