> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreflux.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboards in the HUB

> Build live dashboards for your broker data — gauges, charts, SCADA symbols, and controls, bound to MQTT topics, with no code

<Frame caption="Live data updates flow into widgets as broker values change">
  <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-live-update.gif?s=dee0980069d58b8e3c274c98c5984b4a" alt="Animation showing dashboard widgets updating in real time as MQTT topic values change on the broker" width="800" height="500" data-path="images/hub-dashboards-live-update.gif" />
</Frame>

## Why Use Dashboards?

Every site and team asks different questions. Instead of commissioning a one-off HMI for each role, you can assemble the exact screen each person needs—KPI wall, line overview, or machine detail—and keep it live from data flowing through your broker. Dashboards in the Coreflux HUB update as soon as the underlying values change, without a separate deploy step or refresh ritual.

<Tip>
  **Like a control room sketched on a whiteboard.** You place a gauge, point it at the signal you care about, and it shows the live value from that moment on.
</Tip>

## When to Use Dashboards

* **KPI walls** — Large readouts and trends for supervisors and management
* **Line and area overviews** — At-a-glance status for a process or zone
* **Machine detail** — Gauges, symbols, and controls for a single asset
* **Operator stations** — Forms, buttons, and setpoints where people work the process
* **Shift or mobile views** — Simplified layouts for tablets and shared screens

***

## Opening the Dashboard Manager

The **Dashboard Manager** is an app inside the Coreflux HUB. It lists your **panels** (each panel is one dashboard you can open, share, or refine). From here you add panels, refresh the list, and open a panel to see it live.

<Frame caption="Dashboard Manager — Panels list with one published panel and status badges">
  <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-manager.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=b588c61bec7daa99b9a2dd94401d28c1" alt="Coreflux HUB Dashboards app showing Panels section with count 1, plus and refresh controls, and a list row for KPI Operational Dashboard with Public label and Published badge" width="1024" height="639" data-path="images/hub-dashboards-manager.png" />
</Frame>

## What You Can Display

Panels are built from a library of components. You drag them onto the canvas and tune labels, ranges, colors, and thresholds—no coding required.

| Category               | Examples                                                                                                  |
| ---------------------- | --------------------------------------------------------------------------------------------------------- |
| **Readouts**           | Gauges, large numbers with units, text lines, on/off/fault indicators, wall-sized KPI numerals            |
| **Charts**             | Line charts for trends, bar charts for comparisons, progress bars                                         |
| **Industrial symbols** | Pumps, valves, tanks with live fill, motors, instruments                                                  |
| **Controls**           | Buttons, toggles, sliders, text and number fields, forms that send values back when the operator confirms |
| **Media**              | Cameras, video, images, audio, custom mimic drawings                                                      |
| **Identification**     | Barcode and QR displays, scanner widgets                                                                  |
| **Maps and tables**    | Geo maps, live tables, lists, dropdowns fed from data                                                     |
| **Layout and alerts**  | Section labels and banners when a condition is true                                                       |

## How data updates on a Dashboard

Each component is tied to **live data** on your broker—typically a <Tooltip tip="Message Queuing Telemetry Transport — lightweight messaging for devices and applications">MQTT</Tooltip> topic that already carries the signal from your machines, databases, or Routes. When that topic’s value changes, the widget updates. You do not configure polling or manual refresh for normal operation.

<Frame caption="Panel opened as a floating window over the HUB — widgets reflect live topic values">
  <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-panel-window.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=2726231962c971c92e985c064ebbc0fc" alt="Coreflux HUB with the Dashboard Manager in the background and a floating panel window titled KPI Operational Dashboard showing a Status readout reading good, a Message Count line chart, and a Message Per Minute gauge reading 190" width="1024" height="639" data-path="images/hub-dashboards-panel-window.png" />
</Frame>

## Viewing a Panel

You can experience the same panel in more than one layout depending on where you need it.

<Tabs>
  <Tab title="As a window">
    Open the panel as a **floating window** on top of the HUB. That keeps the rest of the HUB—routes, Data Viewer, configuration—one click away while you watch live values or try layout changes.

    <Frame caption="Panel as a floating window over the HUB — live widgets stay visible while you work elsewhere">
      <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-panel-window-tab.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=82aa68d854cfcbdaf32a75574e389f64" alt="Coreflux HUB with the KPI Operational Dashboard expanded across the workspace, showing Status reading good, a Message Count trend line chart, and a Message Per Minute gauge reading 196" width="1024" height="639" data-path="images/hub-dashboards-panel-window-tab.png" />
    </Frame>
  </Tab>

  <Tab title="Full screen">
    Open the panel in a **dedicated full view** when you want a clean surface for a plant display, a wall-mounted screen, or a link you share with people who only need the dashboard.

    <Frame caption="Panel in full view — a clean surface for wall displays and shared links">
      <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-panel-fullscreen.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=4aef093dc0b7e4c88c039de7776899c4" alt="Clean full-screen view of the KPI Operational Dashboard with no HUB chrome, showing Status reading good, a Message Count line chart, and a Message Per Minute gauge reading 174 on a dark background" width="1899" height="1023" data-path="images/hub-dashboards-panel-fullscreen.png" />
    </Frame>
  </Tab>
