Lovelace: Multiple entity row

Is it possible to change a fan entity to spin when active and stop when inactive when using this card? TIA

Photo for reference to what im looking at…

You can do that using card-mod. There are examples in the card-mod thread


      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success
        style:
          hui-generic-entity-row:
            $: |
              state-badge  {
                color: orange;
                animation: rotation 0.5s linear infinite;
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }

Just went there and saw examples. Here’s what I have, but it’s not working. See anything?

Unfortunately CSS isn’t my strong point.

Here is an example I have but it’s simply something I copied from the mushroom card thread:

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: fan.bedroom_fan
        content_info: none
        use_light_color: false
        card_mod: null
        icon: mdi:fan
        icon_color: |2-
              {% set state=states('fan.bedroom_fan') %}
              {% if state=='on' %}
              yellow
              {% elif state=='off' %}
              white
              {% endif %}
        style: |
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

The difference being I have the card listed, then the style under that whereas you have that other line in there: hui-generic-entity-row:

Perhaps try modifying your code to be like the layout of mine… unless someone else with more skill can say otherwise.

You are trying to solve the problem by copy/paste: took a style for element A from card B to get an effect for element C in card D.
i.e. - this code is for another element from another card.
Check card-mod thread and find a post for multiple-entity-row, it will give you correct paths to your elements.

Animation for multiple-entity-row:

ma

  - type: custom:multiple-entity-row
    entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            animation: rotation_1 2s linear infinite;
          }
          @keyframes rotation_1 {
            0% {
              transform: rotate(359deg);
            }
            100% {
              transform: rotate(0deg);
            }
          }
        .: |
          div.entity:nth-child(2) state-badge {
            animation: rotation_2 0.5s linear infinite;
          }
          @keyframes rotation_2 {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
    entities:
      - entity: sun.sun
      - entity: sun.sun
        icon: true
        name: false
    show_state: false

More styles

Thanks. This is close. Now I just want it to spin when it’s on. CSS is definitely outside my comfort zone, so I have been trying to copy and paste with small tweaks to see what works.


type: entities
entities:
  - entity: sensor.plaato_keg_tap1_beer_left
    type: custom:multiple-entity-row
    name: Keezer
    icon: mdi:beer
    show_state: false
    card_mod:
      style:
        hui-generic-entity-row $: ''
        .: |
          div.entity:nth-child(4) state-badge {
            animation: rotation_2 0.5s linear infinite;
          }
          @keyframes rotation_2 {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success

Use jinjia templates inside CSS style, there are plenty of examples in card-mod thread.

1 Like

I have been playing around and I am having issues in removing the unwanted sensor from my multiple entriy row, I would like to list 5 sensors results in a row, but when I add the llast sensor in the top, I am not getting any headers for it, like I do with the rest, any ideals on how to get the same results

here is my code.

 type: entities
 entities:
   - type: divider
   - entity: sensor.givtcp_export_energy_6_month_total_2024_2_compensation
     Name: 2024 2nd half
     type: custom:multiple-entity-row
 
     name: Generated
     entities:
       - entity: sensor.givtcp_export_energy_6_month_total_2022_2_compensation
         name: 2022 2nd half
       - entity: sensor.givtcp_export_energy_6_month_total_2023_1_compensation
         name: 2023 1st half
       - entity: sensor.givtcp_export_energy_6_month_total_2023_2_compensation
         name: 2023 2nd half
       - entity: sensor.givtcp_export_energy_6_month_total_2024_1_compensation
         name: 2024 1st half
   - type: divider
 title: 6 Month SEG
 state_color: true
 show_header_toggle: true

image

Solutions:

  1. Using “styles” - decrease a width and/or font-size:
       - entity: sensor.givtcp_export_energy_6_month_total_2023_2_compensation
         name: 2023 2nd half
         styles:
           font-size: 10px   ### this affects to header & state
           width: 50px
  1. Using card-mod - decrease a font-size for headers only.
    Go to card-mod thread → 1st post → style for multiple-entity-row

  2. Reconsider the whole design - for example, you may use flex-grid-card (which is better for placing many values in one row).

Problem here:

     name: 2024 2nd half

And if you want it exactly the same, use show_state: false for the main entity and add the 5th as the other 4.

thanks this fix the issue for me.

Oh, seems now I understood the REAL issue )))

hi,

i need your support, now i have one switch with 3 toggles, as the below code, if i trun on anyone, the entire row of the three switch will turn yellow, is there a way to make only the on switch turn yellow and the rest remain as it

type: entities
entities:
  - entity: switch.master_switch_01
    type: custom:multiple-entity-row
    name: Master Switch 01
    icon: mdi:lightbulb-outline
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.master_switch_01
    toggle: true
    state_color: true
    entities:
      - icon: mdi:lightbulb-outline
        state_color: true
        name: 1
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.master_switch_01_right
      - icon: mdi:lightbulb-outline
        state_color: true
        name: 2
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.master_switch_01_center
      - icon: mdi:lightbulb-outline
        state_color: true
        name: 3
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.master_switch_01_left

I already provided you a solution here.
What is wrong with it?

      - icon: mdi:lightbulb-outline
        entity_id: switch.master_switch_01_right
        state_color: true
        name: 1
        tap_action: ----- DO NOT THINK IT NEEDED THEN
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.master_switch_01_right

Hello everyone,
I stumbled across this card searching for a solution to what I hoped would be a simple task ^^

I would like to create a row consiting of a slider (of entity 1) + state (of entity 2).
For the slider I am using custom:slider-entity-row.

Is this possible with multiple-entities-row card? Or does it only support “normal” entities but cannot be combined with slider-entity-row?

Here an example of the slider part:

type: entities
entities:
  - type: custom:slider-entity-row
    entity: climate.eq_3_living_room

and of the entities part

type: entities
entities:
  - entity: sensor.xiaomi_temperature_living_room
    show_name: false
    show_icon: false

Not possible

Random question, but based on searching I am not sure it’s possible. I am using the Team Tracker integration which pulls in and creates an entity for a team with all the live game information/stats as attributes which includes the team logos as URLs to the PNG images. Is there a way to pull in and display these as the icon or something in the row? I haven’t had any luck, even with using the config-template card with this.

There is the associated Team Tracker Card which does this and I have tried to take pieces from, but am not great at JS. (I have used the official card, but would like to create a minimized version using the multiple entity row, if possible)

Anyone try or achieve anything like this or is it really not possible? Appreciate any insight!

If some entity has an “entity_picture” attribute specified then this image is displayed instead of an icon.
This works for the “main entity” & the very left image/icon in the row.

Alternatively, the "image" option may show a specified image - this also relates to the “main entity” & the very left image/icon.
Since your image is a part of some attribute - then you need to place the whole row into "config-template-card" and extract a path from an attribute value.

If you need to show an image on the right part of the row - then find another ways like “adding an image as :after/:before pseudoclass by card-mod”.

I appreciate it. I’ll try that out. Do you know if it will pull the PNG from the URL or does the PNG have to actually be in the sensor/attribute?