Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

sensei73 · October 19, 2022, 6:43am

rhysb:

  secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style: 
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                  font-size: 14px !important;
                  font-weight: bold !important;
                  color: var(--primary-text-color) !important;
                }
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }

Thanks for sharing! I love your design!! to @rhysb Do you think it is possible to animate the opening of the conditional cards to make it less brutal? Thanks in advance!

codedmind · October 19, 2022, 7:08am

Please share the code

Thekholm · October 19, 2022, 7:50am

Wow, you did a great job Thanks alot!
This is how I did it for my self.

The Code for Nest Cam Card.

You need - Stack in Card (Hacs)
You need - Layout Card (Hacs)
If you need to change the size of the images or border size, just change the bold text

type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(–masonry-view-card-margin, 0px 8px 14px)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Nest Cam
    secondary: Driveway
    icon: mdi:camera
    icon_color: blue
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
    cards:
      - show_state: false
        show_name: false
        camera_view: auto
        type: picture-entity
        entity: camera.uppfart
        camera_image: camera.uppfart
        theme: Mushroom
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
            }

Best regards
Thekholm

RASBR · October 19, 2022, 8:06am

Thank you very much. You’ve been a great help… both examples are informative and should be helpful down the road.
Rami

Danny2100 · October 19, 2022, 8:58am

That removed both borders, the mushroom cards and horizontal stack card column borders.

I would prefer just the mushroom horizontal column card borders be removed. The way the mushroom card borders were before was fine. Essentially removing the border of the stack-in-card only.

Danny2100 · October 19, 2022, 9:06am

Hm for some reason I am unable to get that to work. I tried doing it at the mushroom card level and at the stack in card level.

I tried this piece

card_mod:
  style:
    mushroom-state-info$: |
      * {
           text-align: center;
          }

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
card_mod:
  style: |
    ha-card { 
      background: transparent;
      --ha-card-box-shadow: none;
    }

Bpasop · October 19, 2022, 12:57pm

I want to recreate what you are doing. Can you show us also the code of you’re automation.plug_2_uit . I don’t how I could do this.

burg93 · October 19, 2022, 1:30pm

Wonder why the official mushroom card project has slowed down on development recently. I can’t remember the last time I saw an update in HACs and there’s some really good suggestions in here with animated icons and new cards that would be great to see included. Perhaps since the original creator joined nabu there’s no time, or … it’s being built in to replace the pants out the box theming!

janiv · October 19, 2022, 1:37pm

When I use this it doesn’t work.

secondary: >-
Currently :
‘{{states(’‘sensor.lr_hvac_setpoint’’) | round(1)}} C’

When I remove the “Currently :”, it all works.

How do I combine text and state?
Thanks

Moss · October 19, 2022, 2:11pm

Try this…

‘Currently:’

janiv · October 19, 2022, 3:10pm

Thanks, Not working

KaherdinTristan · October 19, 2022, 3:15pm

KaherdinTristan · October 19, 2022, 3:18pm

Please use Ctrl+E

when sharing code

ArenaCloser · October 19, 2022, 3:58pm

Does it work if you move the apostrophe?

secondary: >-
'Currently: 
{{states("sensor.lr_hvac_setpoint") | round(1)}} C'

ArenaCloser · October 19, 2022, 4:01pm

Sure. All it does is turn off a switch at the time set by the input_datetime variable that is used in the alarm card.

alias: 'Thuis modus: ''s nachts Plug 2 uit'
description: ''
trigger:
  - platform: time
    at: input_datetime.plug_2_s_avonds_uit
condition: []
action:
  - service: switch.turn_off
    data: {}
    target:
      entity_id: switch.local_tuya_plug_2
mode: single

janiv · October 19, 2022, 4:14pm

Thank you all!

secondary: >-
SetPoint: {{states(‘sensor.lr_hvac_setpoint_’) | round(1)}}°c
Current: {{(states(‘sensor.lr_hvac_target_setpointa’)) |
float/10 | round(1)}}°c

Worked.

Jarne_Roussard · October 19, 2022, 6:59pm

nice how have you person cards making can you share code ?

