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

initial frontend pages

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-25 10:34:45 -08:00
parent 62384a3430
commit 44523f3cdb
8 changed files with 130 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/views/GraphView.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { GraphSide } from '@/graph/graph';
import SvgGraph from '@/components/SvgGraph.vue';
</script>
<template>
<div style="width: 100vw; height: 50vh">
<SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
<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
:initial_duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</SvgGraph>
</div>
</template>
<style lang="scss">
@use '@/assets/variables';
</style>

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

@@ -1,43 +1,14 @@
<script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from '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);
</script>
<template>
<div style="width: 100vw; height: 50vh">
<SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
<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
:initial_duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</SvgGraph>
</div>
<RouterLink :to="{ name: 'graph' }">
Graph
</RouterLink>
<RouterLink :to="{ name: 'list' }">
Tlm List
</RouterLink>
</template>
<style lang="scss">

28
frontend/src/views/TelemetryListView.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
import { useAllTelemetry } from '@/composables/telemetry';
const { data: telemetry_data } = useAllTelemetry();
</script>
<template>
<div v-if="telemetry_data">
<div>
<div v-for="entry in telemetry_data" :key="entry.uuid">
<span>
{{ entry.name }}
</span>
<span>
{{ entry.data_type }}
</span>
</div>
</div>
</div>
<div v-else>
No Telemetry Data
</div>
</template>
<style lang="scss">
@use '@/assets/variables';
</style>