Lovelace Card with an icon and data in a table

Configuration
1

I currently use the custom config-template card to produce this:
image
Now there are a few custom cards that will produce columns and I can probably even use those with attributes. But I have not seen anything that will let me also have an icon. In the config template I have a calculation based on the RSSI to graphically show the signal strength.

What is annoying me about this card is I have to randomly work out the right number of spaces between elements and because of the proportional font used, the numbers in the rows don’t line up 100% properly.

Can anyone think of a way I can make these line up?

2

This perhaps?

example
example500Ă—733 142 KB

1 Like
3

Or, if it has to be a table, you can do it with markdown, but it could take a while to get everything formatted right.

image
image1024Ă—658 55.9 KB

  - type: markdown
    content: |
      {% if state_attr('sensor.weather_warnings','items') != None %}
        {% for item in state_attr('sensor.weather_warnings','items') %}
          {% for type, icon in [('RAIN', 'weather-pouring'), ('THUNDERSTORMS', 'weather-lightning-rainy'),
                                ('WIND', 'weather-windy'), ('SNOW', 'weather-snowy-heavy'), 
                                ('LIGHTNING', 'weather-lightning'), ('ICE', 'car-traction-control'),
                                ('FOG', 'weather-fog')] if type == item['metadata:warningType']|trim("[]'") %}
      ---

      | | | |
      | --- | --- | --- |
      | <font color = {%- if 'Yellow' in item.description|trim("'[]'") %}'gold'
                      {%- elif 'Amber' in item.description|trim("'[]'") %}'darkorange'
                      {%- else %}'firebrick'
                      {%- endif %}><ha-icon icon={{ "'mdi:" + icon + "'" }}></ha-icon></font> | | {{ item.description|trim("'[]'") }}  |
 
          {% endfor %}
        {% endfor %}
      {% endif %}
4

That’s one of the ones I rejected Tom because I don’t see how I can use a different icon depending on the RSSI

5

Nice card but I don’t even know where to start trying that one lol

6 
 | | | |
 | --- | --- | --- |

It’s not that tricky, this section defines the table (3 columns in this case) then the for loop adds the rows (doesn’t need to use a for loop). Each time you want to move to a new column you split the data with a |

1 Like
7

It’s totally possible in button-card since it renders html and js

- type: custom:button-card
  custom_fields:
    table: >
      <table style="width:100%">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
      </table>
8

Thanks. I didn’t even think of button card. I will look into that.

9

hi @DavidFW1960,
i am trying to create this, but having some difficulties trying to understand lovelace and how it selects attributes in a object, are you able to share the code behind this one?

10

