sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimizations

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-29 20:08:10 -05:00
parent a20db6c522
commit be85ea3aa6
8 changed files with 165 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/GraphAxis.vue
View File

@@ -237,7 +237,7 @@ const lines = computed(() => {
<g class="major_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[1]" :key="tick">
<polyline
:points="`${graph_data.x_map(toValue(graph_data.max_x)) - major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
:points="`${graph_data.x_map(toValue(graph_data.min_x)) + major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)}`"
></polyline>
<text
class="left_edge middle_text"

2
frontend/src/components/TelemetryLine.vue
View File

@@ -163,7 +163,7 @@ watch(
return '';
}
const future_number = toValue(graph_data.max_x) + 9999999999;
const future_number = toValue(graph_data.max_x) + 99999999;
let last_x = graph_data.x_map(future_number);
old_max.value = toValue(graph_data.max_x);

54
frontend/src/views/HomeView.vue
View File

@@ -4,6 +4,7 @@ import { provide } from 'vue';
import Graph from '@/components/SvgGraph.vue';
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { AxisSide } from '@/graph/axis';
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
@@ -11,6 +12,18 @@ provide(WEBSOCKET_SYMBOL, websocket);
<template>
<main>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
@@ -20,41 +33,28 @@ provide(WEBSOCKET_SYMBOL, websocket);
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
</Graph>
</main>
</template>