From 67cd746de3b15fa656016fd124b1b5f37a584624 Mon Sep 17 00:00:00 2001 From: Matthew Tancik Date: Thu, 15 Dec 2022 16:14:13 -0800 Subject: [PATCH] Update Render View logic (#1134) --- nerfstudio/viewer/app/src/index.scss | 5 ++- .../app/src/modules/SidePanel/SidePanel.jsx | 18 +++++++++- .../SidePanel/StatusPanel/StatusPanel.jsx | 29 +++++++++------- .../src/modules/ViewerWindow/ViewerWindow.jsx | 33 ++++++++++++------- nerfstudio/viewer/app/src/themes/theme.ts | 9 +++-- 5 files changed, 66 insertions(+), 28 deletions(-) diff --git a/nerfstudio/viewer/app/src/index.scss b/nerfstudio/viewer/app/src/index.scss index 98e968795..fab8b8a68 100644 --- a/nerfstudio/viewer/app/src/index.scss +++ b/nerfstudio/viewer/app/src/index.scss @@ -137,7 +137,10 @@ $sidebar-width: 100% !default; } .StatusPanel .StatusPanel-hide-scene-button { - margin: 12px; + margin-top: 4px; + margin-bottom: 4px; + margin-left: 6px; + margin-right: 6px; } .StatusPanel .WebSocketUrlField { diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/SidePanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/SidePanel.jsx index dff6e70b9..35dd126d6 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/SidePanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/SidePanel.jsx @@ -15,6 +15,7 @@ import { WidgetsRounded, ImportExportRounded, } from '@mui/icons-material/'; +import { useSelector } from 'react-redux'; import StatusPanel from './StatusPanel'; import LevaTheme from '../../themes/leva_theme.json'; import CameraPanel from './CameraPanel'; @@ -84,6 +85,15 @@ export function BasicTabs(props: BasicTabsProps) { setValue(newValue); setShowExportBox(newValue === 3); }; + const camera_choice = useSelector( + (state) => state.renderingState.camera_choice, + ); + + React.useEffect(() => { + if (camera_choice === 'Render Camera') { + setValue(1); + } + }, [camera_choice]); return (
@@ -99,10 +109,16 @@ export function BasicTabs(props: BasicTabsProps) { > } label="Controls" {...a11yProps(0)} /> } label="Render" {...a11yProps(1)} /> - } label="Scene" {...a11yProps(2)} /> + } + label="Scene" + disabled={camera_choice === 'Render Camera'} + {...a11yProps(2)} + /> } label="Export" + disabled={camera_choice === 'Render Camera'} {...a11yProps(3)} /> diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx index 8db09c71f..80a1c38ab 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx @@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux'; import PauseIcon from '@mui/icons-material/Pause'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import ViewInArIcon from '@mui/icons-material/ViewInAr'; +import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'; import { WebSocketContext } from '../../WebSocket/WebSocket'; @@ -31,28 +32,30 @@ export default function StatusPanel(props: StatusPanelProps) { const vis_train_ratio = useSelector( (state) => state.renderingState.vis_train_ratio, ); + const camera_choice = useSelector( + (state) => state.renderingState.camera_choice, + ); // logic for toggling visibility of the entire scene and just the training images - const [is_scene_visible, set_is_scene_visible] = React.useState(1); - const [is_images_visible, set_is_images_visible] = React.useState(1); + const [is_scene_visible, set_is_scene_visible] = React.useState(true); + const [is_images_visible, set_is_images_visible] = React.useState(true); const scene_button = is_scene_visible ? 'Hide Scene' : 'Show Scene'; const cameras_button = is_images_visible ? 'Hide Images' : 'Show Images'; - sceneTree.object.visible = is_scene_visible; + sceneTree.object.visible = + is_scene_visible && camera_choice === 'Main Camera'; if (sceneTree.find_no_create(['Training Cameras']) !== null) { sceneTree.find_no_create(['Training Cameras']).object.visible = is_images_visible; } React.useEffect(() => { - sceneTree.object.traverse( - (obj) => { - if (obj.name === 'CAMERA_LABEL') { - // eslint-disable-next-line no-param-reassign - obj.visible = is_scene_visible; - } + sceneTree.object.traverse((obj) => { + if (obj.name === 'CAMERA_LABEL') { + // eslint-disable-next-line no-param-reassign + obj.visible = is_scene_visible && camera_choice === 'Main Camera'; } - ); - }, [is_scene_visible]); + }); + }, [camera_choice, is_scene_visible]); const handlePlayChange = () => { dispatch({ @@ -105,6 +108,7 @@ export default function StatusPanel(props: StatusPanelProps) { }} style={{ textTransform: 'none' }} startIcon={} + disabled={camera_choice === 'Render Camera'} > {scene_button} @@ -115,7 +119,8 @@ export default function StatusPanel(props: StatusPanelProps) { set_is_images_visible(!is_images_visible); }} style={{ textTransform: 'none' }} - startIcon={} + startIcon={} + disabled={camera_choice === 'Render Camera'} > {cameras_button} diff --git a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx index 90fe975e0..94990f2d9 100644 --- a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx +++ b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx @@ -9,6 +9,8 @@ import OpenWithIcon from '@mui/icons-material/OpenWith'; import PublicOffSharpIcon from '@mui/icons-material/PublicOffSharp'; import PublicSharpIcon from '@mui/icons-material/PublicSharp'; import SyncOutlinedIcon from '@mui/icons-material/SyncOutlined'; +import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation'; +import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBackOutlined'; import WebRtcWindow from '../WebRtcWindow/WebRtcWindow'; import { WebSocketContext } from '../WebSocket/WebSocket'; @@ -19,27 +21,36 @@ function CameraToggle() { const camera_choice = useSelector( (state) => state.renderingState.camera_choice, ); - const set_camera_choice = (event: SelectChangeEvent) => { - const value = event.target.value; - dispatch({ - type: 'write', - path: 'renderingState/camera_choice', - data: value, - }); + const set_camera_choice = (event: SelectChangeEvent, value: string[]) => { + if (value != null) { + dispatch({ + type: 'write', + path: 'renderingState/camera_choice', + data: value, + }); + } }; return ( - Viewport - Render View + + + Viewport + + + + Render View + ); } diff --git a/nerfstudio/viewer/app/src/themes/theme.ts b/nerfstudio/viewer/app/src/themes/theme.ts index 554445561..4a973209e 100644 --- a/nerfstudio/viewer/app/src/themes/theme.ts +++ b/nerfstudio/viewer/app/src/themes/theme.ts @@ -126,10 +126,13 @@ export const appTheme = createTheme({ styleOverrides: { root: { color: '#eeeeee', - backgroundColor: '#393e46', + backgroundColor: 'FFD369', '&.Mui-selected': { - color: '#FFD369', - backgroundColor: '#555555', + color: '#222831', + backgroundColor: '#FFD369', + ':hover': { + backgroundColor: '#FFD369', + }, }, '&.Mui-disabled': { color: '#999999',