🌻 Lovelace UI • Minimalist

Deckoz2302 · August 23, 2022, 6:45pm

Anyone have any ideas how to make an icon for a media player in the room card show on/off status? Media players under developer tools → states, show

off, idle, standby, playing

But don’t actually show an ‘on’ state, which I believe the room card relies on an on/off state

https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/

        - type: "custom:button-card"
          template:
            - card_room
            - purple_no_state
          name: Living Room
          entity: light.couch_lamp_zha_group
          icon: mdi:sofa
          tap_action:
            action: navigate
            navigation_path: "living_room"
          variables:
            label_use_temperature: false
            label_use_brightness: false
            entity_1:
              entity_id: light.couch_lamp_zha_group
              templates:
                - yellow_on
              tap_action:
                action: toggle
            entity_2:
              entity_id: media_player.living_room_nvidia_shield
              templates:
                - blue_on
              tap_action:
                action: call-service
                service: media_player.turn_on
                service_data:
                  entity_id: media_player.living_room_nvidia_shield
              hold_action:
                action: call-service
                service: media_player.turn_off
                service_data:
                  entity_id: media_player.living_room_nvidia_shield

Any tips would be appreciated, I’ve tried searching and am coming up dry.

EDIT:
I tried adding a template state - which also didn’t work

            entity_2:
              state: >
                     {% set lrs = states('media_player.living_room_nvidia_shield') %}
                     {{ 'on' if lrs != 'off' else 'off' }}
              entity_id: media_player.living_room_nvidia_shield
              templates:
                - blue_not_off
              tap_action:
                action: call-service
                service: media_player.turn_on
                service_data:
                  entity_id: media_player.living_room_nvidia_shield
              hold_action:
                action: call-service
                service: media_player.turn_off
                service_data:
                  entity_id: media_player.living_room_nvidia_shield

So I ended up going to here and making ’blue_not_off.yaml’ template as well as one for green, yellow, pink, red, and purple

/config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/colors/

example template

---
blue_not_off:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        label:
          - color: "rgba(var(--color-blue-text),1)"
        name:
          - color: "rgba(var(--color-blue-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
      id: "not_off"
      operator: template
      value: >
             [[[
               return (entity.state != "off" )
             ]]]
# Legacy
blue:
  template: "blue_not_off"

dennissmit · August 24, 2022, 5:37am

Hi guys,

been using the theme for a while now, but was wondering if anybody already implemented some nice solution for using a vacuum map??

Dennsi

panhans · August 24, 2022, 6:34am

First: Never edit cards in the custom_components directory!

Try this:

Go to your config/ui_lovelace_minimalist/custom_cards directory
create a directory, e.g. my_templates
create a blue_not_off.yaml

blue_not_off:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        label:
          - color: "rgba(var(--color-blue-text),1)"
        name:
          - color: "rgba(var(--color-blue-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
      value: "off"
      operator: '!='

apply the template to your card
go to developer settings and hit the ui lovelace minimalist button
refresh your dashboard

Deckoz2302 · August 24, 2022, 3:43pm

I know not to edit the cards as they’ll get overwritten with updates.

Didn’t think cards that don’t exist in the repo have an issue of being overwritten, as there’s nothing to overwrite them from the repo?

I’ll move them, but it shouldn’t matter with templates that don’t exist.

panhans · August 24, 2022, 5:24pm

Just follow the instructions in my post. Thats the way to add custom cards. Dont know if they are persistent if you add it directly.

Deckoz2302 · August 24, 2022, 6:39pm

Yea, that doesn’t work, the dashboards are setup with.

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

Which is where all of the templates live.

https://ui-lovelace-minimalist.github.io/UI/setup/configuration/#custom-cards
https://ui-lovelace-minimalist.github.io/UI/setup/custom_cards/#custom-cards

Your instructions and the above documentation, are for custom_cards. Why would I want color templates under custom_cards, when they clearly go in card_templates/colors/

Cleaner and maintains directory structure

configuration.yaml

# Include Shell Commands
shell_command: !include shell_commands.yaml

Automation

alias: COPY - UI Minimalist Templates
description: Copy Template files to custom_components directory
trigger:
  - platform: time_pattern
    hours: /23
condition: []
action:
  - service: shell_command.copy_custom_card_templates
  - service: shell_command.copy_custom_actions_templates
  - service: shell_Command.copy_custom_popup_template
mode: single

/config/shell_commands.yaml

copy_card_templates: >-
  cp -R /config/ui_lovelace_minimalist/custom_card_templates/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_card_templates/
  
copy_custom_actions: >-
  cp -R /config/ui_lovelace_minimalist/custom_actions/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_actions/
  
