Update UI (#357)

nerfactory/viewer/app/src/index.scss

@@ -103,8 +103,13 @@ $sidebar-width: 100% !default;
   // height: 170px;
 }
 
+.StatusPanel .StatusPanel-play-button {
+  width: 90%;
+  margin: 10px;
+}
+
 .StatusPanel .StatusPanel-button-group {
-  margin: 12px;
+  margin: 10px;
 }
 
 .StatusPanel .StatusPanel-hide-scene-button {

nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx

@@ -1,4 +1,4 @@
-import { button, buttonGroup, useControls } from 'leva';
+import { buttonGroup, useControls } from 'leva';
 import { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -9,7 +9,6 @@ const msgpack = require('msgpack-lite');
 export function RenderControls() {
   // connection status indicators
   const websocket = useContext(WebSocketContext).socket;
-  const isTraining = useSelector((state) => state.renderingState.isTraining);
   const outputOptions = useSelector(
     (state) => state.renderingState.output_options,
   );
@@ -131,53 +130,6 @@ export function RenderControls() {
 
   const [, setControls] = useControls(
     () => ({
-      // isTraining
-      'Pause Training': button(
-        () => {
-          // write locally to store
-          dispatch({
-            type: 'write',
-            path: 'renderingState/isTraining',
-            data: false,
-          });
-          // write to server
-          const cmd = 'write';
-          const path = 'renderingState/isTraining';
-          const data = {
-            type: cmd,
-            path,
-            data: false,
-          };
-          const message = msgpack.encode(data);
-          websocket.send(message);
-        },
-        {
-          disabled: !isTraining,
-        },
-      ),
-      'Resume Training': button(
-        () => {
-          // write locally to store
-          dispatch({
-            type: 'write',
-            path: 'renderingState/isTraining',
-            data: true,
-          });
-          // write to server
-          const cmd = 'write';
-          const path = 'renderingState/isTraining';
-          const data = {
-            type: cmd,
-            path,
-            data: true,
-          };
-          const message = msgpack.encode(data);
-          websocket.send(message);
-        },
-        {
-          disabled: isTraining,
-        },
-      ),
       // output_options
       output_options: {
         label: 'Output Render',
@@ -245,7 +197,6 @@ export function RenderControls() {
       }),
     }),
     [
-      isTraining,
       outputOptions,
       outputChoice,
       colormapOptions,
@@ -265,7 +216,6 @@ export function RenderControls() {
     setControls({ 'Camera FoV': field_of_view });
   }, [
     setControls,
-    isTraining,
     outputOptions,
     outputChoice,
     colormapOptions,

nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx

@@ -2,15 +2,24 @@ import * as React from 'react';
 
 import Button from '@mui/material/Button';
 import { ButtonGroup } from '@mui/material';
-import { useSelector } from 'react-redux';
+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 WebSocketUrlField from '../../WebSocketUrlField';
 
+import { WebSocketContext } from '../../WebSocket/WebSocket';
+
+const msgpack = require('msgpack-lite');
+
 interface StatusPanelProps {
   sceneTree: object;
 }
 
 export default function StatusPanel(props: StatusPanelProps) {
+  const dispatch = useDispatch();
+  const websocket = React.useContext(WebSocketContext).socket;
+  const isTraining = useSelector((state) => state.renderingState.isTraining);
   const sceneTree = props.sceneTree;
 
   const isWebsocketConnected = useSelector(
@@ -30,33 +39,51 @@ export default function StatusPanel(props: StatusPanelProps) {
   const handleChange = () => {
     setValue(!value);
   };
+
+  const handlePlayChange = () => {
+    dispatch({
+      type: 'write',
+      path: 'renderingState/isTraining',
+      data: !isTraining,
+    });
+    // write to server
+    const cmd = 'write';
+    const path = 'renderingState/isTraining';
+    const data = {
+      type: cmd,
+      path,
+      data: !isTraining,
+    };
+    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 ? <PauseIcon /> : <PlayArrowIcon />;
+
+  const websocket_connected_text = isWebsocketConnected
+    ? 'Server Connected'
+    : 'Server Disconnected';
+  const webrtc_connected_text = isWebrtcConnected
+    ? 'Render Connected'
+    : 'Render Disconnected';
+  const websocket_connected_color = isWebsocketConnected ? 'success' : 'error';
+  const webrtc_connected_color = isWebrtcConnected ? 'suceess' : 'error';
   sceneTree.object.visible = value;
 
   return (
     <div className="StatusPanel">
-      <ButtonGroup
-        className="StatusPanel-button-group"
+      <Button // button with view in ar icon
+        className="StatusPanel-play-button"
         variant="contained"
-        aria-label="outlined button group"
+        color="secondary"
+        onClick={handlePlayChange}
+        disabled={!isWebsocketConnected}
+        style={{}}
+        startIcon={training_icon}
       >
-        <Button
-          className="StatusPanel-button"
-          variant="contained"
-          disabled={!isWebsocketConnected}
-          style={{ textTransform: 'none' }}
-        >
-          Websocket Connected
-        </Button>
-        <Button
-          className="StatusPanel-button"
-          variant="contained"
-          disabled={!isWebrtcConnected}
-          style={{ textTransform: 'none' }}
-        >
-          WebRTC Connected
-        </Button>
-      </ButtonGroup>
+        {is_training_text}
+      </Button>
       <Button // button with view in ar icon
         className="StatusPanel-hide-scene-button"
         variant="outlined"
@@ -78,6 +105,26 @@ export default function StatusPanel(props: StatusPanelProps) {
           <b>Time Allocation:</b> {vis_train_ratio}
         </div>
       </div>
+      <ButtonGroup
+        className="StatusPanel-button-group"
+        variant="text"
+        aria-label="text button group"
+      >
+        <Button
+          className="StatusPanel-button"
+          color={websocket_connected_color}
+          style={{ textTransform: 'none' }}
+        >
+          {websocket_connected_text}
+        </Button>
+        <Button
+          className="StatusPanel-button"
+          color={webrtc_connected_color}
+          style={{ textTransform: 'none' }}
+        >
+          {webrtc_connected_text}
+        </Button>
+      </ButtonGroup>
     </div>
   );
 }