Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Sorry. An icon. e.g. an arrow.

Thanks Goody.

NP. I just want to be sure Iā€™m answering the right question. I donā€™t think that area between the template icon and the secondary information field is configurable, but you may be able to insert an ASCII arrow in the template value itself that could be close enough. Otherwise, maybe youā€™re trying to use an icon that has an arrow modifier (i.e. tiny icon overlaid on a larger icon), but mdi:light-recessed does not have a variant like that. Here is the list of mdi icons I reference.

If Iā€™m still missing what youā€™re trying to do, please post a screenshot of where you saw it.

Didnt work

Oh, right. I think I discovered that too. You can just use a hyphen - as a placeholder.

1 Like

Iā€™m just trying to replicate this the below. Just with a temperature in front of it (and not a lock, obviously).

image

Buddy, this may offend you, butā€¦

Your plan to have these fancy cards without having any coding background and/or patience is like getting your driverā€™s liscence and insisting to buy a ferrari: you canā€™t handle it! (And probably crash it the first hour).

Hereā€™s something to start with although almost all guys shared their code with similar cards before:

image

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-template-card
        primary: Hallways 
        secondary: up & down
        icon: mdi:light-recessed
        entity: light.MAYBEAGROUPOFYOURHALLWAYLIGHTS
        icon_color: |-
          {% if is_state('light.MAYBEAGROUPOFYOURHALLWAYLIGHTS', 'on') %}
            orange
          {% endif %}
        fill_container: false
        multiline_secondary: true
        tap_action:
          action: navigate
          navigation_path: CARDTOYOURHALLWAYCOMBINATIONVIEW
        hold_action:
          action: toggle
        double_tap_action:
          action: none
      - square: false
        columns: 4
        type: grid
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: null
                double_tap_action:
                  action: none
                content: 'ā†‘{{ states(''sensor.DOWNSTAIRSHALLWAYTEMP') | float }}Ā°C'
                entity: sensor.DOWNSTAIRSHALLWAYTEMP
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: center
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: null
                double_tap_action:
                  action: none
                content: 'ā†“{{ states(''sensor.UPSTAIRSHALLWAYTEMP'') | float }}Ā°F'
                entity: sensor.UPSTAIRSHALLWAYTEMP
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: center
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Whatever
        secondary:  Room
        icon: mdi:light-recessed
        entity: light.WHATEVERROOM
        icon_color: |-
          {% if is_state('light.WHATEVERROOM', 'on') %}
            orange
          {% endif %}
        fill_container: false
        multiline_secondary: true
        tap_action:
          action: navigate
          navigation_path: WHATEVERROOM
        hold_action:
          action: toggle
        double_tap_action:
          action: none
      - square: false
        columns: 4
        type: grid
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: null
                double_tap_action:
                  action: none
                content: 'ā†‘{{ states(''sensor.WHATEVERROOM_1'') | float }}Ā°F'
                entity: sensor.WHATEVERROOM_1
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: center
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: null
                double_tap_action:
                  action: none
                content: 'ā†“{{ states(''sensor.WHATEVERROOM_2') | float }}Ā°F'
                entity: sensor.WHATEVERROOM_2
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: center

And now itā€™s your turn toā€¦

ā€¦read this whole thread.
ā€¦read about Horizontal Stack Card.
ā€¦read about Stack-In-Card
ā€¦read about templating
ā€¦read about card-mod.
ā€¦read this whole thread again.

We all want it all and of course rightnow but that ainā€™t gonna work! Just copying code of everyone is the redneck-repair-version auf coding. And as I for myself have zero coding background I learned things the hard way AND had a steep learning curve as I just read and tested everything over and over again.

3 Likes

That bottom row is a Mushroom Chips card. You would use a Template or Weather chip for temperature.

More here: lovelace-mushroom/chips.md at b5c361bd29e5788f3ad814d99453c50d08e741ea Ā· piitaya/lovelace-mushroom Ā· GitHub

