egutierrez
a62778a030
- Added `echarts` and `echarts-for-react` dependencies to the project. - Created new pages for visualizations: `VisualizacionesRandom` and `Camara_noir`. - Implemented `CanvasDisplay`, `ControlPanel`, `CaptureGrid`, `GridConfigPanel`, and `FrameCard` components for camera functionality. - Integrated WebSocket for real-time image capture in `useCamaraNoir` hook. - Developed FastAPI backend with endpoints for various chart data (bar, line, pie, scatter). - Updated routing to include new analytics paths for visualizations. - Modified submenu links to reflect new analytics options.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { AppShellWithMenu } from '../components/Appshell/Appshell';
|
|
import { Stack, Box } from '@mantine/core';
|
|
|
|
import {
|
|
CanvasDisplay,
|
|
ControlPanel,
|
|
CaptureGrid,
|
|
GridConfigPanel,
|
|
useCamaraNoir
|
|
} from '../components/Camara_noir';
|
|
|
|
export function Camara_noir() {
|
|
const camara = useCamaraNoir();
|
|
const totalSlots = camara.numFilas * camara.numColumnas;
|
|
|
|
return (
|
|
<AppShellWithMenu>
|
|
<Stack p="md" gap="md">
|
|
|
|
{/* Contenedor para botones encima del video */}
|
|
<Box style={{ position: 'relative', width: '100%' }}>
|
|
<ControlPanel
|
|
grabando={camara.grabando}
|
|
onAlternar={camara.alternarGrabacion}
|
|
onLimpiar={camara.limpiarCapturas}
|
|
onDesfijar={camara.desfijarTodos}
|
|
/>
|
|
<Box style={{ marginTop: 8 }}>
|
|
<CanvasDisplay canvasRef={camara.canvasRef} />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Grilla de capturas + configurador lateral */}
|
|
<Box style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
|
<CaptureGrid
|
|
totalSlots={totalSlots}
|
|
capturas={camara.capturas}
|
|
frameIndices={camara.frameIndices}
|
|
fijados={camara.fijados}
|
|
frameTemporal={camara.frameTemporal}
|
|
onScroll={camara.manejarScrollEnSlider}
|
|
onSliderChange={camara.setFrameTemporal}
|
|
onSliderEnd={camara.moverFrameYFijar}
|
|
numColumnas={camara.numColumnas}
|
|
/>
|
|
|
|
<GridConfigPanel
|
|
numFilas={camara.numFilas}
|
|
setNumFilas={camara.setNumFilas}
|
|
numColumnas={camara.numColumnas}
|
|
setNumColumnas={camara.setNumColumnas}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</AppShellWithMenu>
|
|
);
|
|
} |