Hi All,
I’m trying to build a card that is like a table with column and row names and shows different entities. An example is that:
I’ve searched a lot and tried several ways (like vertical-stack-in-card) but didn’t really succeed. Can anyone give me a hint how I could build that?
Regards,
Jogi
Hi. Did you try the grid card is? Another option is custom: layout-card from HACS but with the grid card you do not need to install anything
For me, easiest and most flexible way is using
Lovelace HTML Jinja2 Template card (GitHub - PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card: This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.)
You can write ordinary HTML code, table i.e., style it, and use templates to fill in sensors values, or whatever you want.
Probably I am oversimplifying things but a simple markdown card should do what you want…
Simple example at Abfallkalender als Markdown-Tabelle in Home Assistant anzeigen - SmartHome yourself
Thank you for your tip, but that’s not quite what I’m looking for (it should be one card only.
Thank you, that’s close to what I’m looking for!
Thank you, that helped!
As I said in your “new” thread, it makes helping you much easier, if you stay in one thread for one topic. 
Thanks!
And here we go:
I see you want to use the suggested markdown-card. That is only one way to go about that, but let’s start with this, you might want to change that in the future.
As the name states, this card uses Markdown as it’s language, see here for a nice, little “cheat-sheet” on Markdown language:
For what you want to achieve, let’s start with the table itself:
||Level|Range|Charging|Plugged|
|---|---|---|---|---|
|Audi|xx%|xxKM|true|true|
|Renault|xx%|xxKM|true|true|
This is the code, and it displays like this:
| Level | Range | Charging | Plugged | |
|---|---|---|---|---|
| Audi | xx% | xxKM | true | true |
| Renault | xx% | xxKM | true | true |
Now that we have a structure, let’s go over the fields, and see, how we can display what you need.
As you do have some calculations to do, it makes sense, to setup your numbers upfront, and use them downwards in the table. Looks something like this:
type: markdown
content: >
{% set audi_level = states('sensor.audi_percentage_level') %}
{% if audi_level > 0 and audi_level <= 10 %}
{% set icon_audi_level = 'mdi:battery-10' %}
{% elif audi_level > 10 and audi_level <= 20 %}
{% set icon_audi_level = 'mdi:battery-20' %}
{% elif audi_level > 20 and audi_level <= 30 %}
{% set icon_audi_level = 'mdi:battery-30' %}
{% elif audi_level > 30 and audi_level <= 40 %}
{% set icon_audi_level = 'mdi:battery-40' %}
{% elif audi_level > 40 and audi_level <= 50 %}
{% set icon_audi_level = 'mdi:battery-50' %}
{% elif audi_level > 50 and audi_level <= 60 %}
{% set icon_audi_level = 'mdi:battery-60' %}
{% elif audi_level > 60 and audi_level <= 70 %}
{% set icon_audi_level = 'mdi:battery-70' %}
{% elif audi_level > 70 and audi_level <= 80 %}
{% set icon_audi_level = 'mdi:battery-80' %}
{% elif audi_level > 80 and audi_level <= 90 %}
{% set icon_audi_level = 'mdi:battery-90' %}
{% elif audi_level > 90 %}
{% set icon_audi_level = 'mdi:battery' %}
{% endif %}
{% set renault_level = states('sensor.renault_percentage_level') %}
{% if renault_level > 0 and renault_level <= 10 %}
{% set icon_renault_level = 'mdi:battery-10' %}
{% elif renault_level > 10 and renault_level <= 20 %}
{% set icon_renault_level = 'mdi:battery-20' %}
{% elif renault_level > 20 and renault_level <= 30 %}
{% set icon_renault_level = 'mdi:battery-30' %}
{% elif renault_level > 30 and renault_level <= 40 %}
{% set icon_renault_level = 'mdi:battery-40' %}
{% elif renault_level > 40 and renault_level <= 50 %}
{% set icon_renault_level = 'mdi:battery-50' %}
{% elif renault_level > 50 and renault_level <= 60 %}
{% set icon_renault_level = 'mdi:battery-60' %}
{% elif renault_level > 60 and renault_level <= 70 %}
{% set icon_renault_level = 'mdi:battery-70' %}
{% elif renault_level > 70 and renault_level <= 80 %}
{% set icon_renault_level = 'mdi:battery-80' %}
{% elif renault_level > 80 and renault_level <= 90 %}
{% set icon_renault_level = 'mdi:battery-90' %}
{% elif renault_level > 90 %}
{% set icon_renault_level = 'mdi:battery' %}
{% endif %}
{% set audi_icon_charging = 'mdi:check-circle' if is_state('binary_sensor.audi_charging', 'on') else 'mdi:minus-circle' %}
{% set renault_icon_charging = 'mdi:check-circle' if is_state('binary_sensor.renault_charging', 'on') else 'mdi:minus-circle' %}
{% set audi_icon_plugged = 'mdi:check-circle' if is_state('binary_sensor.audi_plugged', 'on') else 'mdi:minus-circle' %}
{% set renault_icon_plugged = 'mdi:check-circle' if is_state('binary_sensor.renault_plugged', 'on') else 'mdi:minus-circle' %}
||Level|Range|Charging|Plugged|
|---|---|---|---|---|
|Audi|<ha-icon icon="{{ icon_audi_level}}"></ha-icon> {{ audi_level }}%|<ha-icon icon="mdi:ev-station"></ha-icon> {{ states('sensor.audi_range') }}KM|{{ audi_icon_charging }}|{{ audi_icon_plugged }}|
|Renault|<ha-icon icon="{{ icon_renault_level}}"></ha-icon> {{ renault_level }}%|<ha-icon icon="mdi:ev-station"></ha-icon> {{ states('sensor.renault_range') }}KM|{{ renault_icon_charging }}|{{ renault_icon_plugged }}|
This is in no way “nice” code, that couldn’t be made more elegant and foremost shorter, but I thought it might be more explaining.
First you set a variable {% set variable_name = 'something' %} and use it later on. This is not necessary per se, but if you’d put all that code into one table cell, you won’t be able to read through it anymore. So you do the work first, and just use that later on in the actual table.
I’m sure there will be some questions, don’t hesitate to ask.
Hi Patrick,
thank you for your extensive explanation and the new approach with the markdown language. I did try that in the beginning too but didn’t succeed…
I’ve copied your code but I get the error “TypeError: ‘>’ not supported between instances of ‘str’ and ‘int’”. I’ve tried to fix this by trial and error but I couldn’t solve it. Do you have an idea what could cause that?
Regards,
Jogi
How did you try this, and did you search this forum?
Again, this is basic knowledge: you can only compare if both sides have the same type. Considering templates always return strings, and you need a float, you have to add that to the setter:
{% set audi_level = states('sensor.audi_percentage_level')|float(-1) %}
Note that you Also have to set a default value inside the brackets, or otherwise this can throw an error if the entity is not yet initialized. (again this is pure basic templating knowledge you need to read up on, as Ivce asked you in the other thread)
Personally I set those defaults to impossible values, so you can even set a catch for that iff so required or useful, hence the -1
But, as I asked on the other thread: doesnt the integration that you use have a correct battery sensor entity? that should already have the correct battery-icon if following the device_class: battery logic in core HA
I did try this in the developer tools in the template section. This time I didn’t search the forum, because I thought there is a wrong > sign only…
I will look deeper into basic templating knowledge; thank you for your advice.
I’ve choosen the battery icon in my template. But the template shall only say if the car is charged or not ({{ 'off' if is_state('sensor.tronity_q4_sportback_e_tron_charging','Disconnected') else 'on' }}).
The same with the other template: It shall only show if the car is plugged in or not ({{ 'on' if is_state('sensor.tronity_q4_sportback_e_tron_plugged', 'True') else 'off' }}. And its icon already changes from 
to 
.
That arrow is the multi-line indicator. That is especially useful if you are having quoting issues, which is a common problem for many novice users. It is not in the output of the template though, only the actual value is.
this does not change an icon, why are you still using the ‘on’/‘off’ there? did you search the MDI repository Patrick showed you, and noted the actual icon names ?
why not finally show us what you actually tried completely?
please help us help you… btw see The Home Assistant Cookbook - Index
let me help you:
mdi:power-plug{{'-off' if is_state('sensor.tronity_q4_sportback_e_tron_charging','Disconnected')}}
will do it. explanation:
this set the mdi:power-plug by default, and only if the sensor is ‘off’ will add -off to that making it mdi:power-plug-off
give it a try (o, and check if the state is actually ‘Disconnected’ and not ‘disconnected’, or ‘off’ )
I know that this doesn’t change icons. It is for the binary template “Audi plugged”. Since “sensor.tronity_q4_sportback_e_tron_charging” has several attributes I want to define a binary sensor. It has the icons mdi:power-plug-off or mdi:power-plug-on.
I’m trying to get this table:
“Level” and “Range” are Tronity-entities that I can use without any modification. For “Charging” and “Plugged” I have to convert the Tronity-entities into binary-templates (e.g. “binary_sensor.audi_eingesteckt”):
with the following code:
{{ 'on' if is_state('sensor.tronity_q4_sportback_e_tron_plugged', 'True') else 'off' }}
And then I want to show the according icon (power-plug-off or power-plug-on) in the column “Plugged” of the table and colorize it (green if on, red if off).
If I understood it right, I don’t need to change the icon template, because it is already correct. Right?
you tell us, did you try it? and how?
Why didn’t I get a message for new posts in this thread? 
I see, you both have been hard at work. 
I’ve accidentally made some mistakes in the code I posted, I’m sorry! Typecasting (the “float”) is something I always forget. This must be something left from my beginnings in PHP…
Anyway, to bring me up to speed, would you mind posting the complete code you’re working with right now? It makes things easier, as we can see, where you’re at.
On a sidenote: please let us go step by step. What I mean is, let’s get the ground work ready (this or that icon), and afterwards, when this is working as expected, we go at the colours. For now, they’d make it just harder to explain.
I’m sorry I didn’t get back to you sooner, I didn’t have time to work on the problem.
But with your help and some more forum search I did succeed with this code:
type: markdown
content: |2
|<img width=40/>|<img width=20/><ha-icon icon="mdi:battery-80"></ha-icon><img width=20/>|<img width=20/><ha-icon icon="mdi:map-marker-distance"></ha-icon><img width=20/>|<img width=20/><ha-icon icon="mdi:ev-plug-type2"></ha-icon><img width=20/>|<img width=20/><ha-icon icon="mdi:battery-charging"></ha-icon><img width=20/>|
|---|:-:|:-:|:-:|:-:|
|<ha-icon icon="phu:charging-station"></ha-icon></ha-icon><br />|<strong>-|<strong>-|<font color={{states.sensor.wallbox_status_verbunden_farbe.state}}><ha-icon icon={{states.sensor.wallbox_status_verbunden.state}} ></ha-icon>|<font color={{states.sensor.wallbox_status_batterie_farbe.state}}><ha-icon icon={{states.sensor.wallbox_status_batterie.state}} ></ha-icon>
|<ha-icon icon="phu:audi"></ha-icon>|<font color={{states.sensor.audi_batterie_level_farbe.state}}><strong>{{states.sensor.tronity_q4_sportback_e_tron_level.state}}%|<strong><font color={{states.sensor.audi_batterie_level_farbe.state}}>{{states.sensor.tronity_q4_sportback_e_tron_range.state}} km|<font color={{'red' if is_state('binary_sensor.audi_eingesteckt','off') else 'green'}}><ha-icon icon=mdi:power-plug{{'-off' if is_state('binary_sensor.audi_eingesteckt','off') else ''}}></ha-icon>|<font color={{'red' if is_state('binary_sensor.audi_ladt','off') else 'green'}}><ha-icon icon=mdi:battery-charging></ha-icon>|
|<ha-icon icon="phu:renault"></ha-icon></ha-icon><br />|<font color={{states.sensor.zoe_batterie_level_farbe.state}}><strong>{{states.sensor.batterie.state}}%|<font color={{states.sensor.zoe_batterie_level_farbe.state}}><strong>{{states.sensor.batterieautonomie.state}} km|<font color={{'red' if is_state('binary_sensor.zoe_eingesteckt','off') else 'green'}}><ha-icon icon=mdi:power-plug{{'-off' if is_state('binary_sensor.zoe_eingesteckt','off') else ''}}></ha-icon>|<font color={{'red' if is_state('binary_sensor.zoe_ladt','off') else 'green'}}><ha-icon icon=mdi:battery-charging></ha-icon>|
And this is the result:
Thank you for your help!
