+
+ );
+}
diff --git a/nerfactory/viewer/app/src/modules/Banner/index.jsx b/nerfactory/viewer/app/src/modules/Banner/index.jsx
new file mode 100644
index 000000000..6c682527f
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/Banner/index.jsx
@@ -0,0 +1,3 @@
+import Banner from './Banner';
+
+export default Banner;
\ No newline at end of file
diff --git a/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.css b/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx b/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx
index c26e42b38..4fe9bbdb7 100644
--- a/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx
+++ b/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx
@@ -9,12 +9,6 @@ const msgpack = require('msgpack-lite');
export function RenderControls() {
// connection status indicators
const websocket = useContext(WebSocketContext).socket;
- const isWebsocketConnected = useSelector(
- (state) => state.websocketState.isConnected,
- );
- const isWebrtcConnected = useSelector(
- (state) => state.webrtcState.isConnected,
- );
const isTraining = useSelector((state) => state.renderingState.isTraining);
const outputOptions = useSelector(
(state) => state.renderingState.output_options,
@@ -37,11 +31,6 @@ export function RenderControls() {
const field_of_view = useSelector(
(state) => state.renderingState.field_of_view,
);
- let eval_fps = useSelector((state) => state.renderingState.eval_fps);
- let train_eta = useSelector((state) => state.renderingState.train_eta);
- let vis_train_ratio = useSelector(
- (state) => state.renderingState.vis_train_ratio,
- );
const dispatch = useDispatch();
@@ -265,44 +254,7 @@ export function RenderControls() {
min_resolution,
max_resolution,
field_of_view,
- ],
- );
-
- const [, setState] = useControls(
- 'Rendering Monitor',
- () => ({
- // WebSocket isConnected
- // button does nothing except be an indicator
- 'WebSocket Connected': button(() => {}, {
- disabled: !isWebsocketConnected,
- }),
- // webRTC isConnected
- // button does nothing except be an indicator
- 'WebRTC Connected': button(() => {}, {
- disabled: !isWebrtcConnected,
- }),
- eval_fps: {
- label: 'Eval FPS',
- value: eval_fps,
- disabled: true,
- },
- train_eta: {
- label: 'Train ETA',
- value: train_eta,
- disabled: true,
- },
- vis_train_ratio: {
- label: 'Time Allocation',
- value: vis_train_ratio,
- disabled: true,
- },
- }),
- [
- isWebsocketConnected,
- isWebrtcConnected,
- eval_fps,
- train_eta,
- vis_train_ratio,
+ websocket // need to re-render when websocket changes to use the new websocket
],
);
@@ -324,26 +276,5 @@ export function RenderControls() {
field_of_view,
]);
- useEffect(() => {}, [setState, isWebsocketConnected, isWebrtcConnected]);
-
- useEffect(() => {
- websocket.addEventListener('message', (originalCmd) => {
- // set the remote description when the offer is received
- const cmd = msgpack.decode(new Uint8Array(originalCmd.data));
- if (cmd.path === '/renderingState/eval_fps') {
- eval_fps = cmd.data;
- setState({ eval_fps });
- }
- if (cmd.path === '/renderingState/train_eta') {
- train_eta = cmd.data;
- setState({ train_eta });
- }
- if (cmd.path === '/renderingState/vis_train_ratio') {
- vis_train_ratio = cmd.data;
- setState({ vis_train_ratio });
- }
- });
- }, []);
-
return null;
}
diff --git a/nerfactory/viewer/app/src/modules/LandingModal/LandingModal.jsx b/nerfactory/viewer/app/src/modules/LandingModal/LandingModal.jsx
new file mode 100644
index 000000000..22d1de6ca
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/LandingModal/LandingModal.jsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import { Box, Button, Modal, Typography } from '@mui/material';
+
+import WebSocketUrlField from '../WebSocketUrlField';
+
+
+interface LandingModalProps {
+ initial_state: object
+}
+
+export default function LandingModel(props: LandingModalProps) {
+ const [open, setOpen] = React.useState(props.initial_state);
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+
+ const text_1 = `At the top right is the Status Panel where you can connect to a WebSocket and see the train/eval status of your NeRF model. The WebSocket URL takes the form
+
+
+
+
+ Welcome to the Nerfactory Viewer!{' '}
+ 
+
+
+
+
+
+
+ );
+}
diff --git a/nerfactory/viewer/app/src/modules/LandingModal/index.jsx b/nerfactory/viewer/app/src/modules/LandingModal/index.jsx
new file mode 100644
index 000000000..f44274051
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/LandingModal/index.jsx
@@ -0,0 +1,3 @@
+import LandingModel from './LandingModal';
+
+export default LandingModel;
\ No newline at end of file
diff --git a/nerfactory/viewer/app/src/modules/Scene/Scene.css b/nerfactory/viewer/app/src/modules/Scene/Scene.css
deleted file mode 100644
index 43ff9bf1a..000000000
--- a/nerfactory/viewer/app/src/modules/Scene/Scene.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#datgui {
- position: absolute;
- top: 2px;
- left: 2px;
-}
diff --git a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
index 4e5a1b891..f2aff9538 100644
--- a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
+++ b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
@@ -1,38 +1,24 @@
-import './Scene.css';
-
/* eslint-disable no-restricted-syntax */
import * as THREE from 'three';
import { useContext, useEffect } from 'react';
import { useDispatch } from 'react-redux';
-
-import { GUI } from 'dat.gui';
-import SceneNode from '../../SceneNode';
-import { subscribe_to_changes } from '../../subscriber';
-import { WebSocketContext } from '../WebSocket/WebSocket';
import { drawCamera, drawSceneBounds } from './drawing';
+import SceneNode from '../../SceneNode';
+import { WebSocketContext } from '../WebSocket/WebSocket';
+import { subscribe_to_changes } from '../../subscriber';
+
const msgpack = require('msgpack-lite');
-// manages setting up the scene and other logic for keeping state in sync with the server
-export default function SetupScene() {
+const SCENE_BOUNDS_NAME = 'Scene Bounds';
+const CAMERAS_NAME = 'Training Cameras';
+
+export function get_scene_tree() {
let scene = null;
- let gui = null;
let sceneTree = null;
-
- // the websocket context
- const socket = useContext(WebSocketContext).socket;
- const dispatch = useDispatch();
-
- // Scene
scene = new THREE.Scene();
-
- // GUI
- gui = new GUI();
- gui.domElement.id = 'datgui';
- const sceneFolder = gui.addFolder('Scene');
- sceneFolder.open();
- sceneTree = new SceneNode(scene, sceneFolder);
+ sceneTree = new SceneNode(scene);
// add objects to the the scene tree
const setObject = (path, object) => {
@@ -64,9 +50,9 @@ export default function SetupScene() {
const fn_value_scene_bounds = (previous, current) => {
if (current !== null) {
const line = drawSceneBounds(current);
- setObject(['Scene Bounds'], line);
+ setObject([SCENE_BOUNDS_NAME], line);
} else {
- deleteObject(['Scene Bounds']);
+ deleteObject([SCENE_BOUNDS_NAME]);
}
};
subscribe_to_changes(selector_fn_scene_bounds, fn_value_scene_bounds);
@@ -92,22 +78,30 @@ export default function SetupScene() {
// keys_valid.push(key);
const json = current[key];
const camera = drawCamera(json);
- setObject(['Cameras', key], camera);
+ setObject([CAMERAS_NAME, key], camera);
}
}
for (const key of prev) {
// invalid so delete
if (!curr.has(key) || current[key] === null) {
// keys_invalid.push(key);
- deleteObject(['Cameras', key]);
+ deleteObject([CAMERAS_NAME, key]);
}
}
} else {
- deleteObject(['Cameras']);
+ deleteObject([CAMERAS_NAME]);
}
};
subscribe_to_changes(selector_fn_cameras, fn_value_cameras);
+ return sceneTree;
+}
+
+// manages setting up the scene and other logic for keeping state in sync with the server
+export function SceneTreeWebSocketListener() {
+ const socket = useContext(WebSocketContext).socket;
+ const dispatch = useDispatch();
+
useEffect(() => {
socket.addEventListener('message', (originalCmd) => {
// set the remote description when the offer is received
@@ -121,7 +115,5 @@ export default function SetupScene() {
});
}
});
- }, []); // empty dependency array means only run once
-
- return scene;
+ }, [socket]); // dependency to call this whenever the websocket changes
}
diff --git a/nerfactory/viewer/app/src/modules/Scene/drawing.js b/nerfactory/viewer/app/src/modules/Scene/drawing.js
index bf411657d..2e8419cdb 100644
--- a/nerfactory/viewer/app/src/modules/Scene/drawing.js
+++ b/nerfactory/viewer/app/src/modules/Scene/drawing.js
@@ -122,7 +122,6 @@ function transpose(matrix) {
export function drawCamera(camera): THREE.Object3D {
const group = new THREE.Group();
- // console.log(camera);
console.assert(
camera.type === 'PinholeCamera',
'The camera should be a PinholeCamera',
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
new file mode 100644
index 000000000..b20f97495
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { Button } from '@mui/material';
+
+export default function CameraPanel() {
+ return (
+
+
+ Getting Started
+
+ {text_1}
++ You can enter your WebSocket URL in the Status Panel or here: +
+{text_2}
+ Other Resources: + + +
+ TODO: create a camera path panel list of cameras
+
+
+ );
+}
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/index.jsx b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/index.jsx
new file mode 100644
index 000000000..200115208
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/index.jsx
@@ -0,0 +1,3 @@
+import CameraPanel from './CameraPanel';
+
+export default CameraPanel;
\ No newline at end of file
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx
new file mode 100644
index 000000000..028b1d158
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx
@@ -0,0 +1,163 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import * as React from 'react';
+
+import { FaLightbulb, FaTractor } from 'react-icons/fa';
+import { Menu, MenuItem, ProSidebar, SubMenu } from 'react-pro-sidebar';
+
+import Box from '@mui/material/Box';
+import { Leva } from 'leva';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+import { useEffect } from 'react';
+import StatusPanel from './StatusPanel';
+import SceneNode from '../../SceneNode';
+import LevaTheme from '../ConfigPanel/leva_theme.json';
+import CameraPanel from './CameraPanel';
+
+interface TabPanelProps {
+ children: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+}
+
+interface ListItemProps {
+ name: object;
+ object: object;
+}
+
+function ListItem(props: ListItemProps) {
+ const name = props.name;
+ const object = props.object;
+
+ const [value, setValue] = React.useState(1);
+ object.visible = value;
+
+ function handleClick() {
+ setValue(!value);
+ }
+
+ return ;
+}
+
+interface ClickableListProps {
+ sceneTree: object
+}
+
+function ClickableList(props: ClickableListProps) {
+ const sceneTree = props.sceneTree;
+
+ const get_menu_items = (name: String, scene_node: SceneNode) => {
+ // TODO: sort the keys by string
+ const num_children = Object.keys(scene_node.children).length;
+ if (num_children === 0) {
+ return (
+ }>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TODO: add a logging panel
+
+
+
+ );
+}
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx
new file mode 100644
index 000000000..3c59dded1
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import Button from '@mui/material/Button';
+import { useSelector } from 'react-redux';
+import WebSocketUrlField from '../../WebSocketUrlField';
+
+
+interface StatusPanelProps {
+ sceneTree: object
+}
+
+export default function StatusPanel(props: StatusPanelProps) {
+
+ const sceneTree = props.sceneTree;
+
+ const isWebsocketConnected = useSelector(
+ (state) => state.websocketState.isConnected,
+ );
+ const isWebrtcConnected = useSelector(
+ (state) => state.webrtcState.isConnected,
+ );
+ const eval_fps = useSelector((state) => state.renderingState.eval_fps);
+ const train_eta = useSelector((state) => state.renderingState.train_eta);
+ const vis_train_ratio = useSelector(
+ (state) => state.renderingState.vis_train_ratio,
+ );
+
+ // simple toggle button
+ const [value, setValue] = React.useState(1);
+ const handleChange = () => {
+ setValue(!value);
+ };
+ const scene_button = value ? "Hide Scene" : "Show Scene";
+ sceneTree.object.visible = value;
+
+ return (
+ +
+
+
+
+
+
+ );
+}
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/index.jsx b/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/index.jsx
new file mode 100644
index 000000000..2c3fd81ac
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/index.jsx
@@ -0,0 +1,3 @@
+import StatusPanel from './StatusPanel';
+
+export default StatusPanel;
diff --git a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.css b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.css
deleted file mode 100644
index 2390151aa..000000000
--- a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.WebRTCVideo {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
-}
-
-.WebRTCVideo-video {
- width: 100%;
- height: 100%;
- object-fit: fill;
-}
-
-.canvas-container-main {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
-}
-
-.canvas-container-main canvas {
- position: relative;
- height: 100%;
- width: 100%;
-}
diff --git a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
index f5611b586..b82683977 100644
--- a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
+++ b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
@@ -1,62 +1,57 @@
-import './ViewerWindow.css';
-
import * as THREE from 'three';
-import React, { useContext, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
-
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import WebRtcWindow from '../WebRtcWindow/WebRtcWindow';
+import Stats from 'stats.js';
+import { useSelector } from 'react-redux';
+import React, { useContext, useEffect, useRef } from 'react';
import { WebSocketContext } from '../WebSocket/WebSocket';
+import WebRtcWindow from '../WebRtcWindow/WebRtcWindow';
+
const msgpack = require('msgpack-lite');
+function createStats() {
+ const stats = new Stats();
+ stats.setMode(0);
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.left = '0';
+ stats.domElement.style.top = '0';
+ return stats;
+}
+
// manages a camera and the web rtc stream...
export default function ViewerWindow(props) {
// eslint-disable-next-line react/prop-types
const scene = props.scene;
- let cameraControls = null;
+
const myRef = useRef(null);
const websocket = useContext(WebSocketContext).socket;
const field_of_view = useSelector(
(state) => state.renderingState.field_of_view,
);
+ const field_of_view_ref = useRef(field_of_view);
+
+ const camera = useRef(null);
+ let cameraControls = null;
+ let renderer = null;
+ let viewportWidth = null;
+ let viewportHeight = null;
+ let stats = null;
const getViewportWidth = () => {
- return window.innerWidth - (window.innerWidth % 2);
+ const width = myRef.current.clientWidth;
+ return width - (width % 2);
};
const getViewportHeight = () => {
- return window.innerHeight;
+ return myRef.current.clientHeight;
};
- let viewportWidth = getViewportWidth();
- let viewportHeight = getViewportHeight();
-
- const camera = new THREE.PerspectiveCamera(
- field_of_view,
- viewportWidth / viewportHeight,
- 0.01,
- 100,
- );
- camera.position.x = 5;
- camera.position.y = -5;
- camera.position.z = 5;
- camera.up = new THREE.Vector3(0, 0, 1);
-
- const renderer = new THREE.WebGLRenderer({
- antialias: true,
- alpha: true,
- });
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(viewportWidth, viewportHeight);
- renderer.domElement.style.border = '1px solid black';
-
const handleResize = () => {
viewportWidth = getViewportWidth();
viewportHeight = getViewportHeight();
- camera.aspect = viewportWidth / viewportHeight;
- camera.updateProjectionMatrix();
+ camera.current.aspect = viewportWidth / viewportHeight;
+ camera.current.updateProjectionMatrix();
renderer.setSize(viewportWidth, viewportHeight);
};
@@ -68,27 +63,62 @@ export default function ViewerWindow(props) {
const data = {
type: cmd,
path,
- data: camera.toJSON(),
+ data: camera.current.toJSON(),
};
const message = msgpack.encode(data);
websocket.send(message);
}
};
+ // keep sending the camera often
+ useEffect(() => {
+ const fps = 60;
+ const interval = 1000 / fps;
+ const refreshIntervalId = setInterval(sendCamera, interval);
+ return () => {
+ clearInterval(refreshIntervalId);
+ };
+ }, [websocket]);
+
const update = () => {
- handleResize();
- camera.updateProjectionMatrix();
- cameraControls.update();
requestAnimationFrame(update);
- renderer.render(scene, camera);
- sendCamera();
+ handleResize();
+ camera.current.fov = field_of_view_ref.current;
+ camera.current.updateProjectionMatrix();
+ cameraControls.update();
+ renderer.render(scene, camera.current);
+ stats.update();
};
- // similar to componentDidMount
+ // this is run once
useEffect(() => {
+ viewportWidth = getViewportWidth();
+ viewportHeight = getViewportHeight();
+
+ stats = createStats();
+ myRef.current.append(stats.domElement);
+
+ camera.current = new THREE.PerspectiveCamera(
+ field_of_view_ref.current,
+ viewportWidth / viewportHeight,
+ 0.01,
+ 100,
+ );
+ camera.current.position.x = 5;
+ camera.current.position.y = -5;
+ camera.current.position.z = 5;
+ camera.current.up = new THREE.Vector3(0, 0, 1);
+
+ renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: true,
+ });
+ renderer.setPixelRatio(window.devicePixelRatio);
+ renderer.setSize(viewportWidth, viewportHeight);
+
myRef.current.append(renderer.domElement);
// add camera controls
- cameraControls = new OrbitControls(camera, renderer.domElement);
+ cameraControls = new OrbitControls(camera.current, renderer.domElement);
cameraControls.rotateSpeed = 2.0;
cameraControls.zoomSpeed = 0.3;
cameraControls.panSpeed = 0.2;
@@ -98,19 +128,19 @@ export default function ViewerWindow(props) {
cameraControls.dampingFactor = 1.0;
cameraControls.update();
update();
+
}, []);
- // useEffect(() => {
- // camera.fov = field_of_view;
- // console.log(field_of_view);
- // camera.updateProjectionMatrix();
- // }, [field_of_view]);
+ // updates the field of view inside the ref to avoid rerendering so often
+ useEffect(() => {
+ field_of_view_ref.current = field_of_view;
+ }, [field_of_view]);
return (
- Status Panel
+
+
+
+
+
+
+ Eval FPS: {eval_fps}
+
+
+ Train ETA: {train_eta}
+
+
+ Time Allocation: {vis_train_ratio}
+
+
+ <>
{/* the webrtc viewer needs to know the camera pose */}
+
);
}
diff --git a/nerfactory/viewer/app/src/modules/WebRtcWindow/WebRtcWindow.jsx b/nerfactory/viewer/app/src/modules/WebRtcWindow/WebRtcWindow.jsx
index 3b93464c6..55398e4cd 100644
--- a/nerfactory/viewer/app/src/modules/WebRtcWindow/WebRtcWindow.jsx
+++ b/nerfactory/viewer/app/src/modules/WebRtcWindow/WebRtcWindow.jsx
@@ -36,7 +36,7 @@ export default function WebRtcWindow() {
username: 'openrelayproject',
credential: 'openrelayproject',
},
- // extra STUN server(s):
+ // Extra STUN and TURN server(s):
// {
// urls: 'stun:stun.l.google.com:19302',
// },
@@ -83,6 +83,15 @@ export default function WebRtcWindow() {
});
}
};
+
+ pc.onclose = () => {
+ dispatch({
+ type: 'write',
+ path: 'webrtcState/isConnected',
+ data: false,
+ });
+ };
+
return pc;
};
@@ -161,7 +170,19 @@ export default function WebRtcWindow() {
console.log('[webrtc] starting process');
sendOffer();
});
- }, []); // empty dependency array means only run once
+
+ // kill the webrtc connection on dismount
+ return () => {
+ if (pcRef.current !== null) {
+ dispatch({
+ type: 'write',
+ path: 'webrtcState/isConnected',
+ data: false,
+ });
+ pcRef.current.close();
+ }
+ };
+ }, [websocket]); // dependency to call this whenever the websocket changes
return (
diff --git a/nerfactory/viewer/app/src/modules/WebSocket/WebSocket.jsx b/nerfactory/viewer/app/src/modules/WebSocket/WebSocket.jsx
index 89c1f7416..934b8b803 100644
--- a/nerfactory/viewer/app/src/modules/WebSocket/WebSocket.jsx
+++ b/nerfactory/viewer/app/src/modules/WebSocket/WebSocket.jsx
@@ -1,49 +1,29 @@
// Much of this code comes from or is inspired by:
// https://www.pluralsight.com/guides/using-web-sockets-in-your-reactredux-app
-import React, { createContext } from 'react';
+import React, { createContext, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
const WebSocketContext = createContext(null);
export { WebSocketContext };
-function getParam(param_name) {
- // https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
- const params = new RegExp(
- `[?&]${encodeURIComponent(param_name)}=([^&]*)`,
- ).exec(window.location.href);
- if (params === null) {
- return undefined;
- }
- return decodeURIComponent(params[1]);
-}
-
-function getWebsocketEndpoint() {
- const endpoint = getParam('websocket_url');
- console.log('websocket url: ', endpoint);
- if (endpoint === undefined) {
- const message =
- 'Please set the websocket endpoint. The format should look like "?websocket_url=localhost:". E.g., "https://viewer.nerfactory.com/branch/master/?websocket_url=localhost:7007".';
- window.alert(message);
- return '';
- }
- return endpoint;
-}
-
export default function WebSocketContextFunction({ children }) {
const dispatch = useDispatch();
+ let ws = null;
+ let socket = null;
- let socket;
- let ws;
-
- // should look like e.g., "ws://"
- const websocketEndpoint = getWebsocketEndpoint();
+ // this code will rerender anytime the webosocket changes now
+ const websocket_url = useSelector(
+ (state) => state.websocketState.websocket_url,
+ );
+ console.log(websocket_url);
const connect = () => {
- socket = new WebSocket(`ws://${websocketEndpoint}/`);
+ const url = `ws://${websocket_url}/`;
+ socket = new WebSocket(url);
socket.binaryType = 'arraybuffer';
socket.onopen = () => {
dispatch({
@@ -60,9 +40,6 @@ export default function WebSocketContextFunction({ children }) {
path: 'websocketState/isConnected',
data: false,
});
- setTimeout(() => {
- connect();
- }, 1000);
};
socket.onerror = (err) => {
@@ -73,14 +50,20 @@ export default function WebSocketContextFunction({ children }) {
);
socket.close();
};
+ return socket;
};
- if (!socket) {
- connect();
- ws = {
- socket,
+ useEffect(() => {
+ // cleanup function to close the websocket on rerender
+ return () => {
+ socket.close();
};
- }
+ }, [websocket_url]);
+
+ connect();
+ ws = {
+ socket
+ };
return (
{children}
diff --git a/nerfactory/viewer/app/src/modules/WebSocketUrlField.jsx b/nerfactory/viewer/app/src/modules/WebSocketUrlField.jsx
new file mode 100644
index 000000000..6310f9ba4
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/WebSocketUrlField.jsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { TextField } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+
+export default function WebSocketUrlField() {
+
+ const websocket_url = useSelector(
+ (state) => state.websocketState.websocket_url,
+ );
+ const dispatch = useDispatch();
+ const websocket_url_onchange = (event) => {
+ const value = event.target.value;
+ dispatch({
+ type: 'write',
+ path: 'websocketState/websocket_url',
+ data: value,
+ });
+ };
+
+ return (
+