New Lovelace card – Flex Cells Card

Share your Projects! Dashboards & Frontend
121
  • v0.24.0 —
    • Added custom HTML templates for each cell. You can embed the same or different FCC cells using <fcc row="x" col="y" /> while preserving actions, dynamic rules, and custom CSS. This allows you to place more than one element in a single cell.
    • Fixed row/col recalculation for <fcc> tags (and sort column numbers) when rows/columns are reordered or deleted in the visual editor.
    • Fixed ghost clicks on mobile after navigate/url actions by suppressing the first synthetic click for a short window.

image
image1832×1719 209 KB

Global templates were added a long time ago, but if we wanted to rebuild just one cell, we had to rebuild the entire table from scratch in the template.

With cell templates, we can rebuild any cell and the rest will render unchanged.

Two links to the README describing templates: global templates, cell templates.

In addition, a new example using cell templates.

image
image1868×1568 310 KB

image
image1080×1231 129 KB

image
image1080×1231 126 KB

122

The card is really great! I wonder if it’s possible to hide the light gray rounded border rectangle:
image

s well as the white thicker one when the entity value has the focus:

image
image528×100 1.56 KB

I tried the custom_template_html option as well as the CSS ones with no luck…
Many thanks!

1 Like
123

You can remove both borders and background using CSS.

image
image2904×1776 278 KB

When using global templates, you sometimes need to use !important to force something.

image
image1459×959 53.3 KB

1 Like
124

Great it works!

125

Is it possible to add like a label to an entity? Like in the following image:

image
image660×100 57.2 KB

The label shows the time in seconds and the date it was changed…
These don’t need to be calculated they are on the entity attributes…
Many thanks!

126

Sure, using FCC, you can build a card that looks exactly how you want. Read the ‘Templates’ section in the README. If you don’t know HTML, tell AI Chat what card you’re using, what your entity names are, and what you want to build. This shouldn’t be a complicated task for AI Chat.

1 Like
127

I have another challenge and Copilot says it’s not possible without a template, which I’d like to avoid. Is it possible to have a dropdown showing different entries than the one it reads from the options. The idea is to use something like:

          const options = entity.attributes.options || [];
          const safeId = (entityId || '').replace(/\./g, '_');

          const prettify = (opt) =>
            (opt ?? '').toString()
              .split('.').pop()
              .replace(/^GC(\d+)$/, '$1°C');

          const currentLabel = prettify(state);

To avoid the following dropdown: and see only the temperature degrees:

image
image768×542 47.4 KB

Many thanks!

128

I’d probably go with HA templates (they’re not the same as FCC templates). Check out this link: Template - Home Assistant
You can easily create a new entity that will have values ​​based on the original entity.

Or even simpler, if you just need a list of specific values, you can create an input select: Input select - Home Assistant

129

Actually I saw that very interstingly, the state returns the raw state and there is something called the translated state, which is what I should use in this case to show in the dropdown… In jinja2 this is how you get them:

Raw state = {{ states["select.your_entity_id"].state }}
Translated state = {{ state_translated("select.your_entity_id") }}

For example:
Raw state = LaundryCare.Washer.EnumType.Temperature.GC40
Translated state = 40°C

Is it possible to get these translated states in Flex Cells Card?
Many thanks!

130

v0.22.0 introduced state translation

131

So I bought my first camera. I chose a cheap RTSP camera because, from what I’d read, they are popular. Version 0.25.0 is already available as a pre-release.

image
image1920×1690 139 KB

  • Camera snapshots (refresh cadence)

    • Applies only to Entity display: Camera snapshot.
    • Precedence: per-cell camera_snapshot_ttl_ms → if empty, use card-level camera_snapshot_ttl_ms → if neither set, default is 5000 ms.
    • TTL controls how often the card asks HA for a new snapshot (adds a cache-buster); it does not change how/when the camera itself captures frames.

  • v0.25.0-beta.1 (pre-release) —

    • Added camera entity display modes: camera_stream and camera_snapshot, also usable in dynamic rules.
    • Added per-card camera_snapshot_ttl_ms plus per-cell override to control snapshot refresh/caching (default 5000 ms).
    • Added optional sizing for camera cells via camera_height (px) or camera_aspect (e.g., 16:9).
2 Likes
132

Examples for the new functionality. Two templates that place buttons/labels/information on the camera preview.

I’ll add them to the README someday.

image
image1920×701 106 KB

Left example:

