Lovelace: Multiple entity row

brpeterso · August 9, 2022, 1:38am


      - 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?

sparkydave · August 9, 2022, 1:50am

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.

Ildar_Gabdullin · August 9, 2022, 6:29am

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.

Ildar_Gabdullin · August 9, 2022, 7:24am

Animation for multiple-entity-row:

  - 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

brpeterso · August 9, 2022, 10:12am

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

Ildar_Gabdullin · August 9, 2022, 10:55am

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

chrischambers · August 13, 2022, 1:17pm

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

Ildar_Gabdullin · August 13, 2022, 1:34pm

Solutions:

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

Using card-mod - decrease a font-size for headers only.
Go to card-mod thread → 1st post → style for multiple-entity-row
Reconsider the whole design - for example, you may use flex-grid-card (which is better for placing many values in one row).

arganto · August 14, 2022, 7:37am

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.

chrischambers · August 14, 2022, 8:18am

thanks this fix the issue for me.

Ildar_Gabdullin · August 14, 2022, 8:54am

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

alamoudi.moh · August 15, 2022, 4:00pm

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

Ildar_Gabdullin · August 15, 2022, 4:22pm

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

AleXSR7001 · September 8, 2022, 2:53pm

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

Ildar_Gabdullin · September 8, 2022, 3:05pm

Not possible

smoysauce · September 11, 2022, 3:32am

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!

Ildar_Gabdullin · September 13, 2022, 11:56pm

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”.

smoysauce · September 14, 2022, 12:16am

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?

Ildar_Gabdullin · September 14, 2022, 12:18am

JPG, PNG, … cannot be a bitmap inside an attribute.
It is always a path.

smoysauce · September 14, 2022, 12:31am

Gotcha. So this is where I am stuck where it will show the URL but for the life of me, I can’t figure out how to show the image

type: custom:config-template-card
variables:
  GAME_STATE: states['sensor.ncaafb_huskers'].state
  TEAM_LOGO: states['sensor.ncaafb_huskers'].attributes.league_logo
entities:
  - sensor.ncaafb_huskers
card:
  entities:
    - entity: sensor.ncaafb_huskers
      attribute: tv_network
      name: TV
    - entity: sensor.ncaafb_huskers
      attribute: team_score
      name: ${states['sensor.ncaafb_huskers'].attributes.team_name)
    - entity: sensor.ncaafb_huskers
      attribute: clock
      name: Clock
    - entity: sensor.ncaafb_huskers
      attribute: opponent_score
      name: ${states['sensor.ncaafb_huskers'].attributes.opponent_name)
    - entity: sensor.ncaafb_huskers
      attribute: quarter
      name: Quarter
  entity: sensor.ncaafb_huskers
  attribute: league_logo
  image: state_attr('sensor.ncaafb_huskers', 'league_logo')
  name: Huskers
  state-color: true
  state_header: Status
  type: custom:multiple-entity-row