Skip to main content

Monitor App

The Monitor app is a tmux-style system monitoring dashboard for your DCC-EX layout. It provides real-time log streams, device status, and system metrics in a tiled pane layout.

Key Features

  • Tmux-Style Dashboard — Tiled panes for DCC Log, Turnouts, Effects, Sensors, and Stats with minimize/maximize/clear controls
  • MonitorStatusBar — Compact IDE-like header with track power, e-stop, layout selector, WS/server status indicators, and user profile
  • Real-Time Logs — Live streaming of DCC commands, turnout changes, effect triggers, and sensor events
  • System Stats — Active locos, device count, turnout/effect/signal totals, and server uptime
  • Device Serial Monitor — Subscribe to individual device serial output for debugging
  • Settings — Account, billing, theme (dark/light/high-contrast), background customization, and WS connection config

Screenshots

Dashboard (Desktop)

Monitor Dashboard — Desktop

Dashboard (Mobile)

Monitor Dashboard — Mobile

Settings (Desktop)

Monitor Settings — Desktop

Settings (Mobile)

Monitor Settings — Mobile

Technical Details

  • Framework: Vue 3 with Composition API
  • UI: Vuetify 3 + Tailwind CSS
  • State: Firebase Firestore via VueFire, localStorage via VueUse
  • Real-time: WebSocket subscriptions for device serial data, Firebase RTDB for DCC logs
  • Routing: Vue Router 4 with auth guards (requireAuth, requireLayout)
  • Theme: Dark/Light/High-Contrast via useThemeSwitcher
  • Port: 3031 (development)