My Custom Cards for Minimalist UI

[andyblac (Andy Blackburn)]

I thought I would share my custom cards, I would like your feedback on these.

The dev branch will be used for the bleeding edge and could have bugs, but if you find any issues in the master or dev brach please submit a git issue, and I take a look.

GitHub - andyblac/UI-Minimalist-Custom-Cards: A modified version of...

I did these for myself, but I hope you like.

guides are here

If your having issue with these cards, make sure you have all the necessary frontend integrations installed.

first you need to have installed UI Lovelace Minimalist, if you have not installed it yet click here to install it.

Then restart Home Assistant.

Then to go to , then click on Configure, then make sure that Include custom card resources it's depending on. is UN-CHECKED, and click SUBMIT

then, goto to HACS → frontend and install these:

button-card
lovelace-card-mod
mini-graph-card
mini-media-player
my-cards
light-entity-card
auto-entities
simple-weather-card

my-cards is one integration that might not be in HACS repository click on the link to install it

Then restart Home Assistant again, then you can proceed to add my custom cards, by downloading them and upload the folders to Home assistant folder /config/ui_lovelace_minimalist/custom_cards

[andyblac (Andy Blackburn)]

v2.0 beta1of my Custom Room card is up on my github, there are few breaking changes to bring inline with minimalist docs,

the breaking changes are:

• use ulm_custom_card_andyblac_room_color to set the room colour, instead on using ulm templates, this now lets you use theme colours ie the color in themes file of --color-red can be used as ulm_custom_card_andyblac_room_color: red
• same for entity on state colours, use ulm_custom_card_andyblac_room_icon_color_on
• room sensor icon colours, will now default to that of ulm_custom_card_andyblac_room_color but can be over ridden by using ulm_custom_card_andyblac_room_sensor_color or ulm_custom_card_andyblac_room_sensor_color_on

these changes make using icon animation templates (coming soon) alot easier.

hers an exmaple.

# Bathroom
  - type: custom:button-card
    template:
      - custom_card_andyblac_room
    name: "Bathroom"
    icon: mdi:shower-head
    tap_action:
      action: navigate
      navigation_path: bathroom
    variables:
      ulm_custom_card_andyblac_room_color: blue
      sensor_label_1: sensor.bathroom_humidity_sensor_temperature
      sensor_label_2: sensor.bathroom_humidity_sensor_humidity
      sensor_label_3: sensor.bathroom_humidity_derivative
      sensor_1:
        entity_id: input_boolean.hot_water
        tap_action:
          action: toggle
      entity_3:
        entity_id: light.bathroom_light
        ulm_custom_card_andyblac_room_icon_color_on: yellow
      entity_4:
        entity_id: fan.bathroom_extractor
        ulm_custom_card_andyblac_room_icon_color_on: blue

download

[brewston (Tim Jones)]

so these are all templates for button card ? where do the template files go ? (Not sure I’ve seen something this advanced )

[andyblac (Andy Blackburn)]

Hi,

they are custom cards for the Minimalist UI integration, you can install that via HACS, see here for more info.

I will be doing a wiki soon, on how start start from scratch.

[andyblac (Andy Blackburn)]

heres an example of an animation template

shower icon is from the state of my opentherm gateway when hot water is running, the fan is from the switch from the switch.

[andyblac (Andy Blackburn)]

I have tweaked the “Person Card” moved battery position, what you guy’s think ?

[Damaar (Jason)]

I prefer the other way personally - the real estate at the bottom has a clean look, but I feel the other approach looked generally better.

[andyblac (Andy Blackburn)]

how about this ?

Desktop

iPhone

I have also fixed, and cleanup the text location, it was all over in chrome etc.

[afxok (Anthony Frey)]

Just found your custom card and really like it to simplify my home dashboard. It’s really dense and conveys a lot of information in a simple way. However, I’ve been reading through the original long lovelace-ui-minimalist thread with your comments and don’t see how you layout your destination paths. In other words, what does your “Front Garden” page look like when you tap it? How do you control sliders for dimmers, etc? I’m just curious how you’ve laid them out visually. Thanks.

[andyblac (Andy Blackburn)]

It’s just a normal Lovelace YAML.

Front Garden

and Lounge as another example Lounge

[andyblac (Andy Blackburn)]

my ui-lovelace.yaml

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "Main Dashboard"

views:
  - !include main/home.yaml
  - !include main/security.yaml
  - !include main/heating.yaml
  - !include main/lights.yaml
  - !include main/sockets.yaml
  - !include main/doors.yaml
  - !include main/motion-sensors.yaml
  - !include main/batteries.yaml
  - !include main/rooms/front-garden.yaml
  - !include main/rooms/back-garden.yaml
  - !include main/rooms/garage.yaml
  - !include main/rooms/kitchen.yaml
  - !include main/rooms/bathroom.yaml
  - !include main/rooms/lounge.yaml
  - !include main/rooms/media-room.yaml
  - !include main/rooms/hall.yaml
  - !include main/rooms/landing.yaml
  - !include main/rooms/office.yaml
  - !include main/rooms/andys-bedroom.yaml
  - !include main/rooms/mums-bedroom.yaml

[andyblac (Andy Blackburn)]

@afxok if you want i can post my full dashboard files.

[afxok (Anthony Frey)]

Ok, interesting. I was wondering how you carried through the UX aspect. Do you use primarily desktop or mobile for your interaction?

[andyblac (Andy Blackburn)]

both my code is dynamic on iphone.

[afxok (Anthony Frey)]

Yes, I’m just getting started with UI-Minimalist so your dashboard files would be a huge help to get the dynamic layouts working right. Thanks!

[andyblac (Andy Blackburn)]

here you go

iCloud.com

[afxok (Anthony Frey)]

Awesome, thanks!

[afxok (Anthony Frey)]

There’s a reference to a custom card “custom_card_andyblac_count_info” in one of your files. Is the custom card “custom_card_andyblac_count_info” on your git repository a new version of that?

[afxok (Anthony Frey)]

Nevermind, I looked closed and could see that it wasn’t and I found “custom_card_andyblac_count_info” in your dev branch.

[andyblac (Andy Blackburn)]

yup just reamed status icon only to status info seemed to make more sense as it wasn’t just icon only lol.