Updates rssi

app/src/lib/components/RSSIIndicator.svelte

@@ -3,33 +3,43 @@
 	import WiFi0 from '~icons/tabler/wifi-0';
 	import WiFi1 from '~icons/tabler/wifi-1';
 	import WiFi2 from '~icons/tabler/wifi-2';
+    import WifiOff from '~icons/tabler/wifi-off';
 
-	export let showDBm = false;
+	export let showDBm = true;
 	export let rssi_dbm = 0;
+	export let ssid = '';
+
+	$: if (ssid === '') {
+		ssid = 'Unknown';
+	}
 </script>
 
 <div class="indicator">
-	{#if showDBm}
+	<div class="tooltip tooltip-left" data-tip={ssid}>
-		<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
+		{#if showDBm}
-			{rssi_dbm} dBm
+			<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
-		</span>
+				{rssi_dbm} dBm
-	{/if}
+			</span>
-	{#if rssi_dbm >= -55}
+		{/if}
-		<WiFi class={$$props.class || ''} />
+		{#if rssi_dbm >= -55}
-	{:else if rssi_dbm >= -75}
+			<WiFi class={$$props.class || ''} />
-		<div class="{$$props.class || ''} relative">
+		{:else if rssi_dbm >= -75}
-			<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+			<div class="{$$props.class || ''} relative">
-			<WiFi2 class="absolute inset-0 h-full w-full" />
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-		</div>
+				<WiFi2 class="absolute inset-0 h-full w-full" />
-	{:else if rssi_dbm >= -85}
+			</div>
-		<div class="{$$props.class || ''} relative">
+		{:else if rssi_dbm >= -85}
-			<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+			<div class="{$$props.class || ''} relative">
-			<WiFi1 class="absolute inset-0 h-full w-full" />
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-		</div>
+				<WiFi1 class="absolute inset-0 h-full w-full" />
-	{:else}
+			</div>
-		<div class="{$$props.class || ''} relative">
+        {:else if rssi_dbm === 0}
-			<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+            <WifiOff class={$$props.class || ''} />
-			<WiFi0 class="absolute inset-0 h-full w-full" />
+		{:else}
-		</div>
+			<div class="{$$props.class || ''} relative">
-	{/if}
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+				<WiFi0 class="absolute inset-0 h-full w-full" />
+			</div>
+		{/if}
+	</div>
 </div>

app/src/lib/stores/telemetry.ts

@@ -1,9 +1,9 @@
+import type { Battery, DownloadOTA } from '$lib/types/models';
 import { writable } from 'svelte/store';
 
 let telemetry_data = {
 	rssi: {
-		rssi: 0,
+		rssi: 0
-		disconnected: true
 	},
 	battery: {
 		soc: 100,
@@ -21,28 +21,22 @@ function createTelemetry() {
 
 	return {
 		subscribe,
-		setRSSI: (data: string) => {
+		setRSSI: (data: number) => {
-			if (!isNaN(Number(data))) {
-				update((telemetry_data) => ({
-					...telemetry_data,
-					rssi: { rssi: Number(data), disconnected: false }
-				}));
-			} else {
-				update((telemetry_data) => ({ ...telemetry_data, rssi: { rssi: 0, disconnected: true } }));
-			}
-		},
-		setBattery: (data: string) => {
-			const content = JSON.parse(data);
 			update((telemetry_data) => ({
 				...telemetry_data,
-				battery: { soc: content.soc, charging: content.charging }
+				rssi: { rssi: data }
 			}));
 		},
-		setDownloadOTA: (data: string) => {
+		setBattery: (data: Battery) => {
-			const content = JSON.parse(data);
 			update((telemetry_data) => ({
 				...telemetry_data,
-				download_ota: { status: content.status, progress: content.progress, error: content.error }
+				battery: { soc: data.soc, charging: data.charging }
+			}));
+		},
+		setDownloadOTA: (data: DownloadOTA) => {
+			update((telemetry_data) => ({
+				...telemetry_data,
+				download_ota: { status: data.status, progress: data.progress, error: data.error }
 			}));
 		}
 	};

app/src/lib/types/models.ts

@@ -74,6 +74,22 @@ export type NTPStatus = {
 	uptime: number;
 };
 
+export type RSSI = {
+	rssi: number;
+	ssid: string;
+};
+
+export type Battery = {
+	soc: number;
+	charging: boolean;
+};
+
+export type DownloadOTA = {
+	status: string;
+	progress: number;
+	error: string;
+};
+
 export type NTPSettings = {
 	enabled: boolean;
 	server: string;
@@ -94,6 +110,11 @@ export type Analytics = {
 	uptime: number;
 };
 
+export type Rssi = {
+	rssi: number;
+	ssid: string;
+};
+
 export type StaticSystemInformation = {
 	esp_platform: string;
 	firmware_version: string;

app/src/routes/+layout.svelte

@@ -15,7 +15,7 @@
 	import Statusbar from './statusbar.svelte';
 	import Login from './login.svelte';
 	import { mode, outControllerData, servoAnglesOut, socket } from '$lib/stores';
-	import type { Analytics } from '$lib/types/models';
+	import type { Analytics, Battery, DownloadOTA, Rssi } from '$lib/types/models';
 
 	export let data: LayoutData;
 
@@ -87,7 +87,7 @@
 
 	const handleClose = () => {
 		notifications.error('Connection to device lost', 5000);
-		telemetry.setRSSI('lost');
+		telemetry.setRSSI(0);
 	};
 
 	const handleError = (data: any) => console.error(data);
@@ -99,11 +99,11 @@
 
 	const handleAnalytics = (data: Analytics) => analytics.addData(data);
 
-	const handleNetworkStatus = (data: string) => telemetry.setRSSI(data);
+	const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
 
-	const handleBattery = (data: string) => telemetry.setBattery(data);
+	const handleBattery = (data: Battery) => telemetry.setBattery(data);
 
-	const handleOAT = (data: string) => telemetry.setDownloadOTA(data);
+	const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
 
 	let menuOpen = false;