Mushroom Inspiration!

[jgosnell]

Hello,
Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        entity: climate.my_ecobee
        icon: |-
          {% if is_state(entity, 'heat') %}
            mdi:fire
          {% elif is_state(entity, 'heat_cool') %}
            mdi:sun-snowflake
          {% elif is_state(entity, 'cool') %}
            mdi:snowflake
          {% elif is_state(entity, 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:radiator-off
          {% endif %}    
        icon_color: |-
          {% if is_state_attr(entity,
          'hvac_action', 'heating') %}
            deep-orange
          {% elif is_state_attr(entity,
          'hvac_action', 'cooling') %}
            var(--blue-color)
          {% elif is_state_attr(entity,
          'hvac_action', 'fan') %}
            turquoise
          {% else %}
            disabled
          {% endif %}
        primary: |
          {{ states('sensor.my_ecobee_current_temperature') | round(1) }}°F 
        secondary: |-
          {% if is_state(entity, 'heat_cool') %}
            Heat/Cool
          {% elif is_state_attr(entity,
          'hvac_action', 'heating') %}
            Heating
          {% elif is_state_attr(entity,
          'hvac_action', 'cooling') %}
            Cooling         
          {% elif is_state(entity, 'heat') %}
            Heat
          {% elif is_state(entity, 'cool') %}
            Cool
          {% elif is_state(entity, 'fan_only') %}
            Fan
          {% else %}
            Off 
          {% endif %}     
      - type: custom:mushroom-template-card
        entity: sensor.my_ecobee_current_humidity
        primary: |
          {{ states(entity) | round(1) }}% 
        secondary: Humidity
        icon: mdi:water-percent
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.my_ecobee_current_temperature
        name: Temperature
      - entity: sensor.my_ecobee_current_humidity
        name: Humidity
        y_axis: secondary
    hours_to_show: 12
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        .line--rect,
        .fill--rect,
        .line--points {
          {% set state = states('climate.my_ecobee') %}
          {% set states = {'heat_cool':'green',
                           'heat':'#FF5722',
                           'cool':'var(--blue-color)',
                           'dry':'orange',
                           'fan_only':'turqoise'} %}
          {{states.get(state,'grey')}}
          fill: {{COLOR}};
          stroke: {{COLOR}};
        }
        .line--rect:last-of-type,
        .fill--rect:nth-of-type(2),
        .line--points:last-of-type {
          fill: var(--blue-color);
          stroke: var(--blue-color);
        }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.my_ecobee
        primary_info: none
        secondary_info: none
        icon_type: none
        show_temperature_control: true
      - type: custom:mushroom-climate-card
        entity: climate.my_ecobee
        primary_info: none
        secondary_info: none
        icon_type: none
        hvac_modes:
          - heat
          - cool
          - heat_cool
          - fan_only
          - 'off'

[ingo.niehues]

Mushroom-inspired Solar Energy Card + Home Consumption Card v2
I´ve reworked my cards to better fit my needs. The cards can display power (in W, actucal use) and energy (in kWh, daily use)-entities.

Made with Button-Card and ApexCharts-Card.

The cards shows

Solar Energy Card v2

• the energy produced by your pv in the left area with a pie-chart
• the produced energy that is used in the house
• the produced energy that is fed to grid
• the produced energy that is used to load the battery

Home Consumption Card v2

• the energy used in your house in the left area with a pie-chart
• the house-used power that is coming from the grid
• the house-used power that is coming from your solar panels
• the house-used power that is coming from your battery

The colors will automaticly match your energy-dashboard-colors.

You just to need to fill in your entities in the “variables:”-section.

Some sensors are directly from my integrations, some sensors are template-sensors.

YAML-Code Solar Energy Card v2

type: custom:button-card
variables:
  from_solar_entity: sensor.senec_solar_generated_power
  from_solar_label: Solar
  to_grid_entity: sensor.senec_grid_exported_power
  to_grid_label: ins Netz
  to_battery_entity: sensor.senec_battery_charge_power
  to_battery_label: in Speicher
  to_house_entity: sensor.senec_solar_house_used_power
  to_house_label: ins Haus
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 0px
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    karte:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 0px 0px;
          }
      mode: vertical
      keep:
        background: false
        border_radius: true
        box_shadow: false
        margin: false
        outer_padding: false
      cards:
        - type: grid
          columns: 4
          square: false
          cards:
            - type: vertical-stack
              cards:
                - type: custom:apexcharts-card
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        border: none;
                        box-shadow: none;
                        height: 80px;
                        padding: 0px;
                      }
                  stacked: true
                  chart_type: donut
                  header:
                    show: false
                    floating: true
                  apex_config:
                    plotOptions:
                      pie:
                        customScale: 1.8
                    chart:
                      height: 85px
                      offsetX: 0
                      offsetY: 18
                      animations:
                        enabled: false
                    legend:
                      show: false
                  series:
                    - entity: '[[[ return variables.to_house_entity ]]]'
                      name: Haus
                      color: grey
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.to_grid_entity ]]]'
                      name: Netz
                      color: var(--energy-grid-return-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.to_battery_entity ]]]'
                      name: Speicher
                      color: var(--energy-battery-in-color)
                      show:
                        datalabels: false
                - type: custom:button-card
                  entity: '[[[ return variables.from_solar_entity ]]]'
                  layout: vertical
                  show_name: false
                  show_state: true
                  show_icon: true
                  show_label: true
                  label: '[[[ return variables.from_solar_label ]]]'
                  styles:
                    grid:
                      - grid-template-areas: '"top" "i" "s" "l" "bottom"'
                      - grid-template-columns: 100%
                      - grid-template-rows: 1fr 3fr auto auto 1fr
                    card:
                      - height: 80px
                      - margin-top: '-80px'
                      - background: none
                      - border: none
                      - box-shadow: none
                    state:
                      - font-weight: bold
                      - font-size: 0.7rem
                    label:
                      - font-size: 0.7rem
                    icon:
                      - height: 1.5rem
                      - color: var(--energy-solar-color)
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.to_house_entity ]]]'
              icon: mdi:home-import-outline
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.to_house_label + " (" +
                Math.round(states[variables.to_house_entity].state /
                states[variables.from_solar_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: grey
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: grey
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start
            - type: custom:button-card
              label: '[[[ return variables.to_grid_label ]]]'
              size: 100%
              entity: '[[[ return variables.to_grid_entity ]]]'
              icon: mdi:transmission-tower-import
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.to_grid_label + " (" +
                Math.round(states[variables.to_grid_entity].state /
                states[variables.from_solar_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: var(--energy-grid-return-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - text-align: center
                  - color: var(--energy-grid-return-color)
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.to_battery_entity ]]]'
              icon: mdi:home-battery
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.to_battery_label + " (" +
                Math.round(states[variables.to_battery_entity].state /
                states[variables.from_solar_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: var(--energy-battery-in-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-battery-in-color)
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start

YAML-Code Home Consumption Card v2

type: custom:button-card
variables:
  house_use_entity: sensor.senec_house_power
  house_use_label: Haus
  from_grid_entity: sensor.senec_grid_house_used_power
  from_grid_label: aus Netz
  from_solar_entity: sensor.senec_solar_house_used_power
  from_solar_label: aus Solar
  from_battery_entity: sensor.senec_battery_house_used_power
  from_battery_label: aus Speicher
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 0px
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    karte:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 0px 0px;
          }
      mode: vertical
      keep:
        background: false
        border_radius: true
        box_shadow: false
        margin: false
        outer_padding: false
      cards:
        - type: grid
          columns: 4
          square: false
          cards:
            - type: vertical-stack
              cards:
                - type: custom:apexcharts-card
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        border: none;
                        box-shadow: none;
                        height: 80px;
                        padding: 0px;
                      }
                  stacked: true
                  chart_type: donut
                  header:
                    show: false
                    floating: true
                  apex_config:
                    plotOptions:
                      pie:
                        customScale: 1.8
                    chart:
                      height: 85px
                      offsetX: 0
                      offsetY: 18
                      animations:
                        enabled: false
                    legend:
                      show: false
                  series:
                    - entity: '[[[ return variables.from_solar_entity ]]]'
                      name: Solar
                      color: var(--energy-solar-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.from_grid_entity ]]]'
                      name: Netz
                      color: var(--energy-grid-consumption-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.from_battery_entity ]]]'
                      name: Speicher
                      color: var(--energy-battery-out-color)
                      show:
                        datalabels: false
                - type: custom:button-card
                  entity: '[[[ return variables.house_use_entity ]]]'
                  layout: vertical
                  show_name: false
                  show_state: true
                  show_icon: true
                  show_label: true
                  label: '[[[ return variables.house_use_label ]]]'
                  styles:
                    grid:
                      - grid-template-areas: '"top" "i" "s" "l" "bottom"'
                      - grid-template-columns: 100%
                      - grid-template-rows: 1fr 3fr auto auto 1fr
                    card:
                      - height: 80px
                      - margin-top: '-80px'
                      - background: none
                      - border: none
                      - box-shadow: none
                    state:
                      - font-weight: bold
                      - font-size: 0.7rem
                    label:
                      - font-size: 0.7rem
                    icon:
                      - height: 1.5rem
                      - color: grey
            - type: custom:button-card
              label: '[[[ return variables.from_grid_label ]]]'
              size: 100%
              entity: '[[[ return variables.from_grid_entity ]]]'
              icon: mdi:transmission-tower-export
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.from_grid_label + " (" +
                Math.round(states[variables.from_grid_entity].state /
                states[variables.house_use_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: var(--energy-grid-consumption-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - text-align: center
                  - color: var(--energy-grid-consumption-color)
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.from_solar_entity ]]]'
              icon: mdi:solar-power-variant
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.from_solar_label + " (" +
                Math.round(states[variables.from_solar_entity].state /
                states[variables.house_use_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: var(--energy-solar-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-solar-color)
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.from_battery_entity ]]]'
              icon: mdi:home-battery
              show_icon: true
              show_name: true
              show_state: true
              show_label: false
              name: >-
                [[[ return variables.from_battery_label + " (" +
                Math.round(states[variables.from_battery_entity].state /
                states[variables.house_use_entity].state * 100) + "%)" ]]]
              styles:
                grid:
                  - grid-template-areas: '"i" "s" "n"'
                  - grid-template-rows: 3rem 1fr 1fr
                  - grid-template-columns: auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 2.5rem
                  - color: var(--energy-battery-out-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-battery-out-color)
                label:
                  - font-size: 0.7rem
                  - align-self: center
                name:
                  - font-size: 0.7rem
                  - align-self: start

