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

change format settings

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-04 20:00:18 -08:00
parent 07b585f956
commit 4c2b0f454b
14 changed files with 691 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/.prettierrc.json
View File

@@ -1,7 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"semi": true,
"singleQuote": true,
"arrowParens": "avoid"
"arrowParens": "always",
"tabWidth": 4
}

2
frontend/src/App.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import { RouterView } from 'vue-router';
</script>
<template>

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

@@ -1,55 +1,55 @@
<script setup lang="ts">
import { computed, inject, provide, ref, toValue, watch } from 'vue'
import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis'
import { useNow } from '@/composables/ticker'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'
import { computed, inject, provide, ref, toValue, watch } from 'vue';
import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
const props = defineProps<{
y_limits?: [number, number]
side?: AxisSide
type?: AxisType
}>()
y_limits?: [number, number];
side?: AxisSide;
type?: AxisType;
}>();
const minor_tick_length = computed(() => 4)
const major_tick_length = computed(() => 8)
const text_offset = computed(() => 5)
const side = computed(() => props.side || AxisSide.Right)
const type = computed(() => props.type || AxisType.Linear)
const minor_tick_length = computed(() => 4);
const major_tick_length = computed(() => 8);
const text_offset = computed(() => 5);
const side = computed(() => props.side || AxisSide.Right);
const type = computed(() => props.type || AxisType.Linear);
const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)]
ticker_locations.reverse()
const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)];
ticker_locations.reverse();
const ticker = useNow(33)
const ticker = useNow(33);
const min_y = ref(Infinity)
const max_y = ref(-Infinity)
const raw_min_y = ref(Infinity)
const raw_max_y = ref(-Infinity)
const min_y = ref(Infinity);
const max_y = ref(-Infinity);
const raw_min_y = ref(Infinity);
const raw_max_y = ref(-Infinity);
const axis_update_watch = ref(0)
const axis_update_watch = ref(0);
watch([ticker], () => {
axis_update_watch.value++
min_y.value = raw_min_y.value
max_y.value = raw_max_y.value
raw_min_y.value = Infinity
raw_max_y.value = -Infinity
})
axis_update_watch.value++;
min_y.value = raw_min_y.value;
max_y.value = raw_max_y.value;
raw_min_y.value = Infinity;
raw_max_y.value = -Infinity;
});
function update_min_y(y: number) {
if (y < min_y.value) {
min_y.value = y
min_y.value = y;
}
if (y < raw_min_y.value) {
raw_min_y.value = y
raw_min_y.value = y;
}
}
function update_max_y(y: number) {
if (y > max_y.value) {
max_y.value = y
max_y.value = y;
}
if (y > raw_max_y.value) {
raw_max_y.value = y
raw_max_y.value = y;
}
}
@@ -58,104 +58,104 @@ function update_max_y(y: number) {
const min_y_value = computed(() => {
if (props.y_limits) {
return props.y_limits[0]
return props.y_limits[0];
}
if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) {
const half_diff_y_value = (max_y.value - min_y.value) / 2.0
const average_y_value = min_y.value + half_diff_y_value
return average_y_value - half_diff_y_value * 1.05
const half_diff_y_value = (max_y.value - min_y.value) / 2.0;
const average_y_value = min_y.value + half_diff_y_value;
return average_y_value - half_diff_y_value * 1.05;
} else {
return -1.0
return -1.0;
}
} else {
if (max_y.value > min_y.value) {
const half_diff_y_value =
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0
const average_y_value = Math.log(min_y.value) + half_diff_y_value
return Math.exp(average_y_value - half_diff_y_value * 1.05)
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0;
const average_y_value = Math.log(min_y.value) + half_diff_y_value;
return Math.exp(average_y_value - half_diff_y_value * 1.05);
} else {
return 0.0
return 0.0;
}
}
})
});
const max_y_value = computed(() => {
if (props.y_limits) {
return props.y_limits[1]
return props.y_limits[1];
}
if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) {
const half_diff_y_value = (max_y.value - min_y.value) / 2.0
const average_y_value = min_y.value + half_diff_y_value
return average_y_value + half_diff_y_value * 1.05
const half_diff_y_value = (max_y.value - min_y.value) / 2.0;
const average_y_value = min_y.value + half_diff_y_value;
return average_y_value + half_diff_y_value * 1.05;
} else {
return 1.0
return 1.0;
}
} else {
if (max_y.value > min_y.value) {
const half_diff_y_value =
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0
const average_y_value = Math.log(min_y.value) + half_diff_y_value
return Math.exp(average_y_value + half_diff_y_value * 1.05)
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0;
const average_y_value = Math.log(min_y.value) + half_diff_y_value;
return Math.exp(average_y_value + half_diff_y_value * 1.05);
} else {
return 1.0
return 1.0;
}
}
})
});
const graph_data = inject<GraphData>(GRAPH_DATA)!
const graph_data = inject<GraphData>(GRAPH_DATA)!;
const y_map = (y: number) => {
const height = toValue(graph_data.height)
const border_top_bottom = toValue(graph_data.border_top_bottom)
let max_value = toValue(max_y_value)
let min_value = toValue(min_y_value)
let y_value = y
const height = toValue(graph_data.height);
const border_top_bottom = toValue(graph_data.border_top_bottom);
let max_value = toValue(max_y_value);
let min_value = toValue(min_y_value);
let y_value = y;
if (type.value == AxisType.Logarithmic) {
max_value = Math.log(max_value)
min_value = Math.log(min_value)
y_value = Math.log(y_value)
}
const diff_y = max_value - min_value
return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom
max_value = Math.log(max_value);
min_value = Math.log(min_value);
y_value = Math.log(y_value);
}
const diff_y = max_value - min_value;
return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom;
};
provide<AxisData>(AXIS_DATA, {
axis_update_watch: axis_update_watch,
min_y_callback: update_min_y,
max_y_callback: update_max_y,
y_map: y_map,
})
});
const lines = computed(() => {
const diff_y_val = (max_y_value.value - min_y_value.value) / 2
const diff_log10 = Math.log10(diff_y_val)
const diff_log10_fraction = diff_log10 - Math.floor(diff_log10)
const diff_y_val = (max_y_value.value - min_y_value.value) / 2;
const diff_log10 = Math.log10(diff_y_val);
const diff_log10_fraction = diff_log10 - Math.floor(diff_log10);
const ticker_location = ticker_locations.find(
location => location < diff_log10_fraction,
)!
const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location)
const major_spread = grid_spread / 2
const minor_spread = major_spread / 2
const minor_ticks = []
const major_ticks = []
const grid_lines = []
(location) => location < diff_log10_fraction,
)!;
const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location);
const major_spread = grid_spread / 2;
const minor_spread = major_spread / 2;
const minor_ticks = [];
const major_ticks = [];
const grid_lines = [];
for (
let i = Math.floor(min_y_value.value / grid_spread);
i <= Math.ceil(max_y_value.value / grid_spread);
i++
) {
const y = i * grid_spread
grid_lines.push(y)
const y = i * grid_spread;
grid_lines.push(y);
}
for (
let i = Math.floor(min_y_value.value / major_spread);
i <= Math.ceil(max_y_value.value / major_spread);
i++
) {
const y = i * major_spread
const y = i * major_spread;
if (grid_lines.indexOf(y) < 0) {
major_ticks.push(y)
major_ticks.push(y);
}
}
for (
@@ -163,13 +163,13 @@ const lines = computed(() => {
i <= Math.ceil(max_y_value.value / minor_spread);
i++
) {
const y = i * minor_spread
const y = i * minor_spread;
if (grid_lines.indexOf(y) < 0 && major_ticks.indexOf(y) < 0) {
minor_ticks.push(y)
minor_ticks.push(y);
}
}
return [minor_ticks, major_ticks, grid_lines]
})
return [minor_ticks, major_ticks, grid_lines];
});
</script>
<template>
@@ -181,7 +181,10 @@ const lines = computed(() => {
></polyline>
<text
class="right_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:x="
graph_data.x_map(toValue(graph_data.max_x)) +
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
@@ -194,7 +197,10 @@ const lines = computed(() => {
></polyline>
<text
class="right_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:x="
graph_data.x_map(toValue(graph_data.max_x)) +
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
>
@@ -207,7 +213,10 @@ const lines = computed(() => {
></polyline>
<text
class="right_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:x="
graph_data.x_map(toValue(graph_data.max_x)) +
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
@@ -222,7 +231,10 @@ const lines = computed(() => {
></polyline>
<text
class="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
@@ -235,7 +247,10 @@ const lines = computed(() => {
></polyline>
<text
class="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
>
@@ -248,14 +263,17 @@ const lines = computed(() => {
></polyline>
<text
class="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
</template>
</g>
</template>
<g clip-path="url(#content)">
<g>
<slot></slot>
</g>
</template>

63
frontend/src/components/SvgGraph.vue
View File

@@ -1,22 +1,22 @@
<script setup lang="ts">
import { computed, provide } from 'vue'
import { useNow } from '@/composables/ticker'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'
import { computed, provide } from 'vue';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
const props = defineProps<{
width: number
height: number
border_left_right?: number
border_top_bottom?: number
width: number;
height: number;
border_left_right?: number;
border_top_bottom?: number;
// min_x?: number
// max_x?: number
}>()
}>();
const svg_viewbox = computed(() => {
return `0 0 ${props.width} ${props.height}`
})
const now = useNow(33)
const window_duration = 30 * 1000 // 30 seconds
return `0 0 ${props.width} ${props.height}`;
});
const now = useNow(33);
const window_duration = 30 * 1000; // 30 seconds
const time_lines = [
1, // 1ms
@@ -36,23 +36,24 @@ const time_lines = [
432000000, // 12h
864000000, // 1d
6048000000, // 1w
]
time_lines.reverse()
const text_offset = computed(() => 5)
];
time_lines.reverse();
const text_offset = computed(() => 5);
const border_left_right = computed(() => props.border_left_right || 0)
const border_top_bottom = computed(() => props.border_top_bottom || 0)
const border_left_right = computed(() => props.border_left_right || 0);
const border_top_bottom = computed(() => props.border_top_bottom || 0);
const max_x = now
const min_x = computed(() => max_x.value - window_duration)
const max_x = now;
const min_x = computed(() => max_x.value - window_duration);
const x_map = (x: number) => {
const diff_x = max_x.value - min_x.value
const diff_x = max_x.value - min_x.value;
return (
((props.width - 2 * border_left_right.value) * (x - min_x.value)) / diff_x +
((props.width - 2 * border_left_right.value) * (x - min_x.value)) /
diff_x +
border_left_right.value
)
}
);
};
provide<GraphData>(GRAPH_DATA, {
border_top_bottom: border_top_bottom,
@@ -61,22 +62,22 @@ provide<GraphData>(GRAPH_DATA, {
width: () => props.width - 2 * border_left_right.value,
height: () => props.height - 2 * border_top_bottom.value,
x_map: x_map,
})
});
const lines = computed(() => {
const diff_x = max_x.value - min_x.value
const duration = time_lines.find(duration => diff_x / duration >= 3)!
const result = []
const diff_x = max_x.value - min_x.value;
const duration = time_lines.find((duration) => diff_x / duration >= 3)!;
const result = [];
for (
let i = Math.ceil(max_x.value / duration);
i >= Math.ceil(min_x.value / duration) - 5;
i--
) {
const x = i * duration
result.push(x)
const x = i * duration;
result.push(x);
}
return result
})
return result;
});
</script>
<template>

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useTelemetry } from '@/composables/telemetry'
import { useTelemetry } from '@/composables/telemetry';
import {
computed,
inject,
@@ -8,109 +8,110 @@ import {
type ShallowRef,
toValue,
watch,
} from 'vue'
} from 'vue';
import {
type TelemetryDataItem,
WEBSOCKET_SYMBOL,
type WebsocketHandle,
} from '@/composables/websocket'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'
import { AXIS_DATA, type AxisData } from '@/graph/axis'
} from '@/composables/websocket';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
import { AXIS_DATA, type AxisData } from '@/graph/axis';
const props = defineProps<{
data: string
color: string
}>()
data: string;
color: string;
}>();
const smoothing_distance = 0.15 * 1000
const smoothing_distance = 0.15 * 1000;
const { data } = useTelemetry(() => props.data)
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!
const value = websocket.value.listen_to_telemetry(data)
const { data } = useTelemetry(() => props.data);
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
const value = websocket.value.listen_to_telemetry(data);
const graph_data = inject<GraphData>(GRAPH_DATA)!
const axis_data = inject<AxisData>(AXIS_DATA)!
const graph_data = inject<GraphData>(GRAPH_DATA)!;
const axis_data = inject<AxisData>(AXIS_DATA)!;
const min = ref(Infinity)
const max = ref(-Infinity)
const min = ref(Infinity);
const max = ref(-Infinity);
const memo = shallowRef<TelemetryDataItem[]>([])
const memo = shallowRef<TelemetryDataItem[]>([]);
watch([value], ([val]) => {
const min_x = toValue(graph_data.min_x)
const min_x = toValue(graph_data.min_x);
if (val) {
const new_memo = [val].concat(memo.value)
const new_memo = [val].concat(memo.value);
while (
new_memo.length > 2 &&
Date.parse(new_memo[new_memo.length - 2].timestamp) < min_x
) {
new_memo.pop()
new_memo.pop();
}
memo.value = new_memo
let min_val = Infinity
let max_val = -Infinity
memo.value = new_memo;
let min_val = Infinity;
let max_val = -Infinity;
for (const item of new_memo) {
const item_val = item.value[data.value!.data_type] as number
min_val = Math.min(min_val, item_val)
max_val = Math.max(max_val, item_val)
const item_val = item.value[data.value!.data_type] as number;
min_val = Math.min(min_val, item_val);
max_val = Math.max(max_val, item_val);
}
max.value = max_val
min.value = min_val
max.value = max_val;
min.value = min_val;
}
})
});
watch(
[min, axis_data.axis_update_watch],
([min_val]) => {
axis_data.min_y_callback(min_val)
axis_data.min_y_callback(min_val);
},
{
immediate: true,
},
)
);
watch(
[max, axis_data.axis_update_watch],
([max_val]) => {
axis_data.max_y_callback(max_val)
axis_data.max_y_callback(max_val);
},
{
immediate: true,
},
)
);
const points = computed(() => {
let points = ''
let points = '';
if (memo.value.length == 0 || data.value == null) {
return ''
return '';
}
let last_x = graph_data.x_map(toValue(graph_data.max_x))
let last_t = toValue(graph_data.max_x) + smoothing_distance
let last_x = graph_data.x_map(toValue(graph_data.max_x));
let last_t = toValue(graph_data.max_x) + smoothing_distance;
for (const data_item of memo.value) {
const t = Date.parse(data_item.timestamp)
const v = data_item.value[data.value.data_type]
const x = graph_data.x_map(t)
const y = axis_data.y_map(v)
const t = Date.parse(data_item.timestamp);
const v = data_item.value[data.value.data_type];
const x = graph_data.x_map(t);
const y = axis_data.y_map(v);
if (last_t - t < smoothing_distance) {
points += ` ${x},${y}`
points += ` ${x},${y}`;
} else {
points += ` ${last_x},${y} ${x},${y}`
points += ` ${last_x},${y} ${x},${y}`;
}
last_x = x
last_t = t
last_x = x;
last_t = t;
if (last_x <= 0.0) {
break
break;
}
}
return points
})
return points;
});
</script>
<template>
<polyline
fill="none"
clip-path="url(#content)"
:stroke="color"
stroke-width="1"
:points="points"

