add custom theme example

Signed-off-by: Teo Koon Peng <[email protected]>
open-rmf · Aug 26, 2024 · 1d6fec8 · 1d6fec8
1 parent 1a7bf2d
commit 1d6fec8
Show file tree

Hide file tree

Showing 12 changed files with 335 additions and 41 deletions.
diff --git a/packages/dashboard/examples/custom-theme/index.html b/packages/dashboard/examples/custom-theme/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%BASE_URL%favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Web application that provides overall visualization and control over the RMF system"
+    />
+    <link rel="shortcut icon" type="image/x-icon" href="%BASE_URL%favicon.ico" />
+    <title>RMF Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/dashboard/examples/custom-theme/index.tsx b/packages/dashboard/examples/custom-theme/index.tsx
@@ -0,0 +1,135 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+
+import { createTheme } from '@mui/material';
+import ReactDOM from 'react-dom/client';
+import { LocallyPersistentWorkspace, RmfDashboard } from 'rmf-dashboard/components';
+import { MicroAppManifest } from 'rmf-dashboard/components/micro-app';
+import doorsApp from 'rmf-dashboard/micro-apps/doors-app';
+import liftsApp from 'rmf-dashboard/micro-apps/lifts-app';
+import createMapApp from 'rmf-dashboard/micro-apps/map-app';
+import robotMutexGroupsApp from 'rmf-dashboard/micro-apps/robot-mutex-groups-app';
+import robotsApp from 'rmf-dashboard/micro-apps/robots-app';
+import tasksApp from 'rmf-dashboard/micro-apps/tasks-app';
+import StubAuthenticator from 'rmf-dashboard/services/stub-authenticator';
+
+/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment */
+// Polar Night
+const nord0 = '#2e3440'; // @ts-ignore
+const nord1 = '#3b4252'; // @ts-ignore
+const nord2 = '#434c5e'; // @ts-ignore
+const nord3 = '#4c566a'; // @ts-ignore
+
+// Snow Storm
+const nord4 = '#d8dee9'; // @ts-ignore
+const nord5 = '#e5e9f0'; // @ts-ignore
+const nord6 = '#eceff4'; // @ts-ignore
+
+// Frost
+const nord7 = '#8fbcbb'; // @ts-ignore
+const nord8 = '#88c0d0'; // @ts-ignore
+const nord9 = '#81a1c1'; // @ts-ignore
+const nord10 = '#5e81ac'; // @ts-ignore
+
+// Aurora
+const nord11 = '#bf616a'; // @ts-ignore
+const nord12 = '#d08770'; // @ts-ignore
+const nord13 = '#ebcb8b'; // @ts-ignore
+const nord14 = '#a3be8c'; // @ts-ignore
+const nord15 = '#b48ead'; // @ts-ignore
+/* eslint-enable @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment */
+
+const nordTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: nord8,
+      contrastText: nord1,
+    },
+    secondary: {
+      main: nord9,
+    },
+    text: {
+      primary: nord4,
+      secondary: nord6,
+      disabled: nord5,
+    },
+    action: {
+      active: nord5,
+      hover: nord5,
+      focus: nord5,
+      selected: nord5,
+      disabled: nord3,
+    },
+    divider: nord3,
+    error: {
+      main: nord11,
+    },
+    warning: {
+      main: nord13,
+    },
+    success: {
+      main: nord14,
+    },
+    background: { default: nord0, paper: nord1 },
+  },
+});
+
+const mapApp = createMapApp({
+  attributionPrefix: 'Open-RMF',
+  defaultMapLevel: 'L1',
+  defaultRobotZoom: 20,
+  defaultZoom: 6,
+});
+
+const appRegistry: MicroAppManifest[] = [
+  mapApp,
+  doorsApp,
+  liftsApp,
+  robotsApp,
+  robotMutexGroupsApp,
+  tasksApp,
+];
+
+export default function App() {
+  return (
+    <RmfDashboard
+      apiServerUrl="http://localhost:8000"
+      trajectoryServerUrl="http://localhost:8006"
+      authenticator={new StubAuthenticator()}
+      helpLink="https://osrf.github.io/ros2multirobotbook/rmf-core.html"
+      reportIssueLink="https://github.com/open-rmf/rmf-web/issues"
+      themes={{ default: nordTheme }}
+      resources={{ fleets: {}, logos: { header: '/resources/defaultLogo.png' } }}
+      tasks={{
+        allowedTasks: [
+          { taskDefinitionId: 'patrol' },
+          { taskDefinitionId: 'delivery' },
+          { taskDefinitionId: 'compose-clean' },
+          { taskDefinitionId: 'custom_compose' },
+        ],
+        pickupZones: [],
+        cartIds: [],
+      }}
+      tabs={[
+        {
+          name: 'Example',
+          route: '',
+          element: (
+            <LocallyPersistentWorkspace
+              defaultWindows={[]}
+              allowDesignMode
+              appRegistry={appRegistry}
+              storageKey="custom-workspace"
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);
diff --git a/packages/dashboard/examples/demo/index.tsx b/packages/dashboard/examples/demo/index.tsx
@@ -2,7 +2,6 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import './app.css';
 
 import ReactDOM from 'react-dom/client';
 import {

diff --git a/packages/dashboard/examples/demo/app.css → packages/dashboard/examples/shared/app.css b/packages/dashboard/examples/demo/app.css → packages/dashboard/examples/shared/app.css
diff --git a/packages/dashboard/examples/shared/index.tsx b/packages/dashboard/examples/shared/index.tsx
@@ -0,0 +1,115 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import './app.css';
+
+import ReactDOM from 'react-dom/client';
+import {
+  InitialWindow,
+  LocallyPersistentWorkspace,
+  RmfDashboard,
+  Workspace,
+} from 'rmf-dashboard/components';
+import { MicroAppManifest } from 'rmf-dashboard/components/micro-app';
+import doorsApp from 'rmf-dashboard/micro-apps/doors-app';
+import liftsApp from 'rmf-dashboard/micro-apps/lifts-app';
+import createMapApp from 'rmf-dashboard/micro-apps/map-app';
+import robotMutexGroupsApp from 'rmf-dashboard/micro-apps/robot-mutex-groups-app';
+import robotsApp from 'rmf-dashboard/micro-apps/robots-app';
+import tasksApp from 'rmf-dashboard/micro-apps/tasks-app';
+import StubAuthenticator from 'rmf-dashboard/services/stub-authenticator';
+
+const mapApp = createMapApp({
+  attributionPrefix: 'Open-RMF',
+  defaultMapLevel: 'L1',
+  defaultRobotZoom: 20,
+  defaultZoom: 6,
+});
+
+const appRegistry: MicroAppManifest[] = [
+  mapApp,
+  doorsApp,
+  liftsApp,
+  robotsApp,
+  robotMutexGroupsApp,
+  tasksApp,
+];
+
+const homeWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 12, h: 6 },
+    microApp: mapApp,
+  },
+];
+
+const robotsWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 7, h: 4 },
+    microApp: robotsApp,
+  },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: doorsApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: liftsApp },
+  { layout: { x: 8, y: 0, w: 5, h: 4 }, microApp: robotMutexGroupsApp },
+];
+
+const tasksWorkspace: InitialWindow[] = [
+  { layout: { x: 0, y: 0, w: 7, h: 8 }, microApp: tasksApp },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+];
+
+export default function App() {
+  return (
+    <RmfDashboard
+      apiServerUrl="http://localhost:8000"
+      trajectoryServerUrl="http://localhost:8006"
+      authenticator={new StubAuthenticator()}
+      helpLink="https://osrf.github.io/ros2multirobotbook/rmf-core.html"
+      reportIssueLink="https://github.com/open-rmf/rmf-web/issues"
+      resources={{ fleets: {}, logos: { header: '/resources/defaultLogo.png' } }}
+      tasks={{
+        allowedTasks: [
+          { taskDefinitionId: 'patrol' },
+          { taskDefinitionId: 'delivery' },
+          { taskDefinitionId: 'compose-clean' },
+          { taskDefinitionId: 'custom_compose' },
+        ],
+        pickupZones: [],
+        cartIds: [],
+      }}
+      tabs={[
+        {
+          name: 'Map',
+          route: '',
+          element: <Workspace initialWindows={homeWorkspace} />,
+        },
+        {
+          name: 'Robots',
+          route: 'robots',
+          element: <Workspace initialWindows={robotsWorkspace} />,
+        },
+        {
+          name: 'Tasks',
+          route: 'tasks',
+          element: <Workspace initialWindows={tasksWorkspace} />,
+        },
+        {
+          name: 'Custom',
+          route: 'custom',
+          element: (
+            <LocallyPersistentWorkspace
+              defaultWindows={[]}
+              allowDesignMode
+              appRegistry={appRegistry}
+              storageKey="custom-workspace"
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);
diff --git a/...ashboard/examples/demo/public/favicon.ico → ...hboard/examples/shared/public/favicon.ico b/...ashboard/examples/demo/public/favicon.ico → ...hboard/examples/shared/public/favicon.ico
diff --git a/...les/demo/public/resources/defaultLogo.png → ...s/shared/public/resources/defaultLogo.png b/...les/demo/public/resources/defaultLogo.png → ...s/shared/public/resources/defaultLogo.png
diff --git a/...dashboard/examples/demo/public/robots.txt → ...shboard/examples/shared/public/robots.txt b/...dashboard/examples/demo/public/robots.txt → ...shboard/examples/shared/public/robots.txt
diff --git a/...xamples/demo/public/silent-check-sso.html → ...mples/shared/public/silent-check-sso.html b/...xamples/demo/public/silent-check-sso.html → ...mples/shared/public/silent-check-sso.html
diff --git a/...es/dashboard/examples/demo/vite.config.ts → .../dashboard/examples/shared/vite.config.ts b/...es/dashboard/examples/demo/vite.config.ts → .../dashboard/examples/shared/vite.config.ts
@@ -5,6 +5,7 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  publicDir: path.resolve(__dirname, 'public'),
   resolve: {
     alias: {
       'rmf-dashboard': path.resolve(__dirname, '../../src'),

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -11,6 +11,7 @@
     "start": "concurrently npm:start:rmf-server npm:start:react",
     "start:airport": "RMF_DASHBOARD_DEMO_MAP=airport_terminal.launch.xml pnpm run start:sim",
     "start:clinic": "RMF_DASHBOARD_DEMO_MAP=clinic.launch.xml pnpm run start:sim",
+    "start:example": "echo vite -c examples/shared/vite.config.ts",
     "start:react": "pnpm run --filter {.}^... build && vite",
     "start:rmf": "node scripts/start-rmf.js",
     "start:rmf-server": "RMF_SERVER_USE_SIM_TIME=true npm --prefix ../api-server start",