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?
1 Like
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:
- 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
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
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).
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?