[zgadson (Zach)]

I’ve tried everything to set slider colors.

So far I can set the slider color:

- type: custom:mushroom-light-card
  entity: light.wled_controller
  show_brightness_control: true
  primary_info: none
  secondary_info: none
  icon_type: none
  card_mod:
    style:
      mushroom-light-brightness-control$: |
        mushroom-slider {
          --slider-color: red;}

Or the slider background color:

- type: custom:mushroom-light-card
  entity: light.wled_controller
  show_brightness_control: true
  primary_info: none
  secondary_info: none
  icon_type: none
  card_mod:
    style:
      mushroom-light-brightness-control$:
        mushroom-slider$: |
          .slider-track-background {
            background-color: blue !important;}

Bot not both - how do I combine these:

- type: custom:mushroom-light-card
  entity: light.wled_controller
  show_brightness_control: true
  primary_info: none
  secondary_info: none
  icon_type: none
  card_mod:
    style:
      mushroom-light-brightness-control$: |
        mushroom-slider {
          --slider-color: red;}
      mushroom-light-brightness-control$:
        mushroom-slider$: |
          .slider-track-background {
            background-color: blue !important;}

Thank you!

[TheWanderingTurkey]

I believe I posted the updated card_mod section elsewhere, but not as a complete block. Here’s the full YAML, which should adjust based on the capabilities of the light.