dsagdfgsFD · October 19, 2022, 7:32pm

type: custom:stack-in-card
mode: vertical
cards:

type: custom:mushroom-media-player-card
entity: media_player.alle_hojtalere_gruppe
media_controls:
- play_pause_stop
- next
  volume_controls:
- volume_mute
  layout: horizontal
  use_media_info: true
type: custom:mushroom-media-player-card
entity: media_player.alle_hojtalere_gruppe
fill_container: false
show_volume_level: true
use_media_info: false
media_controls: []
volume_controls:
- volume_set
- volume_mute
  collapsible_controls: false
  primary_info: none
  layout: horizontal
  secondary_info: none
  icon_type: none
  style: |
  ha-card {
  –control-height: 30px;
  }
type: custom:mushroom-media-player-card
entity: media_player.nest_audio
icon_type: none
volume_controls:
- volume_set
- volume_mute
  layout: horizontal
  media_controls: []
  show_volume_level: false
  name: Køkken Ø’en
  style: |
  ha-card {
  –control-height: 30px;
  }
  mushroom-state-item {
  max-width: 100px !important;
  }
type: custom:mushroom-media-player-card
entity: media_player.lyd_alrum
icon_type: none
volume_controls:
- volume_set
- volume_mute
  layout: horizontal
  media_controls: []
  show_volume_level: false
  name: Cerwin Vega
  style: |
  ha-card {
  –control-height: 30px;
  }
  mushroom-state-item {
  max-width: 100px !important;
  }
type: custom:mushroom-media-player-card
entity: media_player.badevaerelse
icon_type: none
volume_controls:
- volume_set
- volume_mute
  layout: horizontal
  media_controls: []
  show_volume_level: false
  name: Badeværelset
  style: |
  ha-card {
  –control-height: 30px;
  }
  mushroom-state-item {
  max-width: 100px !important;
  }
type: custom:mushroom-media-player-card
entity: media_player.alrum
icon_type: none
volume_controls:
- volume_set
- volume_mute
  layout: horizontal
  media_controls: []
  show_volume_level: false
  name: Baggangen
  style: |
  ha-card {
  –control-height: 30px;
  }
  mushroom-state-item {
  max-width: 100px !important;
  }
type: custom:mushroom-media-player-card
entity: media_player.garage
icon_type: none
volume_controls:
- volume_set
- volume_mute
  layout: horizontal
  media_controls: []
  show_volume_level: false
  name: Garagen
  style: |
  ha-card {
  –control-height: 30px;
  }
  mushroom-state-item {
  max-width: 100px !important;
  }
  card_mod:
  style: |
  ha-card {
  –mush-spacing: 7px;
  }
  mushroom-state-item {
  max-width: 90px !important;
  }

Sireone · October 19, 2022, 7:55pm

I know it’s probably in this thread somewhere though the 3400+ posts, but would someone mind sharing their mushroom created dashboard on tablets? Seems that most I’ve seen were for mobile devices and when I try to build this on my 10" fire tablet, I can’t see to get this to fill the screen using horizontal stack cards (not lining up correctly). Could I also be using the wrong card?

berkans · October 19, 2022, 7:56pm

I have finished my “What to wear page”

Everything you need from stracth is on my github wiki page.

I have explained the setup step by step with a language anyone can understand.

With this little project:

Home Assistant will show you what to wear depending on the temperature inside the house.
Photos are dynamic. They change depending on the temperature values of the house.
You can see all the room temperatures individually within the page.
Fully customizable. You can even use your own photos
Telegram automation is also included.
You can also receive what to wear pictures from telegram as soon you arrive home.
Telegram also tells you the rooms with the lowest and highest temperatures in the house, along with their names.
There is also a button to expand the picture quantity whether to show 2 or 3 pictures in the page.

There will be more editions to this page. The fireplace picture shown at the top is a still photo. It will be dynamic in the next update to show the picture of the hottest room within the house and the room picture will also constatntly change depending on the temperature. And the final addition will be a second button next to “More” which will deactivate telegram automation.

Edit: Next update will also bring thermostat or climate controls to the page. When the page finalize anything regarding the heat control can be accessed from a single page.