Build Your First Flight Dashboard

In this tutorial, you'll build a real-time flight dashboard for Microsoft Flight Simulator that displays altitude, airspeed, and heading. By the end, you'll have a working web page that updates live as you fly.

What you'll build:

A clean dashboard showing:

Current altitude (in feet)
Indicated airspeed (in knots)
Heading (in degrees)

Time: About 15 minutes

Prerequisites:

A GameGlue account (sign up here)
Microsoft Flight Simulator installed
The GameGlue Desktop Client running
A way to serve HTML locally (e.g., VS Code Live Server, python -m http.server, or any dev server)

Step 1: Create Your Project

Create a new folder for your project and add an index.html file:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flight Dashboard</title>
  <script src="https://unpkg.com/gameglue/dist/gg.umd.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: #1a1a2e;
      color: #eee;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dashboard {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      padding: 2rem;
    }

    .gauge {
      background: #16213e;
      border-radius: 12px;
      padding: 2rem;
      text-align: center;
      min-width: 180px;
    }

    .gauge-label {
      font-size: 0.875rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }

    .gauge-value {
      font-size: 3rem;
      font-weight: 600;
      color: #3cff8f;
    }

    .gauge-unit {
      font-size: 0.875rem;
      color: #666;
      margin-top: 0.25rem;
    }

    .status {
      position: fixed;
      bottom: 1rem;
      left: 1rem;
      font-size: 0.75rem;
      color: #666;
    }

    .status.connected {
      color: #3cff8f;
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="gauge">
      <div class="gauge-label">Altitude</div>
      <div class="gauge-value" id="altitude">---</div>
      <div class="gauge-unit">feet</div>
    </div>

    <div class="gauge">
      <div class="gauge-label">Airspeed</div>
      <div class="gauge-value" id="airspeed">---</div>
      <div class="gauge-unit">knots</div>
    </div>

    <div class="gauge">
      <div class="gauge-label">Heading</div>
      <div class="gauge-value" id="heading">---</div>
      <div class="gauge-unit">degrees</div>
    </div>
  </div>

  <div class="status" id="status">Connecting...</div>

  <script src="app.js"></script>
</body>
</html>

This creates a simple three-gauge layout. The JavaScript will fill in the values.

Step 2: Register Your Application

Before your app can connect to GameGlue, you need to register it:

Go to the Developer Hub
Click Create Application
Enter your app details:
- Name: Flight Dashboard (or whatever you like)
- Redirect URL: http://localhost:3000 (or wherever you're serving from)
Copy your Client ID - you'll need it in the next step

Step 3: Connect to GameGlue

Create an app.js file in the same folder:

javascript

// Replace with your Client ID from the Developer Hub
const CLIENT_ID = 'your-client-id-here';
const REDIRECT_URI = 'http://localhost:3000';

// Initialize the GameGlue client
const ggClient = new GameGlue({
  clientId: CLIENT_ID,
  redirect_uri: REDIRECT_URI,
  scopes: ['msfs:read']
});

async function init() {
  const statusEl = document.getElementById('status');

  // Check if user is authenticated
  const isAuthed = await ggClient.isAuthenticated();

  if (!isAuthed) {
    statusEl.textContent = 'Redirecting to login...';
    ggClient.login();
    return;
  }

  // Get the authenticated user
  const userId = ggClient.getUser();
  statusEl.textContent = 'Creating listener...';

  // Create a listener for MSFS data
  const listener = await ggClient.createListener({
    userId: userId,
    gameId: 'msfs',
    fields: ['indicated_altitude', 'indicated_airspeed', 'true_heading']
  });

  statusEl.textContent = 'Connected';
  statusEl.classList.add('connected');

  // Update the dashboard when data arrives
  listener.on('update', (evt) => {
    const data = evt.data;

    document.getElementById('altitude').textContent =
      Math.round(data.indicated_altitude || 0);

    document.getElementById('airspeed').textContent =
      Math.round(data.indicated_airspeed || 0);

    document.getElementById('heading').textContent =
      Math.round(data.true_heading || 0);
  });
}

init();

Replace 'your-client-id-here' with the Client ID you copied from the Developer Hub.

Step 4: Run Your Dashboard

Start your local server. For example, with Python:
bash
```
python -m http.server 3000
```
Open http://localhost:3000 in your browser
You'll be redirected to log in with GameGlue. After logging in, you'll be sent back to your dashboard.
Start Microsoft Flight Simulator and begin a flight
Watch your dashboard update in real-time!

Step 5: Try It Out

With MSFS running and your dashboard connected:

Take off and watch the altitude climb
Speed up and see the airspeed increase
Turn and watch the heading change

Your dashboard is now receiving live telemetry from the simulator.

What's Happening?

Here's a quick overview of what each part does:

ggClient.isAuthenticated() - Checks if the user has already logged in. This also handles the OAuth callback when returning from login.
ggClient.createListener() - Opens a WebSocket connection to receive data from the specified game. The fields array limits which data you receive (saving bandwidth).
listener.on('update', ...) - Fires every time new telemetry arrives. The evt.data object contains the fields you subscribed to.

Next Steps

Now that you have a working dashboard, you can:

Add more data - See all available fields in the MSFS Reference
Send commands - Learn to control the aircraft in How to Send Commands
Style it your way - The dashboard is just HTML and CSS, customize it however you like

Troubleshooting

Dashboard shows "---" but no data?

Make sure MSFS is running with an active flight (not in the menus)
Check that the GameGlue Desktop Client is running and shows "Connected"

Login keeps redirecting?

Verify your redirect URL in the Developer Hub matches exactly (including http vs https and port number)

"Connection failed" error?

Check your internet connection
Make sure you're using the correct Client ID

If you're still stuck, see Troubleshooting Connection Issues or reach out to support@gameglue.gg.

Build Your First Flight Dashboard ​

Step 1: Create Your Project ​

Step 2: Register Your Application ​

Step 3: Connect to GameGlue ​

Step 4: Run Your Dashboard ​

Step 5: Try It Out ​

What's Happening? ​

Next Steps ​

Troubleshooting ​