Sobre este proyecto
it-programming / web-development
Abierto
Contexto general del proyecto
El proyecto consiste en un sistema que muestra lecturas de diferentes sensores en tiempo real utilizando distintas técnicas estandarizadas. El sistema debe mostrar estas lecturas en un grid que se desplaza horizontalmente, permitiendo marcar cuándo ocurren eventos específicos, además de poder cambiar la escala temporal y guardar/exportar los resultados. Detalles Técnicos -Lenguaje de Programación: JavaScript/React -Tecnologías: React.js, Chart.js, HTML Canvas -Arquitectura: Sistema de múltiples canvas para separar capas visuales -Base de Datos: Firebase Firestore (para almacenamiento de datos) Problemas a Resolver 1. Optimización del Sistema de Múltiples Canvas: -Separar correctamente las capas para evitar interferencias entre el grid base, las marcas de eventos y las líneas de datos de los sensores. -Asegurar que cada capa tenga su propio ciclo de actualización independiente. Corrección del Pintado de Marcas de Eventos: -Evitar que el marcado inicial se desplace de su posición original. -Prevenir que las actualizaciones de una línea de datos o el arrastre de sensores afecten las marcas de eventos. -Implementar correctamente los colores para cada tipo de evento. Mejora del Renderizado de Líneas de Datos: -Optimizar el pintado de las líneas para que sea más fluido y mantenga correlación con el grid. -Asegurar que los puntos dibujados permanezcan en su posición relativa correcta. Implementación de Cambio de Escalas: -Garantizar que al cambiar de escala temporal se mantenga la secuencia de tiempo y las visualizaciones. -Añadir la funcionalidad de cambio de escala mediante scroll del mouse sobre el grid. Funcionalidades de Inicio/Detención de Grabación: -Al iniciar grabación: generar una línea vertical con información del sujeto, habilitar marcado de eventos y comenzar registro. -Al detener: finalizar grabación, mostrar resultados en nueva pestaña y avanzar a la siguiente secuencia. Exportación de Resultados: -Implementar la funcionalidad para exportar las gráficas grabadas en formato PDF. Funcionalidades de Inicio/Detención de Grabación Al presionar el botón inicio: Generar una línea vertical en el grid que muestre: 1. Bloque 1: Nombre y apellido de la persona, DPI, código de la empresa, hora y fecha Bloque 2: Datos actuales de todos los sensores (Conductivity, Impedance, gsr, rpm, diastolic, systolic) bloque 3: tipo de evaluación, técnica, versión y ronda activar la funcionalidad de marcado de eventos iniciar el registro de todos los datos que se visualizan en el grid 2. Al presionar el botón detener: Finalizar la grabación de datos Abrir una nueva pestaña con la misma interfaz mostrando todo lo grabado desde el inicio En esta vista de reproducción: Mantener la capacidad de cambiar escalas en el grid Deshabilitar el BottomPanel.jsx y la selección de técnica En la pestaña original, avanzar automáticamente a la siguiente ronda de la técnica (considerando que en la técnica DLST se usan TEST_A y TEST_B en lugar de rondas) Implementar la funcionalidad para exportar toda la grabación visualizada en formato PDF Entregables Esperados -Código optimizado para el sistema de múltiples canvas corrigiendo los problemas de interferencia. -Implementación del correcto pintado de eventos y respuestas sin afectación por otros componentes. -Mejora de la fluidez en las líneas de datos y su correlación con el grid. -Funcionalidad de cambio de escala mediante selección y scroll de mouse. -Implementación de inicio/detención de grabación con la información requerida. -Funcionalidad de exportación a PDF. Estructura de Archivos Clave -PolygraphGrid.jsx: Componente principal que maneja la visualización y la interacción. -GridUtils.js: Funciones para dibujar el grid, manejar datos de sensores y animaciones. -QuestionMarks.js: Manejo del pintado de áreas de eventos y respuestas. -ConductivityLine.js: Clase para dibujar una de las líneas principales de datos. -DraggableLabels.jsx: Componente para el arrastre de los sensores. -BottomPanel.jsx: Panel inferior para la selección y visualización de eventos.
Categoría Programación y Tecnología
Subcategoría Programación Web
¿Cuál es el alcance del proyecto? Cambio mediano
¿Es un proyecto o una posición? Un proyecto
Actualmente tengo Tengo las especificaciones
Disponibilidad requerida Según se necesite
Roles necesarios Programador
Plazo de Entrega: No definido
Habilidades necesarias