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

add initial controls bar

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 22:10:42 -05:00
parent 59431ebfff
commit 623c394446
4 changed files with 164 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue';
import Graph from '@/components/SvgGraph.vue';
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { GraphSide } from '@/graph/graph';
import SvgGraph from '@/components/SvgGraph.vue';
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
@@ -12,62 +12,61 @@ provide(WEBSOCKET_SYMBOL, websocket);
<template>
<main>
<Graph
:width="800"
:height="400"
:right_axis="true"
:legend="GraphSide.Left"
>
<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"
:duration="60 * 1000 * 10"
:right_axis="true"
:legend="GraphSide.Right"
>
<Axis>
<Line
data="simple_producer/sin"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos4"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin2"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin3"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos2"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin4"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos3"
:minimum_separation="2000"
></Line>
</Axis>
</Graph>
<Graph :width="800" :height="400" :duration="5 * 1000"> </Graph>
<Graph :width="800" :height="400" :duration="2 * 1000"> </Graph>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:legend="GraphSide.Left"
right_axis
include_controls
>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</SvgGraph>
</div>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line
data="simple_producer/sin"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos4"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin2"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin3"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos2"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin4"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos3"
:minimum_separation="1000"
></Line>
</Axis>
</SvgGraph>
</div>
</main>
</template>