4
0
mirror of https://github.com/nerfstudio-project/nerfstudio.git synced 2026-11-11 10:34:29 +08:00

misc viewer cleanup (#1652)

This commit is contained in:
Matthew Tancik 2023-03-23 15:13:42 -07:00 committed by GitHub
parent 2c79d9fe52
commit f7e46e4848
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 35 additions and 63 deletions

View File

@ -1,12 +1,12 @@
import './index.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import WebSocketProvider from './modules/WebSocket/WebSocket';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
const root = createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<WebSocketProvider>

View File

@ -113,9 +113,9 @@ export default function LoadPathModal(props: LoadPathModalProps) {
</Button>
</FormControl>
<br />
<p>
<center>OR</center>
</p>
<center>
<p>OR</p>
</center>
</>
)}
{camera_paths_arr.length === 0 && (

View File

@ -31,10 +31,10 @@ export function get_scene_tree() {
},
setValue(key, value) {
this.value.set(key, value);
this.callbacks.forEach((cbk) => {
const i = cbk[1];
const callback = cbk[0];
return callback(this.value.get(i));
this.callbacks.forEach((callback, callbackKey) => {
if (callbackKey === key) {
callback(value);
}
});
},
};
@ -164,6 +164,9 @@ export function get_scene_tree() {
if (!scene_state.value.get('mouse_in_scene')) {
return;
}
if (keyMap.Space === true) {
camera_controls.setLookAt(0.7, -0.7, 0.3, 0, 0, 0);
}
translate();
rotate();
}
@ -189,12 +192,6 @@ export function get_scene_tree() {
window.addEventListener('keydown', onKeyDown, true);
window.addEventListener('keyup', onKeyUp, true);
window.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
camera_controls.setLookAt(0.7, -0.7, 0.3, 0, 0, 0);
}
});
sceneTree.metadata.camera_controls = camera_controls;
sceneTree.metadata.moveCamera = moveCamera;
@ -390,7 +387,7 @@ export function SceneTreeWebSocketListener() {
const dispatch = useDispatch();
useEffect(() => {
socket.addEventListener('message', (originalCmd) => {
const messageHandler = (originalCmd) => {
// set the remote description when the offer is received
const cmd = msgpack.decode(new Uint8Array(originalCmd.data));
if (cmd.type === 'write') {
@ -401,6 +398,11 @@ export function SceneTreeWebSocketListener() {
data: cmd.data,
});
}
});
};
socket.addEventListener('message', messageHandler);
return () => {
socket.removeEventListener('message', messageHandler);
};
}, [socket]); // dependency to call this whenever the websocket changes
}

View File

@ -147,9 +147,7 @@ function RenderTimeSelector(props) {
disabled={disabled}
sx={{
input: {
'-webkit-text-fill-color': `${
disabled ? '#24B6FF' : '#EBEBEB'
} !important`,
WebkitTextFillColor: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`,
color: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`,
},
}}
@ -282,9 +280,7 @@ function FovSelector(props) {
}}
sx={{
input: {
'-webkit-text-fill-color': `${
disabled ? '#24B6FF' : '#EBEBEB'
} !important`,
WebkitTextFillColor: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`,
color: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`,
},
}}
@ -655,13 +651,11 @@ export default function CameraPanel(props) {
};
const setCropEnabled = (value) => {
console.log('setting the crop enabled value to: ', value);
dispatch({
type: 'write',
path: 'renderingState/crop_enabled',
data: value,
});
console.log('crop enabled value is now: ', crop_enabled);
};
const serCropBgColor = (value) => {
@ -1121,7 +1115,6 @@ export default function CameraPanel(props) {
reset_slider_render_on_add(new_camera_list);
if ('crop' in camera_path_object && camera_path_object.crop !== null) {
console.log('crop' in camera_path_object);
setCropEnabled(true);
serCropBgColor(camera_path_object.crop.crop_bg_color);
setCropCenter(camera_path_object.crop.crop_center);

View File

@ -30,7 +30,7 @@ function TabPanel(props: TabPanelProps) {
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
<Typography component="div">{children}</Typography>
</Box>
)}
</div>
@ -51,7 +51,7 @@ export default function ExportPanel(props) {
const sceneTree = props.sceneTree;
const showExportBox = props.showExportBox;
const [type_value, setTypeValue] = React.useState(0);
const [type_value, setTypeValue] = React.useState(false);
const handleTypeChange = (event: React.SyntheticEvent, newValue: number) => {
setTypeValue(newValue);

View File

@ -132,9 +132,6 @@ export default function MeshSubPanel(props) {
return boolean ? 'True' : 'False';
};
console.log(controlValues.outputDir);
console.log(getPythonBool(controlValues.removeOutliers));
const bbox_min = [
clippingCenter[0] - clippingScale[0] / 2,
clippingCenter[1] - clippingScale[1] / 2,
@ -147,7 +144,6 @@ export default function MeshSubPanel(props) {
];
const mesh_method_choice = controlValues.mesh_method_options;
console.log(mesh_method_choice);
let cmd = '';
if (mesh_method_choice === 'tsdf') {
cmd =
@ -192,7 +188,7 @@ export default function MeshSubPanel(props) {
inner_html = (
<div className="ExportModal-text">
You need to train a model with normals to use poisson meshing. Try tsdf
or retrain the model with normals. You can use nerfacto with <br/>
or retrain the model with normals. You can use nerfacto with <br />
<b>--pipeline.model.predict-normals True</b>
</div>
);

View File

@ -162,24 +162,16 @@ export default function ViewerWindow(props) {
};
useEffect(() => {
function update_dimensions() {
const handleNewDimensions = () => {
setDimensions({
height: get_window_height(),
width: get_window_width(),
});
}
window.addEventListener('resize', update_dimensions);
// force a rerender
setDimensions({
height: get_window_height(),
width: get_window_width(),
});
render();
};
window.addEventListener('resize', handleNewDimensions);
return () => {
window.removeEventListener('resize', update_dimensions);
window.removeEventListener('resize', handleNewDimensions);
};
}, []);

View File

@ -1,19 +1,17 @@
import { useContext } from 'react';
import { ReactReduxContext } from 'react-redux';
export function subscribe_to_changes(selector_fn, fn) {
// selector_fn: returns a value from the redux state
// fn_valid: function to run on a valid input
// fn_null: function to run on a null input
export function subscribe_to_changes(selector_fn, callback_fn) {
const { store } = useContext(ReactReduxContext);
let current;
let previousState;
const handleChange = () => {
const previous = current;
current = selector_fn(store.getState());
if (previous !== current) {
fn(previous, current);
const currentState = selector_fn(store.getState());
if (previousState !== currentState) {
callback_fn(previousState, currentState);
previousState = currentState;
}
};
store.subscribe(handleChange);
}

View File

@ -364,15 +364,6 @@ class ViewerState:
max_scene_box = torch.max(dataset.scene_box.aabb[1] - dataset.scene_box.aabb[0]).item()
self.vis["renderingState/max_box_size"].write(max_scene_box)
# self.vis["renderingState/render_time"].write(str(0))
# set the properties of the camera
# self.vis["renderingState/camera"].write(json_)
# set the main camera intrinsics to one from the dataset
# K = camera.get_intrinsics_matrix()
# set_persp_intrinsics_matrix(self.vis, K.double().numpy())
def _check_camera_path_payload(self, trainer, step: int):
"""Check to see if the camera path export button was pressed."""
# check if we should interrupt from a button press?