📐 Adds socket-service

app/src/components/Controls.svelte

@@ -2,7 +2,7 @@
 	import nipplejs from 'nipplejs';
 	import { onMount } from 'svelte';
 	import { throttler } from '$lib/utilities';
-	import { socket } from '$lib/socket';
+	import socketService from '$lib/services/socket-service';
 	import { emulateModel, input, outControllerData } from '$lib/store';
 
 	let throttle = new throttler();
@@ -64,7 +64,7 @@
 
         outControllerData.set(data)
 
-        if(!$emulateModel) $socket.send(data);
+        if(!$emulateModel) socketService.send(data);
 	};
 
 </script>

app/src/components/Topbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isConnected, status, socket } from '$lib/socket';
+	import socketService from '$lib/services/socket-service';
 	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel } from '$lib/store';
     import { Link, useLocation } from 'svelte-routing'
@@ -12,13 +12,14 @@
 	let selected_view = views[0];
 	let selected_modes = modes[0];
     let settingOpen = window.location.pathname.includes('/settings')
+    let isConnected = socketService.isConnected
 
     $: emulateModel.set(selected_view === views[0])
     $: settingOpen = $location.pathname.includes('/settings')
 
     const stop = () => {
         if ($isConnected) {
-            $socket.send(JSON.stringify({type:"system/stop"}))
+            socketService.send(JSON.stringify({type:"system/stop"}))
         }
     }
 </script>

app/src/components/Views/Model.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onDestroy, onMount } from 'svelte';
 import { CanvasTexture, CircleGeometry, Mesh, MeshBasicMaterial} from 'three';
-import {socket, angles, mpu } from '$lib/socket'
+import socketService from '$lib/services/socket-service';
 import { lerp } from '$lib/utilities';
 import uzip from 'uzip';
 import { model, outControllerData } from '$lib/store';
@@ -10,6 +10,9 @@ import { location } from '$lib/utilities';
 import FileService from '$lib/services/file-service';
 import SceneBuilder from '$lib/sceneBuilder';
 
+const angles = socketService.angles
+const mpu = socketService.mpu
+
 let sceneManager:SceneBuilder
 let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement
 let context: CanvasRenderingContext2D, texture: CanvasTexture
@@ -44,7 +47,7 @@ onMount(async () => {
     await createScene()
 
     outControllerData.subscribe(data => {        
-        $socket.send(JSON.stringify({
+        socketService.send(JSON.stringify({
             type: "kinematic/bodystate", 
             angles:[0, (data[1]-128)/3, (data[2]-128) / 4], 
             position:[(data[4]-128)/2, data[5], (data[3]-128)/2]}))
@@ -59,7 +62,6 @@ const cacheModelFiles = async () => {
     let data = await fetch("/stl.zip").then(data => data.arrayBuffer())
     
     var files = uzip.parse(data);
-    await FileService.openDatabase()
     
     for(const [path, data] of Object.entries(files) as [path:string, data:Uint8Array][]){
         const url = new URL(path, window.location.href)
@@ -69,7 +71,7 @@ const cacheModelFiles = async () => {
 
 const updateAngles = (name:string, angle:number) => {
     modelTargetAngles[servoNames.indexOf(name)] = angle * (180/Math.PI)
-    $socket.send(JSON.stringify({type:"kinematic/angle", angle:angle * (180/Math.PI), id:servoNames.indexOf(name)}))
+    socketService.send(JSON.stringify({type:"kinematic/angle", angle:angle * (180/Math.PI), id:servoNames.indexOf(name)}))
 }
 
 const createScene = async () => {
@@ -117,7 +119,7 @@ const render = () => {
     const points = forwardKinematics.calculateFootpoints(modelAngles.map(ang => degToRad(ang)) as number[])
     robot.position.y = Math.max(...points.map(coord => coord[0] / 100)) - 2.7
     robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1)
-    modelTargetAngles = $angles 
+    modelTargetAngles = $angles
    
     handleVideoStream()
 

app/src/components/settings/Configuration.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-    import { socket, isConnected, settings } from "../../lib/socket";
+    import socketService from "$lib/services/socket-service";
     import { onMount } from 'svelte'
     
+    let isConnected = socketService.isConnected
+    let settings = socketService.settings
+
     onMount(() => {
         if ($isConnected) {
             const message = JSON.stringify({type: 'system/settings'})
-            $socket.send(message)
+            socketService.send(message)
         }
     })
 

app/src/components/settings/Info.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-    import { socket, isConnected, systemInfo } from "../../lib/socket";
     import { onMount } from 'svelte'
 	import { humanFileSize } from "$lib/utilities";
+	import socketService from '$lib/services/socket-service';
+
+    let isConnected = socketService.isConnected
+    let settings = socketService.settings
+    let systemInfo = socketService.systemInfo
     
     onMount(() => {
         if ($isConnected) {
             const message = JSON.stringify({type: 'system/info'})
-            $socket.send(message)
+            socketService.send(message)
         }
     })
 

app/src/components/settings/Log.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-    import { socket, isConnected, log } from "../../lib/socket";
+	import socketService from "$lib/services/socket-service";
     import { onMount } from 'svelte'
+
+    let isConnected = socketService.isConnected
+    let log = socketService.log
     
     onMount(() => {
         if ($isConnected) {
             const message = JSON.stringify({type: 'system/logs'})
-            $socket.send(message)
+            socketService.send(message)
         }
     })