Skip to content

Building a Dashboard

TonyM1958 edited this page Feb 28, 2024 · 11 revisions

Prebuilt Dashboard

To create a copy of this dashboard:

  • Goto Settings, Dashboards in HA and click + ADD DASHBOARD
  • Give your dashboard a name and an icon and click CREATE
  • OPEN the dashboard, set the slider to create an empty dashboard and take control
  • Click the 3 dots in the top right corner and select EDIT DASHBOARD
  • Click again and select Raw Configuration Editor
  • Open the file views.yaml, copy all of the contents (CTL-A, CTL-C) and paste this as the raw configuration (CTL-V).
  • Click SAVE
  • Click DONE

This dashboard uses the Power Flow Plus Card add-on. Information on installing this can be found at https://github.com/flixlix/power-flow-card-plus

Steps for building a dashboard

Go to Settings / Dashboard, click the ADD DASHBOARD button. Give it a title and an icon, select Show in sidebar and click CREATE.

Click on the new dashboard in the sidebar, click on the 3 dots in the top right hand corner and select Edit Dashboard. When prompted, select start with an empty dashboard and select TAKE CONTROL.

Click ADD CARD. Type GRID in the search box and add the Grid card. This allows you to arrange further cards into rows and columns, but more importantly, it allows you to shuffle the order of cards and add new cards as you wish. You are prompted to add further cards to the grid. Set the number of columns to 1 and deselect Render cards as squares.

I add the Markdown card as the header for a column. Type Markdown into the search box and add the card. Remove the template text and add your header. I use plain text to save spec, but you start with ##, space and your header to get bigger text.

Click + sign to add more cards. Most of my cards are either Gauges or Entities. I add more cards to the column until it fills my screen.

Within an Entities card, you can select the entity to display in the list and re-order the entities by dragging them. You can also click the pencil next to the entity and change the name and icon that are displayed.

Within a Gauge card, you can select the entity to display, change the name, set the minimum and maximum values, and select whether an needle gauge is displayed and define a severity associated with ranges of values.

Save the card you have created.

You can now add further cards to the dashboard and these will be rendered horizontally across your screen. Although you can add multiple columns to the first card, this does not render well on the small screen of a phone. By using separate cards for each column, they are rendered side by side on a wide screen and vertically on a small screen, such as your phone.

You can re-order the dashboard cards by moving them around. You can also re-order the cards within the grid by opening the grid and changing the order of the cards.

Monitoring Pages

In addition to the main dashboard, I have a number of monitoring pages that I can check from time to time. For example , this page provides inverter status, settings and firmware information: