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

Tim_Knowlden · August 25, 2022, 6:35pm

Hi, So I’ve taken the bulk of your code to produce a media card, but still cannot work out how to achieve.

Name
App Name & Film/TV Show or Artist & Song Title.

Plus I can’t work out how to have the background of an image blend into a linear gradient as the standard mini media player does.

cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.sonos
    use_media_info: true
    use_media_artwork: false
    icon: mdi:play
    volume_controls:
      - volume_buttons
      - volume_mute
    media_controls:
      - previous
      - play_pause_stop
      - next
      - on_off
      - shuffle
      - repeat
    tap_action:
      action: more-info
  - type: conditional
    conditions:
      - entity: media_player.sonos
        state_not: 'off'
      - entity: media_player.sonos
        state_not: idle
    card:
      entity: media_player.sonos
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 42px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(63, 81, 181);
              --ha-card-border-radius: 12px;
            }
    alignment: justify
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: ;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      {% if is_state('media_player.sonos', 'off') %}
      {% else %}
        background-image: url( '{{ state_attr( "media_player.sonos", "entity_picture" ) }}' );
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: rgba(var(--rgb-card-background-color), 0.8);
        background-blend-mode: overlay;
        position: relative;
      {% endif %}  
    }

Tim_Knowlden · August 25, 2022, 6:36pm

davidnestico · August 25, 2022, 7:10pm

Do you know if its possible to add badges to mushroom chips?

roccocadwallender · August 25, 2022, 11:33pm

Is there any way in which I can create a permanent dashboard that will be displayed all the time on a google home hub. ive tried to create a mushroom title card with the time and date on but I can’t find a way to increase the height and font size of the card.

Proche72 · August 26, 2022, 5:23am

Hey, is there a way how to make the cards the same height? the front door one is stack in the card, the alarmo is standard mushroom alarm panel.

EDIT: I figured it out - it was the fill container settings in the alarm panel card

danieldotnl · August 26, 2022, 7:50am

Any idea how I can align the icons on the right side when I have less than 4?

Tim_Knowlden · August 26, 2022, 8:17am

Does anyone know what the variable is for the background colour on original mini media player? So I can blend from cover art to the background?

nsoares · August 26, 2022, 8:44am

Thanks a TON @rhysb . You are a life saver!

Posreg · August 26, 2022, 10:06am

welcome

for the config check I use the below component. There are few prerequisites (like appdeamon) you need to do

berkans · August 26, 2022, 10:57am

Thank you very much. I do have a github page but it only consists the details about my football page. But I will write down every detail on my pages as soon as I finish developing my mobile interface.

tfmeier · August 26, 2022, 11:06am

I’m trying to get my audio/video setup into Mushroom and try to conceptualise how this should work and I have a mental block.

Here are the key components

Audio run via Logitech Media Server and hardware/software players (Squeezebox); I have player entities for these players
Audio is distributed through the house via a Control4 matrix amp; I have full access to the amp from Home Assistant thanks to @bigmac’s code. As a matrix amp you can route any input signal to any output. I have the following:
- Home Assistant dropdown helpers for the audio input
- Home Assistant toggle helpers to switch the channels on/off
- HA number helpers for the volume for each channel
- HA dropdown helpers for the zone selection
Denon AVR (entity: media_player.denon_avr_3313) with the following attributes:
- source_list
- sound_mode_list
- I’d like to make these attributes available to the UI
LG TV connected to the AVR via HDMI; the TV has various attributes I’d like to make available to the UI

I’d like to be able to create a “media center” card of sorts with the following:

TV on/off and access to attributes; e.g. source_list, volume etc.
AVR on/off with access to the various attriutes
Control the various LMS players (on/off, start/stop, volume, music selection

What’s my best bet here to make this blend in with mushroom? There’s the universal media player, individual media players? How do I get access to the attributes from a mushroom card?

Would like to put together a strawman of the solution but don’t really know where to start…

tfmeier · August 26, 2022, 12:24pm

Would you mind showing the card as well that goes with version 2 of your code? I’m trying to visualise the code as I’m in the midst of trying to create my “media center” as well (earlier post) and at the moment it’s a bit overwhelming as there are lots of moving parts

Tim_Knowlden · August 26, 2022, 12:55pm

Which RSS fees are you getting your news from? I tried to use BBC but it won’t get the images

Tim_Knowlden · August 26, 2022, 1:08pm

If you look at the screenshot I posted it’s the same as that except the album art covers the whole background

Andrea_Ciullini · August 26, 2022, 3:39pm

Hi,
to use sidebar card, do I need to use YAML mode ?

danieldotnl · August 26, 2022, 5:54pm

Never mind, I fixed it:

I just added empty mushroom template cards.

danieldotnl · August 26, 2022, 7:29pm

I have a different question. I find myself sometimes unsure how I configured a mushroom entity or template card. E.g. is it “clickable” or not? Does clicking on the tv icon toggle the tv, or navigate me to my media view?
Does anyone else experience this as well, and how do you solve it?
I was thinking about a border around the icons, for actionable cards and a dotted border for navigational cards. Cards without border are then just informational.
Any hint on how to achieve that (with card mod) would be greatly appreciated as well!

atomicpapa · August 27, 2022, 1:12am

Here ya go…

sensor:
  - platform: feedparser
    name: Westham
    feed_url: "https://www.football.london/west-ham-united-fc/?service=rss"
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    scan_interval:
      hours: 1
    # inclusions:
    #   - title
    #   - link
    #   - description
    #   - media
    #   - pubDate
    # exclusions:
    #   - language

  - platform: feedparser
    name: Scores
    feed_url: "https://crssnt.com/preview?id=xxxxxxxxxxx&name=OutputEng"
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    scan_interval:
      hours: 1

  - platform: feedparser
    name: EPL News
    feed_url: "https://www.espn.co.uk/espn/rss/football/news"
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    scan_interval:
      hours: 1

  - platform: feedparser
    name: Forest
    feed_url: "https://www.nottinghampost.com/sport/?service=rss"
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    scan_interval:
      hours: 1

  - platform: feedparser
    name: Liverpool
    feed_url: "https://www.liverpool.com/?service=rss"
    date_format: "%a, %d %b %Y %H:%M:%S %Z"
    scan_interval:
      hours: 1

esr2 · August 27, 2022, 2:31am

You can use a layout card (https://github.com/thomasloven/lovelace-layout-card) to get further control on layouts rather than empty template cards in you prefer.

Sylwester · August 27, 2022, 7:56am

Thank you. I think now is working properly.

Is it possible to change font size of title or subtitle in mushroom title card? Also height of card?

Regards