</Tabs>

## Managing Panels

Each row in the panel list shows the panel name, a visibility hint (for example **Public**), its publication state (for example **Published**), and when it was last updated. Clicking the row itself opens the panel; hovering reveals a row of quick actions on the right for sharing, inspecting, and deleting.

| Action               | How to trigger it                                 | What it does                                                                                                          |
| -------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Open as a window** | Click the panel row                               | Opens the panel as a floating window on top of the HUB so you can keep working while it stays live                    |
| **Open as a link**   | Click the first icon on the right (external link) | Opens the panel in a dedicated shareable view—useful for plant displays, wall screens, or sending a URL to a teammate |
| **View source**      | Click the second icon on the right (code)         | Shows the panel’s underlying definition so you can inspect or copy it                                                 |
| **Delete dashboard** | Click the last icon on the right (trash)          | Removes the panel from the list after confirmation                                                                    |

<Frame caption="Panel row with quick actions — open as link, view source, and delete">
  <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-manager-actions.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=f90f439ac2d66f9053c6f22dd3aee240" alt="Coreflux HUB Dashboards app showing the KPI Operational Dashboard row with Public and Published badges and three icons on the right for opening as a link, viewing source code, and deleting the dashboard" width="1024" height="639" data-path="images/hub-dashboards-manager-actions.png" />
</Frame>

## Sharing Panels on TVs and External Displays

You can put the same live panel on any screen that runs a browser—control-room wall TVs, lobby KPI boards, shop-floor tablets, or a monitor at a remote site—without installing a separate HMI app or giving everyone full access to the Coreflux HUB. The **shareable panel URL** opens a dedicated view of that dashboard so viewers see only the panel, not routes, configuration, or other HUB apps.

From the **Dashboard Manager**, hover the panel row and click the **external link** icon (first action on the right). That opens the panel in a dedicated tab or window; copy the URL from the address bar and paste it into a browser on a TV stick, kiosk PC, tablet, or any display you want to keep on the loop.

<Tip>
  **Same live stream as inside the HUB.** The shareable URL reflects broker data the same way as the floating window—widgets update when topics change, without manual refresh for normal operation.
</Tip>

Typical uses:

* **Control-room and plant walls** — Full-screen dashboards that stay readable from a distance
* **Lobby and office KPI screens** — Management views without exposing operator tools
* **Shop-floor tablets** — Lightweight devices that only need one panel
* **Stakeholders and contractors** — A single URL when someone needs read-only visibility, subject to the panel’s **Visibility** settings

<Frame caption="Open the panel as a shareable URL for TVs, kiosks, and external displays">
  <img src="https://mintcdn.com/coreflux/W9CJ-kgVY3a3sCeL/images/hub-dashboards-external-link.png?fit=max&auto=format&n=W9CJ-kgVY3a3sCeL&q=85&s=310a7af8027aa6525e12183702b629de" alt="Coreflux HUB Dashboard Manager highlighting the external link action on a panel row to open a shareable dashboard URL" width="1919" height="1197" data-path="images/hub-dashboards-external-link.png" />
</Frame>

## Visibility and Lifecycle

Every panel carries two simple dimensions: who can open it, and whether it is ready for daily use.

| Dimension      | Options                      | Meaning                                                                                                                                                 |
| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Visibility** | Public · Shared · Private    | Who is allowed to open the panel                                                                                                                        |
| **State**      | Draft · Published · Archived | **Draft** while you are still building; **Published** when operators should rely on it; **Archived** when you want to retire it without losing the work |

<Warning>
  Deleting a panel from the list removes that dashboard. Prefer **Archived** when you want to retire a panel but keep it out of day-to-day use.
</Warning>

## Best Practices

<AccordionGroup>
  <Accordion title="Name panels by audience">
    Use names that tell you who it is for (for example “Line 3 — Shift Lead”) so the list stays scannable.
  </Accordion>

  <Accordion title="Start small">
    Ship a minimal panel with the three signals people ask for most, then add depth once it is in daily use.
  </Accordion>

  <Accordion title="Match symbols to reality">
    Use pumps, valves, and tanks where operators already think in those terms; use charts where trends matter more than mimic layout.
  </Accordion>

  <Accordion title="Publish deliberately">
    Keep work-in-progress in **Draft** until labels, ranges, and safety-related controls are verified.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Data Viewer" icon="search" href="/coreflux-hub/mqtt/data-viewer">
    Browse topics and payloads so you know what to bind each widget to.
  </Card>

  <Card title="AI Assistant" icon="comments" href="/coreflux-hub/ai-assistant">
    Ask the assistant to suggest layouts, bindings, or improvements to a panel.
  </Card>
</CardGroup>