type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
  state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
  }}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: none
layout: horizontal
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            flex-shrink: 0;
            flex-grow: 0;
          {% else %}
            flex-shrink: 1;
            flex-grow: 1;
          {% endif %}
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --primary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            {% if states(config.entity) == 'on' %}
              position: absolute;
              right: 15px;
              top: 23px;
            {% else %}
            {% endif %}
          {% else %}
            flex-shrink: 1;
          {% endif %}
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --secondary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
          {% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
          {% if (rgb == true and color_temp == true) %}
            width: calc(100% - 190px);
          {% elif (rgb == false and color_temp == true) %}
            width: calc(100% - 136px);
          {% elif (rgb == true and color_temp == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
          flex-grow: 9;
          flex-shrink: 1;
        {% else %}
          flex-grow: 0;
          flex-shrink: 0;
        {% endif %}
      }
      mushroom-state-info {
        display: flex;
      }

Or as a decluttering card:

light:
  default:
    - icon: lightbulb
    - color_control: >-
        {{ state_attr(config.entity, 'supported_color_modes')|contains('rgb')
        or state_attr(config.entity, 'supported_color_modes')|contains('xy')
        }}
    - color_temp_control: >-
        {{ state_attr(config.entity,
        'supported_color_modes')|contains('color_temp') }}
  card:
    type: custom:mushroom-light-card
    entity: light.[[entity]]
    name: '[[name]]'
    icon: mdi:[[icon]]
    show_brightness_control: true
    show_color_control: '[[color_control]]'
    show_color_temp_control: '[[color_temp_control]]'
    use_light_color: true
    collapsible_controls: true
    fill_container: true
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    layout: horizontal
    card_mod:
      style:
        mushroom-state-info$:
          .container: |
            .primary {
              {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
                flex-shrink: 0;
                flex-grow: 0;
              {% else %}
                flex-shrink: 1;
                flex-grow: 1;
              {% endif %}
              padding-left: 5px;
              {% if state_attr(config.entity, 'rgb_color') == none %}
                {% if states(config.entity) == 'on' %}
                  text-shadow: 0px 0px 7px orange;
                  --primary-text-color: #1a1a1a;
                {% else %}
                {% endif %}
              {% else %}
                {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                  text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
                  --primary-text-color: #1a1a1a;
                {% else %}
                  text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
                  --primary-text-color: #fafafa;
                {% endif %}
              {% endif %}
            }
            .secondary {
              {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
                {% if states(config.entity) == 'on' %}
                  position: absolute;
                  right: 15px;
                  top: 23px;
                {% else %}
                {% endif %}
              {% else %}
                flex-shrink: 1;
              {% endif %}
              flex-grow: 0;
              margin-right: 10px;
              padding: 0 5px;
              {% if state_attr(config.entity, 'rgb_color') == none %}
                {% if states(config.entity) == 'on' %}
                  text-shadow: 0px 0px 7px orange;
                  --secondary-text-color: #1a1a1a;
                {% else %}
                {% endif %}
              {% else %}
                {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                  text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
                  --secondary-text-color: #1a1a1a;
                {% else %}
                  text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
                  --secondary-text-color: #fafafa;
                {% endif %}
              {% endif %}
            }
          .: |
            .container {
              display: flex;
              {% if states(config.entity) == 'on' %}
                z-index: 1;
                flex-direction: row !important;
                align-items: baseline;
                pointer-events: none !important;
                margin-left: 10px;
                margin-right: -8px;
              {% else %}
              {% endif %}
            }
        mushroom-light-brightness-control$:
          mushroom-slider$: |
            .container {
              position: absolute;
              flex-basis: max-content;
              {% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
              {% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
              {% if (rgb == true and color_temp == true) %}
                width: calc(100% - 190px);
              {% elif (rgb == false and color_temp == true) %}
                width: calc(100% - 136px);
              {% elif (rgb == true and color_temp == false) %}
                width: calc(100% - 136px);
              {% else %}
                width: calc(100% - 80px);
              {% endif %}
              left: 68px;
              top: 18.2%;
            }
            .slider-track-background {
              background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
            }
        mushroom-light-color-control$:
          mushroom-slider$: |
            .container {
              position: absolute;
              flex-basis: max-content;
              {% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
                width: calc(100% - 190px);
              {% else %}
                width: calc(100% - 136px);
              {% endif %}
              left: 68px;
              top: 18.2%
            }
        mushroom-light-color-temp-control$:
          mushroom-slider$: |
            .container {
              position: absolute;
              flex-basis: max-content;
              {% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
                width: calc(100% - 190px);
              {% else %}
                width: calc(100% - 136px);
              {% endif %}
              left: 68px;
              top: 18.2%
            }
        .: |
          .actions {
            display: flex;
            flex-basis: min-content;
            align-items: flex-end !important;
            justify-content: flex-end !important;
            {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
              flex-grow: 9;
              flex-shrink: 1;
            {% else %}
              flex-grow: 0;
              flex-shrink: 0;
            {% endif %}
          }
          mushroom-state-info {
            display: flex;
          }

[Montreal666]

Thank you!

however my RGBW lights have a different “color_modes” set so I would probably have to add a bunch of “or” in the code to cover “hs” but don’t want to mess with your code. If you have a chance to update it, great, otherwise I’ll give it a try later. Thank you!

min_color_temp_kelvin: 2000
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500
effect_list:
  - Solid
  - Wake up
  - Cycle up
  - Cycle down
  - Random
supported_color_modes:
  - color_temp
  - hs
color_mode: hs
brightness: 158
hs_color:
  - 256
  - 100
rgb_color:
  - 67
  - 0
  - 255
xy_color:
  - 0.16
  - 0.051
effect: Solid
friendly_name: BULBRGBWW2
supported_features: 36

[Montreal666]

Try this:

type: custom:mushroom-light-card
entity: light.bulbrgbww2
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider-track-background {
          background-color: blue !important;}
      .: |
        mushroom-slider {
          --slider-color: red;}

Mushroom Cards - Build a beautiful dashboard easily

Here is an explanation of how these symbols work. $ is used when we want to access the shadow-root of an object. like this here: [image] the .shape is within the shadow-root of mushroom-shape-icon so to access it and modify it, we would write this: [image] card_mod: style: mushroom-shape-icon$: | .shape { background: red !important; } you cant just write this, as this wont access the element through the shadow root. [image] card_mod: style: | .shape { …

[dimitri.landerloos]

Also possible to just do:

card_mod:
  style:
    mushroom-light-brightness-control$: |
      mushroom-slider {
        --slider-bg-color: red !important;
        --slider-color: blue !important;
      }

or even this:

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider-track-background {
          background-color: blue !important;
        }
        .slider-track-active {
          background-color: red !important;
        }

@zgadson but FYI. not the right place to ask questions or give answers. its specifically in the first post of the topic. if you want to ask questions regarding the mushroom cards go to the main mushroom thread or feel free to ask them in my guide where i can try and help you out

[WebPower (Karoly Papp)]

Hello,
I thought I’d share the Solar information in case anyone else needs it.
- Mushroom card
- Apexcharts card
- Card mod
- Layout card
- Custom brand icons

1. More Inverter active power (W) - active and inactive status (pulses blue if active, gray if inverter does not detect sun and is not charging)
2. PW Power summary for several inverters (W) – active and inactive status (orange if active, gray if not charging)
3. Inverters with Daily yield display (kWh)
4. Accumulator charge level
5. Apexcharts - Return to Grid - Grid Consumption - Total Yield 24h. In the middle, current power is indicated with flow direction (the icon and text are green if there is an export and the icon and text are red if there is an import.
6. Daily Grid Consumption (kWh)
7. Return to grid (kWh)
8. Daily Yield (kWh)

type: vertical-stack
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 1fr 1fr 1fr
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.sun2000_10ktl_active_power
        primary: 10KTL Inverter
        secondary: '{{(states(''sensor.sun2000_10ktl_active_power''))}} W'
        layout: vertical
        fill_container: false
        icon: |
          {% set state=states('sensor.sun2000_10ktl_device_status') %}
          {% if state=='On-grid' %}
          phu:huawei-solar-inverter
          {% elif state!='Standby:no irradiation' %}
          phu:huawei-solar-inverter
          {% endif %}
        icon_color: |
          {% set state=states('sensor.sun2000_10ktl_device_status') %}
          {% if state=='On-grid' %}
          #41bdf5
          {% elif state!='Standby:no irradiation' %}
          disabled
          {% endif %}
        secondary_info: state
        multiline_secondary: false
        badge_icon: ''
        badge_color: ''
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                
                --shape-color: none !important;
                
                {% if is_state('sensor.sun2000_10ktl_device_status', 'On-grid') %}
                --shape-animation: blink 5s linear infinite;
                {% endif %}
              }
              @keyframes blink {
                  30% {opacity: 0;}
              }
            .: |
              ha-card {
                margin-top: 10px;
                --icon-size: 50px;
                --icon-symbol-size: 30px;
                --card-secondary-font-size: 10px;
                --card-primary-font-size: 12px;
                padding-top: 5px !important;
                padding-bottom: 5px !important;
              }
      - type: custom:mushroom-template-card
        entity: sensor.sun2000_6ktl_active_power
        primary: 6KTL Inverter
        secondary: '{{(states(''sensor.sun2000_6ktl_active_power''))}} W'
        layout: vertical
        fill_container: false
        icon: |
          {% set state=states('sensor.sun2000_6ktl_device_status') %}
          {% if state=='On-grid' %}
          phu:huawei-solar-inverter
          {% elif state!='Standby:no irradiation' %}
          phu:huawei-solar-inverter
          {% endif %}
        icon_color: |
          {% set state=states('sensor.sun2000_6ktl_device_status') %}
          {% if state=='On-grid' %}
          #41bdf5
          {% elif state!='Standby:no irradiation' %}
          disabled
          {% endif %}
        secondary_info: state
        multiline_secondary: false
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                
                --shape-color: none !important;
                
                {% if is_state('sensor.sun2000_6ktl_device_status', 'On-grid') %}
                --shape-animation: blink 5s linear infinite;
                {% endif %}
              }
              @keyframes blink {
                  30% {opacity: 0;}
              }
            .: |
              ha-card {
                margin-top: 10px;
                --icon-size: 50px;
                --icon-symbol-size: 30px;
                --card-secondary-font-size: 10px;
                --card-primary-font-size: 12px;
                padding-top: 5px !important;
                padding-bottom: 5px !important;
              }
      - type: custom:mushroom-template-card
        entity: sensor.solar_inverter_daily_power
        primary: PV Power
        secondary: |-
          {% set state=states('sensor.solar_inverter_daily_power') %}
                {% if state | is_number and state | float > 0 %}
                  {{(states('sensor.solar_inverter_daily_power'))}} W
                {% elif state | is_number and state | float < 0 %}
                  {{(states('sensor.solar_inverter_daily_power'))}} W
                {% else %}
                  {{(states('sensor.solar_inverter_daily_power'))}} W
                {% endif %}
        layout: vertical
        fill_container: false
        icon: |-
          {% set state=states('sensor.solar_inverter_daily_power') %}
                {% if state | is_number and state | float > 5 %}
                  mdi:solar-panel-large
                {% elif state | is_number and state | float < 0 %}
                  mdi:solar-panel-large
                {% else %}
                  mdi:grid-off
                {% endif %}
        icon_color: |-
          {% set state=states('sensor.solar_inverter_daily_power') %}
                {% if state | is_number and state | float > 0 %}
                  #FFA500
                {% elif state | is_number and state | float < 0 %}
                  #9ACD32
                {% else %}
                  disabled
                {% endif %}
        secondary_info: state
        multiline_secondary: true
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                
                --shape-color: none !important;
            .: |
              ha-card {
                margin-top: 10px;
                --icon-size: 50px;
                --icon-symbol-size: 30px;
                --card-secondary-font-size: 10px;
                --card-primary-font-size: 12px;
                padding-top: 5px !important;
                padding-bottom: 5px !important;
                --secondary-text-color:  {% set state=states('sensor.solar_inverter_daily_power') %} {% if state | is_number
                  and state | float > 100 %}
                  #9ACD32
                {% elif state | is_number and state | float < 0 %}
                  #f77c7c
                {% else %}
                  #A9A9A9
                {% endif %};
                }
              }
    card_mod:
      style: |
        ha-card {
          height: 150px;
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 1fr 2fr
      grid-template-rows: auto
      margin: 0px
      padding: 0px
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.sun2000_10ktl_daily_yield
            icon: mdi:solar-power-variant
            icon_color: '#FFA500'
            hold_action:
              action: none
            primary_info: name
            secondary_info: state
            name: 10KTL
            card_mod:
              style: |
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 10px;
                }
                ha-card {
                  margin-top: -10px;
                  margin-right: -8px;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.sun2000_6ktl_daily_yield
            icon_color: '#FFA500'
            icon: mdi:solar-power-variant
            hold_action:
              action: none
            primary_info: name
            secondary_info: state
            name: 6KTL
            card_mod:
              style: |
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 10px;
                }
                ha-card {
                  margin-top: -10px;
                  margin-right: -8px;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.luna2000_battery_state_of_capacity
            icon_color: '#9ACD32'
            hold_action:
              action: none
            primary_info: name
            secondary_info: state
            name: Battery
            card_mod:
              style: |
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 10px;
                }
                ha-card {
                  margin-top: -10px;
                  margin-right: -8px;
                }
        card_mod:
          style: |
            ha-card {

              --ha-card-box-shadow: 0px;
            }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            experimental:
              color_threshold: true
            chart_type: radialBar
            graph_span: 5day1s
            span:
              end: day
            show:
              loading: false
            cache: true
            update_interval: 10min
            apex_config:
              chart:
                height: 250px
              plotOptions:
                radialBar:
                  offsetY: -20
                  startAngle: -135
                  endAngle: 135
                  hollow:
                    size: 45%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
              legend:
                show: false
              stroke:
                dashArray: 0
                lineCap: flat
            series:
              - entity: sensor.p1_teljes_energia_visszataplalas
                type: area
                name: CPU
                color_threshold:
                  - value: 0
                    color: rgb(183, 201, 145)
                  - value: 10
                    color: rgb(173, 199, 117)
                  - value: 30
                    color: rgb(154, 205, 50)
                group_by:
                  func: diff
                  duration: 1d
              - entity: sensor.p1_teljes_energia_vetelezes
                type: area
                name: RAM
                color_threshold:
                  - value: 0
                    color: rgb(245, 201, 201)
                  - value: 25
                    color: rgb(245, 154, 154)
                  - value: 35
                    color: rgb(247, 124, 124)
                group_by:
                  func: diff
                  duration: 1d
              - entity: sensor.solar_panel_total_yield
                type: area
                name: SSD
                color_threshold:
                  - value: 0
                    color: rgb(247, 210, 141)
                  - value: 15
                    color: rgb(247, 197, 104)
                  - value: 30
                    color: rgb(255, 165, 0)
                group_by:
                  func: diff
                  duration: 1d
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
          - type: custom:mushroom-template-card
            entity: sensor.p1_aktiv_teljesitmeny
            tap_action:
              action: more-info
            primary: |-
              {% set state=states('sensor.p1_aktiv_teljesitmeny') %}
                {% if state | is_number and state | float > 0 %}
                  - {{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
                {% elif state | is_number and state | float < 0 %}
                  {{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
                {% else %}
                  No data
                {% endif %}
            icon_color: |-
              {% set state=states('sensor.p1_aktiv_teljesitmeny') %}
                {% if state | is_number and state | float > 0 %}
                  #f77c7c
                {% elif state | is_number and state | float < 0 %}
                  #9ACD32
                {% else %}
                  disabled
                {% endif %}
            icon: |-
              {% set state=states('sensor.p1_aktiv_teljesitmeny') %}
                {% if state | is_number and state | float > 0 %}
                  mdi:transmission-tower-export
                {% elif state | is_number and state | float < 0 %}
                  mdi:transmission-tower-import
                {% else %}
                  mdi:transmission-tower-off
                {% endif %}
            layout: vertical
            card_mod:
              style: |
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-icon-border-radius: 50%;
                  --mush-icon-size: 72px; 
                  --primary-text-color:  {% set state=states('sensor.p1_aktiv_teljesitmeny') %} {% if state | is_number
                  and state | float > 0 %}
                  #f77c7c
                {% elif state | is_number and state | float < 0 %}
                  #32CD32
                {% else %}
                  black
                {% endif %};
                }
                ha-card {
                  background: transparent;
                  margin-top: -112px;
                  width: 120px;
                  margin-left: auto;
                  margin-right: auto;
                }
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 1fr 1fr 1fr
      grid-template-rows: auto
      margin: 0px
      padding: 0px
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:transmission-tower-export
        layout: vertical
        primary: Grid Consumption
        icon_color: '#f77c7c'
        secondary: '{{(states(''sensor.energia_vetelezes_napi''))}} kWh'
        entity: sensor.energia_vetelezes_napi
        tap_action:
          action: more-info
        card_mod:
          style: |
            :host {
              margin-top: -10px;
              --mush-icon-size: 60px;
              --mush-card-primary-font-size: 12px;
              --mush-card-secondary-font-size: 10px;
            }
            mushroom-shape-icon {
              --shape-color: none !important; 
            }
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 5px !important;
            }
        badge_icon: ''
        badge_color: ''
      - type: custom:mushroom-template-card
        icon: mdi:transmission-tower-import
        layout: vertical
        primary: Return to grid
        icon_color: '#9ACD32'
        tap_action:
          action: more-info
        secondary: '{{(states(''sensor.energia_visszataplalas_napi''))}} kWh'
        entity: sensor.energia_visszataplalas_napi
        card_mod:
          style: |
            :host {
              margin-top: -10px;
              --mush-icon-size: 60px;
              --mush-card-primary-font-size: 12px;
              --mush-card-secondary-font-size: 10px;
            }
            mushroom-shape-icon {
              --shape-color: none !important; 
            }
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 5px !important;
            }
      - type: custom:mushroom-template-card
        icon: mdi:sun-wireless
        layout: vertical
        primary: Daily Yield
        icon_color: '#FFA500'
        tap_action:
          action: more-info
        secondary: '{{(states(''sensor.solar_panel_daily_yield''))}} kWh'
        entity: sensor.solar_panel_daily_yield
        card_mod:
          style: |
            :host {
              margin-top: -10px;
              --mush-icon-size: 60px;
              --mush-card-primary-font-size: 12px;
              --mush-card-secondary-font-size: 10px;
            }
            mushroom-shape-icon {
              --shape-color: none !important; 
            }
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 5px !important;
            }

[Vasco]

Wow @WebPower , very well done!

[ingo.niehues]

Mushroom-inspired Room Light Card

Made with Button-Card, Mushroom-Cards, Auto-Entities-Card and Timer Bar Card.

This is a light-card for a “Room” (which really is just a group of lights).

• Image You need to give it an path or url to an image to display. The image will be greyscale if all lights in the group are off an normal if one or more lights of the group are on
• Timer If you have set up an timer for an automation you can define your timer-entity in variables. If you do so, there will be a timer-icon. If you click on the Icon, the more-info-dialog of the timer-entity will be shown
• Automation If you have set up an automation to control your lights in this group (e.g. based on motion) you can define an automation-entity in the variables. The card will then show an automation on/off icon. If you click the icon, the automation will toggle between on and off
• Room Toggle The toggle on the upper right side toggle all the lights in the group (on / off).
• Light-Chips for each light-entity in the light-group there will be a chip-card with icon and name. Click on the chip to toggle the light-state. Long tap will leed to the more-info-dialog.
• Timer-Bar If you defined a timer-entity and the timer is running, it will display a small bar shrinking as the times goes down.

What you need to to:

• Copy the YAML-Code below
• Change the following things:

type: custom:button-card
entity: light.waschekeller_alle
variables:
  automation_entity: none
  timer_entity: none
  picture: /local/img/wäschekeller.jpg
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 0px
    - background: |
        [[[
          if (entity.state === "on")
            return "rgba(255,255,0,0.05)"; 
        ]]]
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    mush:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            background: none;
          }         
      mode: horizontal
      keep:
        background: true
        border_radius: true
        box_shadow: true
        margin: true
        outer_padding: false
      cards:
        - type: custom:button-card
          entity: '[[[ return entity.entity_id ]]]'
          show_name: false
          styles:
            card:
              - width: 5rem
              - padding: 0px
              - border: none
              - border-radius: 0px
              - height: 10rem
            entity_picture:
              - width: 5rem
              - height: 10rem
              - object-fit: cover
              - filter: |
                  [[[
                    if (entity.state === "off")
                      return "grayscale(100%)"; 
                    else
                      return "none";
                  ]]]
          entity_picture: '[[[ return variables.picture ]]]'
          show_entity_picture: true
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                border: none !important;
                box-shadow: none !important;
              }       
        - type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  alignment: start
                  chips:
                    - type: template
                      entity: '[[[ return entity.entity_id ]]]'
                      tap_action:
                        action: none
                      hold_action:
                        action: more-info
                      double_tap_action:
                        action: none
                      icon: '{{ state_attr(entity,"icon") }}'
                      content: '{{ state_attr(entity,"friendly_name") }}'
                      card_mod:
                        style: |
                          ha-card {
                            border: none !important;
                            box-shadow: none !important;
                            background: none !important;
                            font-size: 3rem !important;
                          }      
                - type: custom:mushroom-chips-card
                  card_mod:
                    style: |
                      .chip-container {
                          --chip-spacing: -10px !important;
                      }                    
                  alignment: end
                  chips:
                    - type: conditional
                      conditions:
                        - condition: state
                          entity: '[[[ return variables.timer_entity ]]]'
                          state_not: unknown
                      chip:
                        type: template
                        entity: '[[[ return variables.timer_entity ]]]'
                        icon: '{{ state_attr(entity,"icon") }}'
                        tap_action:
                          action: more-info
                        card_mod:
                          style: |
                            ha-card {
                              border: none !important;
                              box-shadow: none !important;
                              background: none !important;
                              font-size: 3rem !important;
                            }        
                            .content {
                              padding: 0px !important;
                            }                                  
                    - type: conditional
                      conditions:
                        - condition: state
                          entity: '[[[ return variables.automation_entity ]]]'
                          state_not: unknown
                      chip:
                        type: template
                        entity: '[[[ return variables.automation_entity ]]]'
                        icon: |-
                          {% if states(entity) == "on" %}
                            mdi:motion-sensor
                          {% elif states(entity) == "off" %}
                            mdi:motion-sensor-off
                          {% endif %}  
                        icon_color: |-
                          {% if states(entity) == "on" %}
                            orange
                          {% else %}
                            grey
                          {% endif %}                        
                        tap_action:
                          action: toggle
                        card_mod:
                          style: |
                            ha-card {
                              border: none !important;
                              box-shadow: none !important;
                              background: none !important;
                              font-size: 3rem !important;
                            }                                  
                    - type: template
                      entity: '[[[ return entity.entity_id ]]]'
                      tap_action:
                        action: toggle
                      hold_action:
                        action: more-info
                      icon: |-
                        {% if states(entity) == "on" %}
                          mdi:toggle-switch
                        {% else %}
                          mdi:toggle-switch-off
                        {% endif %}
                      icon_color: |-
                        {% if states(entity) == "on" %}
                          orange
                        {% else %}
                          grey
                        {% endif %}
                      card_mod:
                        style: |
                          ha-card {
                            border: none !important;
                            box-shadow: none !important;
                            background: none !important;
                            font-size: 4rem !important;
                          }              
            - type: custom:button-card
              show_name: false
              show_state: false
              show_icon: false
              show_label: false
              styles:
                card:
                  - height: 5px
                  - box-shadow: none
                  - border-bottom: 1px solid rgb(50,50,50,0.2)
                  - border-radius: 0px
                  - padding: 0px
                  - margin-top: '-0.5rem'
                  - background: none
            - type: custom:auto-entities
              show_empty: true
              sort:
                method: name
              card:
                type: custom:mushroom-chips-card
                alignment: center
              card_param: chips
              filter:
                include:
                  - group: '[[[ return entity.entity_id ]]]'
                    options:
                      type: template
                      content: '{{ state_attr(entity,"friendly_name") }}'
                      icon: '{{ state_attr(entity,"icon") }}'
                      icon_color: |-
                        {% if states(entity) == "on" %}
                          orange
                        {% else %}
                          grey
                        {% endif %}
                      tap_action:
                        action: toggle
                      hold_action:
                        action: more-info
                      card_mod:
                        style: |
                          ha-card {
                            background: var(--secondary-background-color) !important;
                          }                       
            - type: conditional
              conditions:
                - condition: state
                  entity: '[[[ return variables.timer_entity ]]]'
                  state: active
              card:
                type: custom:timer-bar-card
                entity: '[[[ return variables.timer_entity ]]]'
                invert: true
                bar_direction: ltr
                name: aus in
                bar_foreground: darkorange
                bar_background: none
                bar_height: 0.1rem
                layout: full_row
                text_width: 0px

[MRobi (Mike)]

Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.

The top temperature is pulled from sensor.my_ecobee_current_temperature and rounded to 1 digit. What you’re seeing on the bottom are the controls for climate.my_ecobee. It looks like you have it in auto mode, and while I’m not familiar with the ecobee I’m assuming when you have it in auto mode there are separate targets for heating and cooling and what you are seeing there are those target temps.

[jgosnell]

Thank you for the response. I knew what the footer area values were, my question was the descrepency between the graph values and the header values for temp and humidity when they are supposed to represent the same sensors. I now see that it is just a rounding difference. Also, why do both graph lines show the temp value on the left and humidity on the right? I would think the left end of the orange line would show starting temp value for the timeframe and the right end of the orange line would show current temp value. Same for the blue line but for humidity. My graph seems to switch values from left to right.

[MRobi (Mike)]

Ya that’s just how that card works. You could swap it out with the apexcharts card. When there are multiple lines on the graph, that one gives you a little popup box to show the actual recorded number at that point as you drag your curser over the graph.

Kind of like this:

[ArenaCloser]

More button-card than Mushroom but still thought I’d share here: a minimalistic card for controlling Chromecast with Google TV (kind of like the remote that comes with it), using the Android TV Remote integration. On that page they show a dashboard example, but I thought it looked terrible. I prefer my iteration

The logos in the bottom row are shortcuts to open apps, and will highlight when the app is currently active. To add your own shortcuts to open apps, have a look at this thread.

Code

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-entity-card
    name: Chromecast 4K • Remote
    icon: mdi:remote-tv
    entity: remote.chromecast_4k
    tap_action:
      action: more-info
    icon_color: red
  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: custom:button-card
        icon: mdi:arrow-left-bottom
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: BACK
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item1
      - type: custom:button-card
        icon: mdi:arrow-up
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_UP
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_UP
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item2
      - type: custom:button-card
        icon: mdi:home
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: HOME
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item3
      - type: custom:button-card
        icon: mdi:arrow-left
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_LEFT
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_LEFT
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item4
      - type: custom:button-card
        icon: mdi:cursor-pointer
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_CENTER
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_CENTER
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item5
      - type: custom:button-card
        icon: mdi:arrow-right
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_RIGHT
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_RIGHT
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item6
      - type: custom:button-card
        entity: media_player.tv
        icon: |
          [[[ if (entity.attributes.is_volume_muted) {
                return 'mdi:volume-off'
              } else {
                return 'mdi:volume-high'
              }
          ]]]
        tap_action:
          action: call-service
          service: script.samsung_tv_volume_mute
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item7
      - type: custom:button-card
        icon: mdi:arrow-down
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_DOWN
        hold_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.chromecast_4k
            command: DPAD_DOWN
            num_repeats: 1
            delay_secs: 0.5
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item8
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:youtube
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: https://www.youtube.com
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: |
                [[[ if (entity.attributes.current_activity == 'com.youtube') {
                  return 'rgba(var(--mush-rgb-red),0.3)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-red),0.9)
        size: 20px
        view_layout:
          grid-area: item9
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:netflix
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: netflix://
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.netflix.ninja') {
                  return 'rgba(var(--mush-rgb-red),0.3)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-red),0.9)
        size: 20px
        view_layout:
          grid-area: item10
      - type: custom:button-card
        entity: remote.chromecast_4k
        entity_picture: https://upload.wikimedia.org/wikipedia/commons/a/ad/AppleTVLogo.svg
        show_entity_picture: true
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: https://tv.apple.com
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.apple.atve.androidtv.appletv')  {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.2)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 22px
        view_layout:
          grid-area: item11
      - type: custom:button-card
        entity: remote.chromecast_4k
        icon: mdi:spotify
        tap_action:
          action: call-service
          service: remote.turn_on
          service_data:
            entity_id: remote.chromecast_4k
            activity: spotify://
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: >
                [[[ if (entity.attributes.current_activity ==
                'com.spotify.tv.android')  {
                  return 'rgba(var(--mush-rgb-green),0.2)'
                } else {
                  return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
                } ]]]
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--mush-rgb-green),0.9)
        size: 20px
        view_layout:
          grid-area: item12
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr
      grid-template-rows: min-content
      grid-template-areas: |
        ". item2 . item1"
        "item4 item5 item6 item3"
        ". item8 . item7"
        "item9 item10 item11 item12"
      gap: 0px
      margin: '-4px 8px 4px'

You’ll see I use a custom variable, var(--cstm-rgb-on-secondary). You can set it in your theme:

mode:
    light:
        cstm-rgb-on-secondary: 51, 51, 51
    dark:
        cstm-rgb-on-secondary: 221, 221, 221

[roelofkooijman (Roelof85)]

That remote looks very good.
But it’s not working with me, this is what is get:

Repaced all the remote.yourremote with my remote.

Thanks

[ArenaCloser]

Looks like the buttons are there but with 1px height or something. Please check your values for var(--mush-control-height) and the other mushroom theme variables, or replace them with e.g. 14 px in the button-cards.

[MRobi (Mike)]

@ArenaCloser

kind of like the remote that comes with it

You should check out the Firemote Card. Instead of having a card that’s “Kind of like the remote that comes with it”, you can have a card that actually IS the remote that comes with it. Also supports Shield, Fire TV and Apple TV. It’s great combined with a popup card to save space on the dashboard.

[roelofkooijman (Roelof85)]

This is what it looks like, copied it from your code.

  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: custom:button-card
        icon: mdi:arrow-left-bottom
        tap_action:
          action: call-service
          service: remote.send_command
          service_data:
            entity_id: remote.mibox4
            command: BACK
        show_icon: true
        show_name: false
        styles:
          card:
            - box-shadow: none
            - padding: 0px
            - background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
            - border-radius: var(--mush-control-border-radius)
            - place-self: center
            - height: var(--mush-control-height)
          icon:
            - color: rgba(var(--cstm-rgb-on-secondary),0.9)
        size: 20px
        view_layout:
          grid-area: item1

The problem above what fixed by changing the following:

        - border-radius: 14px
        - height: 42px

Solutions mentioned by ArenaCloser in a PB, thanks again!

There is only one thing that is not working with me.
When i open Netflix and start watchting, the netflix logo on the remote does not get colored or something, any idea why is that?

[ArenaCloser]

When Netflix is running, check the value of the current_activity attribute of your remote. For me it’s com.netflix.ninja, maybe for you it’s different. You can get the button to light up by editing the if-statement:

@ArenaCloser

if (entity.attributes.current_activity == 'com.netflix.ninja')

[ArenaCloser]

Continuing the fun with more cards. Some printer cards have already been shared here, but I’ll just add to the variety with another one. Largely inspired by this post, it uses the custom bar-card.

Version with vertical bars

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Epson WF2540
    entity: sensor.epson_wf_2540_series
    secondary: |-
      {% if is_state('sensor.epson_wf_2540_series', 'idle') %}  
        Aan • Inactief
      {% elif is_state('sensor.epson_wf_2540_series', 'printing') %}   
        Aan • Printen...
      {% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}   
        Aan • Gestopt
      {% else %}
        Uit
      {% endif %}
    icon: mdi:printer
    icon_color: >-
      {{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
      "disabled" }}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
         background: none;
          --ha-card-box-shadow: 0px;
        }
  - type: custom:bar-card
    direction: up
    entities:
      - color: MediumTurquoise
        entity: sensor.epson_wf_2540_series_cyan_ink
        name: C
      - color: Gold
        entity: sensor.epson_wf_2540_series_yellow_ink
        name: 'Y'
      - color: MediumOrchid
        entity: sensor.epson_wf_2540_series_magenta_ink
        name: M
      - color: rgb(var(--cstm-rgb-on))
        entity: sensor.epson_wf_2540_series_black_ink
        name: B
    height: 120px
    positions:
      icon: 'off'
      value: outside
      name: outside
    target: 0
    stack: horizontal 
    card_mod:
      style: |
        ha-card {
          --bar-card-border-radius: 14px;
          margin: -12px -2px -24px -2px;
          box-shadow: none;
        }
        bar-card-name {
          font-size: 12px;
        }
        bar-card-value {
          font-size: 12px
        }

I’m not such a big fan of the thick bars though. After playing around I came up with this compact version with thin horizontal lines, I love it.

Version with horizontal bars

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Epson WF2540
    entity: sensor.epson_wf_2540_series
    secondary: |-
      {% if is_state('sensor.epson_wf_2540_series', 'idle') %}  
        Aan • Inactief
      {% elif is_state('sensor.epson_wf_2540_series', 'printing') %}   
        Aan • Printen...
      {% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}   
        Aan • Gestopt
      {% else %}
        Uit
      {% endif %}
    icon: mdi:printer
    icon_color: >-
      {{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
      "disabled" }}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
         background: none;
          --ha-card-box-shadow: 0px;
        }
  - type: custom:bar-card
    direction: right
    entities:
      - color: MediumTurquoise
        entity: sensor.epson_wf_2540_series_cyan_ink
        name: C
      - color: Gold
        entity: sensor.epson_wf_2540_series_yellow_ink
        name: 'Y'
      - color: MediumOrchid
        entity: sensor.epson_wf_2540_series_magenta_ink
        name: M
      - color: rgb(var(--cstm-rgb-on))
        entity: sensor.epson_wf_2540_series_black_ink
        name: B
    height: 8px
    positions:
      icon: 'off'
      value: 'off'
      name: 'off'
    target: 0
    stack: vertical
    card_mod:
      style: |
        ha-card {
          --bar-card-border-radius: 30px;
          margin: -12px -2px -8px -2px;
          box-shadow: none;
        }

For the black ink, I’m using a custom theme variable again that returns white color in dark mode, var(--cstm-rgb-on):

mode:
    light:
        cstm-rgb-on: 30, 30, 30
    dark:
        cstm-rgb-on: 255, 255, 255