30
frontend/src/composables/telemetry.ts
View File

@@ -1,29 +1,29 @@
import { ref, toValue, watchEffect } from 'vue'
import { type MaybeRefOrGetter } from 'vue'
import { ref, toValue, watchEffect } from 'vue';
import { type MaybeRefOrGetter } from 'vue';
export interface TelemetryDefinition {
uuid: string
name: string
data_type: string
uuid: string;
name: string;
data_type: string;
}
export function useTelemetry(name: MaybeRefOrGetter<string>) {
const data = ref<TelemetryDefinition | null>(null)
const data = ref<TelemetryDefinition | null>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const error = ref<any | null>(null)
const error = ref<any | null>(null);
watchEffect(async () => {
const name_value = toValue(name)
const name_value = toValue(name);
try {
const res = await fetch(`/api/tlm/${name_value}`)
data.value = await res.json()
error.value = null
const res = await fetch(`/api/tlm/${name_value}`);
data.value = await res.json();
error.value = null;
} catch (e) {
data.value = null
error.value = e
data.value = null;
error.value = e;
}
})
});
return { data, error }
return { data, error };
}

18
frontend/src/composables/ticker.ts
View File

@@ -1,19 +1,19 @@
import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
export function useNow(update_ms: number) {
const handle = shallowRef<number | undefined>(undefined)
const now = ref(Date.now())
const handle = shallowRef<number | undefined>(undefined);
const now = ref(Date.now());
onMounted(() => {
handle.value = setInterval(() => {
now.value = Date.now()
}, update_ms)
})
now.value = Date.now();
}, update_ms);
});
onUnmounted(() => {
if (handle.value) {
clearInterval(handle.value)
clearInterval(handle.value);
}
})
});
return now
return now;
}

