Hello!
Is it possible for an icon to blink in custom room-card? I want the water sensors icons to flash when they are activated.
It works very well in custom button-card. Can it also be adapted to custom room-card?
state:
- value: 'on'
color: red
icon: mdi:water-circle
styles:
card:
- animation: blink 2s infinite
- operator: default
color: blue
icon: mdi:water-circle
If possible, can you give me an example of the configuration, please
Hey! Itās possible with card_mod.
And sorry but itās not going te be supported in the near future because itās way too much work for something that can be done with card_mod.
Add this to your card, but with the correct indention:
card_mod:
style: >
{% if
is_state('binary_sensor.smoke_sensor_keuken_smoke_detected',
'on') %}
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
Iām always impressed by how far weāve come since the web started. What you used to be able to do with <blink></blink> now takes multiple lines of CSS code.
Yeah sort of haha. Only this is an animation in stead of hide/unhide
Hi @marcokreeft87, first of all - this is an awesome card! Iām moving my small info panel dashboard to it.
Iām playing with styling and Iām trying to figure out one tiny thing - something I didnāt notice yet in any of the screenshots or code in the thread. In an entities row, would it be possible to display the state value next to the entity icon, instead of the standard below?
Iām not that good with CSS, especially contemporary standards, but I guess it would have to be something with changing the way the entity div is handled? Or forcing the location of the value span?
Hi,
I am loving the room card but struggling to get a tap action to change a climate preset mode.
I have an entity called climate.wiser_spare_bedroom that has an attribute of preset_mode which has several options. One of them is āBoost 30mā
I want to have the tap action set the preset_mode attribute to Boost 30m
I have created this code but it doesnāt work. Can anyone help?
- entity: climate.wiser_spare_bedroom
name: Boost 30m
tap_action:
action: call-service
service: climate.set_preset_mode
service_data:
target:
entity: climate.wiser_spare_bedroom
preset_mode: Boost 30m
Is there any way to override the state that is when 0.0 state should be idle
type: custom:room-card
title: Laundry Room
card_styles:
'--ha-card-header-font-size': 15px;
entity: switch.hallway
icon: mdi:washing-machine
show_icon: true
state_color: true
tap_action:
action: toggle
entities:
- entity: input_number.washer_value
name: Washer
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: '0.0'
icon: mdi:dishwasher-off
styles:
color: blue
- condition: equals
value: '10.0'
icon: mdi:dishwasher
styles:
color: orange
- condition: equals
value: '20.0'
state: Cycle Done
icon: mdi:dishwasher
styles:
color: red
- entity: input_number.dryer_value
name: Dryer
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: '0.0'
icon: mdi:tumble-dryer-off
styles:
color: blue
- condition: equals
value: '10.0'
state: Drying
icon: mdi:tumble-dryer
styles:
color: orange
- condition: equals
value: '20.0'
state: Cycle Done
icon: mdi:tumble-dryer
styles:
color: red
- entity: binary_sensor.washer_door_2
show_icon: true
show_state: true
name: washer Door
icon: mdi:door-closed
state_color: true
- entity: binary_sensor.dryer_door
show_icon: true
show_state: true
name: washer Door
icon: mdi:door-closed
state_color: true
- entity: sensor.washer_vibration_pulse_rate_2
show_icon: true
show_state: true
name: Vibration
icon: mdi:vibrate
state_color: true
Amy chance to get dimmers working on this card?
I only can toogle on/off. Setting the lights to any value bewteen 0 % - 100 % would be great.
Same behavior for covers would be nice.
Any help would be appreciated I am rather new to this. I have a room-card that I want to conditional change color from green when Charging to blue when not. Here is my current code.
type: custom:room-card
title: āāOlen's iPhone
icon: mdi:cellphone
show_icon: true
content_alignment: center
tap_action:
action: toggle
entities:
- entity: sensor.pyro187_battery_level
name: Battery
show_state: true
state_color: true
- entity: sensor.pyro187_battery_state
name: Battery State
show_state: true
state_color: true
- entity: sensor.pyro187_connection_type
name: Connection
show_state: true
state_color: true
- entity: binary_sensor.pyro187_focus
name: Focus
show_state: true
state_color: true
- entity: sensor.pyro187_steps
name: Steps
state_color: true
show_state: true
Iām really liking the room card and learning along the way. How do I move the info entity closer to the corner of the card or at least align it with the title?
type: custom:room-card
title: Office
card_styles:
'--ha-card-header-font-size': 20px
color: default
entity: light.office_group
icon: mdi:lightbulb-group
show_icon: true
entities:
- entity: light.game_room_l
name: Hue R
show_icon: true
- entity: light.game_room_r
name: Hue L
show_icon: true
- entity: light.signe_gradient_floor_1
name: Signe
icon: mdi:floor-lamp
show_icon: true
- entity: light.elgato_bw21k1a03291
name: Elgato
icon: mdi:light-flood-down
show_icon: true
info_entities:
- entity: light.office_group
name: Light Group
icon: mdi:lightbulb-group
show_icon: true
tap_action:
action: toggle
Hi.
How to change the color of text in info entities depending on its value (e.g. temperature or humidity)
I try this, but not work.
info_entities:
- entity: sensor.0x00158d000913e52e_humidity
template:
styles: >
if (entity.state <= 55) return 'color: green'; if (entity.state <=
45) return 'color:blue'; else return 'color: red';
Ok.
I find solution: chichi1976
Thatās how I create the value dependent colors for humidity and temps. You need to keed the correct order of the >= statements from biggest to smallest value!
- entity: sensor.az_hygro_humidity
format: precision0
styles:
template: >
if (entity.state < 40) return 'color: orange'; if (entity.state >=
70) return 'color: red'; if (entity.state >= 55) return 'color:
orange'; if (entity.state >= 40) return 'color: green';
- entity: sensor.az_hygro_temperature
format: precision1
styles:
template: >
if (entity.state < 20) return 'color: blue'; if (entity.state >= 24)
return 'color: red'; if (entity.state >= 22) return 'color: orange';
if (entity.state >= 20) return 'color: green';
@marcokreeft87 . I would like to change the state of sensors that report open and closed instead of on and off as you can see in the screenshot:
I did change the device class but still show as off or on.
here is the code for the card:
type: custom:room-card
title: Garage
entity: switch.garage
icon: mdi:garage-variant
show_icon: true
entities:
- entity: switch.garage
name: Ceiling
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:ceiling-light
styles:
color: yellow
animation: blink 0.75s ease infinite
- condition: equals
value: 'off'
icon: mdi:ceiling-light
styles:
color: default
tap_action:
action: toggle
- entity: switch.zooz_zen15_power_cord_freezer
name: Freezer
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:fridge-industrial
styles:
color: green
- condition: equals
value: 'off'
icon: mdi:fridge-industrial-alert
styles:
color: red
- entity: switch.unifyplug_switch
name: UnifySwitch
show_state: true
show_icon: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:wifi-check
styles:
color: green
- condition: equals
value: 'off'
icon: mdi:wifi-alert
styles:
color: red
- entity: binary_sensor.garagedoor_sensor_iaszone
name: Door
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:garage-open
styles:
color: red
- condition: equals
value: 'off'
icon: mdi:garage-lock
styles:
color: green
- entity: light.foscamgarage_light
icon: mdi:ev-plug-ccs1
show_icon: true
show_state: true
name: CamPlug
tap_action:
action: toggle
- entity: binary_sensor.freezerdoor_iaszone
name: DoorFreez
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'off'
icon: mdi:fridge-industrial
styles:
color: green
- condition: equals
value: 'on'
icon: mdi:fridge-industrial-alert
styles:
color: red
cards:
- type: custom:mini-media-player
entity: media_player.garage_echo_show
info: scroll
artwork: material
show_states:
- playing
info_entities:
- entity: sensor.garagedoor_sensor_battery
name: Battery
show_state: true
- entity: binary_sensor.garagedoor_sensor_iaszone
show_state: true
- entity: sensor.garagedoor_sensor_temperature
show_state: true
And here is a screenshot of the entity card by itself:
Are you sure thats the same sensor?
I mean the card gets the value of off apparently from HA.
Hello, I apologize for my confusion, but how can you change the font size of the entity name? I was able to figure out how to change the style of the card title and the info-entities, but for some reason I have been having difficulty figuring out the entity name. The default font sizes are just a little too small for my eyes, so if there are other solutions to increasing them a little Iād be happy to look into them. Thank you!
@marcokreeft87 . Sorry for the confusion. I minimized the card and here is the yaml code for it:
type: custom:room-card
title: Garage
entity: switch.garage
icon: mdi:garage-variant
show_icon: true
entities:
- entity: switch.garage
name: Ceiling
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:ceiling-light
styles:
color: yellow
animation: blink 0.75s ease infinite
- condition: equals
value: 'off'
icon: mdi:ceiling-light
styles:
color: default
tap_action:
action: toggle
- entity: switch.zooz_zen15_power_cord_freezer
name: Freezer
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:fridge-industrial
styles:
color: green
- condition: equals
value: 'off'
icon: mdi:fridge-industrial-alert
styles:
color: red
- entity: switch.unifyplug_switch
name: UnifySwitch
show_state: true
show_icon: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:wifi-check
styles:
color: green
- condition: equals
value: 'off'
icon: mdi:wifi-alert
styles:
color: red
- entity: binary_sensor.garagedoor_sensor_2_opening
name: Door
show_icon: true
show_state: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:garage-open
styles:
color: red
- condition: equals
value: 'off'
icon: mdi:garage-lock
styles:
color: green
- entity: light.foscamgarage_light
icon: mdi:ev-plug-ccs1
show_icon: true
show_state: true
name: CamPlug
tap_action:
action: toggle
Screenshot for the room card:
Entity card for the sensor by itself:
type: entities
entities:
- binary_sensor.garagedoor_sensor_2_opening
screenshot of the entity card:
I added the sensor to device class using customize
sensor info:
I tried to use a template in the room card to show the state of the sensor but did not work:
{{ 'Open' if is_state('binary_sensor.garagedoor_sensor_2_opening','on') else 'Closed' }}
I have noticed that in Home Assistant Android app (v2023.10.2-full) when I open a view with custom:room-card on it, it scrolls the view to the top on every entity update. Steps to reproduce:
Hello!
Can some help me out? I would like to remove borders from a card which is placed inside a room-card.
Here is a short config:
type: custom:room-card
title: Bathroom
entity: light.bathroom_lights
icon: mdi:shower
show_icon: true
tap_action:
action: toggle
entities:
- entity: light.bathroom_light
icon: mdi:lightbulb-outline
show_icon: true
state_color: true
name: Lamp
tap_action:
action: toggle
hold_action:
action: more-info
cards:
- type: custom:shutter-row
entity: cover.bathroom_shutter
name: Shutter
In this config shutter-row card has border inside the whole room-card.
Thank you!
Hi again,
Iām trying to make the info entities icons closer with below card-mod:
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: 1px 0px 3px 1px #65cbe9 !important;
.card-header {
font-size: 20px;
.entities-info-row {
padding: 0px;
right: 20px;
div {margin: 0px 0px 0px 6px; padding-top: 0px}
}
The problem is it works on PCās Chrome browser and on phoneās HA Companion app, but not on Fully Kiosk Browser. Has anyone experience card-mod effects not being displayed on FKB with a solution? Thanks.
Hereās what Iām using to tweak the spacing on some things. Specifically take a look at the .entities-info-row .entity section. Changing the left margin will squeeze them together a bit. Iāve never tried Fully Kiosk Browser, but the CSS I have works in Chrome, Firefox, and Safari on MacOS and iOS. Iād like to believe thatās a pretty good indication it would work for you.
card_mod:
style: |
.entities-row .icon-small {
top: -6px;
}
.entities-row .entity {
margin-left: -10px;
}
.entities-row {
margin-left: 10px;
}
.entities-info-row {
margin-right: -25px;
}
.entities-info-row .entity {
margin-left: -15px;
}
.entities-info-row .icon-small {
top: -2px;
}
.main-state {
margin-top: -3px;
width: 30px;
}