🎨 format

app/src/lib/stores/analytics.ts

@@ -1,55 +1,69 @@
-import { type Analytics } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import { type Analytics } from '$lib/types/models'
+import { writable } from 'svelte/store'
 
 let analytics_data = {
-	uptime: <number[]>[],
-	free_heap: <number[]>[],
-	total_heap: <number[]>[],
-	used_heap: <number[]>[],
-	min_free_heap: <number[]>[],
-	max_alloc_heap: <number[]>[],
-	fs_used: <number[]>[],
-	fs_total: <number[]>[],
-	core_temp: <number[]>[],
-	cpu0_usage: <number[]>[],
-	cpu1_usage: <number[]>[],
-	cpu_usage: <number[]>[]
-};
-
-const maxAnalyticsData = 100;
-
-function createAnalytics() {
-	const { subscribe, update } = writable(analytics_data);
-
-	return {
-		subscribe,
-		addData: (content: Analytics) => {
-			update((analytics_data) => ({
-				...analytics_data,
-				uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
-				free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(-maxAnalyticsData),
-				total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				used_heap: [
-					...analytics_data.used_heap,
-					(content.total_heap - content.free_heap) / 1000
-				].slice(-maxAnalyticsData),
-				min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
-				fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
-				core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
-				cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(-maxAnalyticsData),
-				cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(-maxAnalyticsData),
-				cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
-			}));
-		}
-	};
+    uptime: <number[]>[],
+    free_heap: <number[]>[],
+    total_heap: <number[]>[],
+    used_heap: <number[]>[],
+    min_free_heap: <number[]>[],
+    max_alloc_heap: <number[]>[],
+    fs_used: <number[]>[],
+    fs_total: <number[]>[],
+    core_temp: <number[]>[],
+    cpu0_usage: <number[]>[],
+    cpu1_usage: <number[]>[],
+    cpu_usage: <number[]>[]
 }
 
-export const analytics = createAnalytics();
+const maxAnalyticsData = 100
+
+function createAnalytics() {
+    const { subscribe, update } = writable(analytics_data)
+
+    return {
+        subscribe,
+        addData: (content: Analytics) => {
+            update(analytics_data => ({
+                ...analytics_data,
+                uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
+                free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                used_heap: [
+                    ...analytics_data.used_heap,
+                    (content.total_heap - content.free_heap) / 1000
+                ].slice(-maxAnalyticsData),
+                min_free_heap: [
+                    ...analytics_data.min_free_heap,
+                    content.min_free_heap / 1000
+                ].slice(-maxAnalyticsData),
+                max_alloc_heap: [
+                    ...analytics_data.max_alloc_heap,
+                    content.max_alloc_heap / 1000
+                ].slice(-maxAnalyticsData),
+                fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                core_temp: [...analytics_data.core_temp, content.core_temp].slice(
+                    -maxAnalyticsData
+                ),
+                cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(
+                    -maxAnalyticsData
+                ),
+                cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(
+                    -maxAnalyticsData
+                ),
+                cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
+            }))
+        }
+    }
+}
+
+export const analytics = createAnalytics()

app/src/lib/stores/application.ts

@@ -1,67 +1,67 @@
-import { persistentStore } from '$lib/utilities';
-import { get, type Writable } from 'svelte/store';
+import { persistentStore } from '$lib/utilities'
+import { get, type Writable } from 'svelte/store'
 
