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

adds saving and loading history to and from disk

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 10:08:50 -05:00
parent dfd524ba19
commit 9136c5fd71
15 changed files with 602 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,14 +30,16 @@ const props = defineProps<{
}>();
const smoothing_distance_x = 5;
const maximum_minimum_separation_live = 100; // ms
const text_offset = computed(() => 10);
const min_sep = computed(() => Math.min(props.minimum_separation || 0, maximum_minimum_separation_live));
const { data } = useTelemetry(() => props.data);
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
const value = websocket.value.listen_to_telemetry(
data,
props.minimum_separation,
min_sep,
);
const graph_data = inject<GraphData>(GRAPH_DATA)!;
@@ -84,7 +86,7 @@ watch([value], ([val]) => {
x: val_t,
y: item_val,
} as Point;
memo.value.insert(new_item);
memo.value.insert(new_item, props.minimum_separation);
if (item_val < min.value) {
min.value = item_val;
}

30
frontend/src/graph/line.ts
View File

@@ -34,8 +34,36 @@ export class PointLine {
return left + (this.data[left].x < x ? 1 : 0);
}
insert(point: Point) {
insert(point: Point, maximum_separation?: number) {
const index = this.find_index(point.x);
this.data.splice(index, 0, point);
if (maximum_separation !== undefined) {
this.reduce_to_maximum_separation(maximum_separation, [index - 1, index + 1]);
}
}
reduce_to_maximum_separation(maximum_separation: number, range?: [number, number]) {
if (maximum_separation <= 0) {
return;
}
// Add a default range if it does not exist
range = range || [1, this.data.length - 2];
// clamp it to the bounds
range = [Math.max(1, range[0]), Math.min(this.data.length - 2, range[1])];
// Loop over the indices in the range (backwards so removals don't break anything)
for (let i = range[1]; i >= range[0]; i--) {
const x_previous = this.data[i - 1].x;
const x_current = this.data[i].x;
const x_next = this.data[i + 1].x;
const separation_before = x_current - x_previous;
const separation_after = x_next - x_current;
// If the data points are too close on both sides then delete this point
if (separation_before < maximum_separation && separation_after < maximum_separation) {
this.data.splice(i, 1);
}
}
}
}

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

@@ -28,40 +28,40 @@ provide(WEBSOCKET_SYMBOL, websocket);
:height="400"
:border_top_bottom="24"
:border_left_right="128"
:duration="60 * 1000"
:duration="60 * 1000 * 10"
>
<Axis>
<Line
data="simple_producer/sin"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos4"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin2"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin3"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos2"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin4"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos3"
:minimum_separation="100"
:minimum_separation="2000"
></Line>
</Axis>
</Graph>