From 8bbf578f1074a60d0fb3c87ee056707eb57be0a1 Mon Sep 17 00:00:00 2001 From: Ethan Weber Date: Sun, 2 Oct 2022 18:41:37 -0700 Subject: [PATCH] viewer panels update (websocket and hide images) (#620) websocket update --- .../src/modules/LandingModal/LandingModal.jsx | 5 +- .../SidePanel/StatusPanel/StatusPanel.jsx | 48 ++++++++++--------- .../app/src/modules/WebSocket/WebSocket.jsx | 2 +- .../app/src/modules/WebSocketUrlField.jsx | 23 +++++---- nerfstudio/viewer/app/src/reducer.js | 2 +- tests/viewer/__init__.py | 0 tests/viewer/test_viewer.py | 23 --------- 7 files changed, 42 insertions(+), 61 deletions(-) delete mode 100644 tests/viewer/__init__.py delete mode 100644 tests/viewer/test_viewer.py diff --git a/nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx b/nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx index ce4001125..c8b85d37d 100644 --- a/nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx +++ b/nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx @@ -57,7 +57,7 @@ export default function LandingModel(props: LandingModalProps) { const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); - const text_intro = `To use our viewer, you need to connect to the WebSocket server where your training job is running.`; + const text_intro = `To use our viewer, you need to connect to the WebSocket server where your training job is running. Enter your WebSocket Port below and click the link to connect to your training job.`; const websocket_port = useSelector( (state) => state.websocketState.websocket_port, @@ -116,9 +116,6 @@ export default function LandingModel(props: LandingModalProps) {

Getting Started

{text_intro}

-

- You can enter your WebSocket Port in the Status Panel or here: -

Remote Server

diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx index aacada7f6..09a295db9 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx @@ -3,11 +3,9 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import { ButtonGroup } from '@mui/material'; import { useDispatch, useSelector } from 'react-redux'; -import { useEffect } from 'react'; import PauseIcon from '@mui/icons-material/Pause'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import ViewInArIcon from '@mui/icons-material/ViewInAr'; -import WebSocketUrlField from '../../WebSocketUrlField'; import { WebSocketContext } from '../../WebSocket/WebSocket'; @@ -33,23 +31,17 @@ export default function StatusPanel(props: StatusPanelProps) { const vis_train_ratio = useSelector( (state) => state.renderingState.vis_train_ratio, ); - - // simple toggle button - const [value, setValue] = React.useState(1); - const handleChange = () => { - setValue(!value); - }; - - useEffect(() => { - const labels = document.getElementsByClassName('label'); - for (let i = 0; i < labels.length; i += 1) { - if (!value) { - labels[i].style.visibility = 'hidden'; - } else { - labels[i].style.visibility = 'visible'; - } - } - }, [value]); + + // 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 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; + if (sceneTree.find_no_create(['Training Cameras']) !== null) { + sceneTree.find_no_create(['Training Cameras']).object.visible = + is_images_visible; + } const handlePlayChange = () => { dispatch({ @@ -68,7 +60,6 @@ export default function StatusPanel(props: StatusPanelProps) { const message = msgpack.encode(data); websocket.send(message); }; - const scene_button = value ? 'Hide Scene' : 'Show Scene'; const is_training_text = isTraining ? 'Pause Training' : 'Resume Training'; const training_icon = isTraining ? : ; @@ -80,7 +71,6 @@ export default function StatusPanel(props: StatusPanelProps) { : 'Render Disconnected'; const websocket_connected_color = isWebsocketConnected ? 'success' : 'error'; const webrtc_connected_color = isWebrtcConnected ? 'success' : 'error'; - sceneTree.object.visible = value; return (

@@ -99,13 +89,25 @@ export default function StatusPanel(props: StatusPanelProps) { - +
Resolution: {eval_res} diff --git a/nerfstudio/viewer/app/src/modules/WebSocket/WebSocket.jsx b/nerfstudio/viewer/app/src/modules/WebSocket/WebSocket.jsx index 09f24d382..7b756ac88 100644 --- a/nerfstudio/viewer/app/src/modules/WebSocket/WebSocket.jsx +++ b/nerfstudio/viewer/app/src/modules/WebSocket/WebSocket.jsx @@ -15,7 +15,7 @@ export default function WebSocketContextFunction({ children }) { let ws = null; let socket = null; - // this code will rerender anytime the webosocket changes now + // this code will rerender anytime the websocket changes now const websocket_port = useSelector( (state) => state.websocketState.websocket_port, ); diff --git a/nerfstudio/viewer/app/src/modules/WebSocketUrlField.jsx b/nerfstudio/viewer/app/src/modules/WebSocketUrlField.jsx index 2124e148b..7863dfc84 100644 --- a/nerfstudio/viewer/app/src/modules/WebSocketUrlField.jsx +++ b/nerfstudio/viewer/app/src/modules/WebSocketUrlField.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { TextField } from '@mui/material'; +import { TextField, Link } from '@mui/material'; import { useDispatch, useSelector } from 'react-redux'; export default function WebSocketUrlField() { @@ -18,13 +18,18 @@ export default function WebSocketUrlField() { }; return ( - +
+ + + viewer.nerf.studio?websocket_port={websocket_port} + +
); } diff --git a/nerfstudio/viewer/app/src/reducer.js b/nerfstudio/viewer/app/src/reducer.js index 956894b0e..e4d3b2c38 100644 --- a/nerfstudio/viewer/app/src/reducer.js +++ b/nerfstudio/viewer/app/src/reducer.js @@ -3,7 +3,7 @@ import { split_path } from './utils'; const initialState = { // the websocket connection state websocketState: { - websocket_port: 7007, + websocket_port: 1111, isConnected: false, }, // the webrtc connection state diff --git a/tests/viewer/__init__.py b/tests/viewer/__init__.py deleted file mode 100644 index e69de29bb..000000000 diff --git a/tests/viewer/test_viewer.py b/tests/viewer/test_viewer.py deleted file mode 100644 index 3057acf9d..000000000 --- a/tests/viewer/test_viewer.py +++ /dev/null @@ -1,23 +0,0 @@ -""" -Test communications with the viewer. -""" - -import time - -from nerfstudio.viewer.server.subprocess import run_viewer_bridge_server_as_subprocess - - -def test_run_subprocess(): - """Test running the viewer bridge server as a subprocess.""" - zmq_port = 6000 + 10 # don't use the default ports to avoid conflicting with current training jobs - websocket_port = 7007 + 10 - print("Starting the viewer bridge server as a subprocess.") - run_viewer_bridge_server_as_subprocess(websocket_port, zmq_port=zmq_port, log_filename=None) - print("Started the viewer bridge server as a subprocess.") - # do something will the viewer bridge server runs - time.sleep(1) - - -if __name__ == "__main__": - test_run_subprocess() - print("Tests passed.")