Help with entity card and labels

guy0nabuffalo · February 9, 2022, 6:58pm

Hello all,

I have created a card that is displaying a couple different sensors. The problem I’m running into is that one of the sensors sensor.google_moon_info has a state that is more than 255 characters. Since that is not allowed, I’m getting an unknown state.

I’m wondering if anyone knows of a way to modify the sensor template so that it only displays the first 255 characters.
Here is my sensor config:

- platform: template
  sensors:
    google_moon_info:
      friendly_name: 'Google Moon Info'
      value_template: >
        {{ state_attr('calendar.moon_astro', 'description') }}

If that is not possible, does anyone know how I can instead pull an attribute straight from the original entity calendar.moon_astro?

Here is my card config:

entity: sensor.google_moon
show_icon: false
show_entity_picture: true
show_label: true
show_name: false
show_state: true
label: |
  [[[
    return states['sensor.google_moon_info'].state;
  ]]]
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    large: true
    title: Moon/Astro Info
    card:
      type: entities
      entities:
        - sensor.google_moon_info
styles:
  label:
    - position: absolute
  grid:
    - grid-template-areas: '"n i" "s i" "l i"'
    - grid-template-columns: 1fr 40%
  state:
    - font-size: 2.5em
    - font-weight: bold
    - text-transform: uppercase
    - position: absolute
  card:
    - border: 1px solid rgb(255, 255, 255)
    - padding: 4%
type: custom:button-card

Here is what it looks like:

guy0nabuffalo · February 9, 2022, 7:59pm

Ok, I was able to get the attribute from the original entity by updating the label section of the card config to:

label: |
  [[[
    return states['calendar.moon_astro'].attributes.description;
  ]]]

But now the information runs off the card, does anyone know how to wrap the information so it all shows on the card?

guy0nabuffalo · February 9, 2022, 9:24pm

I was able to wrap by adding a few more styles to the label

styles:
  label:
    - position: absolute
    - text-overflow: unset
    - white-space: unset
    - word-break: break-word

In the end my card config is:

entity: sensor.google_moon
show_icon: false
show_entity_picture: true
show_label: true
show_name: false
show_state: true
label: |
  [[[
    return states['calendar.moon_astro'].attributes.description;
  ]]]
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    large: true
    title: Astrology Information
    card:
      type: entities
      entities:
        - entity: calendar.moon_astro
          type: custom:multiple-entity-row
          name: false
          icon: mdi:star-crescent
          show_state: false
          entities:
            - attribute: description
styles:
  label:
    - position: absolute
    - text-overflow: unset
    - white-space: unset
    - word-break: break-word
  grid:
    - grid-template-areas: '"n i" "s i" "l i"'
    - grid-template-columns: 1fr 40%
  state:
    - font-size: 2.5em
    - font-weight: bold
    - text-transform: uppercase
    - position: absolute
  card:
    - border: 1px solid rgb(255, 255, 255)
    - padding: 4%
type: custom:button-card

Which looks like