---
layout: default
title: Dashboard
nav_order: 4
---

# Dashboard Setup

A pre-configured dashboard is included with the integration to help you get started quickly.

## Dashboard Overview

![Dashboard Full View](assets/images/dashboard-full.png)
*Complete dashboard view with all components*

The dashboard includes:
- Status indicator buttons
- Thermostat cards for temperature control
- History graphs for monitoring
- Scheduler integration (optional)

## Installing the Dashboard

### Method 1: Import YAML

1. Go to **Settings** > **Dashboards**
2. Click **+ Add Dashboard**
3. Choose "New dashboard from scratch"
4. Give it a name (e.g., "Heat Pump")
5. Open the dashboard and click the three dots menu
6. Select **Edit Dashboard**
7. Click the three dots again and select **Raw configuration editor**
8. Paste the contents of `dashboards/dash.yaml`
9. Click **Save**

![Import Dashboard](assets/images/dashboard-import.png)
*Import dashboard using raw configuration editor*

### Method 2: Add Cards Manually

You can also add individual cards to an existing dashboard.

## Dashboard Components

### Status Buttons

![Status Buttons](assets/images/dashboard-status-buttons.png)
*Status indicator buttons*

The top row shows quick status indicators:

| Button | Entity | Description |
|--------|--------|-------------|
| Alarm | `binary_sensor.heat_pump_alarm` | Shows alarm status |
| Heating | `binary_sensor.heat_pump_heating` | Heating mode active |
| Cooling | `binary_sensor.heat_pump_cooling` | Cooling mode active |
| SCE | `binary_sensor.heat_pump_sce` | Smart Consumer Electronics |
| Standby | `binary_sensor.heat_pump_standby` | Standby mode |

### Thermostat Cards

![Thermostat Cards](assets/images/dashboard-thermostats.png)
*Thermostat cards for temperature control*

Two thermostat cards provide temperature control:

#### Water Temperature Thermostat
- Entity: `climate.heat_pump_water_temperature`
- Controls heating/cooling water setpoint
- Shows current water temperature

#### DHW (Boiler) Thermostat
- Entity: `water_heater.heat_pump_dhw` or `climate.boiler_temperature`
- Controls domestic hot water setpoint
- Shows current DHW temperature

### History Graph

![History Graph](assets/images/dashboard-history.png)
*24-hour history graph showing all sensors*

The history graph tracks:
- All temperature sensors (T1, T2, T3, T4, setpoints)
- Binary status sensors (heating, cooling, pump, DHW)
- Runtime statistics

Configuration:
```yaml
type: history-graph
hours_to_show: 24
entities:
  - entity: sensor.heat_pump_water_temperature_t1
  - entity: sensor.heat_pump_dhw_temperature_t3
  - entity: sensor.heat_pump_outdoor_temperature_t4
  - entity: binary_sensor.heat_pump_heating
  - entity: binary_sensor.heat_pump_working
  # ... more entities
```

### Scheduler Card (Optional)

![Scheduler Card](assets/images/dashboard-scheduler.png)
*Scheduler card for automation*

The scheduler requires the [scheduler-card](https://github.com/nielsfaber/scheduler-card) custom component.

Install via HACS:
1. Open HACS
2. Search for "scheduler-card"
3. Install and restart

## Customizing the Dashboard

### Changing Time Range

Edit the history graph `hours_to_show` value:

```yaml
type: history-graph
hours_to_show: 48  # Change from 24 to 48 hours
```

### Adding More Sensors

Add entities to the history graph:

```yaml
entities:
  - entity: sensor.heat_pump_water_temperature_t1
  - entity: sensor.your_additional_sensor  # Add new sensors
```

### Changing Layout

Adjust grid columns for different screen sizes:

```yaml
grid_options:
  columns: 12  # Full width
  rows: 4
```

## Mobile View

![Mobile Dashboard](assets/images/dashboard-mobile.png)
*Dashboard optimized for mobile view*

The dashboard is responsive and works on mobile devices. For better mobile experience, consider:
- Using the sections layout
- Reducing the number of history graph entities
- Using compact card styles

## Example Cards

### Simple Temperature Display

```yaml
type: entities
entities:
  - entity: sensor.heat_pump_water_temperature_t1
    name: Inflow Temperature
  - entity: sensor.heat_pump_water_temperature_t2
    name: Outflow Temperature
  - entity: sensor.heat_pump_outdoor_temperature_t4
    name: Outdoor Temperature
```

### Gauge Card

```yaml
type: gauge
entity: sensor.heat_pump_water_temperature_t1
min: 20
max: 60
severity:
  green: 35
  yellow: 45
  red: 55
```

![Gauge Card](assets/images/dashboard-gauge.png)
*Temperature gauge card example*

## Next Steps

- [Troubleshoot issues](troubleshooting.md)
- [API Reference](api.md)