Routes

The Routes screen (/routes) lets you execute predefined track routes that automatically throw the correct sequence of turnouts to move a train from one point to another on your layout. Routes can be triggered from interactive SVG track maps or from a card-based list view.

Interactive Track Maps

The Routes screen includes SVG-based track maps that provide a visual representation of your layout. Two maps are available by default:

• PayetteSub -- the Payette Subdivision map, shown by default when the Routes page loads.
• TamarackJunction -- the Tamarack Junction map, an alternative view of the layout.

Map selection buttons appear in the header next to the page title. The currently active map is shown with a filled button; inactive maps use an outlined style.

Selecting a Route on the Map

To execute a route using the map:

1. Tap a location point on the map to set it as the origin (P1). The map highlights available destinations that have routes connecting to your chosen origin.
2. Tap a second location point to set it as the destination (P2).
3. The system looks up the route that connects P1 and P2 (in either direction), populates the turnout sequence, and automatically begins executing the route.

After execution completes (with a delay of 2 seconds per turnout step plus a short buffer), both points are cleared and the map returns to its default state.

If you tap a third point before the route finishes, the first point is replaced and P2 is cleared, allowing you to start a new selection.

Map Interaction

The SVG maps support three types of clickable elements:

• Route points (in the Routes SVG group) -- set origin and destination for route execution.
• Turnouts (in the Turnouts SVG group) -- directly throw or close individual turnouts by tapping them on the map.
• Turnout labels (in the TurnoutLabels SVG group) -- same as tapping a turnout, providing a larger click target.

The map applies CSS classes dynamically to reflect the current state:

• Turnout positions (straight or divergent) are indicated by CSS classes like turnoutId-straight or turnoutId-divergent.
• Selected origin and destination points receive highlight classes.
• Available destination points (reachable from the current origin) receive an available- prefix class.

Route Timeline

Between the header and the map, a horizontal timeline displays the current route selection and turnout sequence. The timeline is built with Vuetify's v-timeline component and shows:

• Origin chip (P1) -- a blue map marker icon on the left. When an origin is selected, it displays the point name with a close button to deselect. When empty, it reads "No origin selected."
• Turnout steps -- one timeline item per turnout in the route, each showing a split-track icon with the turnout name and its target state (Straight or Divergent).
• Destination chip (P2) -- a secondary-colored map marker icon on the right, functioning the same as P1.

When no route is selected, placeholder turnout nodes with gray icons appear in the middle of the timeline.

Progress Bar

A v-progress-linear bar sits directly above the timeline. During route execution, it fills from 0 to 100% as the server processes each turnout in the sequence. The bar is fully transparent when no route is running, and uses the primary theme color during execution.

List View

A third navigation option, Routes List, switches to a card-based view of all configured routes. Each route card displays:

• Route name as the card title (falling back to the route ID if no name is set).
• Point chips showing the origin (P1) and destination (P2) with map marker icons.
• Turnout chips showing each turnout in the sequence with its target state (Straight or Divergent).
• Run button to execute the route immediately.

Route cards use a tonal variant with the route's configured color, or cyan as the default. The cards are arranged in a responsive grid: one column on small screens, two columns on medium screens, and three columns on large screens.

How Route Execution Works

When a route is triggered (either from the map or the list):

1. The runRoute function from the useLayoutRoutes() composable is called with the route configuration.
2. The route's turnout sequence is written to Firebase.
3. The DEJA.js server processes each turnout command in order, with a 2-second delay between each step.
4. For each turnout, the server sends a DCC-EX command (<T idx state>) to the CommandStation over USB serial.
5. The progress bar on the Routes screen updates in real time as each step completes.
6. After all turnouts are thrown, the selection resets.

Empty State

If no routes are configured for the current layout, the list view shows an empty state. Routes are created and managed in the Cloud app.