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

more lines

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-05 20:10:31 -08:00
parent e6a52f971b
commit a353585d47
9 changed files with 269 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
examples/simple_producer/src/main.rs
View File

@@ -122,6 +122,21 @@ async fn main() -> Result<(), Box<dyn Error>> {
let sin_tlm_handle = tlm.register("simple_producer/sin".into(), TelemetryDataType::Float32).await?;
let cos_tlm_handle = tlm.register("simple_producer/cos".into(), TelemetryDataType::Float64).await?;
let sin2_tlm_handle = tlm.register("simple_producer/sin2".into(), TelemetryDataType::Float32).await?;
let cos2_tlm_handle = tlm.register("simple_producer/cos2".into(), TelemetryDataType::Float64).await?;
let sin3_tlm_handle = tlm.register("simple_producer/sin3".into(), TelemetryDataType::Float32).await?;
let cos3_tlm_handle = tlm.register("simple_producer/cos3".into(), TelemetryDataType::Float64).await?;
let sin4_tlm_handle = tlm.register("simple_producer/sin4".into(), TelemetryDataType::Float32).await?;
let cos4_tlm_handle = tlm.register("simple_producer/cos4".into(), TelemetryDataType::Float64).await?;
let sin5_tlm_handle = tlm.register("simple_producer/sin5".into(), TelemetryDataType::Float32).await?;
let cos5_tlm_handle = tlm.register("simple_producer/cos5".into(), TelemetryDataType::Float64).await?;
let sin6_tlm_handle = tlm.register("simple_producer/sin6".into(), TelemetryDataType::Float32).await?;
let cos6_tlm_handle = tlm.register("simple_producer/cos6".into(), TelemetryDataType::Float64).await?;
let cancellation_token = CancellationToken::new();
{
let cancellation_token = cancellation_token.clone();
@@ -149,6 +164,66 @@ async fn main() -> Result<(), Box<dyn Error>> {
),
chrono::Utc::now(),
).await?;
sin2_tlm_handle.publish(
Value::Float32(
(f32::TAU() * (index as f32) / (500.0_f32)).sin()
),
chrono::Utc::now(),
).await?;
cos2_tlm_handle.publish(
Value::Float64(
(f64::TAU() * (index as f64) / (500.0_f64)).cos()
),
chrono::Utc::now(),
).await?;
sin3_tlm_handle.publish(
Value::Float32(
(f32::TAU() * (index as f32) / (333.0_f32)).sin()
),
chrono::Utc::now(),
).await?;
cos3_tlm_handle.publish(
Value::Float64(
(f64::TAU() * (index as f64) / (333.0_f64)).cos()
),
chrono::Utc::now(),
).await?;
sin4_tlm_handle.publish(
Value::Float32(
(f32::TAU() * (index as f32) / (250.0_f32)).sin()
),
chrono::Utc::now(),
).await?;
cos4_tlm_handle.publish(
Value::Float64(
(f64::TAU() * (index as f64) / (250.0_f64)).cos()
),
chrono::Utc::now(),
).await?;
sin5_tlm_handle.publish(
Value::Float32(
(f32::TAU() * (index as f32) / (200.0_f32)).sin()
),
chrono::Utc::now(),
).await?;
cos5_tlm_handle.publish(
Value::Float64(
(f64::TAU() * (index as f64) / (200.0_f64)).cos()
),
chrono::Utc::now(),
).await?;
sin6_tlm_handle.publish(
Value::Float32(
(f32::TAU() * (index as f32) / (166.0_f32)).sin()
),
chrono::Utc::now(),
).await?;
cos6_tlm_handle.publish(
Value::Float64(
(f64::TAU() * (index as f64) / (166.0_f64)).cos()
),
chrono::Utc::now(),
).await?;
}
Ok(())

7
frontend/src/assets/main.scss
View File

