Making the ESPHome Integration box bigger

I have about 30 ESPHome devices and the integration method for each single device is painful. Especially since the integration page only shows 3 at a time and the scroll wheel scrolls the box 4 lines. First anyway to make the boxes on the integration page in HA larger so maybe they show 5-6 lines instead of 3 devices?

Second any thoughts about just adding the URL for ESPHome server and having HA auto add based on what devices are configured there with API support?

1 Like

Everything showing for me. And all devices showing up on ESPHome dashboard?

I think the complaint is about how the Home Assistant integration only shows a few of the devices at a time without scrolling, but personally, I don’t see the need for making it any bigger than what it already is.

I agree. But as my photo shows, you can if you wish see all integrations on one page. You just need to know how to filter devices

1 Like

Yes on the integration page, and if you are removing devices that page you show doesn’t allow you to remove or configure devices the same as you can from the integrations page.

I agree on this and it is not only ESPHome that have the issue.
I run powercalc and that integration pretty much add a new device for every other device you have.
I have also 12 Kasa switches in the Kasa integration, so same issue there and I run several calendar, since I use them for heating and light control schedules.
I would be nice to be able to open a larger window by clicking on an icon in one of the corners to expand the view.

I think a Feature Request would be nice for this issue, so I made one here:

3 Likes

On the WTH there was a request for having it like other integrations.
13 devices , 59 entities.
Just one line where you can click on 13 devices.
I think. To not to break the layout that would be a nice solution.

1 Like

That would work too, if the functionality of the current view is transferred over.
The current view with a list of integration instances do not hold device information, but instead integration information.
Integration information have data, like name, IP, port, username, password, SSL certificate and other stuff that is not available in the normal device view.

Would still mean to scroll a lot since it would if ever show a small portion of all my devices. I agree with bkbartk the best way would be to keep things consistent across all integrations with only showing the numbers for devices and entities, since that would work from 1 till 200 devices while not breaking the visuals.

What I do wonder is another thing. Since some of the cards do have extra icons nowadays “depends on cloud” or “provided by custom integration” I wonder if it’s such a problem to simply provide something such as a “maximize” icon which takes one to a seprate view only displaying the devices for this integration. Sort of an entites view with a filter automatically applied.

1 Like

I moved around this issue with a custom lovelace view, based on auto-entities. This has the extra benefits of showing custom information as needed - like version, ip address, etc

type: custom:auto-entities
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(5 + 1) + 0.1%,150px,100%),1fr))
    grid-template-rows: repeat(minmax(50%, 1fr))
    margin: 0
    padding: 0
    grid-gap: 0.5em
exclude:
  state: '*unavailable*'
filter:
  template: |-

    {%- for state in states.update %}
    {%- if state.attributes.device_class is defined -%}
      {{
                    {
                      'name': state.attributes.friendly_name.replace('Firmware','')+device_attr(device_entities(device_id(state.entity_id))[0],'configuration_url').replace('http://',''),
                      'entity': state.entity_id,
                      'type': 'tile',
                      'tap_action': {
                        'action': 'url',
                        'url_path': '/config/devices/device/'+ device_id(state.entity_id)
                        }
                    }
                  }},    

    {%- endif -%}
    {%- endfor %}
view_layout:
  grid-column: span 4