Skip to content

Commit

Permalink
Added layouts for realtime logging - fixed linter
Browse files Browse the repository at this point in the history
  • Loading branch information
HiceS committed Nov 18, 2024
1 parent c763c0f commit b876543
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 43 deletions.
3 changes: 2 additions & 1 deletion lil-interface/eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
{ ignores: ['dist'] },
{ ignores: ['dist', '.vite'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
Expand All @@ -23,6 +23,7 @@ export default tseslint.config(
'warn',
{ allowConstantExport: true },
],
"@typescript-eslint/no-explicit-any": "off"
},
},
)
4 changes: 2 additions & 2 deletions lil-interface/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Header from './components/header';
import { useGCSConnection } from './data/ws.singleton';
import { GCS_Connection } from './data/ws.singleton';
import Live from './routes/live';
import '@/style/App.scss';
import '@/style/battery.scss';

useGCSConnection();
GCS_Connection();

function App() {
return (
Expand Down
9 changes: 9 additions & 0 deletions lil-interface/src/components/big_number.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function BigNumber(props: { val: number, name: string }) {
return (
<div className='flex flex-col items-center justify-between bg-[#1f1f1f] p-4 rounded-md w-28 flex-1'>
<div className='text-green-500 text-xs font-mono w-fit ml-auto mb-2'>+16</div>
<div className='font-mono text-3xl'>{props.val}</div>
<div className="opacity-60 text-sm font-extralight">{props.name}</div>
</div>
)
}
69 changes: 69 additions & 0 deletions lil-interface/src/components/charts.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import useVictoryValue from '@/hooks/useVictoryValue';
import { LineChart } from '@mantine/charts';
import { useEffect, useState } from 'react';

export default function RealtimeLine(props: { element_limit: number }) {
const [pose_z] = useVictoryValue('pose/ned/position/z');

const [points, setPoints] = useState<Array<{ z: number; timestamp: number }>>([]);

useEffect(() => {
const intervalId = setInterval(() => {
if (pose_z !== undefined) {
setPoints((prevPoints) => {
const now = Date.now();
const updatedPoints = [...prevPoints, { z: pose_z as number, timestamp: now }];

if (updatedPoints.length > props.element_limit) {
updatedPoints.shift();
}

return updatedPoints;
});
} else {
const randomZ = Math.random() * 10;
setPoints((prevPoints) => {
const now = Date.now();
const updatedPoints = [...prevPoints, { z: randomZ, timestamp: now }];

if (updatedPoints.length > props.element_limit) {
updatedPoints.shift();
}

return updatedPoints;
});
}
}, 100); // 0.5 seconds interval

return () => {
clearInterval(intervalId);
};
}, [pose_z, props.element_limit]);

return (
<div className="w-[48%] bg-[#1f1f1f] shadow-sm rounded-md">
<div className="w-fit p-4">Z index</div>
<hr className="h-px mb-2 bg-gray-200 border-0 dark:bg-zinc-700"></hr>
<div>
<LineChart
h={300}
data={points.map((point) => ({ x: point.timestamp, z: point.z }))}
// xAxisLabel="Time"
// yAxisLabel="Z Position"
series={[{ name: 'z', color: 'indigo.6' }]}
curveType="linear"
dataKey={''}
referenceLines={[{ y: 5, label: 'Nominal', color: 'green.7' }]}
// yAxisProps={{ domain: [0, 10.0] }}
// xAxisProps={{ domain: [-extents, extents] }}

withXAxis={false}
withYAxis={false}
withDots={false}

gridAxis="none"
/>
</div>
</div>
);
}
25 changes: 19 additions & 6 deletions lil-interface/src/components/largeView.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { useGCSConnection } from '@/data/ws.singleton';
import { GCS_Connection } from '@/data/ws.singleton';
import useVictoryValue from '@/hooks/useVictoryValue';
import useParamStore from '@/state/params';
import { ScatterChart } from '@mantine/charts';
import { Autocomplete, Center, NumberInput, rem, ScrollArea, SegmentedControl } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { IconHexagonalPyramid, IconMap, IconSearch, IconTimeline, IconVariable } from '@tabler/icons-react';
import { useCallback, useEffect, useState } from 'react';
import RealtimeLine from './charts';
import BigNumber from './big_number';

export default function LargeContentView() {
const [value, setValue] = useState<'Map' | 'Data' | 'Planner' | 'Params'>('Data');
Expand Down Expand Up @@ -68,7 +70,7 @@ export default function LargeContentView() {
]}
/>

<div className="flex-1 w-full">{pageRender(value)}</div>
<ScrollArea className="flex-1 w-full">{pageRender(value)}</ScrollArea>
</div>
);
}
Expand Down Expand Up @@ -101,10 +103,16 @@ function DataPage() {
}, [pose_x, pose_y, extents]);