-import Visualization from '$lib/components/Visualization.svelte';
-import Stream from '$lib/components/Stream.svelte';
-import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
+import Visualization from '$lib/components/Visualization.svelte'
+import Stream from '$lib/components/Stream.svelte'
+import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
 
 export interface WidgetConfig {
-	id: string | number;
-	component: keyof typeof WidgetComponents;
-	props?: Record<string, any>;
+    id: string | number
+    component: keyof typeof WidgetComponents
+    props?: Record<string, any>
 }
 
 export interface WidgetContainerConfig {
-	id: string | number;
-	layout?: 'row' | 'column' | 'wrap';
-	header?: string;
-	widgets: Array<WidgetConfig | WidgetContainerConfig>;
+    id: string | number
+    layout?: 'row' | 'column' | 'wrap'
+    header?: string
+    widgets: Array<WidgetConfig | WidgetContainerConfig>
 }
 
 export const isWidgetConfig = (
-	widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget;
+    widget: WidgetConfig | WidgetContainerConfig
+): widget is WidgetConfig => 'component' in widget
 
 export const WidgetComponents = {
-	Visualization,
-	Stream,
-	ChartWidget
-};
+    Visualization,
+    Stream,
+    ChartWidget
+}
 
 interface View {
-	name: string;
-	content: WidgetContainerConfig;
+    name: string
+    content: WidgetContainerConfig
 }
 
 const defaultViews: View[] = [
-	{
-		name: 'Stream',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Stream' }]
-		}
-	},
-	{
-		name: '3D representation',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
-		}
-	},
-	{
-		name: 'Split screen',
-		content: {
-			id: 'root',
-			widgets: [
-				{ id: 2, component: 'Stream' },
-				{ id: 2, component: 'Visualization', props: { debug: true } }
-			]
-		}
-	}
-];
+    {
+        name: 'Stream',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Stream' }]
+        }
+    },
+    {
+        name: '3D representation',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
+        }
+    },
+    {
+        name: 'Split screen',
+        content: {
+            id: 'root',
+            widgets: [
+                { id: 2, component: 'Stream' },
+                { id: 2, component: 'Visualization', props: { debug: true } }
+            ]
+        }
+    }
+]
 
-export const views: Writable<View[]> = persistentStore('views', defaultViews);
+export const views: Writable<View[]> = persistentStore('views', defaultViews)
 
-export const selectedView = persistentStore('selected_view', get(views)[0].name);
+export const selectedView = persistentStore('selected_view', get(views)[0].name)

app/src/lib/stores/featureFlags.ts

