New Lovelace card – Flex Cells Card

Give me the entire code for the large icons, otherwise I don’t really know what we’re talking about.

Sure, here you are: gist:5ecb6bff75e19f84b732063df721447f · GitHub

You have it as you set it :stuck_out_tongue:

The next change will be:

If you see something that seems to be a bug, please report it to the address below by selecting “New issue → Bug report”
https://github.com/michalowskil/flex-cells-card/issues

If you have an idea for a new feature, first check to see if it’s already been submitted at the link below. If it’s already been submitted, you can vote for it. If it hasn’t been submitted, please add your own.
https://github.com/michalowskil/flex-cells-card/discussions/categories/ideas

Have you created something using the FCC? Take screenshots and post the entire configuration to the address below. Others will be able to view and use it (just paste it into your HA and replace the entities).
https://github.com/michalowskil/flex-cells-card/discussions/categories/show-and-tell

Unfortunately I don‘t understand. Why does a text size of 85% (to ensure the same text size als all other cards) trigger a huge icon? What‘s the solution?

So it’s a bug. Icon sizes should not be affected by a (per card) text size setting.

  • v0.12.0-beta (Pre-release) —
    • Added metadata (instead of attributes), now we have access to all data.
    • Improved “Text size (default)” in the main settings, it no longer affects icon size.
    • Added size setting for icons from entities.
    • Changed “Date/Time format” to “Date/Time format & Text override”. Now we can override the entity value even if it doesn’t contain a date/time.
    • Minor visual improvements.

This is a pre-release version. If no bugs are reported after a week, I’ll push it as the latest version.

The pre-release version won’t automatically appear in updates. If you want to test this version now, you need to click Redownload in HACS.

  • v0.12.0 —
    • Added metadata (instead of attributes), now we have access to all data.
    • Improved “Text size (default)” in the main settings, it no longer affects icon size.
    • Added icon size settings (entity-derived icon).
    • Changed “Date/Time format” to “Date/Time format & Text override”. Now we can override the entity value even if it doesn’t contain a date/time.
    • Minor visual improvements.

Hi,

I have an issue with changing colours. I would like to display a value in red when one float value is bigger than another one.

In my example the value “3.5 g/m3” should be in red.

Here is the code snippet:

  • type: entity
    value: sensor.absolute_luftfeuchtigkeit_unterschied_lagerkeller
    align: left
    use_entity_unit: true
    precision: 1
    style:
    underline: false
    dyn_color:
  • entity: sensor.absolute_luftfeuchtigkeit_lagerkeller
    attr: “”
    op: “>”
    val: “{{ sensor.wetterstation_outdoor_absolute_humidity }}”
    bg: “”
    fg: “#ff2600
    overwrite: “”

Thanks for helping!

The Flex Cells Card doesn’t support Jinja ({{ … }}) in the “val” field. You can enter text or a number there.

I’ve mentioned templates at least twice in this thread, which are very easy to use. If you don’t want to learn them, you can ask the AI ​​to generate a ready-made one for you.

If you want to compare two values, for example two humidity values, you do this:

template:
  - sensor:
      - name: "Humidity comparison"
        icon: mdi:compare-horizontal
        variables:
          a_entity: "sensor.atc_salon_humidity"
          b_entity: "sensor.atc_kuchnia_humidity"
        availability: >
          {{ is_number(states(a_entity)) and is_number(states(b_entity)) }}
        state: >-
          {% set a = states(a_entity) | float(0) %}
          {% set b = states(b_entity) | float(0) %}
          {% set eps = 0.1 %}
          {% if (a - b) | abs <= eps %}
            equal
          {% elif a > b %}
            greater
          {% else %}
            smaller
          {% endif %}

Now that you have the sensor.humidity_comparison entity, you can use it in dynamic rules by entering greater, smaller, and equal in the “value” field.

dyn_color:
  - entity: sensor.humidity_comparison
    attr: ""
    op: "="
    val: smaller
    bg: red
    fg: ""
    overwrite: ""
1 Like
  • v0.13.0-beta (Pre-release) —
    • Added separators and sorting by groups.

i really like the card. Is there a possibility to overwrite a value to a other entity (attribute)?

1 Like

For now, you can overwrite with text or an icon. If you’d like to overwrite with an entity/attribute, please submit your idea on GitHub. Once it gets five votes, I’ll add the functionality.

I found a small bug regarding hiding the separator, so I fixed it. I also added the ability to dynamically hide the row. I encourage you to test it and report bugs.

This is how it looks like:

A new page on Github Pages was recently launched. Generated from the README.md file:

I did some tests and found no bugs, so I’m pushing it as the latest.

  • v0.13.0
    • Added separators and sorting by groups.
    • Added dynamic rules for the entire row.
  • v0.14.0
    • Added column merging.
    • Added entity/metadata overrides.

1 Like

I’m extremely pleased with this functionality! I think the screenshot below explains it all, and if not, please ask. It’s currently a pre-release, as we need to check for bugs.

  • v0.15.0-beta (Pre-release) —
    • Added custom HTML templates.

Templates are a powerful tool, but what if you don’t want to use a template but just use custom CSS? No problem! Now every cell and row has a custom CSS field:

Differences between v0.15.0-beta.1 and v0.15.0-beta.2:

  • added “custom CSS” for cells and rows (also works in templates), “card_mod” is no longer needed!
  • added “class” attribute for <fcc> tag (previously there was only “style” attribute)
  • added whole row injection in templates via <fcc row="3" /> (previously only cells could be injected)
  • improved line numbering for the <fcc> tag, now you can also operate with the header
  • added support for “mode” variable for input_number
  • added ability to hide values next to the slider (input_number)
  • improved “Nothing” behavior in Tap & Hold Actions
  • improved clickable area on “Show control” and “Use unit from entity” labels

Thanks for this card, it helps alot getting an overview of my devices. :star_struck:

I just filed a wish at github concerning the format of timestamps.

The attribute “.last_seen” is shown in other lovelace cards as “16 minutes ago”.
In this card i can only format HH:MM and the like.

Could you implement a formatting option for timestamps like “relative_time”?
This would be really great :wink:

1 Like

I like your idea. This feature will be available with the next release. In the meantime, you can click the star on GitHub – that’s the only payment I expect for my work :slight_smile:


1 Like