S2025 summoning webapp

.gitignore

@@ -182,3 +182,5 @@ GEMstack/knowledge/detection/yolov8n.pt
 GEMstack/knowledge/detection/yolo11n.pt
 yolov8n.pt
 yolo11n.pt
+
+.idea

GEMstack/mathutils/transforms.py

@@ -72,11 +72,11 @@ def point_segment_distance(x,a,b) -> Tuple[float,float]:
     udotv = np.dot(u,v)
     if udotv < 0:
         return vector_norm(u),0
-    elif udotv > vnorm:
+    elif udotv > vnorm**2:
         return vector_norm(vector_sub(x,b)),1
     else:
-        param = udotv/vnorm
-        return vector_norm(vector_sub(u,vector_mul(v,param/vnorm))),param
+        param = udotv/vnorm**2
+        return vector_norm(vector_sub(u,vector_mul(v,param))),param
 
 def rotate2d(point, angle : float, origin=None):
     """Rotates a point about the origin by an angle"""

frontend/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.idea
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,15 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, install packages:
+```bash
+npm install
+```
+
+Then, run the app:
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

frontend/api/inspect.ts

@@ -0,0 +1,14 @@
+import {LngLatLike} from "mapbox-gl";
+
+const inspect = async (boundingBox: LngLatLike[]) => {
+    await fetch('http://localhost:8000/api/inspect', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+        },
+        body: JSON.stringify(boundingBox),
+    });
+};
+
+export {inspect}

frontend/api/status.ts

@@ -0,0 +1,35 @@
+export enum PlannerEnum {
+    RRT_STAR         = "RRT_STAR",
+    HYBRID_A_STAR    = "HYBRID_A_STAR",
+    PARKING          = "PARKING",
+    LEAVE_PARKING    = "LEAVE_PARKING",
+    IDLE             = "IDLE",
+    SUMMON_DRIVING   = "SUMMON_DRIVING",
+    PARALLEL_PARKING = "PARALLEL_PARKING",
+}
+
+interface StatusResponse {
+    status: PlannerEnum;
+}
+
+
+const getCarStatus = async (): Promise<PlannerEnum | null>  => {
+    const res = await fetch("http://localhost:8000/api/status", {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        }
+    });
+
+
+    if (!res.ok) {
+        console.error("Failed to fetch status:", res.statusText);
+        return null;
+    }
+
+    const body: StatusResponse = await res.json();
+    return body.status;
+};
+
+export { getCarStatus };

frontend/api/summon.ts

@@ -0,0 +1,15 @@
+const summon = async (lng: number, lat: number) => {
+  return fetch("http://localhost:8000/api/summon", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      lon: lng,
+      lat,
+    }),
+  });
+};
+
+export { summon };

frontend/app/globals.css

@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+#map-container {
+  height: 100%;
+  width: 100%;
+  background-color: lightgrey;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+}

frontend/app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import {ThemeProvider} from "@/components/theme-provider";
+import {Toaster} from "@/components/ui/sonner";
+import {MobileNav} from "@/components/mobile-nav";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en" className="dark" suppressHydrationWarning>
+        <body className={`${geistMono.className} ${geistSans.className} bg-neutral-950 text-neutral-100`}>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+            <div className="pb-16">{children}</div>
+            <MobileNav />
+            <Toaster
+                theme="dark"
+                position="top-right"
+                toastOptions={{
+                    className: "bg-neutral-800 text-neutral-100 border-neutral-700",
+                    style: {
+                        background: "#262626",
+                        color: "#f5f5f5",
+                        border: "1px solid #404040",
+                    },
+                }}
+            />
+        </ThemeProvider>
+        </body>
+        </html>
+    )
+}

frontend/app/map/page.tsx

@@ -0,0 +1,14 @@
+import { AppHeader } from "@/components/app-header"
+import { MapView } from "@/components/map-view"
+
+export default function MapPage() {
+    return (
+        <main className="flex min-h-screen flex-col items-center bg-neutral-950 text-neutral-100">
+            <AppHeader title="Location" />
+            <div className="w-full h-[calc(100vh-8rem)]">
+                <MapView />
+            </div>
+        </main>
+    )
+}
+

frontend/app/page.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { CarModel } from "@/components/car-model"
+import { CarInfo } from "@/components/car-info"
+import { SummonButton } from "@/components/summon-button"
+import { AppHeader } from "@/components/app-header"
+import { OwnerInfo } from "@/components/owner-info"
+
+export default function Home() {
+  return (
+      <main className="flex min-h-screen flex-col items-center bg-neutral-950 text-neutral-100">
+        <AppHeader title="My Car" />
+
+        <div className="w-full h-[40vh] md:h-[50vh] relative">
+          <CarModel />
+        </div>
+
+        <div className="w-full px-4 pb-6 space-y-4">
+          <OwnerInfo />
+          <SummonButton />
+          <CarInfo />
+        </div>
+      </main>
+  )
+}
+

frontend/app/settings/page.tsx

@@ -0,0 +1,14 @@
+import { AppHeader } from "@/components/app-header"
+import { SettingsForm } from "@/components/settings-form"
+
+export default function SettingsPage() {
+    return (
+        <main className="flex min-h-screen flex-col items-center bg-neutral-950 text-neutral-100">
+            <AppHeader title="Settings" />
+            <div className="w-full p-4">
+                <SettingsForm />
+            </div>
+        </main>
+    )
+}
+

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/components/app-header.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { Info } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { motion } from "framer-motion"
+
+interface AppHeaderProps {
+    title: string
+}
+
+export function AppHeader({ title }: AppHeaderProps) {
+    return (
+        <motion.header
+            className="w-full px-4 py-4 flex justify-between items-center border-b border-neutral-800"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+        >
+            <h1 className="text-xl font-medium">{title}</h1>
+            <div className="flex items-center gap-2">
+                <Button variant="ghost" size="icon" className="rounded-full">
+                    <Info className="h-5 w-5" />
+                </Button>
+            </div>
+        </motion.header>
+    )
+}
+