Implement Servo Hub Configuration

Author: UnheardWolf344

src/App.svelte

@@ -2,24 +2,27 @@
     import Hub from "./lib/Hub.svelte";
     import CodeDisplay from "./lib/CodeDisplay.svelte";
     import xmlBuilder from "./lib/xmlBuilder.js";
-    import {createEmptyLynxModule, type LynxModule} from "./lib";
+    import {createEmptyLynxModule, createEmptyMotorLynxModule, type LynxModule, type MotorLynxModule} from "./lib";
+    import MotorHub from "./lib/MotorHub.svelte";
 
-    let controlHub: LynxModule = $state(createEmptyLynxModule());
-    let expansionHub: LynxModule = $state(createEmptyLynxModule());
+    let controlHub: MotorLynxModule = $state(createEmptyMotorLynxModule());
+    let expansionHub: MotorLynxModule = $state(createEmptyMotorLynxModule());
+    let servoHub: LynxModule = $state(createEmptyLynxModule());
 
     let configuring = $state(true);
 </script>
 
 <div class="min-h-dvh grid lg:grid-cols-2 lg:p-6 gap-6 bg-base-100">
     <div class:hidden={configuring}
          class="max-w-screen mb-16 lg:mb-0 lg:block bg-base-200 p-4 lg:p-6 lg:rounded-md lg:shadow-sm lg:border-2 lg:border-base-content/20">
-        <CodeDisplay codeBuilder={xmlBuilder} {controlHub} {expansionHub}/>
+        <CodeDisplay codeBuilder={xmlBuilder} {controlHub} {expansionHub} {servoHub}/>
     </div>
     <div class:hidden={!configuring}
          class="lg:block bg-base-200 mb-16 lg:mb-0 lg:rounded-md lg:shadow-sm lg:border-2 lg:border-base-content/20 p-4 lg:p-6">
         <div class="tabs tabs-lift h-[calc(100%---spacing(10))]">
-            <Hub name="Control Hub" bind:module={controlHub} checked={true}/>
-            <Hub name="Expansion Hub" bind:module={expansionHub}/>
+            <MotorHub name="Control Hub" bind:module={controlHub} checked={true}/>
+            <MotorHub name="Expansion Hub" bind:module={expansionHub}/>
+            <Hub name="Servo Hub" bind:module={servoHub}/>
         </div>
     </div>
 </div>

src/lib/CodeDisplay.svelte

@@ -3,18 +3,19 @@
 
     import hljs from "highlight.js";
     import type {Action} from "svelte/action";
-    import type {LynxModule} from "./index";
+    import type {LynxModule, MotorLynxModule} from "./index";
     import type {CodeBuilder} from "./xmlBuilder";
 
     interface Props {
-        controlHub: LynxModule;
-        expansionHub: LynxModule;
+        controlHub: MotorLynxModule;
+        expansionHub: MotorLynxModule;
+        servoHub: LynxModule;
         codeBuilder: CodeBuilder;
     }
 
-    let {controlHub, expansionHub, codeBuilder}: Props = $props();
+    let {controlHub, expansionHub, servoHub, codeBuilder}: Props = $props();
 