@@ -8,55 +8,55 @@ import { base } from '$app/paths'
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
 export function useFeatureFlags() {
-  if (!featureFlagsStore) {
-    featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
+    if (!featureFlagsStore) {
+        featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
 
-    api.get<Record<string, boolean>>('/api/features').then(result => {
-      if (result.isOk()) featureFlagsStore.set(result.inner)
-      else {
-        notifications.error('Feature flag could not be fetched', 2500)
-      }
-    })
-  }
+        api.get<Record<string, boolean>>('/api/features').then(result => {
+            if (result.isOk()) featureFlagsStore.set(result.inner)
+            else {
+                notifications.error('Feature flag could not be fetched', 2500)
+            }
+        })
+    }
 
-  return featureFlagsStore
+    return featureFlagsStore
 }
 
 export const variants = {
-  SPOTMICRO_ESP32: {
-    model: `${base}/spot_micro.urdf.xacro`,
-    stl: `${base}/stl.zip`,
-    kinematics: {
-      coxa: 60.5 / 100,
-      coxa_offset: 10 / 100,
-      femur: 111.7 / 100,
-      tibia: 118.5 / 100,
-      L: 207.5 / 100,
-      W: 78 / 100
+    SPOTMICRO_ESP32: {
+        model: `${base}/spot_micro.urdf.xacro`,
+        stl: `${base}/stl.zip`,
+        kinematics: {
+            coxa: 60.5 / 100,
+            coxa_offset: 10 / 100,
+            femur: 111.7 / 100,
+            tibia: 118.5 / 100,
+            L: 207.5 / 100,
+            W: 78 / 100
+        }
+    },
+    SPOTMICRO_YERTLE: {
+        model: `${base}/yertle.URDF`,
+        stl: `${base}/URDF.zip`,
+        kinematics: {
+            coxa: 35 / 100,
+            coxa_offset: 0 / 100,
+            femur: 130 / 100,
+            tibia: 130 / 100,
+            L: 240 / 100,
+            W: 78 / 100
+        }
     }
-  },
-  SPOTMICRO_YERTLE: {
-    model: `${base}/yertle.URDF`,
-    stl: `${base}/URDF.zip`,
-    kinematics: {
-      coxa: 35 / 100,
-      coxa_offset: 0 / 100,
-      femur: 130 / 100,
-      tibia: 130 / 100,
-      L: 240 / 100,
-      W: 78 / 100
-    }
-  }
 }
 
 export const currentVariant = derived(useFeatureFlags(), $flagStore => {
-  const variantFlag = $flagStore['variant'] as string
-  return variantFlag && variants[variantFlag as keyof typeof variants] ?
-      variants[variantFlag as keyof typeof variants]
-    : variants.SPOTMICRO_ESP32
+    const variantFlag = $flagStore['variant'] as string
+    return variantFlag && variants[variantFlag as keyof typeof variants] ?
+            variants[variantFlag as keyof typeof variants]
+        :   variants.SPOTMICRO_ESP32
 })
 
 export const currentKinematic = derived(
-  currentVariant,
-  $variant => new Kinematic($variant.kinematics)
+    currentVariant,
+    $variant => new Kinematic($variant.kinematics)
 )

app/src/lib/stores/fullscreen.ts

@@ -1,24 +1,24 @@
-import { writable } from 'svelte/store';
+import { writable } from 'svelte/store'
 
-export const isFullscreen = writable(false);
+export const isFullscreen = writable(false)
 
 export function toggleFullscreen() {
-	isFullscreen.update((state) => {
-		!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
-		return !state;
-	});
+    isFullscreen.update(state => {
+        !state ? document.documentElement.requestFullscreen() : document.exitFullscreen()
+        return !state
+    })
 }
 
 export function enterFullscreen() {
-	if (!document.fullscreenElement) {
-		document.documentElement.requestFullscreen();
-		isFullscreen.set(true);
-	}
+    if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen()
+        isFullscreen.set(true)
+    }
 }
 
 export function exitFullscreen() {
-	if (document.fullscreenElement) {
-		document.exitFullscreen();
-		isFullscreen.set(false);
-	}
+    if (document.fullscreenElement) {
+        document.exitFullscreen()
+        isFullscreen.set(false)
+    }
 }

app/src/lib/stores/gamepad.ts

@@ -1,40 +1,40 @@
 import { readable, derived } from 'svelte/store'
 
 export type GamepadState = {
-  available: boolean
-  gamepads: Gamepad[]
+    available: boolean
+    gamepads: Gamepad[]
 }
 
 export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-  const update = () => {
-    const hasGamepadAPI = 'getGamepads' in navigator
-    if (!hasGamepadAPI) {
-      set({ available: false, gamepads: [] })
-      return
+    const update = () => {
+        const hasGamepadAPI = 'getGamepads' in navigator
+        if (!hasGamepadAPI) {
+            set({ available: false, gamepads: [] })
+            return
+        }
+
+        const gps = navigator.getGamepads?.() ?? []
+        const validGamepads = gps.filter(Boolean) as Gamepad[]
+        set({
+            available: true,
+            gamepads: validGamepads
+        })
+        raf = requestAnimationFrame(update)
     }
 
-    const gps = navigator.getGamepads?.() ?? []
-    const validGamepads = gps.filter(Boolean) as Gamepad[]
-    set({
-      available: true,
-      gamepads: validGamepads
-    })
-    raf = requestAnimationFrame(update)
-  }
+    window.addEventListener('gamepadconnected', update)
+    window.addEventListener('gamepaddisconnected', update)
+    let raf = requestAnimationFrame(update)
 
-  window.addEventListener('gamepadconnected', update)
-  window.addEventListener('gamepaddisconnected', update)
-  let raf = requestAnimationFrame(update)
-
-  return () => {
-    cancelAnimationFrame(raf)
-    window.removeEventListener('gamepadconnected', update)
-    window.removeEventListener('gamepaddisconnected', update)
-  }
+    return () => {
+        cancelAnimationFrame(raf)
+        window.removeEventListener('gamepadconnected', update)
+        window.removeEventListener('gamepaddisconnected', update)
+    }
 })
 
 export const gamepad = derived(gamepads, $gamepads =>
-  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
+    $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
 )
 
 export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