129
frontend/src/composables/websocket.ts
View File

@@ -8,97 +8,102 @@ import {
shallowRef,
toValue,
watch,
} from 'vue'
import type { TelemetryDefinition } from '@/composables/telemetry'
} from 'vue';
import type { TelemetryDefinition } from '@/composables/telemetry';
export interface TelemetryDataItem {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
value: any
timestamp: string
value: any;
timestamp: string;
}
interface TlmValue {
uuid: string
value: TelemetryDataItem
uuid: string;
value: TelemetryDataItem;
}
export class WebsocketHandle {
websocket: WebSocket | null
should_be_connected: boolean
connected: Ref<boolean>
on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>>
websocket: WebSocket | null;
should_be_connected: boolean;
connected: Ref<boolean>;
on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>>;
constructor() {
this.websocket = null
this.should_be_connected = false
this.connected = ref(false)
this.on_telem_value = new Map()
this.websocket = null;
this.should_be_connected = false;
this.connected = ref(false);
this.on_telem_value = new Map();
}
connect() {
this.should_be_connected = true
this.should_be_connected = true;
if (this.websocket != null) {
return
return;
}
this.websocket = new WebSocket(
location.protocol.replace('http', 'ws') + '//' + location.host + '/ws',
)
location.protocol.replace('http', 'ws') +
'//' +
location.host +
'/ws',
);
this.websocket.addEventListener('open', () => {
this.connected.value = true
})
this.connected.value = true;
});
this.websocket.addEventListener('close', () => {
if (this.should_be_connected) {
this.disconnect()
this.disconnect();
setTimeout(() => {
this.connect()
}, 1000)
this.connect();
}, 1000);
}
})
});
this.websocket.addEventListener('error', () => {
if (this.should_be_connected) {
this.disconnect()
this.disconnect();
setTimeout(() => {
this.connect()
}, 1000)
this.connect();
}, 1000);
}
})
this.websocket.addEventListener('message', event => {
const message = JSON.parse(event.data)
});
this.websocket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
if (message['TlmValue']) {
const tlm_value = message['TlmValue'] as TlmValue
const listeners = this.on_telem_value.get(tlm_value.uuid)
const tlm_value = message['TlmValue'] as TlmValue;
const listeners = this.on_telem_value.get(tlm_value.uuid);
if (listeners) {
listeners.forEach(listener => {
listener(tlm_value.value)
})
listeners.forEach((listener) => {
listener(tlm_value.value);
});
}
}
})
});
}
disconnect() {
this.should_be_connected = false
this.should_be_connected = false;
if (this.websocket == null) {
return
return;
}
this.connected.value = false
this.websocket.close()
this.websocket = null
this.on_telem_value.clear()
this.connected.value = false;
this.websocket.close();
this.websocket = null;
this.on_telem_value.clear();
}
listen_to_telemetry(telemetry: MaybeRefOrGetter<TelemetryDefinition | null>) {
const value_result = ref<TelemetryDataItem | null>(null)
listen_to_telemetry(
telemetry: MaybeRefOrGetter<TelemetryDefinition | null>,
) {
const value_result = ref<TelemetryDataItem | null>(null);
const uuid = computed(() => {
const tlm = toValue(telemetry)
const tlm = toValue(telemetry);
if (tlm) {
return tlm.uuid
return tlm.uuid;
}
return null
})
return null;
});
watch([uuid, this.connected], ([uuid_value, connected]) => {
if (connected && uuid_value) {
@@ -108,31 +113,31 @@ export class WebsocketHandle {
uuid: uuid_value,
},
}),
)
);
if (!this.on_telem_value.has(uuid_value)) {
this.on_telem_value.set(uuid_value, [])
this.on_telem_value.set(uuid_value, []);
}
this.on_telem_value.get(uuid_value)?.push(value => {
value_result.value = value
})
this.on_telem_value.get(uuid_value)?.push((value) => {
value_result.value = value;
});
}
})
});
return value_result
return value_result;
}
}
export const WEBSOCKET_SYMBOL = Symbol()
export const WEBSOCKET_SYMBOL = Symbol();
export function useWebsocket() {
const handle = shallowRef<WebsocketHandle>(new WebsocketHandle())
const handle = shallowRef<WebsocketHandle>(new WebsocketHandle());
onMounted(() => {
handle.value.connect()
})
handle.value.connect();
});
onUnmounted(() => {
handle.value.disconnect()
})
handle.value.disconnect();
});
return handle
return handle;
}

