🗿 Adds i2c scanner and page

app/src/lib/types/models.ts

@@ -134,4 +134,10 @@ export type IMU = {
 	altitude: number;
 	bmp_temp: number;
 	pressure: number;
+};
+
+export interface I2CDevice {
+    address: number;
+    part_number: string;
+    name: string;
 };

app/src/routes/menu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import logo from '$lib/assets/logo512.png';
 	import MdiGithub from '~icons/mdi/github';
+    import MdiConnection from '~icons/mdi/connection';
 	import Users from '~icons/mdi/users';
 	import Settings from '~icons/mdi/settings';
     import MdiController from '~icons/mdi/controller';
@@ -59,6 +60,12 @@
 			icon: Devices,
 			feature: true,
 			submenu: [
+                {
+					title: 'I2C',
+					icon: MdiConnection,
+					href: '/peripherals/i2c',
+					feature: true,
+				},
 				{
 					title: 'Camera',
 					icon: Camera,

app/src/routes/peripherals/i2c/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import I2C from './i2c.svelte';
+</script>
+
+<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
+	<I2C />
+</div>

app/src/routes/peripherals/i2c/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {
+		title: 'I2C'
+	};
+}) satisfies PageLoad;

app/src/routes/peripherals/i2c/i2c.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import SettingsCard from "$lib/components/SettingsCard.svelte";
+    import MdiConnection from '~icons/mdi/connection';
+	import { onDestroy, onMount } from "svelte";
+	import { socket } from "$lib/stores";
+    import type { I2CDevice } from "$lib/types/models";
+
+    const i2cDevices = [
+        {address:30,  part_number: "HMC5883", name: "3-Axis Digital Compass/Magnetometer IC"},
+        {address:64,  part_number: "PCA9685", name: "16-channel PWM driver default address"},
+        {address:72,  part_number: "ADS1115", name: "4-channel 16-bit ADC"},
+        {address:104,  part_number: "MPU6050", name: "Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices"},
+        {address:119,  part_number: "BMP085", name: "Temp/Barometric"},
+    ];
+
+    let active_devices:I2CDevice[] = [];
+
+    onMount(() => {
+        socket.on('i2cScan', handleScan);
+        socket.sendEvent('i2cScan', "");
+    })
+
+    onDestroy(() => {
+        socket.off('i2cScan', handleScan);
+    })
+
+    const handleScan = (data: any) => {
+        active_devices = data.addresses.map((address:number) => i2cDevices.find(device => device.address === address))
+    }
+</script>
+
+<SettingsCard collapsible={false}>
+    <MdiConnection slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <span slot="title">I<sup>2</sup>C</span>
+
+    <div class="grid">
+        {#each active_devices as device }
+            <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
+        {/each}
+    </div>
+</SettingsCard>