Here it is:

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.sonoff1_2914_status'].attributes['MqttCount']
              - states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff1_2914_status'].state
              - states['sensor.sonoff2_3110_status'].attributes['MqttCount']
              - states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff2_3110_status'].state
              - states['sensor.sonoff5_1083_status'].attributes['MqttCount']
              - states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff5_1083_status'].state
              - states['sensor.sonoff6_3719_status'].attributes['MqttCount']
              - states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff6_3719_status'].state
              - states['sensor.nodemcu_lounge_status'].attributes['MqttCount']
              - states['sensor.nodemcu_lounge_status'].attributes['WiFi LinkCount']
              - states['sensor.nodemcu_lounge_status'].state
              - states['sensor.nodemcu_bedroom_status'].attributes['MqttCount']
              - states['sensor.nodemcu_bedroom_status'].attributes['WiFi LinkCount']
              - states['sensor.nodemcu_bedroom_status'].state
              - states['sensor.sonoff3_0898_status'].attributes['MqttCount']
              - states['sensor.sonoff3_0898_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff3_0898_status'].state
              - states['sensor.sonoff4_0851_status'].attributes['MqttCount']
              - states['sensor.sonoff4_0851_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff4_0851_status'].state
            entities:
              - sensor.sonoff1_2914_status
              - sensor.sonoff2_3110_status
              - sensor.sonoff5_1083_status
              - sensor.sonoff6_3719_status
              - sensor.nodemcu_lounge_status
              - sensor.nodemcu_bedroom_status
              - sensor.sonoff3_0898_status
              - sensor.sonoff4_0851_status
            card:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee' + '\xa0'.repeat(16) + 'MQTT ' + vars[0] + '\xa0'.repeat(4) + 'WiFi ' + vars[1] + '\xa0'.repeat(3) + ((parseInt(vars[2]) / 2) - 100 ) + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[2] >= 100 ? 'Excellent' : vars[2] >= 80 ? 'Good' : vars[2] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[2] >= 100 ? 'mdi:wifi' : vars[2] >= 80 ? 'mdi:wifi-strength-3' : vars[2] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + 'MQTT ' + vars[3] + '\xa0'.repeat(4) + 'WiFi ' + vars[4] + '\xa0'.repeat(3) + ((parseInt(vars[5]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[5] >= 100 ? 'Excellent' : vars[5] >= 80 ? 'Good' : vars[5] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[5] >= 100 ? 'mdi:wifi' : vars[5] >= 80 ? 'mdi:wifi-strength-3' : vars[5] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage' + '\xa0'.repeat(15) + 'MQTT ' + vars[6] + '\xa0'.repeat(4) + 'WiFi ' + vars[7] + '\xa0'.repeat(3) + ((parseInt(vars[8]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[8] >= 100 ? 'Excellent' : vars[8] >= 80 ? 'Good' : vars[8] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[8] >= 100 ? 'mdi:wifi' : vars[8] >= 80 ? 'mdi:wifi-strength-3' : vars[8] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm' + '\xa0'.repeat(17) + 'MQTT ' + vars[9] + '\xa0'.repeat(4) + 'WiFi ' + vars[10] + '\xa0'.repeat(3) + ((parseInt(vars[11]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[11] >= 100 ? 'Excellent' : vars[11] >= 80 ? 'Good' : vars[11] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[11] >= 100 ? 'mdi:wifi' : vars[11] >= 80 ? 'mdi:wifi-strength-3' : vars[11] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.nodemcu_lounge_status
                  name: "${'Weather' + '\xa0'.repeat(12) + 'MQTT ' + vars[12] + '\xa0'.repeat(4) + 'WiFi ' + vars[13] + '\xa0'.repeat(3) + ((parseInt(vars[14]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[14] >= 100 ? 'Excellent' : vars[14] >= 80 ? 'Good' : vars[14] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[14] >= 100 ? 'mdi:wifi' : vars[14] >= 80 ? 'mdi:wifi-strength-3' : vars[14] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.nodemcu_bedroom_status
                  name: "${'Bedroom' + '\xa0'.repeat(10) + 'MQTT ' + vars[15] + '\xa0'.repeat(4) + 'WiFi ' + vars[16] + '\xa0'.repeat(3) + ((parseInt(vars[17]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[17] >= 100 ? 'Excellent' : vars[17] >= 80 ? 'Good' : vars[17] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[17] >= 100 ? 'mdi:wifi' : vars[17] >= 80 ? 'mdi:wifi-strength-3' : vars[17] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff3_0898_status
                  name: "${'Office' + '\xa0'.repeat(16) + 'MQTT ' + vars[18] + '\xa0'.repeat(4) + 'WiFi ' + vars[19] + '\xa0'.repeat(3) + ((parseInt(vars[20]) / 2) - 100 ) + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[20] >= 100 ? 'Excellent' : vars[20] >= 80 ? 'Good' : vars[20] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[20] >= 100 ? 'mdi:wifi' : vars[20] >= 80 ? 'mdi:wifi-strength-3' : vars[20] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff4_0851_status
                  name: "${'TV' + '\xa0'.repeat(21) + 'MQTT ' + vars[21] + '\xa0'.repeat(4) + 'WiFi ' + vars[22] + '\xa0'.repeat(3) + ((parseInt(vars[23]) / 2) - 100 ) + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[23] >= 100 ? 'Excellent' : vars[23] >= 80 ? 'Good' : vars[23] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[23] >= 100 ? 'mdi:wifi' : vars[23] >= 80 ? 'mdi:wifi-strength-3' : vars[23] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
1 Like
11

thank you @DavidFW1960

i managed to create one which creates lovelace view based on filtering the result of being active and selecting an extended attribute like which Access point the device is connected to :smiley: , I put the information below incase someone else is after a similar solution.

card:
  entities_template: >-
    {{states.device_tracker | selectattr("state", "eq", "home") |
    selectattr("attributes.connected_ap", "eq", "Upstairs - Main")
    |map(attribute="entity_id")  | list | tojson }}
  title: Devices Connected to Upstairs - Main
  type: entities
entities:
  - sensor.time
type: 'custom:card-templater'
1 Like