Caso de estudio 04 / 21React Front-End
P&ID en vivo para las estaciones de una tubería, armados con sus datos
Cada estación recibe un borrador automático de P&ID con sus filas de datos, un editor para corregirlo y, al guardarlo, una vista en vivo.
Stack
- React
- TypeScript
- Next.js
- SVG
- Framer Motion
- MongoDB
- Node.js
01 · Cómo funciona
- HoyaModificado en este trabajo
- Flujo de datos
Qué hace
Un P&ID (diagrama de tuberías e instrumentación) por estación para una plataforma industrial de monitoreo, que se abre desde el recuadro de la estación en el gráfico de perfil de la tubería. Cada cliente arma sus diagramas en un editor de configuración que parte de un borrador automático hecho con las filas de datos de la estación, y el operador los ve con un valor en vivo en cada instrumento, colores según sus límites y el flujo dibujado solo en los ramales en uso.
Leer más
Está dibujado en SVG propio, sin biblioteca de diagramas, no agrega peticiones de datos y ofrece un estilo de símbolos clásico y otro moderno con relieve, a elección con un selector.
6 conexiones· elige un componente para ver su recorrido
- Filas de la estación a Borrador automático: reglas por nombre y unidad
- Borrador automático a Editor de configuración: primer borrador a corregir
- Editor de configuración a P&ID guardado: última versión por estación
- P&ID guardado a Ventana del operador: SVG propio, dos estilos
- Valores ya consultados a Editor de configuración: valor en vivo por fila
- Valores ya consultados a Ventana del operador: sin peticiones nuevas
02Resultados
- R01Cuanto más alto, mejor
Estaciones con borrador automático de P&ID (de 91)
Antes 0, después 91, desde 0. Cuanto más alto, mejor.AntesDespués - R02Cuanto más alto, mejor
Filas de estación que el borrador ubica solo
Antes 0%, después 95%, desde 0. Cuanto más alto, mejor.AntesDespués
Qué logró
- Hacer clic en una estación: un recuadro con números → un P&ID en vivo a un clic una vez que el cliente lo guarda, con colores según límites y flujo solo en los ramales en uso
- Armar un P&ID: desde cero → un borrador automático que ubica el 95 % de 285 filas de estación, entre 90 y 99 % por sistema
- Valores en vivo: ninguno sobre un dibujo → un valor en cada instrumento enlazado, 0 de 357 sin valor en 91 estaciones, sin peticiones de datos nuevas
Leer más
- Edición: ninguna → un editor para arrastrar a la tubería con 22 componentes, deshacer, límites y vuelta al borrador automático
- Aspecto: un solo estilo plano → un selector entre clásico y moderno, con símbolos iluminados, tuberías como tubos, anillos de estado y píldoras de vidrio
- Arrastre en el editor con el estilo moderno: 43 → 34 cuadros por segundo, medido y aceptado por el aspecto
El desafío
Al hacer clic en una estación del perfil de la tubería se abría un recuadro con números: sin disposición, sin recorrido del flujo, sin indicio de qué ramal estaba en uso. Los datos de cada estación cambian mucho: 5 filas en una estación de válvulas, 14 en una estación de estrangulamiento con 5 ramales y 3 anillos restrictores, 19 en una terminal y un solo nivel en la mayoría de las estaciones de un canal.
Leer más
Las filas no traen el tipo de instrumento, y en un sistema 25 de 89 venían sin unidad.
Nada guardaba un dibujo por estación, el entorno de arrastre que existía no unía símbolos con tuberías y ningún dato decía qué anillo iba en qué ramal. Los clientes trabajan sin internet, así que todo tenía que ir dentro de la aplicación.
Qué aprendí
Un borrador vale más que una plantilla. Las reglas salen de los nombres y unidades reales de 346 filas y ubican la mayoría de los instrumentos; lo que no reconocen queda a la vista en una columna de «otros», nunca adivinado, y el código no nombra ningún sistema. Pensaba mostrar a los operadores los borradores sin editar y lo descarté durante la construcción: el botón aparece solo con diagramas guardados y el borrador es donde empieza la edición.
Leer más
Medí primero el aspecto: degradados compartidos y un solo filtro de desenfoque dejaron el pintado a la par del estilo clásico, pero el arrastre bajó de 43 a 34 cuadros por segundo. Una captura reveló un error: 6 de 6 instrumentos sin valor, porque la vista quitaba el prefijo de la estación del nombre de la fila; una sola clave de fila compartida lo resolvió.
Stack
- React
- TypeScript
- Next.js
- SVG
- Framer Motion
- MongoDB
- Node.js
Habilidades
- Diseño de interfaces HMI industriales
- Generación de diagramas por reglas
- Editores SVG interactivos
- Presupuestos de rendimiento
- Diseño de información
