Dynamically displaying attributes?

Configuration Frontend
1

I want to display a number of items compactly in a single card displaying info for a server. Primarily I’m asking about dynamically showing the names of each connection to it, and showing nothing for that section when the connections are 0.

For example, I sketched out a design that looks like:

[ icon ]
Status: 25ms ✅
Connected: 2
[ connection 1 name ] [connection 2 name ]
[ wrapped connection 3 name ]

And when no connections:

[ icon ]
Status: 25ms ✅
Connected: 0

Is there a single card that would let me do this without a bunch of custom CSS? If not, what card would work best for my use case?

2

What the heck, how have I never heard of the Markdown card?

1 Like
3

Screen Shot 2023-02-02 at 4.43.06 PM

type: markdown
content: >
  Connection Status: <font color = {{'green' if
  is_state('binary_sensor.minecraft_server_status','on') else 'red'}}><ha-icon

  icon="mdi:minecraft"></ha-icon></font>

  Latency: {{states('sensor.minecraft_server_latency_time') |int }}ms

  Players Online: {{states('sensor.minecraft_server_players_online') }}

  {{ state_attr("sensor.minecraft_server_players_online", "players_list") }}
title: Minecraft Server

Not a bad first draft.

4
  1. I would like “None” to not show if the player count is 0
  2. I would like the player list to not look like the raw array [‘player_1’, ‘player_2’], but rather each item formatted cleaner such as not including the brackets and single quotes
  3. I’d like it to display this data but look nicer, though that’s more of a design question
5

#2 solved with slapping | join(’ ') at the end of the player list. New code looks like:

type: markdown
content: >
  Connection Status: <font color = {{'green' if
  is_state('binary_sensor.minecraft_server_status','on') else 'red'}}><ha-icon

  icon="mdi:minecraft"></ha-icon></font>

  Latency: {{states('sensor.minecraft_server_latency_time') |int }}ms

  Players Online: {{states('sensor.minecraft_server_players_online') }}

  {{ state_attr("sensor.minecraft_server_players_online", "players_list") |
  join(' ') }}
title: Minecraft Server

Would be nice if HA stopped reformatting my content block with random wrapping and whitespace, but whatever.

Note that the | join has one breaking side effect. If there are 0 players online, the whole card breaks.

6

Here we go, 1+2 fully addressed. Design question is still in progress, but this seems to be better. Conditional if on, show all the stuff, if off, show a different card with the connection status red. This way I don’t need to wrap each value in protective code to prevent the whole card from being blank every time one value was empty, which is what happened when the status was off.

This is the editing view which shows both conditional cards at the same time. They do not show at the same time in practice.

Screen Shot 2023-02-06 at 7.18.46 AM

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.minecraft_server_status
        state: 'on'
    card:
      type: markdown
      content: >
        Connection Status: <font color = 'green'><ha-icon

        icon="mdi:minecraft"></ha-icon></font>

        Latency: {{states('sensor.minecraft_server_latency_time') |int }}ms

        Players Online: {{states('sensor.minecraft_server_players_online') }}

        {{ state_attr("sensor.minecraft_server_players_online", "players_list")
        | default([], True) | join(' ') }}
      title: Minecraft Server
  - type: conditional
    conditions:
      - entity: binary_sensor.minecraft_server_status
        state_not: 'on'
    card:
      type: markdown
      content: |
        Connection Status: <font color = 'red'><ha-icon
        icon="mdi:minecraft"></ha-icon></font>
      title: Minecraft Server

And the final product:

Screen Shot 2023-02-03 at 11.41.52 AM