Throttle App
The Throttle app is the primary user-facing application in the DEJA.js system. It gives model railroad operators real-time control of locomotives, turnouts, signals, routes, and effects from any device with a modern web browser.
Operators can run a single train with detailed throttle controls, manage multiple trains simultaneously in a grid view, or use the Conductor view for full-station operation on large screens. Every control writes to Firebase in real time, and the DEJA.js server translates those changes into DCC-EX serial commands sent to your CommandStation.
Key Features
- Speed and direction control for individual locomotives using button controls (mobile) or slider controls (desktop/tablet).
- Function buttons (F0 through F28) for headlights, horns, bells, sound effects, and decoder-specific features via a speed dial overlay.
- Turnout management with throw/close controls and color-coded state indicators.
- Route execution through interactive track maps or a route list, with a visual timeline showing turnout sequences and a progress bar during execution.
- Consist support for linking multiple locomotives together, visible directly on the throttle screen.
- Multi-throttle operation with a grid view of all active throttles, drag-to-reorder tiles, and a floating action button to add locomotives from the roster.
- Conductor view combining throttle list, active throttle, and turnout controls in a three-pane layout designed for operator stations.
- Signal monitoring with red, yellow, and green aspect indicators.
- Effects control for triggering sound effects, lights, and animations on your layout.
- Swipe navigation between locomotives on the throttle screen.
- Quick Menu — a draggable floating button for instant access to locos, effects, turnouts, routes, signals, and sensors from any page, with drill-down filtering and one-tap actions.
- Emergency stop accessible from the app header on every page.
- Theme switching between light and dark modes.
- Guest access available without authentication for quick demonstrations.
Navigation Structure
The Throttle app uses a customizable footer navigation bar and a slide-out side menu. The footer bar shows your favorite views as icon buttons, and you can configure which items appear through the settings.
Pages
| Page | Route | Description |
|---|---|---|
| Home | / | Landing page with speedometer widgets for active throttles, login cards, and layout selection |
| Throttle Control | /throttle/:address | Full single-locomotive control with speed, functions, consist, and emergency stop |
| Throttle List | /throttles | Grid view of all active throttles for multi-train operation |
| Quick Menu | (floating overlay) | Draggable FAB with drill-down access to all layout entities |
| Conductor View | /conductor | Three-pane operator station layout with throttle list, active throttle, and turnouts |
| Effects | /effects | Sound effects, lights, and animation control |
| Routes | /routes | Interactive track maps and route execution |
| Signals | /signals | Signal monitoring and control |
| Turnouts | /turnouts | Track switch throw/close controls |
| Roster | /locos | Locomotive roster browser |
| Settings | /settings | App preferences and footer menu customization |
| Select Layout | /select-layout | Layout picker for multi-layout setups |
| Login | /login | Authentication screen |
Most pages require you to be logged in and have a layout selected before they are accessible. The Home page and Login page are always available.
App Shell
The Throttle app shell includes three persistent UI elements visible across all pages:
- AppHeader -- displays the app name, layout power toggle, emergency stop button, device connection status, and user profile. The hamburger menu opens the side navigation drawer.
- Side Menu -- a slide-out drawer with the full list of navigation items, each with an icon and color. Items marked as favorites also appear in the footer bar.
- Footer Bar -- a pill-shaped button group at the bottom of the screen showing your favorited navigation items for quick access. The default favorites are Throttles, Conductor, Throttle, Effects, Routes, Turnouts, and Signals.
- Quick Menu -- a draggable floating action button (FAB) displaying the DEJA.js logo. Tap to open a drill-down panel for browsing and controlling locos, effects, turnouts, routes, signals, and sensors without leaving the current page. The FAB can be repositioned by dragging and remembers its position across sessions.
Page transitions use a fade animation when navigating between views. Swipe gestures on the main content area navigate forward and backward through the menu (disabled on the Throttle Control page, which uses swipe for locomotive switching).