move activities

src/App.css

@@ -144,6 +144,7 @@ video {
 .my-navbar .MuiButtonBase-root {
   margin: 5px;
   letter-spacing: 5px;
+  text-align: center;
   /* box-shadow: rgba(254,254,254,0.25) 0px 1px 3px,
         inset rgba(254,254,254,0.1) 0px 1px 0px,
         inset rgba(0,0,0,0.25) 0px 0px 0px,
@@ -173,6 +174,7 @@ video {
 
 .my-navbar .MuiBottomNavigationAction-label {
   font-size: 1.2rem!important;
+  padding-left: 5px;
 }
 
 .music iframe {

src/App.tsx

@@ -4,20 +4,9 @@ import { Client } from './Client';
 import { className, useWebfxCallback, useWebfxRef } from './utils';
 import { BottomNavigation, BottomNavigationAction } from "@material-ui/core";
 import * as webfx from "@yuuza/webfx";
-import { Sensors, Camera, LocationOn, MusicNote } from "./icons";
-import { RadarAndCamsActivity } from './RadarActivity';
-import { MusicActivity } from './MusicActivity';
-import { LidarActivity } from './LidarActivity';
-import { FrontActivity } from './FrontActivity';
 import { fakeScreen } from './config';
+import { activities, ActivityName } from './activities';
 
-const activities = [
-  { key: 'rac', friendlyName: '撞车', activity: RadarAndCamsActivity, icon: Sensors },
-  { key: 'front', friendlyName: '开车', activity: FrontActivity, icon: Camera },
-  { key: 'lidar', friendlyName: '雷达', activity: LidarActivity, icon: LocationOn },
-  { key: 'music', friendlyName: '音乐', activity: MusicActivity, icon: MusicNote },
-] as const;
-type ActivityName = (typeof activities)[number]['key'];
 
 function App() {
   const [navStateRef] = useState(() => Object.assign(new webfx.Ref<ActivityName>(), { value: 'front' }));

src/Basics.tsx → src/activities/Activity.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { className } from './utils';
+import { className } from '../utils';
 
 export function Activity(props: React.PropsWithChildren<{ className?: string, hidden: boolean; }>) {
   return (

src/FrontActivity.tsx → src/activities/FrontActivity.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Activity } from './Basics';
-import { Client } from './Client';
-import { frontStats } from './config';
-import { useWebfxCallback, useWebfxRef } from './utils';
+import { Activity } from './Activity';
+import { Client } from '../Client';
+import { frontStats } from '../config';
+import { useWebfxCallback, useWebfxRef } from '../utils';
 
 export function FrontActivity(props: { hidden: boolean; }) {
     const canvas = useRef<HTMLCanvasElement>(null);

src/activities/HomeActivity.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Activity } from "./Activity";
+
+export function HomeActivity(props: { hidden: boolean; }) {
+    return <Activity className="home" hidden={props.hidden}>
+
+    </Activity>;
+}

src/LidarActivity.tsx → src/activities/LidarActivity.tsx

@@ -1,13 +1,13 @@
 import { Ref } from '@yuuza/webfx';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Activity } from './Basics';
-import { Client } from './Client';
-import { lidarName } from './config';
-import { useWebfxCallback, useWebfxRef, fromPolar, pointDist } from './utils';
+import { Activity } from './Activity';
+import { Client } from '../Client';
+import { lidarName } from '../config';
+import { useWebfxCallback, useWebfxRef, fromPolar, pointDist } from '../utils';
 
 const CANVAS_SIZE = [600, 600];
 
-export function LidarActivity(props: { hidden: boolean; }) {
+export function LidarView() {
   const windowed = useMemo(() => new DataWindow(Client.current.getData(lidarName), 200, 3), []);
   const data = useWebfxRef(windowed.data);
   const canvas = useRef<HTMLCanvasElement>(null);
@@ -42,7 +42,7 @@ export function LidarActivity(props: { hidden: boolean; }) {
       // ctx.stroke();
       if (data) {
         for (const p of data) {
-          const [quality, rat, dist] = p; 
+          const [quality, rat, dist] = p;
           drawPoint(rat, dist, quality / 15);
         }
       }
@@ -55,10 +55,7 @@ export function LidarActivity(props: { hidden: boolean; }) {
   }, [data]);
 
   return (
-    <Activity hidden={props.hidden} className="lidar">
-      {/* <div>{JSON.stringify(data)}</div> */}
-      <canvas width={CANVAS_SIZE[0]} height={CANVAS_SIZE[1]} ref={canvas}></canvas>
-    </Activity>
+    <canvas width={CANVAS_SIZE[0]} height={CANVAS_SIZE[1]} ref={canvas}></canvas>
   );
 }
 