rows:
  - cells:
      - type: entity
        value: camera.192_168_0_9
        align: left
        use_entity_unit: true
        entity_display: camera_stream
  - cells:
      - type: entity
        value: light.zarowka_hue_sypialnia
        align: left
        use_entity_unit: true
        datetime_format: "[More info]"
        custom_css_enabled: true
        custom_css: |
          td {
             background-color: red;
             padding: 0 10px !important;
             border: 2px solid black;
             box-shadow: 0 0 0 1px white;
             color: white;
          }
  - cells:
      - type: entity
        value: light.zarowka_hue_sypialnia
        align: left
        use_entity_unit: true
        tap_action:
          action: toggle
        custom_css_enabled: true
        custom_css: |-
          td {
            padding: 2px 12px !important;
            border: 1px solid #999;
            border-radius: 8px;
            background: #f0f0f0;
          }
        datetime_format: "[Toggle]"
  - cells:
      - type: entity
        value: weather.forecast_dom
        align: left
        use_entity_unit: true
        custom_css_enabled: true
        custom_css: |
          td {
             text-shadow: 0px 0px 4px #FFFFFF;
          }
        datetime_format: "[Forecast: ]RAW"
        style:
          text_transform: capitalize
  - cells:
      - type: entity
        value: weather.forecast_dom
        align: left
        use_entity_unit: true
        custom_css_enabled: true
        custom_css: |
          td {
             text-shadow: 0px 0px 4px #FFFFFF;
          }
        attribute: humidity
        datetime_format: "[Humidity: ]RAW[ %]"
  - cells:
      - type: string
        value: "Room #1"
        align: left
        custom_css_enabled: true
        custom_css: |
          td {
             background-color: yellow;
             border: 2px dashed red;
             padding: 0px 10px !important;
          }
column_count: 1
card_padding: 0
overflow_x: true
header_from_first_row: false
zebra: false
narrow_breakpoint: ""
text_size: ""
cell_padding:
  top: 0
  right: 0
  bottom: 0
  left: 0
custom_template_enabled: true
custom_template_html: |-
  <div class="titles">
     <fcc row="6" col="1" /><br/>
     <fcc row="4" col="1" /><br/>
     <fcc row="5" col="1" />
  </div>
  <div class="buttons">
     <fcc row="2" col="1" />
     <fcc row="3" col="1" />
  </div>
  <fcc row="1" col="1" class="stream" />
  <style>
  .stream {
     display: block !important;
  }
  .titles, .buttons {
     position: absolute;
     z-index: 1;
     bottom: 10px;
     right: 20px;
  }
  .titles {
     top: 5px;
     bottom: auto;
  }
  .buttons .fcc-template-cell {
    margin-left: 20px;
  }
  </style>
type: custom:flex-cells-card

Right example:

rows:
  - cells:
      - type: entity
        value: camera.192_168_0_9
        align: left
        use_entity_unit: true
        entity_display: camera_stream
        attr_edit:
          enabled: false
          service: ""
          field: ""
          control: slider
          checked: true
          unchecked: false
          hue_path: ""
          sat_path: ""
  - cells:
      - type: entity
        value: binary_sensor.sensor_ruchu_w_sypialni_occupancy
        align: left
        use_entity_unit: true
        entity_display: icon
        dyn_color:
          - conditions:
              - entity: ""
                attr: ""
                op: "="
                val: "on"
                val2: ""
            match: all
            bg: ""
            fg: ""
            overwrite: icon
            overwrite_entity: ""
            overwrite_attr: ""
            icon: mdi:run-fast
          - conditions:
              - entity: ""
                attr: ""
                op: "="
                val: "off"
                val2: ""
            match: all
            bg: ""
            fg: ""
            overwrite: icon
            overwrite_entity: ""
            overwrite_attr: ""
            icon: mdi:run
  - cells:
      - type: entity
        value: binary_sensor.sensor_zalania_1_water_leak
        align: left
        use_entity_unit: true
        entity_display: icon
  - cells:
      - type: entity
        value: light.zarowka_hue_sypialnia
        align: left
        use_entity_unit: true
        entity_display: icon
        tap_action:
          action: toggle
        hold_action:
          action: more-info
  - cells:
      - type: string
        value: "Room #1"
        align: left
        style:
          color: white
          bold: true
column_count: 1
card_padding: 0
overflow_x: false
header_from_first_row: false
zebra: false
narrow_breakpoint: ""
text_size: ""
cell_padding:
  top: 0
  right: 0
  bottom: 0
  left: 0
custom_template_enabled: true
custom_template_html: |-
  <div class="menu">
    <fcc row="5" col="1" />
    <span class="buttons">
      <fcc row="2" col="1" />
      <fcc row="3" col="1" />
      <fcc row="4" col="1" />
    </span>
  </div>
  <fcc row="1" col="1" class="stream" />
  <style>
  .stream {
     display: block !important;
  }
  .buttons {
     float: right;
  }
  .buttons > span {
     margin-left: 15px;
  }
  .menu {
     position: absolute;
     z-index: 1;
     bottom: 0;
     width: stretch;
     display: block;
     height: 28px;
     padding: 8px 20px;
     background: rgba(0, 0, 0, 0.3);
  }
  </style>
type: custom:flex-cells-card
133

When I added state translations/formatting in version 0.22.0, I missed select lists and dynamic rules (entity overrides). This was fixed with version 0.25.0-beta.2 (pre-release).

If you want to use pre-release go to HACS → FCC → … (three dots, upper right corner) → Redownload → select version v0.25.0-beta.2.

If you know of any other bugs, please report them here Issues · michalowskil/flex-cells-card · GitHub