Rename in Home Assistant side bar?

ESPHome
1

Maybe I am just now noticing it, but I think since a recent update the HA sidebar name for ESPHome has changed to “ESPHome Device Compiler”?

Is there a way to change that back to just be “ESPHome”? The extra width throws off some alignments/visuals.

1 Like
2

Someone opened a feature request about it

Somewhere in that thread there is a work-around.

3

Post 5 of that thread.

4

This is how I did it. Step by step.

  1. Create a JavaScript file for your custom panel in the www directory.
    Example: /config/www/my_esphome_panel.js
// my_esphome_panel.js
class MyESPHomePanel extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <iframe src="http://homeassistant.local:8123/config/integrations/integration/esphome" style="width:100%; height:100%; border:none;"></iframe>
    `;
  }
}

customElements.define("my-esphome-panel", MyESPHomePanel);

  1. Replace the “iframe src” with the actual path to your ESPHome dashboard.
    To find the actual path, go to Settings, Integrations, ESPHome.
    Copy the URL from the browser address bar. For example:
    http://homeassistant.local:8123/config/integrations/integration/esphome

  2. Update your configuration.yaml file to include the custom panel. (This is mine):

panel_custom:
  - name: my-esphome
    sidebar_title: ESPHome Dashboard
    sidebar_icon: mdi:chip
    url_path: 15ef4d2f_esphome/ingress
    module_url: /local/my_esphome_panel.js
    embed_iframe: true
    require_admin: true

Replace url_path with the URL to the ESPHome dashboard
To find this path, open the current ESPHome dashboard and copy the URL from the browser address bar.
For example:
http://homeassistant.local:8123/15ef4d2f_esphome/ingress
Everything after 8123/ is the url_path

  1. Restart Home Assistant

  2. Edit the sidebar and hide the original sidebar for “ESPHome Device Editor”
    To edit the sidebar, long press on the sidebar to start the edit mode, you can move items by dragging them or hide them by pressing the X button.

5

Stop overcomplicating things,

Everyone else just follow Tom’s instructions.

6

Fine if you are using the ESPHome add-on. My instructions are for the name of the ESPHome Integration. Also, nowhere in Tom’s instructions is /local/panel-redirect.js mentioned.

7

Thanks for the detailed workaround. Unfortunately, neither your or Tom’s fixes work on my setup. No matter what I do, I get the following error when trying to follow the new link:

“Unable to load custom panel from http://homeassistant.local:8123/local/panel-redirect.js”

I can’t find “panel-redirect.js” anywhere on my system.

8

With hass_ingress integration:

ingress:
  esphome:
    work_mode: hassio
    # ui_mode: toolbar
    title: ESPHome
    icon: mdi:chip
    url: 5c53de3b_esphome
9

I think you are mixing the two solutions. Mine doesn’t use panel-redirect,js

But to be sure, I followed the instructions in my post on a test installation and it works just fine.

10