@@ -42,6 +42,6 @@ export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0,
 export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
 
 export const hasGamepad = derived(
-  gamepads,
-  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
+    gamepads,
+    $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
 )

app/src/lib/stores/imu.ts

@@ -1,7 +1,7 @@
-import { writable } from 'svelte/store';
-import type { IMU } from '$lib/types/models';
+import { writable } from 'svelte/store'
+import type { IMU } from '$lib/types/models'
 
-const maxIMUData = 100;
+const maxIMUData = 100
 
 export const imu = (() => {
     const { subscribe, update } = writable({
@@ -12,16 +12,16 @@ export const imu = (() => {
         altitude: [] as number[],
         pressure: [] as number[],
         bmp_temp: [] as number[]
-    });
+    })
 
     const addData = (content: IMU) => {
         update(data => {
-            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
-                data[key] = [...data[key], content[key]].slice(-maxIMUData);
-            });
-            return data;
-        });
-    };
+            ;(Object.keys(content) as (keyof IMU)[]).forEach(key => {
+                data[key] = [...data[key], content[key]].slice(-maxIMUData)
+            })
+            return data
+        })
+    }
 
-    return { subscribe, addData };
-})();
+    return { subscribe, addData }
+})()

app/src/lib/stores/index.ts

@@ -1,9 +1,9 @@
-export * from './socket-store';
-export * from './logging-store';
-export * from './model-store';
-export * from './socket';
-export * from './fullscreen';
-export * from './telemetry';
-export * from './analytics';
-export * from './featureFlags';
-export * from './location-store';
+export * from './socket-store'
+export * from './logging-store'
+export * from './model-store'
+export * from './socket'
+export * from './fullscreen'
+export * from './telemetry'
+export * from './analytics'
+export * from './featureFlags'
+export * from './location-store'

app/src/lib/stores/location-store.ts

@@ -1,5 +1,5 @@
-import { persistentStore } from '$lib/utilities';
-import { writable } from 'svelte/store';
-import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
+import { persistentStore } from '$lib/utilities'
+import { writable } from 'svelte/store'
+import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
+export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '')

app/src/lib/stores/logging-store.ts

@@ -1,11 +1,11 @@
-import { writable, type Writable } from 'svelte/store';
+import { writable, type Writable } from 'svelte/store'
 
 export interface errorLog {
-	message: unknown;
-	tag?: string;
-	exception?: unknown;
+    message: unknown
+    tag?: string
+    exception?: unknown
 }
 
-export const latestErrorLog: Writable<errorLog> = writable();
+export const latestErrorLog: Writable<errorLog> = writable()
 
-export const errorLogs: Writable<errorLog[]> = writable([]);
+export const errorLogs: Writable<errorLog[]> = writable([])

app/src/lib/stores/model-store.ts

@@ -13,28 +13,28 @@ export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'wa
 export type Modes = (typeof modes)[number]
 
 export enum ModesEnum {
-  Deactivated = 0,
-  Idle = 1,
-  Calibration = 2,
-  Rest = 3,
-  Stand = 4,
-  Walk = 5
+    Deactivated = 0,
+    Idle = 1,
+    Calibration = 2,
+    Rest = 3,
+    Stand = 4,
+    Walk = 5
 }
 
 export enum WalkGaits {
-  Trot = 0,
-  Crawl = 1
+    Trot = 0,
+    Crawl = 1
 }
 
 export const walkGaits = ['trot', 'crawl'] as const
 
 export const walkGaitLabels: Record<WalkGaits, string> = {
-  [WalkGaits.Trot]: 'Trot',
-  [WalkGaits.Crawl]: 'Crawl'
+    [WalkGaits.Trot]: 'Trot',
+    [WalkGaits.Crawl]: 'Crawl'
 }
 
 export const walkGaitToMode = (gait: WalkGaits): 'trot' | 'crawl' => {
-  return gait === WalkGaits.Trot ? 'trot' : 'crawl'
+    return gait === WalkGaits.Trot ? 'trot' : 'crawl'
 }
 
 export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated)
