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

# Lesson 2 — Design Its Dashboard

> Drop a gauge and a switch onto a canvas and give them widget IDs — no code.

**Goal:** build the interface your users see — a gauge to read a value and a switch
to send a command. This is entirely no-code.

## 1. Open the Dashboard Designer

In your product's Studio, open **Design → Dashboard Designer**. You get a blank
canvas and a widget library.

## 2. Add a gauge (to read a value)

Drag a **Gauge** onto the canvas. In its **General** tab, set the **widget ID** to
`tempGauge`.

<Note>
  The **widget ID** is the crucial link. In Lesson 4, firmware will push a value to
  `tempGauge` and this gauge will move. Pick IDs you'll remember.
</Note>

## 3. Add a switch (to send a command)

Drag a **Switch** onto the canvas. In its **Triggers** tab, set it to send your
product's `Operate` command — **ON** when toggled on, **OFF** when off (the command
you defined in Lesson 1).

## 4. Save

Save the dashboard. You now have a UI with:

* a **gauge** waiting for a value on `tempGauge`
* a **switch** that will send `Operate` ON/OFF to a device

Nothing's connected yet — that's Lessons 3 and 4.

<Check>
  A saved dashboard with a Gauge (ID `tempGauge`) and a Switch bound to `Operate`.
</Check>

<CardGroup cols={2}>
  <Card title="Designer reference" icon="table-cells" href="/dashboard/overview">
    The four-tab model in depth.
  </Card>

  <Card title="Next: bring it to life" icon="arrow-right" href="/learn/lessons/03-bring-to-life">
    Firmware — or a simulated device.
  </Card>
</CardGroup>