-    let code = $derived(codeBuilder.build(controlHub, expansionHub))
+    let code = $derived(codeBuilder.build(controlHub, expansionHub, servoHub))
 
     onMount(() => {
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {

src/lib/Hub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {type Device, DeviceTypes, type LynxModule} from "./index";
+    import {type Device, DeviceTypes, type LynxModule, type MotorLynxModule} from "./index";
     import DeviceGroup from "./DeviceGroup.svelte";
 
     interface Props {
@@ -13,9 +13,5 @@
 
 <input type="radio" name="hub" class="tab" aria-label={name} {checked}/>
 <div class="tab-content bg-base-100 border-base-300 p-6">
-    <DeviceGroup type="Motors" bind:devices={module.motors} deviceTypes={DeviceTypes.MOTORS}/>
     <DeviceGroup type="Servos" bind:devices={module.servos} deviceTypes={DeviceTypes.SERVOS}/>
-    <DeviceGroup type="I<sup>2</sup>C Devices" bind:devices={module.i2c} deviceTypes={DeviceTypes.I2C}/>
-    <DeviceGroup type="Digital Devices" bind:devices={module.digital} deviceTypes={DeviceTypes.DIGITAL}/>
-    <DeviceGroup type="Analog Devices" bind:devices={module.analog} deviceTypes={DeviceTypes.ANALOG}/>
 </div>

src/lib/MotorHub.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {type Device, DeviceTypes, type LynxModule, type MotorLynxModule} from "./index";
+    import DeviceGroup from "./DeviceGroup.svelte";
+
+    interface Props {
+        name: string;
+        checked?: boolean;
+        module: MotorLynxModule;
+    }
+
+    let {name, checked = false, module = $bindable()}: Props = $props();
+</script>
+
+<input type="radio" name="hub" class="tab" aria-label={name} {checked}/>
+<div class="tab-content bg-base-100 border-base-300 p-6">
+    <DeviceGroup type="Motors" bind:devices={module.motors} deviceTypes={DeviceTypes.MOTORS}/>
+    <DeviceGroup type="Servos" bind:devices={module.servos} deviceTypes={DeviceTypes.SERVOS}/>
+    <DeviceGroup type="I<sup>2</sup>C Devices" bind:devices={module.i2c} deviceTypes={DeviceTypes.I2C}/>
+    <DeviceGroup type="Digital Devices" bind:devices={module.digital} deviceTypes={DeviceTypes.DIGITAL}/>
+    <DeviceGroup type="Analog Devices" bind:devices={module.analog} deviceTypes={DeviceTypes.ANALOG}/>
+</div>

src/lib/index.ts

@@ -10,14 +10,23 @@ export interface DeviceType {
 }
 
 export interface LynxModule {
-    motors: Device[];
     servos: Device[];
+}
+
+export interface MotorLynxModule extends LynxModule {
+    motors: Device[];
     i2c: Device[];
     digital: Device[];
     analog: Device[];
 }
 
 export function createEmptyLynxModule(): LynxModule {
+    return {
+        servos: [],
+    }
+}
+
+export function createEmptyMotorLynxModule(): MotorLynxModule {
     return {
         motors: [],
         servos: [],

src/lib/xmlBuilder.ts

@@ -1,24 +1,33 @@
-import type {LynxModule} from "./index";
+import type {LynxModule, MotorLynxModule} from "./index";
 import {create} from "xmlbuilder2";
 import type {XMLBuilder} from "xmlbuilder2/lib/interfaces";
 
 export interface CodeBuilder {
-    build(controlHub: LynxModule, expansionHub: LynxModule): string;
+    build(controlHub: MotorLynxModule, expansionHub: MotorLynxModule, servoHub: LynxModule): string;
 }
 
 class XmlBuilder implements CodeBuilder {
-    build(controlHub: LynxModule, expansionHub: LynxModule): string {
+    build(controlHub: MotorLynxModule, expansionHub: MotorLynxModule, servoHub: LynxModule): string {
         const doc = create({version: '1.0', standalone: true, encoding: "UTF-8"})
             .ele("Robot", {type: "FirstInspires-FTC"})
             .ele("LynxUsbDevice", {name: "Control Hub Portal", serialNumber: "(embedded)", parentModuleAddress: 173})
         const controlHubBuilder = doc.ele("LynxModule", {name: "Control Hub", port: 173});
-        XmlBuilder.buildLynxModule(controlHubBuilder, controlHub);
+        XmlBuilder.buildMotorLynxModule(controlHubBuilder, controlHub);
         const expansionHubBuilder = doc.ele("LynxModule", {name: "Expansion Hub 0", port: 0});
-        XmlBuilder.buildLynxModule(expansionHubBuilder, expansionHub);
+        XmlBuilder.buildMotorLynxModule(expansionHubBuilder, expansionHub);
+        const servoHubBuilder = doc.ele("LynxModule", {name: "Servo Hub 1", port: 1});
+        XmlBuilder.buildLynxModule(servoHubBuilder, servoHub);
+
         return doc.end({prettyPrint: true});
     }
 
     private static buildLynxModule(doc: XMLBuilder, module: LynxModule) {
+        for (const servo of module.servos) {
+            doc.ele(servo.type.type, {name: servo.name, port: servo.port});
+        }
+    }
+
+    private static buildMotorLynxModule(doc: XMLBuilder, module: MotorLynxModule) {
         for (const motor of module.motors) {
             doc.ele(motor.type.type, {name: motor.name, port: motor.port});
         }