return (
<div className="flex h-full w-full justify-center items-center p-2">
<div className="flex h-full w-full justify-between items-center p-2 flex-wrap gap-2">
<div className='w-full flex gap-5 justify-center mb-2'>
<BigNumber val={15} name={'Altitude'} />
<BigNumber val={15} name={'Pose/Y'} />
<BigNumber val={15} name={'Pose/X'} />
<BigNumber val={15} name={'Battery'} />
</div>
<div className="w-[50%]">
<ScatterChart
h={350}
h={300}
data={[
{
color: 'red.5',
Expand All @@ -123,6 +131,11 @@ function DataPage() {
]}
/>
</div>
<RealtimeLine element_limit={30} />
<RealtimeLine element_limit={45} />
<RealtimeLine element_limit={29} />
<RealtimeLine element_limit={12} />
<RealtimeLine element_limit={30} />
</div>
);
}
Expand Down Expand Up @@ -185,9 +198,9 @@ function ParamField(props: { name: string; value: string | number | boolean | un
useEffect(() => {
if (debounced !== props.value) {
console.log('Sending a value back to GCS');
useGCSConnection().sendMessage(`PARAM:params/${props.name}:${debounced}`);
GCS_Connection().sendMessage(`PARAM:params/${props.name}:${debounced}`);
}
}, [debounced]);
}, [debounced, props.name, props.value]);

return (
<div className="flex justify-between items-center bg-zinc-800 rounded-md p-2 m-2 px-6 font-mono hover:bg-zinc-900">
Expand Down
16 changes: 8 additions & 8 deletions lil-interface/src/components/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useConnectionStore } from '@/state/connection';
import { useLogStore } from '@/state/logstore';
import { useEffect, useState } from 'react';
import useVictoryValue, { MapValue } from '@/hooks/useVictoryValue';
import { useGCSConnection } from '@/data/ws.singleton';
import { GCS_Connection } from '@/data/ws.singleton';

export function LOS() {
return (
Expand Down Expand Up @@ -49,7 +49,7 @@ export function SidebarHeader() {
if (connected) {
// TODO: Disconnect? Why
} else {
useGCSConnection().restart();
GCS_Connection().restart();
}
}}
>
Expand Down Expand Up @@ -83,7 +83,7 @@ export function DroneLabel(props: { name: string; battery: number }) {
}, [mode]);

const setMode = (newMode: string | null) => {
useGCSConnection().sendMessage(`MODE:${newMode}`);
GCS_Connection().sendMessage(`MODE:${newMode}`);
setModeSelect(newMode);
};

Expand Down Expand Up @@ -343,9 +343,9 @@ export function ArmButtons() {
message: 'Arming Drone',
color: 'red',
});
useGCSConnection().sendMessage('ARM');
GCS_Connection().sendMessage('ARM');
} else {
useGCSConnection().sendMessage('DISARM');
GCS_Connection().sendMessage('DISARM');
if (flying) toggleFlying();
}
}}
Expand All @@ -366,9 +366,9 @@ export function ArmButtons() {
title: 'Control System',
message: 'Taking off',
});
useGCSConnection().sendMessage('TAKEOFF');
GCS_Connection().sendMessage('TAKEOFF');
} else {
useGCSConnection().sendMessage('LAND');
GCS_Connection().sendMessage('LAND');
}
}}
>
Expand All @@ -387,7 +387,7 @@ export function NoDrone() {
<div className="font-bold">No Ground Station is connected</div>
<Button
onClick={() => {
useGCSConnection().restart();
GCS_Connection().restart();
}}
variant="default"
loading={connecting}
Expand Down
2 changes: 1 addition & 1 deletion lil-interface/src/data/ws.singleton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import useParamStore from '@/state/params';

const GCS_URL = 'ws://localhost:3030';

export function useGCSConnection() {
export function GCS_Connection() {
return WebSocketSingleton.getInstance();
}

Expand Down
49 changes: 25 additions & 24 deletions lil-interface/src/style/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,54 +36,55 @@
}

.app {
height: 100svh;
display: flex;
flex-direction: column;
height: 100svh;
display: flex;
flex-direction: column;

padding: 1rem;

background-color: #1f1f1f;
// padding-left: 2rem;
// padding-right: 0px;
// padding-bottom: 0px;
// padding-bottom: 0px;
}

.full-width-container {
display: flex;
overflow: hidden;
flex: 1;
overflow: hidden;
flex: 1;

.sidebar {
width: 25%;
padding: 1rem;
min-width: 500px;
margin-right: 2rem;
margin-right: 2rem;

overflow-y: auto;
overflow-y: auto;
}

.map-container {
flex: 1;
background-color: #373737;
background-color: #242424;
display: flex;
overflow: auto;

border-radius: 10px;
border: 1px solid #6C6C6C;
overflow-y: auto;

border-radius: 10px;
border: 1px solid #6c6c6c;
}
}

.info-container {
border: 1px solid #3A3A3A;
background-color: #1F1F1F;
border: 1px solid #3a3a3a;
background-color: #1f1f1f;

transition: 150ms ease border-color;
transition: 150ms ease border-color;

padding: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;

&:hover {
padding: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;

border-color: #6C6C6C;

}
}
&:hover {
border-color: #6c6c6c;
}
}
2 changes: 1 addition & 1 deletion lil-interface/src/style/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

color-scheme: light dark;
// color: rgba(255, 255, 255, 0.87);
background-color: #242424;
background-color: #1f1f1f;

font-synthesis: none;
text-rendering: optimizeLegibility;
Expand Down

0 comments on commit b876543

Please sign in to comment.