@@ -46,9 +46,9 @@ export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0])
 export const kinematicData = writable([0, 0, 0, 0, 1, 0])
 
 export const input: Writable<ControllerInput> = writable({
-  left: { x: 0, y: 0 },
-  right: { x: 0, y: 0 },
-  height: 0.5,
-  speed: 0.5,
-  s1: 0.05
+    left: { x: 0, y: 0 },
+    right: { x: 0, y: 0 },
+    height: 0.5,
+    speed: 0.5,
+    s1: 0.05
 })

app/src/lib/stores/socket-store.ts

@@ -1,27 +1,27 @@
-import { writable, type Writable } from 'svelte/store';
-import { type angles } from '$lib/types/models';
+import { writable, type Writable } from 'svelte/store'
+import { type angles } from '$lib/types/models'
 
 export const servoAnglesOut: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
+    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+])
 export const servoAngles: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
-export const logs = writable([] as string[]);
-export const mpu = writable({ heading: 0 });
-export const sonar = writable([0, 0]);
-export const distances = writable({});
+    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+])
+export const logs = writable([] as string[])
+export const mpu = writable({ heading: 0 })
+export const sonar = writable([0, 0])
+export const distances = writable({})
 
 export interface socketDataCollection {
-	angles: Writable<angles>;
-	logs: Writable<string[]>;
-	mpu: Writable<unknown>;
-	distances: Writable<unknown>;
+    angles: Writable<angles>
+    logs: Writable<string[]>
+    mpu: Writable<unknown>
+    distances: Writable<unknown>
 }
 
 export const socketData = {
-	angles: servoAngles,
-	logs,
-	mpu,
-	distances
-};
+    angles: servoAngles,
+    logs,
+    mpu,
+    distances
+}

app/src/lib/stores/socket.ts

@@ -1,160 +1,160 @@
-import { writable } from 'svelte/store';
-import { encode, decode } from '@msgpack/msgpack';
+import { writable } from 'svelte/store'
+import { encode, decode } from '@msgpack/msgpack'
 
-const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
-type SocketEvent = (typeof socketEvents)[number];
+const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
+type SocketEvent = (typeof socketEvents)[number]
 
-type SocketMessage = [number, string?, unknown?];
+type SocketMessage = [number, string?, unknown?]
 
-let useBinary = false;
+let useBinary = false
 
 const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
-  useBinary = data instanceof ArrayBuffer;
+    useBinary = data instanceof ArrayBuffer
 