copy_custom_popup_templates: >-
  cp -R /config/ui_lovelace_minimalist/custom_popup_templates/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_popup_templates/

Skipped ‘custom_cards’ directory as its the only automatic one.

panhans · August 24, 2022, 7:25pm

It is a custom card. If you want it to be part of the project branch it, add the card and do a pull request.

It doesnt matter where the card is locates. In the end all cards and templates become one big yaml file. My custom cards and templates are all in the same directory together with the official custom cards.

Deckoz2302 · August 24, 2022, 7:41pm

Seems messy. especially when the actual ulm_templates directory is nicely manicured structure.

panhans · August 24, 2022, 8:07pm

It isnt. Its your special use case, not part of the main project and thats why its a custom component. In my case I would create custom_colors directory and put the template you need named custom_blue_not_off into. So you have it structured in the right place.
On the other hand its hard to get support if you have a problem and own modifications in the main part of the project.
But I think this gets a little offtopic.

rickstokking · August 24, 2022, 8:39pm

This docs does explains it correctly Configuration - UI Lovelace Minimalist

As long as you but any files/dirs under custom cards they will be copied over to the custom components dir when reload or restart is triggered. And HA will just make one big YAML out of it. So I recommend create your custom stuff in /config/ui_lovelace_minimalist/custom_cards dir. And if you want to see changes or have improvements please create a issue or an MR.

TronicWater · August 25, 2022, 3:57am

Hello all, I need help once. I am in the process of creating a tablet view. However, I just have problems with the alignment of the cards.

I would like the cards (rooms) to fill the whole screen. But there is always a gap in the lower part. I would also like to resize the media card on the left side.

But it does not work for me. Here are a screenshot and my code. Maybe you have a tip for me.

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

title: "Minimalist_Tablet"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views:!include_dir_merge_list "views/"

###################
# Grid Layout     #
###################

views:
  - type: custom:grid-layout
    title: home
    path: 0
    layout:
      grid-column-gap: 1px 1px
      grid-template-columns: 30% 35% 35%
      grid-template-rows: 100% 0% 0%
      grid-template-areas: |
        "sidebar  rooms  rooms"

    background: center / cover no-repeat fixed url('/local/background_grey2.jpg')
    cards:
.
.
.
.

basbrus · August 25, 2022, 4:36am

Hi,

The sizes of the cards are defined by the available width of a card. So the height is a ratio of the width. I would not recommend to stretch the cards and change the ratio of it. That can have some nasty effects.

Although you can change the overall alignment with CSS. There is a great guide online to use A Complete Guide to Grid | CSS-Tricks - CSS-Tricks.

Edit: most cards have a fixed height defined by margins and icon sizes others use the ratio I have described.

Twinsen68 · August 26, 2022, 5:32pm

Could you tell me where to put the popup code ?
In button-card-template in ui-lovelace.yaml ? Do i need minimalist for it ?

schumijo · August 27, 2022, 6:09am

Yes it’s included in minimalist

krost · August 27, 2022, 4:52pm

The code needs to be added within the card config in the dashboard.yaml (under the dashboard/views folder). You need minimalist and browser_mod (HACS)

krost · August 27, 2022, 4:58pm

Hi guys, is there a way to animate the icons?
For example in this card rotate the icon when the device is on? Thanks.

- type: "custom:button-card"
        template: card_power_outlet
        entity: switch.fan
        name: Fan
        variables:
          ulm_card_power_outlet_icon: "mdi:fan"

IVictor · August 28, 2022, 6:43am

Hi guys! I just switched to minimalist theme and I like it so much, it’s amazing.

I need your help a little bit. I need to make a button for resetting a helper but I need to have a confirmation dialog like ‘are you sure… Yes/no’.

Do you know how can I achieve something like this?

Thanks a lot!

adn34 · August 28, 2022, 10:38am

Reloading through the Developer tools → UI Lovelace Minimalist entry (the entry in the documentation seems to be outdated as far as where this setting is) has never worked for me, even after forcing the browser used to access HA to refresh the cache. Only a complete restart of HA works which can get pretty tedious when working on custom cards.

Am I doing something wrong and are others here able to get things to properly refresh without having to restart HA?

edit: Found I had to use “refresh” under the three dots in the top right in the dashboard views, HA seems to have it’s own cache independent of the browser and that one wasn’t getting cleared.

image969 · August 30, 2022, 12:50pm

Where exactly are you seeing these dots? The ones Im clicking on dont have a refresh option and this could be the answer to my prayers with a cache issue i’ve been having

adn34 · August 30, 2022, 1:11pm

I see that you’ve been linked here from the Mushroom Cards topic. The refresh option I mentioned doesn’t apply to dashboards in the “overview” tab. Minimalist right here creates it’s own entry and has different options.