---
title: "Dársena — torre de control de terminal portuaria | Logic2b Lab"
description: "Demo técnica: dashboard de operaciones portuarias con mapa isométrico SVG, grúas STS animadas, tractoras con órdenes de transporte y escalas de buques en vivo, todo simulado en el navegador. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/darsena/
  md: https://logic2b.com/lab/darsena/index.md
---

# Dársena Lab · Logística portuaria / Tiempo real

lab.logic2b.com/darsena

Ruta: [Lab](https://logic2b.com/lab) › [Logística y transporte](https://logic2b.com/sistemas/logistica-transporte)

## Cómo se construyó Dársena

Demo de sistema de gestión de operaciones (torre de control) para una terminal portuaria de contenedores ficticia. Sobre un gemelo digital isométrico dibujado en SVG puro se mueve toda la operativa: tres atraques con su ciclo de escala completo (el buque llega, opera y zarpa cuando termina sus movimientos), seis grúas STS con el carro y el spreader animados, quince bloques de patio con ocupación y alturas, y una flota de diez tractoras que acepta órdenes de transporte, va a recoger el contenedor y lo entrega bajo grúa siguiendo los viales de la terminal. Cada activo tiene su ficha: seleccionar una tractora muestra su ruta en azul, su orden activa como tarjeta flotante sobre el mapa y acciones reales (modo manual, enviar a cargar, aparcar o seguirla con la cámara). En un proyecto real esta pantalla sería la capa de visualización de un TOS (sistema operativo de terminal): las posiciones vendrían del GPS-RTK/RTLS de la maquinaria vía MQTT o Kafka, las escalas del AIS y de la ventanilla única portuaria, las órdenes del propio TOS por API o EDI (COARRI/CODECO), y el mapa se serviría como plano vectorial del recinto con WebSockets empujando cada movimiento; aquí todo corre en el navegador con generadores seedeados, sin backend.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

### Qué demuestra

- Gemelo digital isométrico de la terminal dibujado en SVG puro: proyección 2:1 propia, sin librerías de mapas
- 3 atraques con ciclo de escala completo: aproximación con ETA, operativa con avance de movimientos y salida
- 6 grúas STS animadas: carro tierra↔mar, izado del spreader y productividad (mov/h) que alimenta la escala
- 10 tractoras autónomas con órdenes de transporte: recogida y entrega por viales con rutas Manhattan
- Panel de detalle por activo (tractora, grúa, buque, bloque) con acciones: manual, cargar, aparcar, seguir
- Cámara de seguimiento: «Seguir» centra el mapa en la tractora mientras trabaja; pan y zoom libres
- Ruta de la tractora seleccionada en azul con waypoints y tarjeta de orden flotante sobre el mapa
- Buscador global de órdenes, contenedores, vehículos, grúas y buques con selección directa
- Gestión de energía simulada: batería que se agota, envío automático al pad de carga y vuelta a servicio
- Feed de actividad de terminal, filtro por contexto de flota, capas, etiquetas y semilla reproducible

### Detalles

**Categoría**

Logística portuaria / Tiempo real

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG isométrico

### Categorías

[Logística y transporte](https://logic2b.com/sistemas/logistica-transporte) [Visualización 3D y datos](https://logic2b.com/sistemas/visualizacion-3d) Logística Dashboard SVG Tiempo real

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Estiba** Visualización 3D](https://logic2b.com/lab/estiba) [**Pocillo** Cuadros de mando](https://logic2b.com/lab/pocillo) [**Traslado** Despachos y gestión legal](https://logic2b.com/lab/traslado)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)