-  try {
-    if (useBinary) {
-      return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage;
-    }
-    return JSON.parse(data as string);
-  } catch (error) {
-    console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`);
-  }
-  return null;
-};
-
-const encodeMessage = (data: unknown) => {
-  try {
-    return useBinary ? encode(data) : JSON.stringify(data);
-  } catch (error) {
-    console.error(`Could not encode data: ${data} - ${error}`);
-  }
-};
-
-function createWebSocket() {
-  const listeners = new Map<string, Set<(data?: unknown) => void>>();
-  const { subscribe, set } = writable(false);
-  const reconnectTimeoutTime = 5000;
-  let unresponsiveTimeoutId: ReturnType<typeof setTimeout>;
-  let reconnectTimeoutId: ReturnType<typeof setTimeout>;
-  let ws: WebSocket;
-  let socketUrl: string | URL;
-
-  function init(url: string | URL) {
-    socketUrl = url;
-    connect();
-  }
-
-  function disconnect(reason: SocketEvent, event?: Event) {
-    ws.close();
-    set(false);
-    clearTimeout(unresponsiveTimeoutId);
-    clearTimeout(reconnectTimeoutId);
-    listeners.get(reason)?.forEach(listener => listener(event));
-    reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
-  }
-
-  function connect() {
-    ws = new WebSocket(socketUrl);
-    ws.binaryType = 'arraybuffer';
-    ws.onopen = ev => {
-      ping();
-      useBinary = true;
-      ping();
-      set(true);
-      clearTimeout(reconnectTimeoutId);
-      listeners.get('open')?.forEach(listener => listener(ev));
-      for (const event of listeners.keys()) {
-        if (socketEvents.includes(event as SocketEvent)) continue;
-        subscribeToEvent(event);
-      }
-    };
-    ws.onmessage = frame => {
-      resetUnresponsiveCheck();
-      const message = decodeMessage(frame.data);
-      if (!message) return;
-      const [, event, payload = undefined] = message;
-      if (event) listeners.get(event)?.forEach(listener => listener(payload));
-    };
-    ws.onerror = ev => disconnect('error', ev);
-    ws.onclose = ev => disconnect('close', ev);
-  }
-
-  function unsubscribe(event: string, listener?: (data: unknown) => void) {
-    const eventListeners = listeners.get(event);
-    if (!eventListeners) return;
-
-    if (!eventListeners.size) {
-      unsubscribeToEvent(event);
-    }
-    if (listener) {
-      eventListeners?.delete(listener);
-    } else {
-      listeners.delete(event);
-    }
-  }
-
-  function resetUnresponsiveCheck() {
-    clearTimeout(unresponsiveTimeoutId);
-    unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
-  }
-
-  function sendEvent(event: string, data: unknown) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([2, event, data]);
-  }
-
-  function unsubscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([1, event]);
-  }
-
-  function subscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([0, event]);
-  }
-
-  function send(data: unknown) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    const serialized = encodeMessage(data);
-    if (!serialized) {
-      console.error('Could not serialize data:', data);
-      return;
-    }
-    ws.send(serialized);
-  }
-
-  function ping() {
-    const serialized = encodeMessage([4]);
-    if (!serialized) {
-      console.error('Could not serialize message');
-      return;
-    }
-    ws.send(serialized);
-  }
-
-  return {
-    subscribe,
-    sendEvent,
-    init,
-    on: <T>(event: string, listener: (data: T) => void): (() => void) => {
-      let eventListeners = listeners.get(event);
-      if (!eventListeners) {
-        if (!socketEvents.includes(event as SocketEvent)) {
-          subscribeToEvent(event);
+    try {
+        if (useBinary) {
+            return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage
         }
-        eventListeners = new Set();
-        listeners.set(event, eventListeners);
-      }
-      eventListeners.add(listener as (data: unknown) => void);
-
-      return () => {
-        unsubscribe(event, listener as (data: unknown) => void);
-      };
-    },
-    off: <T>(event: string, listener?: (data: T) => void) => {
-      unsubscribe(event, listener as (data: unknown) => void);
-    },
-  };
+        return JSON.parse(data as string)
+    } catch (error) {
+        console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`)
+    }
+    return null
 }
 
