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/README.md

@@ -1,59 +1,19 @@
 *Requisites:** Conda and python installed.
 
-1. Create environment using the `environment.yml` file:
-
-   `conda env create -f environment.yml`
-
-2. Activate environment:
-
-   `conda activate opensim-viewer-bend`
-
-3. Start server:
-
-   `python manage.py runserver`
-
-### Instructions for database migration
-
-   1. Create migration files:
-
-      `python manage.py makemigrations`
-
-   2. Migrate the database (warning: data can be lost)
-
-      `python manage.py migrate`
-
-### Instructions for recreating ERD diagram
-
-Instructions in this [Link](https://www.wplogout.com/export-database-diagrams-erd-from-django/).
-
-### Instructions for localization
-
-Instructions in this [Link](https://docs.djangoproject.com/en/4.2/topics/i18n/translation/).
-
-Inside of backend app folder:
-
-1. Create files for a language:
-
-   `django-admin makemessages -l <language-code>`
-
-2. Compile messages:
-
-   `django-admin compilemessages`
-
-### Instruction for testing
-
-- Execute all tests:
-
-   `python manage.py test --verbosity=0`
-
-
-General
--------
-- This folder contains scripts to convert OpenSim based data files into gltf format
-- We use third party library pygltflib to manipulate the gltf structure thus avoiding low level json file manipulation and encoding/decoding whenever possible.
-
-Description of specific python files:
--------------------------------------
+1. To develop/update backend you have to have aws permissions/access so you can build a docker image and uploaded on aws. Typically the steps to make changes and push them are as follows:
+1. Modify/test the python code in osimConverters folder (these are the utilities that take OpenSim native formats and convert to gltf format)
+2. Build docker image using the command
+   "docker build -t opensim-viewer/converter ."
+3. Push the image to aws using the push commands on this page:
+   https://us-west-2.console.aws.amazon.com/ecr/repositories/private/660440363484/opensim-viewer/converter?region=us-west-2
+4. Wire the lambda function that does the work to use the latest/uploaded image, ECR repository is here
+   https://us-west-2.console.aws.amazon.com/ecr/repositories/private/660440363484/opensim-viewer/converter?region=us-west-2
+   and you select the image to run (for the lambda function opensim-viewer-func) on this page
+   https://us-west-2.console.aws.amazon.com/lambda/home?region=us-west-2#/functions/opensim-viewer-func?tab=image
+   select image -> Deploy new image -> select repository opensim-viewer/converter then select from drop down
+
+Description of specific python files in osimConverters:
+------------------------------------------------------
 - openSimData2Gltf.py: gneric utilities that take columns of data and time stamps and create the corresponding Accessors in the passed in GLTF2 structure
 - convert{xxx}2Gltf.py: Utilities for converting files with extension {xxx} to gltf, the convention is to produce a file with the same name but with different extension, unless an output file is specified
 

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/backend/readme.md

@@ -1,59 +1,19 @@
 *Requisites:** Conda and python installed.
 
-1. Create environment using the `environment.yml` file:
-
-   `conda env create -f environment.yml`
-
-2. Activate environment:
-
-   `conda activate opensim-viewer-bend`
-
-3. Start server:
-
-   `python manage.py runserver`
-
-### Instructions for database migration
-
-   1. Create migration files:
-
-      `python manage.py makemigrations`
-
-   2. Migrate the database (warning: data can be lost)
-
-      `python manage.py migrate`
-
-### Instructions for recreating ERD diagram
-
-Instructions in this [Link](https://www.wplogout.com/export-database-diagrams-erd-from-django/).
-
-### Instructions for localization
-
-Instructions in this [Link](https://docs.djangoproject.com/en/4.2/topics/i18n/translation/).
-
-Inside of backend app folder:
-
-1. Create files for a language:
-
-   `django-admin makemessages -l <language-code>`
-
-2. Compile messages:
-
-   `django-admin compilemessages`
-
-### Instruction for testing
-
-- Execute all tests:
-
-   `python manage.py test --verbosity=0`
-
-
-General
--------
-- This folder contains scripts to convert OpenSim based data files into gltf format
-- We use third party library pygltflib to manipulate the gltf structure thus avoiding low level json file manipulation and encoding/decoding whenever possible.
-
-Description of specific python files:
--------------------------------------
+1. To develop/update backend you have to have aws permissions/access so you can build a docker image and uploaded on aws. Typically the steps to make changes and push them are as follows:
+1. Modify/test the python code in osimConverters folder (these are the utilities that take OpenSim native formats and convert to gltf format)
+2. Build docker image using the command
+   "docker build -t opensim-viewer/converter ."
+3. Push the image to aws using the push commands on this page:
+   https://us-west-2.console.aws.amazon.com/ecr/repositories/private/660440363484/opensim-viewer/converter?region=us-west-2
+4. Wire the lambda function that does the work to use the latest/uploaded image, ECR repository is here
+   https://us-west-2.console.aws.amazon.com/ecr/repositories/private/660440363484/opensim-viewer/converter?region=us-west-2
+   and you select the image to run (for the lambda function opensim-viewer-func) on this page
+   https://us-west-2.console.aws.amazon.com/lambda/home?region=us-west-2#/functions/opensim-viewer-func?tab=image
+   select image -> Deploy new image -> select repository opensim-viewer/converter then select from drop down
+
+Description of specific python files in osimConverters:
+------------------------------------------------------
 - openSimData2Gltf.py: gneric utilities that take columns of data and time stamps and create the corresponding Accessors in the passed in GLTF2 structure
 - convert{xxx}2Gltf.py: Utilities for converting files with extension {xxx} to gltf, the convention is to produce a file with the same name but with different extension, unless an output file is specified
 

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();
@@ -112,20 +116,25 @@ const FileDropArea = observer(() => {
                 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); */
+                  appState.setCurrentModelPath(gltf_url); 
+                  CognitoIdentityServiceProvider.6jlm2jeibh9aqb0dg34q2uf8pu.ayman1234.userData*/
+
+              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 +161,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}>