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

initial implementation of integral types

Browse Source
This commit is contained in:
Sergey Savelyev
2026-01-02 23:51:58 -05:00
parent 458c94c2ad
commit 791518eb3d
17 changed files with 307 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/components/CommandInput.vue
View File

@@ -3,8 +3,10 @@ import { computed, onMounted } from 'vue';
import {
type AnyTypeId,
type DynamicDataType,
getLimits,
isBooleanType,
isNumericType,
type NumericLimits,
} from '@/composables/dynamic.ts';
const props = defineProps<{
@@ -17,6 +19,18 @@ const is_numeric = computed(() => {
return isNumericType(props.type);
});
const numeric_limit = computed(() => {
if (isNumericType(props.type)) {
return getLimits(props.type);
}
return {
min: 0,
max: 0,
integer: false,
is_big: false,
} as NumericLimits;
});
const is_boolean = computed(() => {
return isBooleanType(props.type);
});
@@ -25,18 +39,81 @@ const is_boolean = computed(() => {
onMounted(() => {
if (model.value === undefined) {
if (is_numeric.value) {
model.value = 0.0;
if (numeric_limit.value.integer) {
if (numeric_limit.value.is_big) {
model.value = 0n;
} else {
model.value = 0;
}
} else {
model.value = 0.0;
}
} else if (is_boolean.value) {
debugger;
model.value = false;
}
}
});
const value = computed({
get: () => {
if (is_numeric.value) {
if (numeric_limit.value.is_big) {
return ((model.value || 0n) as bigint).toString();
} else {
return model.value as number;
}
} else if (is_boolean.value) {
// Force it into a boolean
return !!model.value;
}
return undefined;
},
set: (value) => {
if (is_numeric.value) {
if (numeric_limit.value.is_big) {
let result = BigInt(value as string);
if (result > (numeric_limit.value.max as bigint)) {
result = numeric_limit.value.max as bigint;
} else if (result < (numeric_limit.value.min as bigint)) {
result = numeric_limit.value.min as bigint;
}
model.value = result;
} else {
let result_value = value as number;
if (numeric_limit.value.integer) {
result_value = Math.round(value as number);
}
if (result_value > (numeric_limit.value.max as number)) {
result_value = numeric_limit.value.max as number;
} else if (result_value < (numeric_limit.value.min as number)) {
result_value = numeric_limit.value.min as number;
}
model.value = result_value;
}
} else if (is_boolean.value) {
model.value = value as boolean;
}
},
});
</script>
<template>
<input v-if="is_numeric" type="number" v-model="model" />
<input v-else-if="is_boolean" type="checkbox" v-model="model" />
<input
v-if="is_numeric && !numeric_limit.is_big"
type="number"
v-model="value"
:max="numeric_limit.max as number"
:min="numeric_limit.min as number"
:step="numeric_limit.integer ? 1 : undefined"
/>
<input
v-else-if="is_numeric && numeric_limit.is_big"
type="text"
v-model="value"
pattern="-?\d+"
/>
<input v-else-if="is_boolean" type="checkbox" v-model="value" />
<span v-else>UNKNOWN INPUT</span>
</template>

10
frontend/src/components/CommandParameterListConfigurator.vue
View File

@@ -2,6 +2,7 @@
import {
type CommandParameterData,
type DynamicDataType,
getLimits,
isBooleanType,
isNumericType,
} from '@/composables/dynamic.ts';
@@ -40,7 +41,8 @@ watch([command_info], ([cmd_info]) => {
switch (model_param_value.type) {
case 'constant':
if (
typeof model_param_value.value == 'number' &&
(typeof model_param_value.value == 'number' ||
typeof model_param_value.value == 'bigint') &&
!isNumericType(param.data_type)
) {
model_param_value = undefined;
@@ -59,7 +61,11 @@ watch([command_info], ([cmd_info]) => {
if (model_param_value === undefined) {
let default_value: DynamicDataType = 0;
if (isNumericType(param.data_type)) {
default_value = 0;
if (getLimits(param.data_type).is_big) {
default_value = 0n;
} else {
default_value = 0;
}
} else if (isBooleanType(param.data_type)) {
default_value = false;
}

3
frontend/src/components/CommandSender.vue
View File

@@ -4,6 +4,7 @@ import { ref } from 'vue';
import CommandParameter from '@/components/CommandParameter.vue';
import FlexDivider from '@/components/FlexDivider.vue';
import type { DynamicDataType } from '@/composables/dynamic.ts';
import { toJsonString } from '@/composables/json.ts';
const props = defineProps<{
command: CommandDefinition | null;
@@ -27,7 +28,7 @@ async function sendCommand() {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
body: toJsonString(params),
});
if (response.ok) {
result.value = await response.json();

3
frontend/src/components/DynamicComponent.vue
View File

@@ -7,6 +7,7 @@ import {
} from '@/composables/dynamic.ts';
import { computed, defineAsyncComponent, inject, type Ref, ref } from 'vue';
import CommandParameterListConfigurator from '@/components/CommandParameterListConfigurator.vue';
import { toJsonString } from '@/composables/json.ts';
const TelemetryValue = defineAsyncComponent(
() => import('@/components/TelemetryValue.vue'),
@@ -166,7 +167,7 @@ async function sendCommand(command: {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
body: toJsonString(params),
});
busy.value = false;
}

5
frontend/src/components/NumericText.vue
View File

@@ -3,7 +3,7 @@ import { computed, watch } from 'vue';
import CopyableDynamicSpan from '@/components/CopyableDynamicSpan.vue';
const props = defineProps<{
value: number;
value: number | bigint;
max_width: number;
copyable?: boolean;
include_span?: boolean;
@@ -23,6 +23,9 @@ const display_value = computed(() => {
if (props.value == 0) {
return '0';
}
if (typeof props.value === 'bigint') {
return props.value.toString();
}
let precision = props.value.toPrecision(props.max_width - 3);
// Chop off the last character as long as it is a 0
while (

73
frontend/src/composables/dynamic.ts
View File

@@ -1,5 +1,74 @@
export const NumericTypes = ['Float32', 'Float64'] as const;
export const NumericTypes = [
'Float32',
'Float64',
'Int8',
'Int16',
'Int32',
'Int64',
'Unsigned8',
'Unsigned16',
'Unsigned32',
'Unsigned64',
] as const;
export type NumericTypeId = (typeof NumericTypes)[number];
export type NumericLimits = {
min: number | bigint;
max: number | bigint;
integer: boolean;
is_big: boolean;
};
export function getLimits(numeric_type: NumericTypeId): NumericLimits {
switch (numeric_type) {
case 'Float32':
return {
integer: false,
is_big: false,
min: -3.40282347e38,
max: 3.40282347e38,
};
case 'Float64':
return {
integer: false,
is_big: false,
min: -1.7976931348623157e308,
max: 1.7976931348623157e308,
};
case 'Int8':
return { integer: true, is_big: false, min: -128, max: 127 };
case 'Int16':
return { integer: true, is_big: false, min: -32768, max: 32767 };
case 'Int32':
return {
integer: true,
is_big: false,
min: -2147483648,
max: 2147483647,
};
case 'Int64':
return {
integer: true,
is_big: true,
min: -9223372036854775808n,
max: 9223372036854775807n,
};
case 'Unsigned8':
return { integer: true, is_big: false, min: 0, max: 255 };
case 'Unsigned16':
return { integer: true, is_big: false, min: 0, max: 65535 };
case 'Unsigned32':
return { integer: true, is_big: false, min: 0, max: 4294967295 };
case 'Unsigned64':
return {
integer: true,
is_big: true,
min: 0,
max: 18446744073709551615n,
};
}
}
export const BooleanTypes = ['Boolean'] as const;
export type BooleanTypeId = (typeof BooleanTypes)[number];
export const AnyTypes = [...NumericTypes, ...BooleanTypes] as const;
@@ -12,7 +81,7 @@ export function isBooleanType(type: AnyTypeId): type is BooleanTypeId {
return BooleanTypes.some((it) => it == type);
}
export type DynamicDataType = number | boolean;
export type DynamicDataType = bigint | number | boolean;
export type CommandParameterData =
| {

20
frontend/src/composables/json.ts Normal file
View File

@@ -0,0 +1,20 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function toJsonString(data: any): string {
return JSON.stringify(data, (_key, value) => {
if (typeof value == 'bigint') {
return JSON.rawJSON(value.toString());
}
return value;
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function parseJsonString(data: string): any {
return JSON.parse(data, (key, value, context) => {
if (key === 'Int64' || key == 'Unsigned64') {
// Or use the constructor of your custom high-precision number library
return BigInt(context.source);
}
return value;
});
}

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

@@ -12,6 +12,7 @@ import {
} from 'vue';
import type { TelemetryDefinition } from '@/composables/telemetry';
import { onDocumentVisibilityChange } from '@/composables/document.ts';
import { parseJsonString, toJsonString } from '@/composables/json.ts';
export interface TelemetryDataItem {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -71,7 +72,7 @@ export class WebsocketHandle {
}
});
this.websocket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
const message = parseJsonString(event.data);
if (message['TlmValue']) {
const tlm_value = message['TlmValue'] as TlmValue;
const listeners = this.on_telem_value.get(tlm_value.uuid);
@@ -126,7 +127,7 @@ export class WebsocketHandle {
([uuid_value, connected, enabled, min_sep, live_value]) => {
if (connected && enabled && uuid_value && live_value) {
this.websocket?.send(
JSON.stringify({
toJsonString({
RegisterTlmListener: {
uuid: uuid_value,
minimum_separation_ms: min_sep,
@@ -142,7 +143,7 @@ export class WebsocketHandle {
this.on_telem_value.get(uuid_value)?.push(callback_fn);
onWatcherCleanup(() => {
this.websocket?.send(
JSON.stringify({
toJsonString({
UnregisterTlmListener: {
uuid: uuid_value,
},

11
frontend/src/views/PanelEditorView.vue
View File

@@ -2,6 +2,7 @@
import DynamicComponent from '@/components/DynamicComponent.vue';
import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
import { ref, watchEffect } from 'vue';
import { parseJsonString, toJsonString } from '@/composables/json.ts';
const data = ref<OptionalDynamicComponentData>({ type: 'none' });
@@ -29,7 +30,7 @@ async function load(id: string) {
loading.value = true;
const panel_data = await fetch(`/api/panel/${id}`);
const panel_json_value = await panel_data.json();
data.value = JSON.parse(
data.value = parseJsonString(
panel_json_value['data'],
) as OptionalDynamicComponentData;
panel_name.value = panel_json_value['name'];
@@ -50,9 +51,9 @@ async function save() {
if (panel_id_value) {
const res = await fetch(`/api/panel/${panel_id_value}`, {
method: 'PUT',
body: JSON.stringify({
body: toJsonString({
name: panel_name.value,
data: JSON.stringify(data.value),
data: toJsonString(data.value),
}),
headers: {
'Content-Type': 'application/json',
@@ -62,9 +63,9 @@ async function save() {
} else {
const res = await fetch('/api/panel', {
method: 'POST',
body: JSON.stringify({
body: toJsonString({
name: panel_name.value,
data: JSON.stringify(data.value),
data: toJsonString(data.value),
}),
headers: {
'Content-Type': 'application/json',

3
frontend/src/views/PanelView.vue
View File

@@ -6,6 +6,7 @@ import type {
} from '@/composables/dynamic.ts';
import { computed, provide, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { parseJsonString } from '@/composables/json.ts';
const route = useRoute();
@@ -22,7 +23,7 @@ provide('inputs', inputs);
watchEffect(async () => {
const panel_data = await fetch(`/api/panel/${id.value}`);
const panel_json_value = await panel_data.json();
panel.value = JSON.parse(
panel.value = parseJsonString(
panel_json_value['data'],
) as OptionalDynamicComponentData;
});