-export const socket = createWebSocket();
+const encodeMessage = (data: unknown) => {
+    try {
+        return useBinary ? encode(data) : JSON.stringify(data)
+    } catch (error) {
+        console.error(`Could not encode data: ${data} - ${error}`)
+    }
+}
+
+function createWebSocket() {
+    const listeners = new Map<string, Set<(data?: unknown) => void>>()
+    const { subscribe, set } = writable(false)
+    const reconnectTimeoutTime = 5000
+    let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
+    let reconnectTimeoutId: ReturnType<typeof setTimeout>
+    let ws: WebSocket
+    let socketUrl: string | URL
+
+    function init(url: string | URL) {
+        socketUrl = url
+        connect()
+    }
+
+    function disconnect(reason: SocketEvent, event?: Event) {
+        ws.close()
+        set(false)
+        clearTimeout(unresponsiveTimeoutId)
+        clearTimeout(reconnectTimeoutId)
+        listeners.get(reason)?.forEach(listener => listener(event))
+        reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
+    }
+
+    function connect() {
+        ws = new WebSocket(socketUrl)
+        ws.binaryType = 'arraybuffer'
+        ws.onopen = ev => {
+            ping()
+            useBinary = true
+            ping()
+            set(true)
+            clearTimeout(reconnectTimeoutId)
+            listeners.get('open')?.forEach(listener => listener(ev))
+            for (const event of listeners.keys()) {
+                if (socketEvents.includes(event as SocketEvent)) continue
+                subscribeToEvent(event)
+            }
+        }
+        ws.onmessage = frame => {
+            resetUnresponsiveCheck()
+            const message = decodeMessage(frame.data)
+            if (!message) return
+            const [, event, payload = undefined] = message
+            if (event) listeners.get(event)?.forEach(listener => listener(payload))
+        }
+        ws.onerror = ev => disconnect('error', ev)
+        ws.onclose = ev => disconnect('close', ev)
+    }
+
+    function unsubscribe(event: string, listener?: (data: unknown) => void) {
+        const eventListeners = listeners.get(event)
+        if (!eventListeners) return
+
+        if (!eventListeners.size) {
+            unsubscribeToEvent(event)
+        }
+        if (listener) {
+            eventListeners?.delete(listener)
+        } else {
+            listeners.delete(event)
+        }
+    }
+
+    function resetUnresponsiveCheck() {
+        clearTimeout(unresponsiveTimeoutId)
+        unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
+    }
+
+    function sendEvent(event: string, data: unknown) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        send([2, event, data])
+    }
+
+    function unsubscribeToEvent(event: string) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        send([1, event])
+    }
+
+    function subscribeToEvent(event: string) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        send([0, event])
+    }
+
+    function send(data: unknown) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        const serialized = encodeMessage(data)
+        if (!serialized) {
+            console.error('Could not serialize data:', data)
+            return
+        }
+        ws.send(serialized)
+    }
+
+    function ping() {
+        const serialized = encodeMessage([4])
+        if (!serialized) {
+            console.error('Could not serialize message')
+            return
+        }
+        ws.send(serialized)
+    }
+
+    return {
+        subscribe,
+        sendEvent,
+        init,
+        on: <T>(event: string, listener: (data: T) => void): (() => void) => {
+            let eventListeners = listeners.get(event)
+            if (!eventListeners) {
+                if (!socketEvents.includes(event as SocketEvent)) {
+                    subscribeToEvent(event)
+                }
+                eventListeners = new Set()
+                listeners.set(event, eventListeners)
+            }
+            eventListeners.add(listener as (data: unknown) => void)
+
+            return () => {
+                unsubscribe(event, listener as (data: unknown) => void)
+            }
+        },
+        off: <T>(event: string, listener?: (data: T) => void) => {
+            unsubscribe(event, listener as (data: unknown) => void)
+        }
+    }
+}
+
+export const socket = createWebSocket()

app/src/lib/stores/telemetry.ts

@@ -1,5 +1,5 @@
-import type { DownloadOTA } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import type { DownloadOTA } from '$lib/types/models'
+import { writable } from 'svelte/store'
 
 let telemetry_data = {
     rssi: {
@@ -10,10 +10,10 @@ let telemetry_data = {
         progress: 0,
         error: ''
     }
-};
+}
 
 function createTelemetry() {
-    const { subscribe, set, update } = writable(telemetry_data);
+    const { subscribe, set, update } = writable(telemetry_data)
 
     return {
         subscribe,
@@ -21,15 +21,15 @@ function createTelemetry() {
             update(telemetry_data => ({
                 ...telemetry_data,
                 rssi: { rssi: data }
-            }));
+            }))
         },
         setDownloadOTA: (data: DownloadOTA) => {
             update(telemetry_data => ({
                 ...telemetry_data,
                 download_ota: { status: data.status, progress: data.progress, error: data.error }
-            }));
+            }))
         }
-    };
+    }
 }
 
-export const telemetry = createTelemetry();
+export const telemetry = createTelemetry()