To template, youā€™ll need to learn templating as @RodgerDodger mentioned. Itā€™s actually not too difficult once you learn the basic structure. Pay attention to using {{ vs {% and start with otherā€™s working templates substituting your own entities to start.

That and a couple stack-in cards to wrap around the Template and Chips card is all you would need to get the look and function in the screenshot.

Card_mod (and themes) would allow you to further customize the look as youā€™re seeing with some of these more recent posts.

Also, YouTube is your friend :wink:

1 Like

Iā€™m having a bit of trouble with this card:

- type: custom:mushroom-entity-card
  entity: switch.tv
  icon: mdi:lightbulb
  name: Entertainment Group
  tap_action:
    action: toggle
  style: |
     ha-card {                     
         background-color: rgba(255, 255, 255, .1);
      }

It runs the switch.tv to on and everything runs as expected problem is itā€™s not turning it off. Hereā€™s the entire thing. Any suggestions/help would be greatly appreciated!!! Thank you!

tv switch ā†’

- platform: template
  switches:
    tv:
      value_template: "{{ is_state('media_player.vizio_smartcast', 'on') }}"
      turn_off:
        service: script.turn_off
        target:
          entity_id: script.tv_off
      turn_on:
        service: script.turn_on
        target:
          entity_id: script.tv_on

tv script ā†’

tv_on:
  alias: turn on tv
  sequence:
    - service: media_player.turn_on
      data:
        entity_id: media_player.shield

    - service: light.turn_on
      data:
        entity_id: light.tv_stand_2

    - service: media_player.turn_on
      data:
        entity_id: media_player.vizio_smartcast
    - delay: "00:01:00"

    - service: media_player.select_source
      target:
        entity_id: media_player.vizio_smartcast
      data:
        source: HDMI-3

    - service: switch.turn_on
      data:
        entity_id: switch.living_room_ambient_tv
    - delay: "00:01:30"

tv_off:
  alias: turn off tv
  sequence:
    - service: light.turn_off
      data:
        entity_id: light.tv_stand_2

    - service: switch.turn_off
      data:
        entity_id: switch.living_room_ambient_tv

    - service: media_player.turn_off
      data:
        entity_id: media_player.vizio_smartcast

    - service: media_player.turn_off
      data:
        entity_id: media_player.shield

Buddy, yes, your response was offensive. Iā€™ve read through this thread and Iā€™ve seen how incredibly helpful you can be; so this was a surprise. :wink: (Who said I didnā€™t have patience and tenacity?)

I was missing a few key details: Stack-In-Card and card-mod. Iā€™ve read up on them and am off and running now. Thank you.

Maybe donā€™t assume someoneā€™s aptitude and willingness to learn next time? Ironically, you mentioned it in your last statement. You learned things the hard way. You were me once scratching your head trying to pull stuff together. Thatā€™s all Iā€™m doing here.

While somewhat crass, I appreciate the response nonetheless. You set me on the proper course.

1 Like

From a fellow aviation enthusiast, thank you. I was missing Stack-In-Card and card-mod reading. For some reason, I had it in my head that this was all done with mushroom. Thanks again.

p.s. Mushroom and YT is what got me down this rabbit hole! Well, that and Vera alienating its original userbase and forcing them to look elsewhere. Happy to be here now.

2 Likes

Anyone had any luck inserting the Mushroom theme variables into a non-Mushroom theme? Specifically, Iā€™m trying to affect font sizes. As a test, I copied all of the font-size variables from here, inserted them in my current theme (iOS) and set them really high, but it doesnā€™t do anything.

      mush-title-font-size: 44px
      mush-subtitle-font-size: 44px
      mush-card-primary-font-size: 44px
      mush-card-secondary-font-size: 44px
      mush-chip-font-size: 44em

EDIT: Nevermind, apparently reloading themes requires an HA restart or calling the frontend.reload_themes service. I looked under Developer Tools|YAML, but it wasnā€™t there (seemingly because those only reload backend things). Anyways, those font settings are working like a champ now!

Yes it is a steep learning curveā€¦ thatā€™s why I [am not a coder either] will post my successes to share with others who may have a similiar issue. I ask may questions and about 50% go unanswered and I realize that no one is obligted to help but I do appreciate those who do without making me feel like an idiot.

My educational background is a teacherā€¦ my profession is I own my own contracting business. It took me years to learn php, js and now Iā€™m trying to learn this. It takes some longer then others but if someone is trying helping them is and/or sharing knowledge is what furthers all of this.

I Thank you for help youā€™ve given me and yes people do want it right now but if not now then when?
I am in process of writing things that take a few moving pieces to make them work and I have just posted one of them today that I have a question about. If no one helps thatā€™s okay sooner or later Iā€™ll figure it outā€¦ or I wonā€™t right now. Not the end of the world. But you canā€™t learn if you donā€™t at least try. So if someone is trying no matter if I think theyā€™re over their head or not Iā€™ll still help them if I can.
We all started somewhere.

3 Likes

Hang in there!! Mushroom cards are awesome. Iā€™m just starting myself and am very happy with the results so far. I do constant searches here and on Google looking for examplesā€¦ things I can try or taking ideas from what I find to better enhance my setup.

Youā€™re doing greatā€¦ keep it up!

These are the 3 bedrooms in my house. Iā€™m happy so far with the results but I know Iā€™ll want to make changes as soon as I get some time under my belt with thisā€¦

1 Like

I think it is doneā€¦ at least for now. :smiley:

IMG_6846

IMG_6847

3 Likes

As weā€™re all living in a world where everybody gets offended by nearly everything.

The point I wanted to state is:
Donā€™t want/try too much from the beginning or you maybe get frustrated because nothing works.
Climb the ladder rung by rung. Of course you can set your goal to a no handed superman tailwhip over a burning RadioShack but youā€™d probably better off by starting to ride without training wheels, right?

Maybe it was a stressful morning but it felt like: gimme the code now!

Keep it up, read a lot, be disappointed because trial and error sucks sometimes or your SO doesnā€™t give a damn about that wobbling green mushy whatever thing you handcoded in a 5h evening session butā€¦ be happy as a kid if that one tweak you almost googled back to Alta Vista now works and put on that honest little smile on your face.

TL;DR

And now back to work! Code has to be coded!

9 Likes

This would be awesome!

Can you change the switch state in Developer Tools or even see the state? Does the service call in Developer Tools show you something?

Do them scripts work if you fire them individually?

Looking for some advice on how best to handle this problem. Or should I be looking for other solutions with other cards?
I have been trying to get a mushroom template card to produce the results I am after and I am almost there.
Screen Shot 2022-06-11 at 13.50.47
This card changes entity value (run time) based on whether the AC is idle or cooling. My styling also changes the background color when cooling. (Will update for heating and idle later if this gets sorted.)
Now the problem: I find no way to center that value on the card. Tried various card-mod styles I have researched and none seem to apply. Example below.

If it is NOT possible to center this template card, is there another suggested card where I can still template the states I need to show?

Cheers!

      - type: custom:mushroom-template-card
        primary: |
          {% set state=states('sensor.hvac_action')%}
          {% if state == 'idle' %}
          {{states('sensor.idle_time_last_hh_mm_ss')}}
          {% elif state == 'cooling' %}
          {{states('sensor.cool_time_last_hh_mm_ss')}}
          {% endif %}
        secondary: null
        icon: null
        style: |
          ha-card {
            --card-primary-font-size: 28px;
            --card-primary-font-weight: normal;
            {% set state=states('sensor.hvac_action')%}
            {% if state == 'idle' %}
            {% elif state == 'cooling' %}
            --ha-card-background: rgba(0, 190, 255, 0.1);
            {% endif %}
          }

Was asked to share my welcome card code by @Boostin4HP on the HA Facebook group, so here you go!

-Center weather chip navigates to the weather page
-Right temp pops up thermostat card and shows cooling/heating/idle states with colors on icon
-Google calendar card

welcome_card

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.weatherflow_air_temperature_2
            icon: mdi:sun-thermometer-outline
            icon_color: yellow
            content: '{{ states(entity) }} Ā°F'
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod: null
            alignment: center
            style: |
              ha-card {
                  --chip-box-shadow: 0px 0px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: weather
            entity: weather.weatherflow_day_based_forecast_2
            show_conditions: true
            show_temperature: false
            tap_action:
              action: navigate
              navigation_path: weather
            hold_action:
              action: more-info
            double_tap_action:
              action: none
            card_mod: null
            style: |
              ha-card {
                  --chip-box-shadow: 0px 0px;
              }
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.thermostat_temperature
            content: '{{ states(entity)}} Ā°F'
            icon_color: |-
              {% set state=states('sensor.hvac_action') %}
              {% if state=='cooling' %}
              blue
              {% elif state=='heating' %}
              red
              {% elif state=='idle' %}
              grey
              {% endif %}
            icon: mdi:thermometer
            tap_action:
              action: fire-dom-event
              browser_mod:
                command: popup
                title: Thermostat
                card:
                  type: thermostat
                  entity: climate.z_wave_thermostat_2
            hold_action:
              action: none
            double_tap_action:
              action: none
            alignment: end
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }
        alignment: end
    card_mod: null
    style: |
      ha-card {
             box-shadow: 0px 0px;
          }
  - type: custom:mushroom-title-card
    title: >-
      {% if now().hour  < 5 %} Night{% elif now().hour < 12 %} Morning{% elif
      now().hour < 18 %} Afternoon{% else %} Evening{% endif %}, {{user}}!
    subtitle: Welcome to Home Assistant
  - type: custom:atomic-calendar-revive
    entities:
      - entity: calendar.your_calendar_here
    name: null
    enableModeChange: true
    firstDayOfWeek: 1
    maxDaysToShow: 1
    refreshInterval: 240
    showLoader: false
    hideFinishedEvents: true
    showLocation: false
    hideDuplicates: true
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:flask
        icon_color: red
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lab
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary: Lab
        multiline_secondary: false
      - type: custom:mushroom-template-card
        icon: mdi:outdoor-lamp
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        entity: input_boolean.auto_back_porch_lights
        icon_color: orange
        secondary: >-
          BP Auto

          {{ iif(is_state('input_boolean.auto_back_porch_lights', 'on'), '',
          'off') }}
        multiline_secondary: true
      - type: custom:mushroom-template-card
        icon: mdi:home-assistant
        icon_color: blue
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: system
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary: System
      - type: custom:mushroom-template-card
        icon: mdi:coach-lamp
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: green
        secondary: >-
          FP Auto

          {{ iif(is_state('input_boolean.auto_front_porch_lights', 'on'), '',
          'off') }}
        entity: input_boolean.auto_front_porch_lights
        multiline_secondary: true
        fill_container: false
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb-on
        icon_color: purple
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary: '  Lights'
        card_mod: null
    style: |
      ha-card {
               --chip-box-shadow: 0px 0px;
           }

2 Likes

It was actually your nice blue scene card but I love the welcome card too!