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

Any idea if this also I possible fort Netflix app on AppleTV?

I do own an apple tv but I am not using it. As far as I know you can launch apps straight from HA. But launching a specific TV show is another subject.

Developer says : " The following fields are now available if an app sets them: TV series title, episode and season number."

So I guess it is possible. You might wanna check from developer settings.

Launching an app is possible, a specific show or movie is not.

2 Likes

Ok. As I said. It is not something I tried. I just referenced from a statement on your github page. It is nice to hear from the the creator. Thank you very much.

So ıt is possible with android TV but not AppleTV.

1 Like

does anyone know how to define a attribute instead of a state on a chip?

  • type: entity
    entity: device_tracker.melanie ← needs to be attribute → place: Home

Screenshot 2022-07-14 at 22.37.27

Like this? Just a test chip I’m looking at for my harmony hub activities.

You are looking for this line I think: content: '{{ state_attr(entity,"current_activity") }}'


type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    icon: |-
      {% if is_state_attr(entity,"current_activity","PowerOff") -%}
      mdi:power-plug-off
      {% elif is_state_attr(entity,"current_activity","Kodi Bedroom") -%}
      mdi:kodi
      {% elif is_state_attr(entity,"current_activity","Watch Netflix") -%}
      mdi:netflix
      {%- else %}
      mdi:remote
      {%- endif %}
    icon_color: |-
      {% if is_state_attr(entity,"current_activity","PowerOff") -%}
      red
      {% elif is_state_attr(entity,"current_activity","Kodi Bedroom") -%}
      blue
      {% elif is_state_attr(entity,"current_activity","Watch Netflix") -%}
      red
      {%- else %}
      yellow
      {%- endif %}
    content: '{{ state_attr(entity,"current_activity") }}'
    tap_action:
      action: none
    hold_action:
      action: none
    entity: remote.bedroom_hub
view_layout:
  position: main

Would it be possible to include the animate function you have for the Fan card but for the Mushroom entities card? I’m using that card and trying to see if I can get an icon to animate spin when turned on. Thanks!

Yes, it would be nice to include an animate option. In the meantime you can do it with card_mod. Have a look at the example here:

2 Likes

Amazing! It works! Would you happen to know how to make it only do the animation if a device is running?

Right now, I’ve got some if statements to make the icon change color according to the mode my HVAC is in. Can’t seem to figure out how to insert that card mod code into the if statements. Here’s my code:

type: custom:mushroom-template-card
primary: Edwin's Office
secondary: ''
icon: mdi:fan
tap_action:
  action: navigate
  navigation_path: edwinsofficeac
layout: vertical
entity: climate.edwin_s_office
icon_color: |-
  {% if is_state('climate.edwin_s_office', 'cool') %}
    blue
  {% endif %}
  {% if is_state('climate.edwin_s_office', 'amber') %}
    yellow
  {% endif %}
  {% if is_state('climate.edwin_s_office', 'heat') %}
    red
  {% endif %}
double_tap_action:
  action: toggle

Appreciate the help!

I’m guessing at your ACs off state but it can be done like this:

type: custom:mushroom-template-card
primary: Edwin's Office
secondary: ''
icon: mdi:fan
tap_action:
  action: navigate
  navigation_path: edwinsofficeac
layout: vertical
entity: climate.edwin_s_office
icon_color: |-
  {% if is_state(entity, 'cool') %}
    blue
  {% endif %}
  {% if is_state(entity, 'amber') %}
    yellow
  {% endif %}
  {% if is_state(entity, 'heat') %}
    red
  {% endif %}
double_tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.edwin_s_office', 'off') }}
      }
      @keyframes rotation {
        100% {
          transform: rotate(360deg);
        }
      }
2 Likes

Dude, you’re awesome. That works perfectly. Thanks a bunch!

1 Like

Is it possible to toggle an entity or device using a title card?

generally, what strategy would you consider if you were to adapt the mobile-friendly layout you have here to a wider screen e.g. a wall-mounted tablet? The room cards should be easy - they could be popups or just navigate to a new page. But for the ‘front page’, I think it’d be basically creating a grid and carving out the sections of the primary layout into cards that made sense in my own implementation, is that right?

I am working on creating a tablet version of my controls. Below is an example of one of my rooms.
I use the template-card from Thomas Loven GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. to give my view a specific layout. All my screens are built up to these specs (matching my specific screen and resolution on Samsung A7 tablet). I can assign any card to any specific area on my screen.

grid-template-columns: 12% 3% 28% 28% 28%
grid-template-rows: 32px 770px auto
grid-template-areas: |
  "top top top top top"
  "menu . col1 col2 col3"
  "menu . foot foot foot"

I’ve created a sort of template view which I use for each room, containing the same list on the left side of the screen and the same top bar. In my menu I am hiding the background and box shadow for all other rooms except the active one. By using normal Mushroom template cards my menu does not stand out to the rest of the design.

17 Likes

Yeeh that works!

any idea perhaps how to set the icon back as the picture from " [device_tracker.melanie] "

@piitaya - Not sure if this would be technically possible, but just putting it out there as an idea.
Would it be possible to include a ‘custom css/styling’ option for the template card & chip so that the extra css gets loaded with the card itself?

I ask as lots of people seem to use make use of the template cards to get custom cards, but invariably these require some extra css via card mod to look as desired - and while this works, it results in the weird loading experience where the card loads with no extra styling then the card mod css gets applied afterwards which can make things flicker / jump around as it re-renders.

Nice work done here! Looks very clean :slight_smile:

Can you share your config of the whole dashboard if you want? Very interested in this :scream:

Sure, see the whole view config below. Hidden the details for readability :slightly_smiling_face:
What you can also find there are the popups with browser_mod for thermostat controls with temperature graph and power usages graphs.

Had to move the copy to pastbin because of post character limit. You can find it here:

4 Likes

Could you please share how you achieve those ink level bars? thank you

Ok so you guys have helped me out removing the questions mark badge that appears when Entity is unavailable liek in this picture. But every so often it comes back and I have to pull down to refresh to fix it. Is there a way to stop having to do this? Or is this always going to happen because the device is in unavailable status?liek is there an extra part of code I should using for the badge?

I’m trying to get a mushroom template button to set a input_datetime to the current date. But keep getting this error, which I cannot seem to solve.

Failed to call service input_datetime/set_datetime. Could not parse date for dictionary value @ data[‘date’]

Somehow it does not accept my input when launched from the card. But if I use exactly the same input in the service section in develop tools, it works like a charm… (see bottom)

Do you need to update something on variables before this type of service runs from a tap_action??

type: custom:mushroom-template-card
entity: input_datetime.kattenbak_gedaan
primary: Last time was '{{ states("input_datetime.kattenbak_gedaan") }}'
secondary: '{{ (as_timestamp(now()) | timestamp_custom("%Y-%m-%d", true)) }}'
icon: mdi:emoticon-poop
icon_color: orange
tap_action:
  action: call-service
  service: input_datetime.set_datetime
  service_data:
    date: '{{ (as_timestamp(now()) | timestamp_custom("%Y-%m-%d", true)) }}'
  target:
    entity_id: input_datetime.kattenbak_gedaan

Dev Tools input

service: input_datetime.set_datetime
data:
  date: '{{ (as_timestamp(now()) | timestamp_custom("%Y-%m-%d", true)) }}'
target:
  entity_id: input_datetime.kattenbak_gedaan
1 Like