↓
 

Compact Entity List

Domoticaworld.com Posted on by

GOAL: display information in a more compact way. This is functional information.

By default Home Assistant likes to use a lot of space. Sometimes, you don’t have a lot of space, especially on mobile devices. And sometimes, information is functional without any need to look good. (even though I don’t think stuff looks better when you spread it across a larger space :-) )

The right example below is compact and shows exactly what it should show in a smaller space.
123 123 123 123 123 123 123 From Front Back Garage back Garage front Blokhut Ventilation Doorbell 9 2 5 2 5 123 123 123 123 123 123 123 To Front Back Garage back Garage front Blokhut Ventilation Doorbell 9 2 5 2 5

How?

Using the card-mod plugin (community discussion). Easiest way to install? via HACS.

After hacking around in the page source throught the browser inspector I found what needed to be changed: The “margin -10px 0px;” that I need to modify is in the “style” block AFTER the ha-card block.

block, <hui—entities—card> event v (open) flex content—> (open) <hl flex <div id=" states" <— entities this "style" block has the "margin 8px Opx" that can be changed to "margin -I()px Opx" to narrow the gap between each entity it sits just outside "ha-card" </hui—entities—card> 

type: entity-filter
entities:
  - entity: counter.frontdoor
    name: Front
  - entity: counter.backdoor
    name: Back
  - entity: counter.garageback
    name: Garage back
  - entity: counter.garagefront
    name: Garage front
  - entity: counter.blokhut
    name: Blokhut
  - entity: counter.ventilation
    name: Ventilation
  - entity: counter.doorbell
    name: Doorbell
state_filter:
  - operator: '>='
    value: 0
card:
  type: entities
  title: Counter-->below-->card-mod config!
  card_mod:
    style:
      .: |
        ha-card div#states div {
        margin-top: -10px !important;
        margin-bottom: -10px !important;
        }

The issue I had at first was that the “card_mod” section was at the ‘root’ of the yaml. When I indented that section with 2 spaces it belonged to the “card:” section and it instantly worked!

(you can also combine this with removing Entity Icons described in another post)

Enjoy!

 

Comments are closed.

↑