cool.
maybe you can help me out.
currently I have a button-card template using the full canvas which gets a filter based on the state of an entity:
plattegrond:
template:
- styles_menu_tooltip
aspect_ratio: 1/1
# tooltip: >
# [[[ return variables.tooltip; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.path; ]]]
hold_action:
action: toggle #call-service
# service: light.toggle
# service_data:
# entity_id: entity
entity_picture: >
[[[ return "/local/images/areas/" + variables.picture; ]]]
size: 140%
show_name: false
show_icon: false
show_entity_picture: true
styles:
card:
- padding: 0px
# - background-image: >
# [[[ return `url("/local/images/areas/${variables.picture}")`; ]]]
# - background-size: cover
# - background-repeat: no-repeat
# - border-bottom: 4rem solid transparent
entity_picture:
- filter: >
[[[ if (entity.state == 'off' || entity.state == 'unavailable') return 'grayscale(100%)';
return 'grayscale(0%)'; ]]]
Ive set the filter to the entity_picture, because if it was set to the background, the whole button, including its entities would get greyed…
its displayed on the left button.
Next, a minimalistic-area-card, is used, with some extra entities, but they are a but small, and, Ive had to figure out some more complex templating. Because of this, its a bit more difficult to throw that inside a decluttering template (which has an extra issue resizing the button to a banner really)
that gave me the idea to test the custom banner card, because I liked the idea of the overlay, in whihc some of these entities are displayed. its in the right. Ofc this is also not the right size, but I want that overlay section in my button-card. probably need a grid for that:
this section is in a grid: 4 columns, but that is of minor importance, other than its odd the right side card isnt squared, as the default is for grid.
- type: custom:button-card
entity: light.laundry_ceiling
template: plattegrond
variables:
path: /ui-sub-views/bijkeuken
picture: bijkeuken_klein.jpg
tooltip: Bijkeuken
styles:
card:
- border-top: >
[[[ return (states['binary_sensor.laundry_sensor_motion'].state == 'on')
? '0.5rem solid red' : 'none'; ]]]
- type: custom:minimalistic-area-card
card_mod:
style: |
ha-card {
filter: {{'grayscale(0%)' if
(is_state('light.laundry_ceiling','on') or
is_state('binary_sensor.laundry_sensor_motion','on'))
else 'grayscale(100%)'}};
border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
else 'none'}};
}
# title: Laundry
image: /local/images/areas/bijkeuken_square.jpg
shadow: false
tap_action:
action: navigate
navigation_path: /ui-sub-views/bijkeuken
hold_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.laundry_ceiling
entities:
- entity: sensor.laundry_sensor_temperature
- entity: sensor.laundry_sensor_illuminance
# - switch.tester
# - entity: sensor.hallway_temperature
#centraal
- type: custom:banner-card
card_mod:
style: |
ha-card {
filter: {{'grayscale(0%)' if
(is_state('light.laundry_ceiling','on') or
is_state('binary_sensor.laundry_sensor_motion','on'))
else 'grayscale(100%)'}};
border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
else 'none'}};
}
background: 'url("/local/images/areas/bijkeuken_klein.jpg")'
heading: Bijkeuken
link: /ui-sub-views/bijkeuken
entities:
- entity: sensor.laundry_sensor_temperature
name: Temp
- entity: sensor.laundry_sensor_illuminance
name: Lux
- entity: binary_sensor.laundry_sensor_motion
name: Motion
long story short:
how can I set the grid section on my top button-card template, so it is grayed like in the banner card, using background: rgba(0, 0, 0, 0.3);
, showing some (2 or 3) of the entities, preferably with an icon and not name.
what these do:
tap: navigate to are subview
hold: toggle main entity set on either card
change filter on state of main entity: off=gray, on=color
show top border red if motion is detected.
Aware I have a button with grids, like the example on button-card for the RPI with all of its entities. However, this is a very different grid on the button.
Hope this makes sense, would welcome any feedback you could provide ![:wink: :wink:](https://community.home-assistant.io/images/emoji/twitter/wink.png?v=10)
Guess a first step would be to add a grid to the button card for the 2 horizontal sections, where the top is as is (dont need even a title there) and the bottom section is with the overlay, and max 3 spots for an entity
how would that translate to something like:
grid:
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: 2fr 1fr;
- grid-column-gap: 0px;
- grid-row-gap: 0px;
# - position: relative
made on https://cssgrid-generator.netlify.app
would I need
- grid-template-areas: '"area area area" "temp humid motion"'
so it uses the top section for Area only and then the bottom section for the 3 sensors max?