src/MusicActivity.tsx → src/activities/MusicActivity.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Activity } from './Basics';
+import { Activity } from './Activity';
 
 export function MusicActivity(props: { hidden: boolean; }) {
   return (

src/RadarActivity.tsx → src/activities/RadarActivity.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Activity } from './Basics';
-import { Camera } from './Camera';
-import { CarView } from './CarView';
-import { Client } from './Client';
-import { useWebfxRef } from './utils';
+import { Activity } from './Activity';
+import { Camera } from '../Camera';
+import { CarView } from '../CarView';
+import { Client } from '../Client';
+import { useWebfxRef } from '../utils';
 
 export function RadarAndCamsActivity(props: { hidden: boolean; }) {
   const data = useWebfxRef(Client.current.data);

src/activities/index.ts

@@ -0,0 +1,15 @@
+
+import { Sensors, Camera, LocationOn, MusicNote, Home } from "../icons";
+import { RadarAndCamsActivity } from './RadarActivity';
+import { MusicActivity } from './MusicActivity';
+import { HomeActivity } from './HomeActivity';
+import { FrontActivity } from './FrontActivity';
+
+export const activities = [
+    { key: 'home', friendlyName: '首页', activity: HomeActivity, icon: Home},
+    { key: 'rac', friendlyName: '撞车', activity: RadarAndCamsActivity, icon: Sensors },
+    { key: 'front', friendlyName: '开车', activity: FrontActivity, icon: Camera },
+    // { key: 'lidar', friendlyName: '雷达', activity: LidarActivity, icon: LocationOn },
+    { key: 'music', friendlyName: '音乐', activity: MusicActivity, icon: MusicNote },
+] as const;
+export type ActivityName = (typeof activities)[number]['key'];

src/icons.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import {  } from "@material-ui/icons";
 
 const Sensors = function (){
     return <svg xmlns="http://www.w3.org/2000/svg" className="MuiSvgIcon-root" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path d="M7.76,16.24C6.67,15.16,6,13.66,6,12s0.67-3.16,1.76-4.24l1.42,1.42C8.45,9.9,8,10.9,8,12c0,1.1,0.45,2.1,1.17,2.83 L7.76,16.24z M16.24,16.24C17.33,15.16,18,13.66,18,12s-0.67-3.16-1.76-4.24l-1.42,1.42C15.55,9.9,16,10.9,16,12 c0,1.1-0.45,2.1-1.17,2.83L16.24,16.24z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M20,12 c0,2.21-0.9,4.21-2.35,5.65l1.42,1.42C20.88,17.26,22,14.76,22,12s-1.12-5.26-2.93-7.07l-1.42,1.42C19.1,7.79,20,9.79,20,12z M6.35,6.35L4.93,4.93C3.12,6.74,2,9.24,2,12s1.12,5.26,2.93,7.07l1.42-1.42C4.9,16.21,4,14.21,4,12S4.9,7.79,6.35,6.35z"/></svg>
@@ -8,10 +7,12 @@ const Sensors = function (){
 import Camera from "@material-ui/icons/Camera";
 import LocationOn from "@material-ui/icons/LocationOn";
 import MusicNote from "@material-ui/icons/MusicNote";
+import Home from "@material-ui/icons/Home";
 
 export {
     Sensors,
     Camera,
     LocationOn,
-    MusicNote
+    MusicNote,
+    Home
 };

src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": false,