Skip to main content
DEJA.jsDEJA.jsDEJA.js Home
Sign up

Home Screen

The Home screen is the first page you see when opening the Throttle app. What it displays depends on your authentication state and whether a layout is connected.

Throttle home screen with active throttles

Authenticated with a Layout Connected

When you are signed in and have a layout selected, the Home screen displays a DeviceStatusList showing your active throttle sessions. Each active throttle renders as an interactive Speedometer widget.

Speedometer Widgets

Each speedometer is an SVG gauge that displays:

  • The current speed of the locomotive (0--126), shown both as a needle position and a numeric value at the center of the gauge.
  • Tick marks around the arc with labeled speed increments.
  • A color-coded needle that changes from green (low speed) through amber (medium) to red (high speed).
  • The DCC address of the locomotive displayed below the gauge.

The speedometer needle animates smoothly as the locomotive speed changes in real time via Firebase.

Clicking a speedometer navigates you directly to the full Throttle Control screen for that locomotive.

Speedometer widget closeup

Not Authenticated

If you are not signed in, the Home screen shows two side-by-side cards:

Login Card

The Login card embeds the standard DEJA.js authentication component. Enter your credentials to sign in with your existing account. Authentication is handled through Firebase Auth.

Sign Up Card

The Sign Up card provides a form to request access to the DEJA.js system. Enter your email address and submit a request. This is useful for club layouts where an administrator controls who has access.

A "Continue as guest" link is also available at the bottom of the Sign Up card, allowing you to browse the app without creating an account.

Authenticated without a Layout

If you are signed in but have not yet selected a layout, the Home screen displays a message prompting you to connect to a layout, along with a Select Layout button that navigates to the layout picker at /connect.

This state typically occurs on your first login or if you have cleared your local storage.

Welcome Header

Regardless of authentication state, the Home screen displays a gradient welcome header reading "Welcome to DEJA Throttle" with a decorative gradient text treatment. The viaduct background image provides visual context for the model railroad theme.

How It Works

The Home screen uses three pieces of state to determine what to display:

  1. useCurrentUser() from VueFire -- checks whether the user is authenticated with Firebase Auth.
  2. useStorage('@DEJA/layoutId', '') from VueUse -- reads the selected layout ID from browser local storage.
  3. DeviceStatusList from @repo/ui -- fetches active throttle sessions from the Firebase collection at layouts/{layoutId}/throttles and renders them using the Speedometer slot.

When both the user and layout ID are present, the DeviceStatusList component queries Firestore for active throttles and passes them to the Speedometer template. Each speedometer receives the locomotive's current speed and DCC address as props.