Merge pull request #173 from opensim-org/dev

Merge Dev into master

src/App.tsx

@@ -7,7 +7,6 @@ import LogoutPage from './components/pages/LogoutPage'
 import RegisterPage from './components/pages/RegisterPage'
 import Chart from './components/pages/Chart'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import './App.css'
 import { observer } from 'mobx-react'
 import { ThemeProvider, CssBaseline } from '@mui/material'
 import appTheme from './Theme'
@@ -21,8 +20,9 @@ import '@aws-amplify/ui-react/styles.css';
 import { useMediaQuery } from '@mui/material';
 import { useMediaQuery as useResponsiveQuery } from 'react-responsive';
 import screenfull from 'screenfull';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import './App.css'
 
 import awsconfig from './aws-exports';
 Amplify.configure(awsconfig);
@@ -37,6 +37,7 @@ function App({ signOut, user }: WithAuthenticatorProps) {
   const isPortrait = useDeviceOrientation();
   const isSmallScreen = useMediaQuery('(max-width:600px)');
   const elementRef = useRef(null);
+  const [ displayAppBar, setDisplayAppBar ] = useState('inherit');
 
   const toggleFullscreen = () => {
     if (screenfull.isEnabled) {
@@ -53,6 +54,19 @@ function App({ signOut, user }: WithAuthenticatorProps) {
       alert(t('app.switch_landscape'));
     }
   }, [isSmallScreen, isPortrait, t]);
+
+  React.useEffect(() => {
+    // Parse URL parameters
+    const urlParams = new URLSearchParams(window.location.search);
+    const cssParam = urlParams.get('css'); // Assuming 'css' is the parameter name
+
+    // Set gui mode if parameter is present.
+    if (cssParam === 'gui') {
+      viewerState.setIsGuiMode(true)
+      setDisplayAppBar('none')
+    }
+  }, []);
+
     // On file system we'll have a folder per model containing cached/versioned gltf, possibly .osim file, data files, display 
     // preferences
     // urls could be something like:
@@ -71,7 +85,9 @@ function App({ signOut, user }: WithAuthenticatorProps) {
             <CssBaseline />
             <BrowserRouter>
                 <div className="App" style={{ width: '100%', overflow: 'auto', backgroundColor: viewerState.dark ? appTheme.palette.background.default : lightTheme.palette.background.default}} ref={elementRef}>
-                    <OpenSimAppBar dark={viewerState.dark} isLoggedIn={viewerState.isLoggedIn} isFullScreen={viewerState.isFullScreen} toggleFullscreen={toggleFullscreen}/>
+                    <div id="opensim-appbar-visibility" style={{display: displayAppBar}}>
+                      <OpenSimAppBar dark={viewerState.dark} isLoggedIn={viewerState.isLoggedIn} isFullScreen={viewerState.isFullScreen} toggleFullscreen={toggleFullscreen}/>
+                    </div>
                     <div>
                         <Routes>
                             <Route path="/" element={<HomePage />} />
@@ -84,10 +100,6 @@ function App({ signOut, user }: WithAuthenticatorProps) {
                                 path="/viewer/:urlParam?"
                                 element={<ModelViewPage />}
                             />
-                            <Route
-                                path="/embed-viewer/:urlParam?"
-                                element={<ModelViewPage embedded={true} noFloor={true} />}
-                            />
                             <Route
                                 path="/log_in"
                                 element={<LoginPage isLoggedIn={viewerState.isLoggedIn}/>}

src/backend/lambda_function.py

@@ -48,6 +48,12 @@ def handler(event, context):
         print("Attempting to download")
         s3.download_file(source_bucket, object_key, file_name)
 
+    user_uuid = ""
+    if "user_uuid" in event:
+        user_uuid = event["user_uuid"] + "/"
+
+    print("user_uuid: " + user_uuid)
+
     print("setup conversion function")
     target_bucket = 'opensim-viewer-public-download'
     print("file_name", file_name)
@@ -62,7 +68,8 @@ def handler(event, context):
         gltfJson.save(destinationFile)
         print("Gltf file saved")
         destinationFileName = Path(file_name).with_suffix('.gltf')
-        strDestinationFileName = str(destinationFileName).split('/')[-1]
+        strDestinationFileName = user_uuid + str(destinationFileName).split('/')[-1]
+        print("Destination File Name: " + strDestinationFileName)
         # print("DestinationFile string", strDestinationFileName)
         s3.upload_file(destinationFile, target_bucket, strDestinationFileName)
         # print("File upload launched")

src/components/Components/DropFile.tsx

@@ -20,7 +20,11 @@ const lambda = new AWS.Lambda({
   region: 'us-west-2', // replace with your region
 });
 
-const FileDropArea = observer(() => {
+interface FileDropAreaProps {
+  paddingY?: number;
+}
+
+const FileDropArea: React.FC<FileDropAreaProps> =observer(({ paddingY = 16}) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
@@ -108,24 +112,23 @@ const FileDropArea = observer(() => {
             viewerState.isLocalUpload = true
         } else {
             Storage.put(file.name, file).then(()=>{
-              /*
-                const api_url = 'https://eudfxg3a9l.execute-api.us-west-2.amazonaws.com/dev/'
-                axios.post(api_url, data).then(response => {
-                  const gltf_url = response.data['url']; .replace(/\.\w+$/, '.gltf')
-                  appState.setCurrentModelPath(gltf_url); */
+
+              let user_uuid = viewerState.user_uuid;
+
               const params: AWS.Lambda.InvocationRequest = {
                 FunctionName: 'opensim-viewer-func', // replace with your Lambda function's name
                 Payload: JSON.stringify({
                     s3: 'opensimviewer-input-bucket101047-dev',
-                    key: 'public/'+file.name
+                    key: 'public/' + file.name,
+                    user_uuid: user_uuid
                 })
               };
               lambda.invoke(params, (err: any, data: any) => {
                     if (err) {
                         console.error(err);
                     } else {
                       const key = file.name.replace(/\.\w+$/, '.gltf')
-                      const gltf_url = "https://s3.us-west-2.amazonaws.com/opensim-viewer-public-download/"+key
+                      const gltf_url = "https://s3.us-west-2.amazonaws.com/opensim-viewer-public-download/" + user_uuid + "/"+key
                       /* appState.setCurrentModelPath(gltf_url); */
                       navigate("/viewer/"+encodeURIComponent(gltf_url))
                       console.log('Lambda function invoked successfully:', data);
@@ -152,7 +155,7 @@ const FileDropArea = observer(() => {
       sx={{
         border: '1px dashed gray',
         borderRadius: '4px',
-        padding: '16px',
+        padding: `${paddingY}px`,
         textAlign: 'center',
         cursor: 'pointer',
       }}

src/components/Components/FloatingControlsPanel.css

@@ -1,7 +1,6 @@
 /* FloatingButton.css */
 .floating-buttons-container {
   position: absolute;
-  top: 80px;
   right: 25px;
   z-index: 999;
 }

src/components/Components/FloatingControlsPanel.tsx

@@ -16,6 +16,7 @@ import { ModelInfo } from '../../state/ModelUIState';
 interface FloatingControlsPanelProps {
   videoRecorderRef: any;
   info: ModelInfo;
+  top: string;
 }
 
 function FloatingControlsPanel(props :FloatingControlsPanelProps) {
@@ -29,7 +30,7 @@ function FloatingControlsPanel(props :FloatingControlsPanelProps) {
   };
 
   return (
-    <div className="floating-buttons-container">
+    <div className="floating-buttons-container" style={{top: props.top}}>
 
     <Grid container spacing={0} direction="row">
       <Grid item xs={3}>

src/components/pages/BottomBar.tsx

@@ -10,6 +10,7 @@ import { observer } from 'mobx-react'
 import { AnimationClip } from 'three';
 import { useTranslation } from 'react-i18next';
 import { useModelContext } from '../../state/ModelUIStateContext';
+import { Camera } from 'three/src/cameras/Camera'
 import React, { useCallback, useRef } from 'react';
 
 const NonAnimatedSlider = styled(Slider)(({ theme } : {theme:any}) => ({
@@ -39,6 +40,7 @@ const BottomBar = React.forwardRef(function CustomContent(
     const [speed, setSpeed] = useState(1.0);
     const [play, setPlay] = useState(false);
     const [selectedAnim, setSelectedAnim] = useState<string | undefined>("");
+    const [selectedCam, setSelectedCam] = useState<string | undefined>("");
 
     const isExtraSmallScreen = useMediaQuery((theme:any) => theme.breakpoints.only('xs'));
     const isSmallScreen = useMediaQuery((theme:any) => theme.breakpoints.only('sm'));
@@ -47,6 +49,7 @@ const BottomBar = React.forwardRef(function CustomContent(
     const minWidthSlider = isExtraSmallScreen ? 150 : isSmallScreen ? 175 : isMediumScreen ? 250 : 300; // Adjust values as needed
     const maxWidthTime = 45;
 
+
     const handleAnimationChange = useCallback((animationName: string, animate: boolean) => {
       const targetName = animationName
       setSelectedAnim(animationName);
@@ -63,11 +66,29 @@ const BottomBar = React.forwardRef(function CustomContent(
       //setAge(event.target.value as string);
     }, [curState]);
 
+    const handleCameraChange = useCallback((cameraName: string) => {
+      const targetName = cameraName
+      setSelectedCam(cameraName);
+
+        const idx = curState.cameras.findIndex((value: Camera, index: number)=>{return (value.name === targetName)})
+        if (idx !== -1) {
+            curState.setCurrentCameraIndex(idx)
+        }
+
+      curState.setCurrentFrame(0);
+      //setAge(event.target.value as string);
+    }, [curState]);
+
     const handleAnimationChangeEvent = (event: SelectChangeEvent) => {
       const targetName = event.target.value as string
       handleAnimationChange(targetName, true)
     };
 
+    const handleCameraChangeEvent = (event: SelectChangeEvent) => {
+      const targetName = event.target.value as string
+      handleCameraChange(targetName)
+    };
+
     function togglePlayAnimation() {
         curState.setAnimating(!curState.animating);
         setPlay(!play);
@@ -101,11 +122,19 @@ const BottomBar = React.forwardRef(function CustomContent(
       }
     }, [curState.animations, handleAnimationChange]);
 
+    useEffect(() => {
+      if (curState.cameras.length > 0) {
+        setSelectedCam(curState.cameras[0].name)
+        handleCameraChange(curState.cameras[0].name)
+      }
+    }, [curState.cameras, handleCameraChange]);
+
     return (
       <Container ref={(ref as any) || bottomBarRef}>
 
         <Grid container spacing={1} justifyContent="center">
 
+          { curState.animations.length < 1 ? null : (
           <Grid item>
             <FormControl margin="dense" size="small" variant="standard" sx={{maxWidth: 100 }}>
               <Select
@@ -122,6 +151,27 @@ const BottomBar = React.forwardRef(function CustomContent(
               </Select>
             </FormControl>
           </Grid>
+          )}
+
+          { curState.cameras.length < 1 ? null : (
+          <Grid item>
+            <FormControl margin="dense" size="small" variant="standard" sx={{maxWidth: 100 }}>
+              <Select
+                labelId="simple-select-standard-label"
+                label={t('visualizationControl.camera')}
+                value={selectedCam?.toString()}
+                onChange={handleCameraChangeEvent}
+                disabled={curState.cameras.length < 1}>
+                  {curState.cameras.map(cam => (
+                    <MenuItem key={cam.name} value={cam.name}>
+                      {cam.name}
+                    </MenuItem>
+                  ))}
+                visibility={false}
+              </Select>
+            </FormControl>
+          </Grid>
+          )}
 
           <Grid item>
             <FormControl margin="dense" size="small" variant="standard">