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

Share your Projects!
,
6179

very nicely made & I just have a question how did you make this sensor?

1 Like
6180

Waze integration.

1 Like
6181

ok thanks how did you do the departure point is this from your work to home or from where you are at the moment ?

6182

It’s from wherever I currently am and hides when I’m home.

Origin: person.rhys
Destination: zone.home

1 Like
6183

Wow, much cleaner for sure! I tried to add some logic around the icon but it doesn’t seem to like it though, just shows no icon? Same for icon color too.

    type: custom:mushroom-entity-card
    entity: binary_sensor.hall_motion_sensor_occupancy
    secondary_info: last-updated
    name: Hall Motion
    icon: |-
      {% if is_state("binary_sensor.hall_motion_sensor_occupancy", 'off') %}
        mdi:motion-sensor-off
      {% elif is_state("binary_sensor.hall_motion_sensor_occupancy", 'on') %}   
        mdi:motion-sensor
      {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary:before {
            content: "{{ 'Detected' if is_state(config.entity, 'on') else 'Clear' }} / ";
          }
1 Like
6184

No, it’s an entity card so you can’t template it. The Icon should automatically change with motion already. Same for color. Are you wanting to do something different?

6185

thanks man

1 Like
6186

Sorry I missed that you’d changed it to an entity card. I see the icon and colour changes anyway. The idea I had was it would be green when clear and red when detected. The icon is actually fine the way it is.

6187

That’s easy enough:

type: custom:mushroom-entity-card
entity: binary_sensor.lounge_motion_occupancy
secondary_info: last-updated
name: Lounge Motion
icon_color: red
card_mod:
  style:
    mushroom-state-info$: |
      .secondary:before {
        content: "{{ 'detected' if is_state(config.entity, 'on') else 'clear' }} / ";
      }
    .: |
      :host {
        --mush-rgb-disabled: var(--rgb-green);
      }
3 Likes
6188

Could be possible to use something similar to decluttering card with this?

The code is repetitive for every person that you wanted to be added.

6189

Yes, should work fine.

6190

That’s perfect! I got to ask, how do you learn this, I’d really like to stop pestering over simple things lol

1 Like
6191

Create a new empty dash and have a play. See what works and what doesn’t. You can copy in some of the examples to help you get started :grin:.

1 Like
6192

Hey @rhysb, I still need your help. Can you tell me how to set the icon color based on the lamp color? :slight_smile:

6193

Can you share code card with room?

6194

Awesome and thanks for sharing all of this!

Wonder what is the entity for this mobile_app_rhys_phone I am trying to find the equivalent on my current configuration and what do you use for the sensor.rhys_phone_wifi_signal_strength :thinking:

1 Like
6195

Where can i find the latest color variables of mushroom theme in the github repo??

The variables mentioned in the repository says mush-rgb-red, mush-rgb-blue etc and is not working in the card-mod. But when i tried with the ones given in your code, it works.

6196

Do you mean this?

import { css } from "lit";
import * as Color from "color";

export const COLORS = [
    "red",
    "pink",
    "purple",
    "deep-purple",
    "indigo",
    "blue",
    "light-blue",
    "cyan",
    "teal",
    "green",
    "light-green",
    "lime",
    "yellow",
    "amber",
    "orange",
    "deep-orange",
    "brown",
    "grey",
    "blue-grey",
    "black",
    "white",
    "disabled",
];

export function computeRgbColor(color: string): string {
    if (COLORS.includes(color)) {
        return `var(--rgb-${color})`;
    } else if (color.startsWith("#")) {
        try {
            return Color.rgb(color).rgb().array().join(", ");
        } catch (err) {
            return "";
        }
    }
    return color;
}

export function computeColorName(color: string): string {
    return color
        .split("-")
        .map((s) => capitalizeFirstLetter(s))
        .join(" ");
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

export const defaultColorCss = css`
    --default-red: 244, 67, 54;
    --default-pink: 233, 30, 99;
    --default-purple: 156, 39, 176;
    --default-deep-purple: 103, 58, 183;
    --default-indigo: 63, 81, 181;
    --default-blue: 33, 150, 243;
    --default-light-blue: 3, 169, 244;
    --default-cyan: 0, 188, 212;
    --default-teal: 0, 150, 136;
    --default-green: 76, 175, 80;
    --default-light-green: 139, 195, 74;
    --default-lime: 205, 220, 57;
    --default-yellow: 255, 235, 59;
    --default-amber: 255, 193, 7;
    --default-orange: 255, 152, 0;
    --default-deep-orange: 255, 87, 34;
    --default-brown: 121, 85, 72;
    --default-grey: 158, 158, 158;
    --default-blue-grey: 96, 125, 139;
    --default-black: 0, 0, 0;
    --default-white: 255, 255, 255;
    --default-disabled: 189, 189, 189;
`;

export const defaultDarkColorCss = css`
    --default-disabled: 111, 111, 111;
`;

Reference?

6197

All the phone entities are provided by the HA Android app. I’m sure the ios app provides similar entities.

6198

You’re correct, I did some more digging on this matter and found these docs however, Android seems to have more or different sensors than iOS.

1 Like