@@ -1,4 +1,5 @@
@use '@/assets/variables';
@use 'sass:list';
body {
color: variables.$text-color;
@@ -18,3 +19,9 @@ body {
polyline {
stroke-width: 1px;
}
@for $i from 1 through list.length(variables.$colors) {
.indexed-color.color-#{$i - 1} {
#{--indexed-color}: list.nth(variables.$colors, $i);
}
}

59
frontend/src/assets/variables.scss
View File

@@ -1,19 +1,48 @@
$white-1: oklch(90% 0 0);
$white-2: oklch(80% 0 0);
$gray-1: oklch(70% 0 0);
$gray-2: oklch(60% 0 0);
$gray-3: oklch(50% 0 0);
$gray-4: oklch(40% 0 0);
$gray-5: oklch(30% 0 0);
$black-1: oklch(20% 0 0);
$black-2: oklch(10% 0 0);
$gray-1: oklch(90% 0 0);
$gray-2: oklch(80% 0 0);
$gray-3: oklch(70% 0 0);
$gray-4: oklch(60% 0 0);
$gray-5: oklch(50% 0 0);
$gray-6: oklch(40% 0 0);
$gray-7: oklch(30% 0 0);
$gray-8: oklch(20% 0 0);
$gray-9: oklch(10% 0 0);
$text-color: $white-1;
$background-color: $gray-5;
$red-1: oklch(75% 0.4 030);
$orange-1: oklch(75% 0.4 090);
$green-1: oklch(75% 0.4 150);
$cyan-1: oklch(75% 0.4 210);
$blue-1: oklch(75% 0.4 270);
$magenta-1: oklch(75% 0.4 330);
$time-tick: $white-1;
$grid-line: $white-1;
$major-tick: $gray-2;
$minor-tick: $gray-3;
$red-2: oklch(75% 0.2 030);
$orange-2: oklch(75% 0.2 090);
$green-2: oklch(75% 0.2 150);
$cyan-2: oklch(75% 0.2 210);
$blue-2: oklch(75% 0.2 270);
$magenta-2: oklch(75% 0.2 330);
$text-color: $gray-1;
$background-color: $gray-7;
$time-tick: $gray-1;
$grid-line: $gray-1;
$major-tick: $gray-4;
$minor-tick: $gray-5;
$text-font: Helvetica, sans-serif;
$colors: (
$red-1,
$green-1,
$blue-1,
$orange-1,
$cyan-1,
$magenta-1,
$red-2,
$green-2,
$blue-2,
$orange-2,
$cyan-2,
$magenta-2
);

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

@@ -267,9 +267,7 @@ const lines = computed(() => {
</template>
</g>
</template>
<g>
<slot></slot>
</g>
</template>
<style scoped lang="scss">

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, provide } from 'vue';
import { computed, provide, ref } from 'vue';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
@@ -8,8 +8,7 @@ const props = defineProps<{
height: number;
border_left_right?: number;
border_top_bottom?: number;
// min_x?: number
// max_x?: number
utc?: boolean;
}>();
const width = computed(() => {
@@ -20,9 +19,6 @@ const height = computed(() => {
return props.height;
});
// const svg_viewbox = computed(() => {
// return `0 0 ${props.width} ${props.height}`;
// });
const now = useNow(33);
const window_duration = 10 * 1000; // 10 seconds
@@ -72,6 +68,8 @@ const x_map = (x: number) => {
);
};
const telemetry_lines = ref([]);
provide<GraphData>(GRAPH_DATA, {
border_top_bottom: border_top_bottom,
min_x: min_x,
@@ -79,26 +77,78 @@ provide<GraphData>(GRAPH_DATA, {
width: () => width.value - 2 * border_left_right.value,
height: () => height.value - 2 * border_top_bottom.value,
x_map: x_map,
lines: telemetry_lines,
});
const duration = computed(() => {
const diff_x = max_x.value - min_x.value;
return time_lines.find((duration) => diff_x / duration >= 3)!;
});
const lines = computed(() => {
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;
let i = Math.ceil(max_x.value / duration.value);
i >= Math.ceil(min_x.value / duration.value) - 5;
i--
) {
const x = i * duration;
const x = i * duration.value;
result.push(x);
}
return result;
});
function getDateString(date: Date) {
const year = props.utc ? date.getUTCFullYear() : date.getFullYear();
const month = (
(props.utc ? date.getMonth() : date.getMonth()) + 1
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const day = (props.utc ? date.getUTCDate() : date.getDate()).toLocaleString(
'en-US',
{
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
},
);
const hour = (
props.utc ? date.getUTCHours() : date.getHours()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const minute = (
props.utc ? date.getUTCMinutes() : date.getMinutes()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const second = (
props.utc ? date.getUTCSeconds() : date.getSeconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const milliseconds = (
props.utc ? date.getUTCMilliseconds() : date.getMilliseconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 3,
useGrouping: false,
maximumFractionDigits: 0,
});
return `${year}/${month}/${day} ${hour}:${minute}:${second}${duration.value < 1000 ? `.${milliseconds}` : ''}${props.utc ? 'Z' : ''}`;
}
</script>
<template>
<svg ref="svg_graph" :width="width" :height="height">
<svg ref="svg_graph" class="graph" :width="width" :height="height">
<defs>
<clipPath id="content">
<rect
@@ -135,7 +185,7 @@ const lines = computed(() => {
:x="x_map(tick)"
:y="height - border_top_bottom + text_offset"
>
{{ new Date(tick).toLocaleString() }}
{{ getDateString(new Date(tick)) }}
</text>
</template>
</g>

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

@@ -3,6 +3,8 @@ import { useTelemetry } from '@/composables/telemetry';
import {
computed,
inject,
onMounted,
onUnmounted,
ref,
shallowRef,
type ShallowRef,
@@ -20,7 +22,7 @@ import { AXIS_DATA, type AxisData } from '@/graph/axis';
const props = defineProps<{
data: string;
color: string;
class?: string;
}>();
const smoothing_distance = 0.15 * 1000;
@@ -38,6 +40,19 @@ const axis_data = inject<AxisData>(AXIS_DATA)!;
const min = ref(Infinity);
const max = ref(-Infinity);
const line = ref(Symbol());
const index = computed(() => {
return graph_data.lines.value.indexOf(line.value);
});
onMounted(() => {
graph_data.lines.value.push(line.value);
});
onUnmounted(() => {
graph_data.lines.value = graph_data.lines.value.filter(
(x) => x != line.value,
);
});
const memo = shallowRef<TelemetryDataItem[]>([]);
watch([value], ([val]) => {
const min_x = toValue(graph_data.min_x);
@@ -119,26 +134,13 @@ const current_value = computed(() => {
}
return undefined;
});
const test = computed(() => {
if (labelRef.value) {
const boundingBox = labelRef.value.getBBox();
return boundingBox.top;
}
return undefined;
});
watch([test], (x) => {
console.log(x);
});
</script>
<template>
<g :class="`indexed-color color-${index}`">
<polyline
fill="none"
clip-path="url(#content)"
:stroke="color"
stroke-width="1"
:points="points"
></polyline>
<template v-if="current_value">
@@ -152,31 +154,37 @@ watch([test], (x) => {
:y="axis_data.y_map(current_value) - 9 - background_offset"
:width="labelRef.getBBox().width + background_offset * 2"
:height="16 + background_offset * 2"
:stroke="color"
></rect>
<text
ref="label-ref"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:y="axis_data.y_map(current_value)"
:fill="color"
:stroke="color"
>
{{ current_value.toFixed(2) }}
</text>
</template>
</g>
</template>
<style scoped lang="scss">
@use '@/assets/variables';
text {
alignment-baseline: middle;
font-family: variables.$text-font;
text-anchor: start;
polyline {
stroke-width: 1px;
stroke: var(--indexed-color);
}
rect {
fill: variables.$background-color;
stroke-width: 1px;
stroke: var(--indexed-color);
}
text {
alignment-baseline: middle;
font-family: variables.$text-font;
text-anchor: start;
stroke: var(--indexed-color);
fill: var(--indexed-color);
}
</style>

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

@@ -1,4 +1,4 @@
import type { MaybeRefOrGetter } from 'vue';
import type { MaybeRefOrGetter, Ref } from 'vue';
export const GRAPH_DATA = Symbol();
@@ -9,4 +9,5 @@ export interface GraphData {
width: MaybeRefOrGetter<number>;
height: MaybeRefOrGetter<number>;
x_map: (x: number) => number;
lines: Ref<symbol[]>;
}

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

@@ -18,11 +18,23 @@ provide(WEBSOCKET_SYMBOL, websocket);
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin" color="#FF0000"></Line>
<Line data="simple_producer/cos" color="#00FF00"></Line>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos"></Line>
<!-- <Line data="simple_producer/sin2"></Line>-->
<!-- <Line data="simple_producer/cos2"></Line>-->
<!-- <Line data="simple_producer/sin3"></Line>-->
<!-- <Line data="simple_producer/cos3"></Line>-->
<!-- <Line data="simple_producer/sin4"></Line>-->
<!-- <Line data="simple_producer/cos4"></Line>-->
<!-- <Line data="simple_producer/sin5"></Line>-->
<!-- <Line data="simple_producer/cos5"></Line>-->
<!-- <Line data="simple_producer/sin6"></Line>-->
<!-- <Line data="simple_producer/cos6"></Line>-->
</Axis>
</Graph>
</main>
</template>
<style></style>
<style lang="scss">
@use '@/assets/variables';
</style>

7
frontend/vite.config.ts
View File

@@ -25,5 +25,12 @@ export default defineConfig({
rewriteWsOrigin: true,
}
}
},
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
}
})