Home Assistant: Custom Panels

Home Assistant: Custom Panels

home assistant custom panel mopidy iris mpd music player

On the left side of Home Assistant are a number of different panels. Most users are familiar with the default panels, like “Overview,” a.k.a. the Lovelace dashboard — but it’s possible to do a lot more with home assistant custom panels.

For a breakdown of each panel in the screenshot above, see the log cabin -> smart home retrofit.

Multiple Lovelace Dashboards

As of version 1.0.7, Home Assistant supports creating more than one Lovelace dashboard, configurable at /config/lovelace/dashboards. Each panel is essentially an entirely new, stand-alone dashboard.

I like using panels more than tabs because I find it significantly easier to navigate. In the image above, you can see how Security, Temperature, etc. are broken out into separate panels. Hopefully, we’ll soon be able to re-order the panels as well.

Taking it a step further, it’s possible to add iframes as panels. This is useful for embedding other services on the network, like the Iris/Mopidy music player seen in the screenshot above.

Custom Panels

I wanted to hide the header bar in my iframe panels, as well as correct some CSS problems with the iframes in Chrome (like how it has a tendency to scroll off-screen). To do so, I added this file at panels/custom-iframe.html:

<dom-module id='ha-panel-custom-iframe'>
  <template>
    <style include="ha-style">
        iframe {
          overflow: hidden;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border: 0;
          width: 100%;
          height: calc(100%);
          background-color: var(--primary-background-color);
        }
      </style>
      <iframe
        src="[[panel.config.url]]"
        sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts"
        allowfullscreen="true"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
      ></iframe>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-custom-iframe',
  properties: {
    hass: {
      type: Object,
    },
    panel: {
      type: Object,
    }
  },
});
</script>

To see an example of where this is useful, let’s take a look Grafana…

Replacing History with Grafana

I like using Grafana much more than the built-in History features because I pipe all of my various metrics through Prometheus. It’s a much more feature-rich graphing application than the built-in History. One simple example: it’s easy to change the time range with Grafana.

It also means I can use a single visualization tool to graph much more than just Home Assistant data. Home Assistant’s Prometheus integration is not spectacular, but it is enough to get the data into Grafana and shut off the default “History” feature.

Looking for help bulidng Grafana charts for Home Assistant to fully replace the History card?

One way to achieve this is to click on any panel in Grafana and choose “share,” and then use that URL in a lovelace iframe card:

However, this is very inflexible. Multiple iframes must be loaded (one for each panel). The panels need to be manually configured, one by one, in lovelace. Instead, it can be convenient to have access to an entire Grafana dashboard.

With the custom iframe panel from the last section created, a custom panel can be added to configuration.yaml:

panel_custom:
  - name: custom-iframe
    sidebar_title: Grafana
    sidebar_icon: mdi:home-analytics
    url_path: grafana
    require_admin: true
    config:
      url: !secret grafana_dashboard

The grafana_dashboard URL can simply be a URL to any dashboard. You can also set the query parameter &kiosk to remove the chrome from Grafana. More tips on running Grafana in Docker/Kubernetes are available if you get stuck.

grafana docker home assistant custom panel kubernetes monitoring
Monitoring the Kubernetes cluster which runs Home Assistant, Grafana, etc… from within Home Assistant.

To remove the default panels (Map, Logbook, and History) from Home Assisstant, first remove the default_config entry from configuration.yaml and then re-add each of the components which it loads (except for those you wish to exclude, of course).

Read the Diff

The Diff is a weekly email with step-by-step instructions, project ideas, and links. Drop your email in the form below, and I'll send you some of my favorite resources. The links cover everything from off-grid/vanlife construction to home automation and Raspberry Pis.

... but this site has no paywalls. If you do choose to sign up for this mailing list I promise I'll keep the content worth your time.

Written by
(zane) / Technically Wizardry
Join the discussion

Menu

Around the Web