Added visuals

src/lib/components/AngleVisualizer.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	const { angle }: { angle: number } = $props();
+
+	function calculateRotation() {
+		return `rotate(${angle}deg)`;
+	}
+</script>
+
+<div class="angle-visualizer">
+	<div class="angle-indicator"></div>
+</div>
+
+<style>
+    .angle-visualizer {
+        width: 200px;
+        height: 200px;
+        border: 1px solid black;
+        position: relative;
+    }
+
+    .angle-indicator {
+        width: 100%;
+        height: 2px;
+        background-color: blue;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform-origin: left center;
+        transform: ${calculateRotation()};
+    }
+</style>

src/lib/components/BooleanViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	const { value, name }: { name: string; value?: boolean } = $props();
+	const { value, name }: { name: string; value: null | boolean } = $props();
 </script>
 
 <p class="my-2">

src/lib/components/CurrentViewer.svelte

@@ -6,6 +6,6 @@
 	{name}:
 	<span
 		class={`rounded p-1 ${limit === undefined || current <= limit ? 'bg-green-500' : 'bg-red-500'}`}
-		>{current} amps</span
+		>{current.toFixed(4)} amps</span
 	>
 </p>

src/lib/components/FMSControlData.svelte

@@ -92,6 +92,6 @@
 	}
 	:global(.flashing-element-bg) {
 		background-color: red;
-		animation: flash-bg 0.2s 10 alternate; /* alternate for flashing back and forth */
+		animation: flash-bg 0.5s infinite alternate; /* alternate for flashing back and forth */
 	}
 </style>

src/lib/components/MatchTimer.svelte

@@ -38,11 +38,11 @@
 	</Card.Header>
 	<Card.Content>
 		{#if active}
-			<p class="dynamic-text-size text-center">
+			<p class="dynamic-text-size text-center align-middle">
 				{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}
 			</p>
 		{:else}
-			<p class="dynamic-text-size text-center">Not Active</p>
+			<p class="dynamic-text-size text-center align-middle">Not Active</p>
 		{/if}
 		<!-- {#if value !== null}
 			<code class="text-mono">{value}</code>

src/lib/components/Subsystems.svelte

@@ -44,7 +44,7 @@
 	);
 </script>
 
-<div class="flex flex-col">
+<div class="flex w-[500px] flex-col">
 	<Card.Root>
 		<Card.Header>
 			<Card.Title>Subsystems</Card.Title>

src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>

src/lib/components/vis/CurrentDot.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Tooltip from '../ui/tooltip';
+	const {
+		name,
+		current,
+		limit,
+		klass
+	}: {
+		current: number;
+		name?: string;
+		limit?: number;
+		klass?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<div class={klass}>
+	<Tooltip.Root openDelay={0}>
+		<Tooltip.Trigger>
+			<span
+				class={`rounded-full p-1 ${limit === undefined || current <= limit ? 'bg-green-500' : 'bg-red-500'}`}
+				>{current.toFixed(4)} amps</span
+			>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			{name}
+		</Tooltip.Content>
+	</Tooltip.Root>
+</div>

src/lib/components/vis/SubsystemsGraphic.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import imgSrc from '$lib/assets/robot.png';
+	import { ntEntry } from '../ntEntry.svelte';
+	import CurrentDot from './CurrentDot.svelte';
+	import type { NetworkTables } from 'ntcore-ts-client';
+
+	const { nt }: { nt: NetworkTables } = $props();
+	const intakeCurrent = ntEntry(nt, '/AdvantageKit/RealOutputs/Intake/IntakeCurrent', 'double');
+	const passthroughCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/Intake/PassthroughCurrent',
+		'double'
+	);
+	const ampBarCurrent = ntEntry(nt, '/AdvantageKit/RealOutputs/AmpBar/Current', 'double');
+	const shooterCurrent = ntEntry(nt, '/AdvantageKit/RealOutputs/Shooter/ShooterCurrent', 'double');
+	const shooterFollowCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/Shooter/ShooterFollowCurrent',
+		'double'
+	);
+	const feederCurrent = ntEntry(nt, '/AdvantageKit/RealOutputs/Shooter/FeederCurrent', 'double');
+	// const totalShooterCurrent = $derived(
+	// 	(shooterCurrent.value ?? 0) + (shooterFollowCurrent.value ?? 0) + (feederCurrent.value ?? 0)
+	// );
+</script>
+
+<div class="relative h-fit w-full">
+	<img src={imgSrc} alt="" srcset="" class="pr-3" />
+	<CurrentDot
+		klass="absolute bottom-[30%] left-[30%]"
+		name="Intake"
+		current={intakeCurrent.value ?? 0}
+		limit={60}
+	/>
+	<CurrentDot
+		klass="absolute bottom-[50%] left-[50%]"
+		name="Passthrough"
+		current={passthroughCurrent.value ?? 0}
+		limit={30}
+	/>
+	<CurrentDot
+		klass="absolute top-[4%] left-[40%]"
+		name="Amp Bar"
+		current={ampBarCurrent.value ?? 0}
+		limit={5}
+	/>
+	<CurrentDot
+		klass="absolute top-[15%] right-[25%]"
+		name="Shooter Left"
+		current={shooterCurrent.value ?? 0}
+		limit={60}
+	/>
+	<CurrentDot
+		klass="absolute top-[15%] left-[40%]"
+		name="Shooter Right"
+		current={shooterFollowCurrent.value ?? 0}
+		limit={60}
+	/>
+	<!-- <CurrentDot
+		{nt}
+		klass="absolute bottom-[30%] left-[30%]"
+		name="Intake"
+		path="/AdvantageKit/RealOutputs/Intake/Current"
+	/> -->
+</div>

src/lib/components/vis/SwerveGraphic.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import imgSrc from '$lib/assets/swerveBase.png';
+	import { ntEntry } from '../ntEntry.svelte';
+	import CurrentDot from './CurrentDot.svelte';
+	import type { NetworkTables } from 'ntcore-ts-client';
+
+	const { nt }: { nt: NetworkTables } = $props();
+	const swerveMod0DriveCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule0/DriveMotorCurrent',
+		'double'
+	);
+	const swerveMod0AngleCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule0/AngleMotorCurrent',
+		'double'
+	);
+	const swerveMod1DriveCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule1/DriveMotorCurrent',
+		'double'
+	);
+	const swerveMod1AngleCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule1/AngleMotorCurrent',
+		'double'
+	);
+	const swerveMod2DriveCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule2/DriveMotorCurrent',
+		'double'
+	);
+	const swerveMod2AngleCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule2/AngleMotorCurrent',
+		'double'
+	);
+	const swerveMod3DriveCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule3/DriveMotorCurrent',
+		'double'
+	);
+	const swerveMod3AngleCurrent = ntEntry(
+		nt,
+		'/AdvantageKit/RealOutputs/SwerveModule3/AngleMotorCurrent',
+		'double'
+	);
+</script>
+
+<div class="relative h-full w-fit">
+	<p class="flex justify-center text-xl leading-none">Swerve Front</p>
+	<img src={imgSrc} alt="" srcset="" class="bg-black" />
+	<CurrentDot
+		klass="absolute top-[10%] left-[7%]"
+		name="Front left drive"
+		current={swerveMod0DriveCurrent.value ?? 0}
+		limit={100}
+	/>
+	<CurrentDot
+		klass="absolute top-[20%] left-[7%]"
+		name="Front left angle"
+		current={swerveMod0AngleCurrent.value ?? 0}
+		limit={60}
+	/>
+	<CurrentDot
+		klass="absolute top-[10%] right-[7%]"
+		name="Front right drive"
+		current={swerveMod1DriveCurrent.value ?? 0}
+		limit={100}
+	/>
+	<CurrentDot
+		klass="absolute top-[20%] right-[7%]"
+		name="Front right angle"
+		current={swerveMod1AngleCurrent.value ?? 0}
+		limit={60}
+	/>
+	<CurrentDot
+		klass="absolute bottom-[20%] left-[7%]"
+		name="Bottom left drive"
+		current={swerveMod2DriveCurrent.value ?? 0}
+		limit={100}
+	/>
+	<CurrentDot
+		klass="absolute bottom-[10%] left-[7%]"
+		name="Bottom left angle"
+		current={swerveMod2AngleCurrent.value ?? 0}
+		limit={60}
+	/>
+	<CurrentDot
+		klass="absolute bottom-[20%] right-[7%]"
+		name="Bottom right drive"
+		current={swerveMod3DriveCurrent.value ?? 0}
+		limit={100}
+	/>
+	<CurrentDot
+		klass="absolute bottom-[10%] right-[7%]"
+		name="Bottom right angle"
+		current={swerveMod3AngleCurrent.value ?? 0}
+		limit={60}
+	/>
+</div>

src/routes/+page.svelte

@@ -13,6 +13,8 @@
 	import NtElement from '$lib/components/NTElement.svelte';
 	import Subsystems from '$lib/components/Subsystems.svelte';
 	import MatchInfo from '$lib/components/MatchInfo.svelte';
+	import SubsystemsGraphic from '$lib/components/vis/SubsystemsGraphic.svelte';
+	import SwerveGraphic from '$lib/components/vis/SwerveGraphic.svelte';
 	const TEAM_NUM = 3256;
 	let devMode = $state(true);
 	const nt = $derived(
@@ -23,14 +25,14 @@
 	let active = $state(false);
 </script>
 
-<h1 class="my-3 text-center text-4xl">William's Demise</h1>
+<!-- <h1 class="my-3 text-center text-4xl">William's Demise</h1>
 <div class="flex justify-center">
 	<div class="flex items-center space-x-2">
 		<Switch id="airplane-mode" bind:checked={devMode} />
 		<Label for="airplane-mode">Dev Mode</Label>
 	</div>
-</div>
-<div class="my-3 flex h-[30vh] w-full justify-center space-x-2 px-3">
+</div> -->
+<div class="my-3 flex h-[20vh] w-full justify-center space-x-2 px-3">
 	<FMSControlData
 		{nt}
 		onChange={(robotState) => {
@@ -47,18 +49,28 @@
 </div>
 
 <!-- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> -->
-<div class="flex w-full justify-evenly space-x-2 px-3">
-	<Subsystems {nt} />
-	<div class="flex">
-		<AutoChooser {nt} />
-		<MatchInfo {nt} />
+<div class="flex w-full">
+	<div class="h-fit flex-[50%] flex-col justify-start px-3">
+		<div class="flex">
+			<AutoChooser {nt} />
+			<MatchInfo {nt} />
+			<NtElement
+				{nt}
+				path="/ShuffleBoard/PivotShooter/PivotShooter Position"
+				type="double"
+				name="Pivot Shooter degrees"
+			/>
+		</div>
+		<!-- TODO: 
+					- Flash if able to shoot
+					- Visualizer
+				-->
+		<!-- <Subsystems {nt} /> -->
+		<div class="flex">
+			<SwerveGraphic {nt} />
+		</div>
 	</div>
-	<div>
-		<NtElement
-			{nt}
-			path="/AdvantageKit/RealOutputs/PivotShooter/Degrees"
-			type="double"
-			name="Pivot Shooter degrees"
-		/>
+	<div class="flex-[50%]">
+		<SubsystemsGraphic {nt} />
 	</div>
 </div>