Add viewport controls help modal (#927)

nerfstudio/viewer/app/src/index.scss

@@ -174,8 +174,9 @@ $sidebar-width: 100% !default;
   border: 2px solid #000;
   //   box-shadow: 24px 24px;
   padding: 32px;
-  overflow-y: scroll;
-  height: 90%;
+  overflow-y: auto;
+  height: auto;
+  max-height: 90%;
 }
 
 .LandingModal-box .WebSocketUrlField {
@@ -186,6 +187,23 @@ $sidebar-width: 100% !default;
   margin: 3px;
 }
 
+// ------------------------------------
+// Viewport Controls Modal styling
+
+.ViewportConstrolsModal-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px; // 400
+  background-color: $base-color2;
+  border: 2px solid #000;
+  //   box-shadow: 24px 24px;
+  padding: 32px;
+  overflow-y: auto;
+  height: auto;
+}
+
 // ------------------------------------
 // Render Modal styling
 

nerfstudio/viewer/app/src/modules/Banner/Banner.jsx

@@ -5,6 +5,7 @@ import Button from '@mui/material/Button';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';
 import LandingModal from '../LandingModal';
+import ViewportControlsModal from '../ViewportControlsModal';
 
 function getParam(param_name) {
   // https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
@@ -56,6 +57,7 @@ export default function Banner() {
       >
         Documentation
       </Button>
+      <ViewportControlsModal />
 
       <div className="banner-logo">
         <img

nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx

@@ -174,16 +174,10 @@ export default function LandingModel(props: LandingModalProps) {
                   .
                 </p>
               </TabPanel>
-              <h3>Camera Keyboard Controls</h3>
-              <div>
-                Spacebar - reset camera to starting position <br />
-                WS - forward camera translation, AD - side to side camera translation <br />
-                QE - up and down camera translation, Arrow Keys - camera rotation
-              </div>
             </div>
           </Typography>
         </Box>
       </Modal>
-    </div >
+    </div>
   );
 }

nerfstudio/viewer/app/src/modules/ViewportControlsModal/ViewportControlsModal.jsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+
+import { Box, Button, Modal } from '@mui/material';
+import KeyboardIcon from '@mui/icons-material/Keyboard';
+
+export default function ControlsModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div className="LandingModal">
+      <Button
+        className="banner-button"
+        variant="outlined"
+        size="small"
+        startIcon={<KeyboardIcon />}
+        onClick={handleOpen}
+      >
+        Viewport Controls
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box className="ViewportConstrolsModal-box">
+          <center>
+            <img
+              style={{ height: 37, margin: 'auto' }}
+              src="https://docs.nerf.studio/en/latest/_images/logo-dark.png"
+              alt="The favicon."
+            />
+            <img
+              style={{ width: '100%', paddingTop: '30px', margin: 'auto' }}
+              src="https://assets.nerf.studio/keyboard_controls.png"
+              alt="Controls diagram"
+            />
+          </center>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

nerfstudio/viewer/app/src/modules/ViewportControlsModal/index.jsx

@@ -0,0 +1,3 @@
+import ViewportControlsModal from './ViewportControlsModal';
+
+export default ViewportControlsModal;