Looks amazing! Thanks for sharing!
Nice! What did you do to get this?
Thanks! Are you asking about the card layout, or the data behind it?
I just added a new example:
While creating this example, I found two bugs that I fixed and added logical operators because they were definitely missing. So, here’s a new version.
- v0.17.0 —
- Added “AND/OR” logical operators in dynamic rules.
- Added new fields in dynamic cell rules for the “Overwrite with entity/metadata” option: Date/Time format & Text override, Entity display, Rescale.
- Fixed an issue related to changing the number of columns and the disappearance of unsaved dynamic rules.
- Fixed an issue related to the column width for the “auto” value.
1 Like
Like that, good work!
Would you share your code? Are the Min/Max Values Helpers, or created automatically? Thanks
Thanks. Here you go.
rows:
- cells:
- type: string
value: Temperaturen und Luftfeuchtigkeit
align: center
style:
text_transform: ""
background: "#ff9f09"
font_size: 20px
bold: false
underline: false
- type: string
value: ""
align: left
style:
text_transform: ""
- type: string
value: ""
align: right
- type: string
value: ""
align: right
- type: string
value: ""
align: right
- type: string
value: ""
align: right
merge_columns: true
- type: separator
separator:
color: "#d0d7de"
background: ""
style: solid
thickness: 1
length: 100%
align: stretch
opacity: 1
margin_top: 0
margin_bottom: 0
cells: []
- cells:
- type: string
value: Sensor
align: left
style:
text_transform: ""
- type: icon
value: mdi:temperature-celsius
align: right
style:
text_transform: ""
- type: string
value: Min
align: right
style:
text_transform: ""
- type: string
value: Max
align: right
- type: icon
value: mdi:water-percent
align: right
- type: icon
value: mdi:waves
align: right
style:
text_transform: ""
custom_css_enabled: true
custom_css: |
tr {
background-color:#30884a;
}
- type: separator
separator:
color: "#d0d7de"
background: ""
style: solid
thickness: 1
length: 100%
align: stretch
opacity: 1
margin_top: 0
margin_bottom: 0
cells: []
- cells:
- type: string
value: Carport
align: left
style:
text_transform: ""
- type: entity
value: sensor.esph_carport_temp
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
background: ""
dyn_color:
- entity: sensor.esph_carport_temp
attr: ""
op: <
val: "0"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
text: ""
- type: entity
value: sensor.carport_stats_temp_min
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.carport_stats_temp_min
attr: ""
op: <
val: "0"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
text: ""
- type: entity
value: sensor.carport_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: string
value: ""
align: right
precision: 1
- type: string
value: ""
align: right
precision: 1
dyn_row_rules:
- entity: ""
attr: ""
op: "="
val: ""
val2: ""
bg: ""
fg: ""
- cells:
- type: string
value: Eingang
align: left
style:
text_transform: ""
background: ""
- type: entity
value: sensor.lumi_temperature_eingang
align: right
style:
text_transform: ""
font_size: 120%
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.lumi_temperature_eingang
attr: ""
op: <
val: "0"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
text: ""
- type: entity
value: sensor.aussentemp_stats_temp_min
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.aussentemp_stats_temp_min
attr: ""
op: <
val: "0"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
text: ""
- type: entity
value: sensor.aussentemp_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.lumi_humidity_eingang
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.lumi_humidity_eingang
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.lumi_humidity_eingang
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: entity
value: sensor.absolute_humi_outdoor
align: right
use_entity_unit: true
precision: 1
custom_css_enabled: true
custom_css: |
tr {
background-color:#4a1c44;
}
- type: separator
separator:
color: "#d0d7de"
background: ""
style: solid
thickness: 1
length: 100%
align: stretch
opacity: 1
margin_top: 0
margin_bottom: 0
cells: []
- cells:
- type: string
value: Büro
align: left
style:
text_transform: ""
- type: entity
value: sensor.sonoff_th_buro_temperature
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.buro_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.buro_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.sonoff_th_buro_humidity
align: right
precision: 1
use_entity_unit: true
dyn_color:
- entity: sensor.sonoff_th_buro_humidity
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.sonoff_th_buro_humidity
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: string
value: ""
align: left
precision: 1
- cells:
- type: string
value: Gäste
align: left
style:
text_transform: ""
- type: entity
value: sensor.tuya_th_gz_temperature
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.gz_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.gz_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.tuya_th_gz_humidity
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.tuya_th_gz_humidity
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.tuya_th_gz_humidity
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: string
value: ""
align: right
precision: 1
custom_css_enabled: true
custom_css: |
tr {
background-color:#4a1c44;
}
- cells:
- type: string
value: SZ
align: left
style:
text_transform: ""
- type: entity
value: sensor.lumi_thp_sz_temperatur
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.sz_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.sz_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.lumi_thp_sz_humidity
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.lumi_thp_sz_humidity
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.lumi_thp_sz_humidity
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: string
value: ""
align: right
precision: 1
- type: separator
separator:
color: "#d0d7de"
background: ""
style: solid
thickness: 1
length: 100%
align: stretch
opacity: 1
margin_top: 0
margin_bottom: 0
cells: []
- cells:
- type: string
value: WZ
align: left
style:
text_transform: ""
- type: entity
value: sensor.sonoff_th_wz_temperature
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.wz_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.wz_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.sonoff_th_wz_humidity
align: right
use_entity_unit: true
dyn_color:
- entity: sensor.sonoff_th_wz_humidity
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.sonoff_th_wz_humidity
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: string
value: ""
align: right
precision: 1
custom_css_enabled: true
custom_css: |
tr {
background-color:#4a1c44;
}
- type: separator
separator:
color: "#d0d7de"
background: ""
style: solid
thickness: 1
length: 100%
align: stretch
opacity: 1
margin_top: 0
margin_bottom: 0
cells: []
- cells:
- type: string
value: Hobby
align: left
style:
text_transform: ""
- type: entity
value: sensor.lumi_temperature_hobbyraum
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.hobbyraum_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.hobbyraum_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.lumi_humidity_hobbyraum
align: right
use_entity_unit: true
precision: 1
dyn_color:
- entity: sensor.lumi_humidity_hobbyraum
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.lumi_humidity_hobbyraum
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: entity
value: sensor.absolute_humi_hobbyraum
align: right
precision: 1
use_entity_unit: true
- cells:
- type: string
value: Keller N
align: left
style:
text_transform: ""
- type: entity
value: sensor.lumi_temperature_keller1
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.keller1_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.keller1_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.lumi_humidity_keller1
align: right
use_entity_unit: true
dyn_color:
- entity: sensor.lumi_humidity_keller1
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.lumi_humidity_keller1
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: entity
value: sensor.absolute_humi_keller_1
align: right
precision: 1
use_entity_unit: true
custom_css_enabled: true
custom_css: |
tr {
background-color:#4a1c44;
}
- cells:
- type: string
value: Keller S
align: left
style:
text_transform: ""
- type: entity
value: sensor.lumi_thp_keller_2_temperature
align: right
use_entity_unit: true
precision: 1
style:
text_transform: ""
font_size: 120%
- type: entity
value: sensor.keller2_stats_temp_min
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.keller2_stats_temp_max
align: right
use_entity_unit: true
precision: 1
- type: entity
value: sensor.lumi_thp_keller_2_humidity
align: right
precision: 1
use_entity_unit: true
dyn_color:
- entity: sensor.lumi_thp_keller_2_humidity
attr: ""
op: ">="
val: "60"
bg: "#ff9f09"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- entity: sensor.lumi_thp_keller_2_humidity
attr: ""
op: ">="
val: "70"
bg: "#991a1a"
fg: ""
overwrite: entity
overwrite_entity: ""
overwrite_attr: ""
- type: entity
value: sensor.absolute_humi_keller_2
align: right
precision: 1
use_entity_unit: true
column_count: 6
card_padding: ""
overflow_x: true
header_from_first_row: false
zebra: true
narrow_breakpoint: ""
text_size: 14px
cell_padding:
top: 4
right: 5
bottom: 8
left: 5
custom_template_enabled: false
custom_template_html: ""
type: custom:flex-cells-card
zebra_ignore_separators: false
column_widths:
- auto
grid_options:
columns: full
rows: 1
2 Likes
- v0.18.0 —
- Added attribute editing using slider and switch.
Thanks to this new functionality, the media player example has been greatly simplified. You no longer need to create automations or add input_numbers to the system - just FCC and nothing else.
I’ve also created two new examples using the new functionality. The first one controls a window blind:
The second one controls lighting:
I’ve released a new version, with three new examples and updated screenshots. If you like this card, please consider giving it a 
on GitHub.
- v0.19.0 —
- Added proper ha-card wrapper and removed the custom border so the card behaves like a normal Lovelace card (e.g., looks correct inside vertical-stack-in-card). Kept the “card” class intact, so any existing CSS targeting it should still work.
- Added RAW token to “Date/Time format & Text override” so you can inject the unformatted value; e.g., set the format to “[light is: ]RAW” to render “light is: on”.
- Fixed FCC template parsing to only consider “mode/as” attributes for “text” mode and accept row/column values in single quotes.
1 Like