Mushroom Cards - Chips - Display conditionally based on time

Configuration Frontend
,
1

I’m using the mushroom chips on a dashboard and I’m trying to conditionally display one of the chips based on time of the day. e.g. Show the espresso chip between 6am and 10am.

db-coffee
db-coffee716×586 49.4 KB

I’ve gotten stuck trying to add a time condition and I’m not sure what I’m doing wrong.

Error message:

At path: chips.1.conditions.0.entity – Expected a string, but received: undefined

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.time
    use_entity_picture: false
  - type: conditional
    conditions:
      - condition: time
        after: "06:00:00"
        before: "10:00:00"
    chip:
      type: entity
      entity: switch.espresso
      icon: mdi:coffee
      tap_action:
        action: toggle
      icon_color: teal
  - type: weather
    entity: weather.hal
    show_temperature: true
    show_conditions: false
alignment: justify
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$mushroom-chip$: |
      ha-card {
        --chip-icon-size: 0px;
      }
    mushroom-entity-chip: |
      ha-card {
        --chip-background: none;
        --chip-border-width: 0;
        --chip-font-size: 1.6rem;
        --chip-font-weight: 400;
        --chip-icon-size: 32px;
        margin-top:10px
      }

I’ve tried many different variations, with the time in quotes, no quotes, but still can’t figure it out.

But if I make it conditional based on an existing entity (light state = on), then it works.
e.g.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.time
    use_entity_picture: false
  - type: conditional
    conditions:
      - entity: light.master_bedroom_light
        state: 'on'
    chip:
      type: entity
      entity: switch.espresso
      icon: mdi:coffee
      tap_action:
        action: toggle
      icon_color: teal
  - type: weather
    entity: weather.hal
    show_temperature: true
    show_conditions: false
alignment: justify
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$mushroom-chip$: |
      ha-card {
        --chip-icon-size: 0px;
      }
    mushroom-entity-chip: |
      ha-card {
        --chip-background: none;
        --chip-border-width: 0;
        --chip-font-size: 1.6rem;
        --chip-font-weight: 400;
        --chip-icon-size: 32px;
        margin-top:10px
      }
2

Chip is Not defined as a card type for the conditional card.

Use this as an example.

3

@pcwii op is not talking about the built in conditional card. They’re referring to the custom:mushroom-card chips, conditional card…

That said, @daichisuba - the chip conditional cars ONLY supports exact true or false matching on an entity state. What you’re trying to do won’t work.

Just like the standard conditional card - for advanced filters make a template sensor that resolves true when you want the card to display and set it as the entity you use as the basis of the conditional chip.

1 Like
4

Hey @NathanCu thanks so much for your guidance!

Creating a template sensor in my configuration.yaml works:

  - platform: template
    sensors:
      morning_time:
        friendly_name: "Morning Time"
        value_template: "{{ 6 <= now().hour < 10 }}"

And revised styling code:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.time
    use_entity_picture: false
  - type: conditional
    conditions:
      - entity: sensor.morning_time
        state: 'True'
    chip:
      type: entity
      entity: switch.espresso
      icon: mdi:coffee
      tap_action:
        action: toggle
      icon_color: teal
  - type: weather
    entity: weather.hal
    show_temperature: true
    show_conditions: false
alignment: justify
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$mushroom-chip$: |
      ha-card {
        --chip-icon-size: 0px;
      }
    mushroom-entity-chip: |
      ha-card {
        --chip-background: none;
        --chip-border-width: 0;
        --chip-font-size: 1.6rem;
        --chip-font-weight: 400;
        --chip-icon-size: 32px;
        margin-top:10px
      }

I am still getting my head around all these configurations and customisations and trying to figure out where things should be defined.

1 Like