12
frontend/src/graph/axis.ts
View File

@@ -1,4 +1,4 @@
import type { Ref } from 'vue'
import type { Ref } from 'vue';
export enum AxisSide {
Right,
@@ -11,10 +11,10 @@ export enum AxisType {
Logarithmic,
}
export const AXIS_DATA = Symbol()
export const AXIS_DATA = Symbol();
export interface AxisData {
axis_update_watch: Ref<number>
max_y_callback: (y: number) => void
min_y_callback: (y: number) => void
y_map: (y: number) => number
axis_update_watch: Ref<number>;
max_y_callback: (y: number) => void;
min_y_callback: (y: number) => void;
y_map: (y: number) => number;
}

16
frontend/src/graph/graph.ts
View File

@@ -1,12 +1,12 @@
import type { MaybeRefOrGetter } from 'vue'
import type { MaybeRefOrGetter } from 'vue';
export const GRAPH_DATA = Symbol()
export const GRAPH_DATA = Symbol();
export interface GraphData {
border_top_bottom: MaybeRefOrGetter<number>
min_x: MaybeRefOrGetter<number>
max_x: MaybeRefOrGetter<number>
width: MaybeRefOrGetter<number>
height: MaybeRefOrGetter<number>
x_map: (x: number) => number
border_top_bottom: MaybeRefOrGetter<number>;
min_x: MaybeRefOrGetter<number>;
max_x: MaybeRefOrGetter<number>;
width: MaybeRefOrGetter<number>;
height: MaybeRefOrGetter<number>;
x_map: (x: number) => number;
}

14
frontend/src/main.ts
View File

@@ -1,11 +1,11 @@
import './assets/main.scss'
import './assets/main.scss';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App)
const app = createApp(App);
app.use(router)
app.use(router);
app.mount('#app')
app.mount('#app');

6
frontend/src/router/index.ts
View File

@@ -1,4 +1,4 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +9,6 @@ const router = createRouter({
component: () => import('../views/HomeView.vue'),
},
],
})
});
export default router
export default router;

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

@@ -1,12 +1,12 @@
<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 { 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';
const websocket = useWebsocket()
provide(WEBSOCKET_SYMBOL, websocket)
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
</script>
<template>