ui-lovelace-minimalist / ui Goto Github PK

View Code? Open in Web Editor NEW

1.5K 25.0 416.0 34.73 MB

UI-Lovelace-Minimalist is a "theme" for HomeAssistant

Home Page: https://ui-lovelace-minimalist.github.io/UI/

License: Other

Shell 0.34% Python 8.11% JavaScript 91.55%

home-assistant

ui's Introduction

UI-Lovelace-Minimalist

It's kind of hard to explain what this is, so let's call it a "theme" (in quotation marks). But one thing is for sure, it is very nice! Taking the exceptional work of tben as a basis, this repository is aimed to ease installation and maintenance of his wonderful work. You can use this interpretation of a SmartHomeUI more or less like a theme in HomeAssistant.

Wiki for documentation

We have setup an extensive Wiki for our documentation. It is more comfortable for you to read and for us to handle, than this file and gives our documentation the right framework to grow. Take a look here: https://ui-lovelace-minimalist.github.io/UI/

Table of content from the WIKI

Setup	Usage	Development
We have provided different guides to help you install and update this "theme"	These usage guides give you a deeper knowledge about this "theme"	This is our developer corner
» Download » Installation » Configuration	» Cards » Chips » Popups » Custom-Cards	» Card Style Guide » Docs Style Guide » Custom-Cards

Installation and update

We can offer you in-depth instructions for installation, as well as for future updates or from a previous version. Check our WIKI for more info:

List of templates

The actual version of this "theme" has 20 different cards, seven chips and other templates bundled into the download. We're sorry, but the list wouldn't fit into this readme. Please see this page, where you can find an extensive list of templates with code examples, screenshots and explanation.

Custom cards

The same goes for our custom_cards. As the number grows, the list would be to big for this readme, so we provide you with an overview page with pictures, code examples and additional information. Find the list here.

Credits & Contributors

This design was made by tben
A lot of inspiration is taken from 7ahang’s work found on Behance.
Contributions from others in the HomeAssistant forum thread, you can find it here.
The technical part is realised mostly by taking advantage of the great work RomRaider did with his button-card.
Code refactor, cleanup and maintenance by schumijo and paddy0174 & CM000n.
dwainscheeren for his inspiration to deliver themes via HACS.
Wiki by paddy0174.
Special thanks to clemalex and schumijofor contributing their cards to the main repository.
stokkie90 for implementing most of the HACS functionalities.
And of course all the others who cannot be named here due to space limitations.

❤️ Thank you so much for helping to keep this UI awesome

Contributions

This is a living project and all input is very welcome! If you configured and designed a card, that you would like to share, please feel free to do so! We are happy to include your contribution so others can use it as well! This project uses pre-commit for consistent and clean code. If possible, please make sure that you also use pre-commit for local development before creating a pull request.

ui's People

Contributors

Stargazers

Watchers

Forkers

saxel schumijo cm000n bavo gazpachoking tombo12354 jlipp jasonmadigan nohat matrixx567 jensdevlaming vncnt-dev ajesseperez kaherdintristan sildehoop mallorca2288 artemnt edoardop13 germeraad ulic75 augustv17 desty2k madmaxmckinney denes44 teddyskokos2 mp-se marcossurfwer gekberlin telashton jp2creation bbo76 plink1256 tjohnson93 freebeergesicht ldb2000 davidvidmar juvenalandres revin34 mathiasandresen knetgit corindonders robbinonline abeksis rick2909 stokkie90 irmajavi lassefp mazerte aehru willyp713 clevertonh keyruu leosm-07 jonkristian wuzhijieoooo florianferry r0binj orinocoz moura232 piitaya toooias albertoabruzzo acesyde ad-ha nwootton sesulo yosoyez telefoon13 mstefany drthanwho 1142052sebastian maraneane charliebeals krasnoukhov frakki1986 fenlis mekenthompson toudix marcodallago basbruss simonbirt fireman1206 cmintey leon38 pecceg2 falbany tivoo checkerschaf eraycetinay klex1404 kisem nag94 wodan-dotcom cs42 miniminne tommatheussen aritrosaha10 thezoker garysoopin regantjh

ui's Issues

Chip Navigation Emoji

Is it possible to give a emoji to a Navigation Chip? For now, only a MDI will work.

When giving a card the Navigation Template and the Icon Only template, it shows the Emoji, but the margin is off.

          - type: 'custom:button-card'
            template:
              - chip_icon_only
              - chip_navigate
            variables:
              ulm_chip_navigate_path: verlichting
              ulm_chip_icon_only: '💡'

This is what it looks like.

Page FAQ in repo needs to be written

The seperate page FAQ.md needs to be written. Anybody any ideas or suggestions, what we should use for this? Maybe someone could check the HA thread to see if there are some obvious questions that come up more than once?

problems with button card and variables for thermostat card

Hi, i have a problem with variables in button card.

So, i want to take the temperature of climate entity (passed with variables) and increase by 0.5 degrees.
This is for button minus and plus in a thermostat card.

But, i receive this error: undefined is not an object (evaluating variables.entity.attributes.temperature)

This is my code:

card:
              type: "custom:button-card"
              template: widget_icon
              tap_action:
                action: call-service
                service: climate.set_temperature
                service_data:
                  temperature: " [[[ return (variables.entity.attributes.temperature + 0.5) ]]]"
                  entity_id: "[[[ return variables.entity ]]]"
              icon: "mdi:plus"

And, In the same page, this code from @Tpx01 works great:

widget_temperature:
  tap_action:
    action: toggle
  color: var(--google-grey-500)
  show_icon: false
  show_name: false
  show_label: true
  size: 20px
  label: |-
    [[[
        var temperature = entity.attributes.temperature;
        if (temperature == null) {
          var temperature = '-';
        }
        return temperature + '°C'
    ]]]
  styles:
    label:
      - color: "rgb(var(--color-theme),0.9)"
    grid:
      - grid-template-areas: '"l"'
    card:
      - box-shadow: none
      - padding: 0px
      - background-color: "rgba(var(--couleur-theme),0)"
      - border-radius: 14px
      - place-self: center
      - height: 42px

SOLVED THEME Incorrect color on input_datetime when using darkmode

Hey so I figured out that if I use dark mode on my phone but chooses the light mode in HA UI input_datetime does not change.

Wrong variable name

Hi,

There is a typo with variable names in templates "card_light_slider_collapse" and "card_light_slider_horizontal"

card_light_slider_collapse:
  variables:
    ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
(...)
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"  <==== Should be ulm_card_light_slider_collapse_name

card_light_slider_horizontal:
  variables:
    ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
(...)
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"  <==== Should be ulm_card_light_slider_horizontal_name

Pictures missing in README.md and others

These pictures are missing from README.md:

chip icon only (missing)
chip icon with state (missing)
chip icon with double state (missing)
card generic (generic pic needed, actual pic is card battery)
card generic swap (missing and wrong)
card input boolean (missing)
card media player with cover art (missing)
card battery (see card generic)
card media player with controls (missing)

Taken from the task-list in the old repo, here.

Also there are some pics missing in custom-cards, we need to review this.

FR: Input select template

I'm currently using input selects to bring up options for different rooms. But because my CSS is crap, it looks like a dogs breakfast.

Can I request this? Or is there already a template that would work and I've missed it?

Thanks so much and awesome work :)

card_welcome and card_navigate review needed

Could someone please check these two cards?

Are both cards ok design wise? I'm a design-dislexic and I could use some input, if these are ok to publish.

Thanks!

Different light_slider wanted

As per suggestion from @KaherdinTristan, a different light_slider could/should find the way into the repo.

And while at this: remove the conditional card and make a selection possible for with or without conditional.

Getting config error

Fresh install - getting this error checking the config:
Error loading /config/configuration.yaml: mapping values are not allowed here
in "/config/themes/minimalist-mobile/minimalist-mobile.yaml", line 146, column 65

Allow chip to show label and icon

Hi,
I'm trying to create a custom chip with a mdi:icon and a label. But when set 'show_icon: true' it doesn't appear. I've tried changing the style (grid-template), but as I'm new to CSS, I can't figure out how to style it correctly.
Thank you :)

This styling fixes it:
styles: label: - justify-self: center - align-self: center - padding: 0px 6px - margin: 2px 0 0 0 - font-weight: bold - font-size: 14px img_cell: - width: 24px grid: - grid-template-areas: '"i l"' card: - border-radius: 18px - box-shadow: var(--box-shadow) - height: 36px - width: auto - padding-left: 6px - padding-right: 6px size: 80%

I made a figma

I have made an Figma with almost all the components this way you can make pictures for on the wiki
https://www.figma.com/file/dOQKR8DCP2mvH7zesjU8L6/UI-Lovelace-Minimalist?node-id=0%3A1

custom_card_paddy_welcome has errors and misconfigurations

Unfortunately the card has found it's way (again) to the repo but needs to be reviewed.

There still are some errors and missing variables, especially with the news part (custom_card_paddy_welcome_with_news).

Use card-mod-view-yaml to get rid of the need for template: edge

Since you are already using card-mod. You can add padding around the whole page with card-mod-view-yaml

  card-mod-theme: minimalist-mobile
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }

That way you don't need to add

- type: custom:button-card
  template: edge

Around every card

Light Card Tap Icon

Hey,

Is it possible to create a tap action just for the icon of the light card?
It would be nice if i tap on the icon the details pages opens and if i tap on the card it toggles the light.

Do you know if it is possible?

Thanks in advance!

Add support for cover without "current_position" attributes

Hi,

Can you add support for cover without "current_position" attributes ?

Here is the modified code :

cover:
  tap_action:
    action: more-info
  icon: |
    [[[
        var icon = 'mdi:help-circle';
        if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
          if (states[entity.entity_id].state == 'closed'){
            var icon = 'mdi:window-shutter';
          } else
            var icon = 'mdi:window-shutter-open';
        } else {
          if (states[entity.entity_id].attributes.current_position == 0){
            var icon = 'mdi:window-shutter';
          } else
            var icon = 'mdi:window-shutter-open';
        }
        return icon ;
    ]]]
  label: >-
    [[[
        var icon = 'mdi:help-circle';
        if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
          if (states[entity.entity_id].state == 'closed'){
            return variables.ulm_closed;
          } else
            return variables.ulm_open;
        } else {
          if (states[entity.entity_id].attributes.current_position == 0){
            return variables.ulm_closed;
          } else {
            return variables.ulm_open + ' • ' + (states[entity.entity_id].attributes.current_position) + '%' ;
          }
        }
        return icon ;
    ]]]
  state:
    - operator: template
      value: "[[[ return states[entity.entity_id].attributes.current_position != 0; ]]]"
      styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue),0.2)"

Chips usage of emojis on chip_icon_only

I'm struggling on using icons with the chips_icon_only template.
I was trying to use emojis, turned out it only works with hass: or mdi: icons

- type: 'custom:button-card'
  template: chip_icon_only
  variables:
    ulm_chip_icon_only: '❤️'
- type: 'custom:button-card' 
  template: chip_icon_only
  variables:
    ulm_chip_icon_only: 'mdi:car'

Maybe change or add another one that can handle emojis? Or do i miss something?

- type: 'custom:button-card'
  template: chip_emoji_only
  variables:
    ulm_chip_icon_only: '❤️'

chip_emoji_only:
  template: chips
  variables:
    icon: '❔'
  show_icon: true
  label: |
    [[[ return variables.ulm_chip_icon_only ? variables.ulm_chip_icon_only : variables.icon ]]]

HA forum thread re-read for new cards

I think it could be a good idea to re-read the HA forum thread and see, what different things could be found to include into the repo.

Eg. tpx01 (I think) made a room_card with a nice background as a navigation card. Should this be implemented? I'd vote for to do so.

Hide Chips at certain state

I was trying to create a conditional chip so that, when a sensor has a certain state (ex. there is 1 light or more on) its show the chip, but when there are no lights on, it should hide it. Also, when the chip is showing, it should also show how many lights there are on.

That works, kinda...

When the chip is showing, it gives as state 0. After a browser refresh, it updates to 1. Same goes for 1 to ex. 2 or from ex. 2 to 1.
When it goes from something to 0, it hide the chip, like it should.

So the only problem is that the state of the chip is not live updating.

I'm using the state-switch card.


          - type: custom:state-switch
            entity: sensor.lights_on
            states:
              lights on:
                type: 'custom:button-card'
                template: chip_icon_state
                variables:
                  ulm_chip_icon_state_icon: '💡'
                  ulm_chip_icon_state_entity: sensor.current_lights_on

typo in button_card_templates.yaml:1100 media_player_with_controls

Hi,
I'm currently on vacation so I couldn't make a pull request. But I wanted to mention, that there is a typo in media_player_with_controls, which results in the card not loading.
entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]' should be
entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'

Rework some "old" templates to reflect the old behaviour (TBens special)

The templates that are used by TBens are now kind of thrown off. Rework these templates so TBens just have to move to the new installation (aka TBens should be able to use this repo for himself!)

Theme: hide app-toolbar with card-mod issue

I noticed that the app-toolbar on the minimailist-mobile theme is still showing even if it should be hidden with card-mod-root styling:

  card-mod-theme: mobile
  card-mod-root: |
    app-toolbar {
      display: none;
    }

I fixed this with writing the complete name of the them (first line of yaml file) in card-mod-theme:

  card-mod-theme: minimalist-mobile
  card-mod-root: |
    app-toolbar {
      display: none;
    }

Dont know if this is a issue that only i have.

`triggers_update` doesn't accept javascript templates

All cards that need triggers_update need to be set to "all", as javascript templates aren't valid there.

Theme: color-background-* cannot be used because it is white

I was using the color-background-* colors as a variable in my custom templates, but in the light mode all colors are set to white:

color-background-yellow : 250, 250, 250
color-background-blue : 250, 250, 250
color-background-green : 250, 250, 250
color-background-red : 250, 250, 250

When changing it to the same as in the dark mode, cards that use icon_info_bg are displayed wrong:

This is because the opacity-bg is set to 1, as soon as you set this to 0.1 (same as in the dark theme) everything is ok.

I dont know if this intended or not, i changed it on my environment and all other buttons are still looking smooth.

This relates to both themes:

minimalist-mobile.yaml
minimalist-desktop.yaml

Triggers_update on template not work

Describe the bug
Using triggers_update on card template with variables not work.

To Reproduce
Steps to reproduce the behavior:

Using a variable and try to refresh, the card not show the new value using template.
To work, I need to set triggers_update at the top level of configuration like this :

Others card on Minimalist not work also.

more-info tap_action on card_person not working

I noticed earlier this day that the more-info tap_action on card_person is not working.
With a tap on the person card nothing happens at all
Maybe I'll manage to take a closer look soon and fix it myself.
But I thought I'll record it here in any case, in case someone should be faster than me ;-)

Media Player idle state blank

When Media Player Card entry has idle state card_media_player_with_control turns completely blank and the cards partly

yaml code:

          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                template: edge
              - type: "custom:button-card"
                template: card_media_player
                entity: media_player.living_room_speaker_1
                name: Living room Speaker
              - type: "custom:button-card"
                template: edge

          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                template: edge
              - type: "custom:button-card"
                template: card_media_player_with_control
                entity: media_player.living_room_speaker_1
                name: Living room Speaker
              - type: "custom:button-card"
                template: edge

          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                template: edge
              - type: "custom:button-card"
                template:
                  - card_media_player_with_controls
                variables:
                  ulm_card_media_player_with_controls_name: "Living room Speaker"
                  ulm_card_media_player_with_controls_entity: media_player.living_room_speaker_1
              - type: "custom:button-card"
                template: edge

Adjust Custom Fan Card for Air Purifiers

Currently the custom_card_saxel_fan by @saxel works only for traditional fans (which is fine), however Air Purifiers like the Xiaomi ones work with the fan integration for the most part as well.

In my opinion the current button which triggers call-service fan.osciallate should switch between fan modes Off and Auto for purifiers. Should I set up a new custom card or integrate something within the existing card?

Battery card not working

Looks like the battery card isn't working. When defined, it gives undefined% as state.

Don't know what exactly is wrong, but I think the template tries to get the battery attribute from the battery sensor, but the state of the sensor is the battery percentage it self.

Through the generic card it works fine.

Empty space/placeholder for uneven rows

Is there a way to put some kind of placeholder into the horizontal stack, so that cards fill 50% of the available space?

Please have a look at the dashboard on the left, and the expected layout on the right. I'd like the "Biuro" slider to occupy only half of the row.

Before	After

button_card_templates: !include_dir_merge_named minimalist-templates/
views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            template: title
            name: Music
          - type: entities
            entities:
              - type: custom:mini-media-player
                group: true
                name: " "
                hide:
                  icon: true
                  source: true
                  progress: true
                  controls: true
                  volume: true
                speaker_group:
                  platform: media_player
                  show_group_count: false
                  expanded: false
                  entities:
                    - entity_id: media_player.kuchnia
                      name: Kitchen
                    - entity_id: media_player.lazienka
                      name: Bathroom
                    - entity_id: media_player.pokoj_dzienny
                      name: Living room
                artwork: none
                tts: false
                info: scroll
                volume_stateless: false
                entity: media_player.kuchnia
            show_header_toggle: false

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: card_slider_generic
            entity: media_player.kuchnia
            variables:
              ulm_card_slider_name: Kuchnia
          - type: custom:button-card
            template: card_slider_generic
            entity: media_player.lazienka
            variables:
              ulm_card_slider_name: Łazienka
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: card_slider_generic
            entity: media_player.pokoj_dzienny
            variables:
              ulm_card_slider_name: Biuro

      - type: horizontal-stack
        cards:
          - type: "custom:button-card"
            template: card_script
            variables:
              ulm_card_script_title: Nowy Świat
              ulm_card_script_icon: "mdi:radio"
            tap_action:
              action: call-service
              service: script.play_radio
              service_data:
                selected_preset: 1
          - type: "custom:button-card"
            template: card_script
            variables:
              ulm_card_script_title: Radio 357
              ulm_card_script_icon: "mdi:radio"
            tap_action:
              action: call-service
              service: script.play_radio
              service_data:
                selected_preset: 2
          - type: "custom:button-card"
            template: card_script
            variables:
              ulm_card_script_title: Spotify
              ulm_card_script_icon: "mdi:spotify"
            tap_action:
              action: call-service
              service: media_player.select_source
              service_data:
                entity_id: media_player.kuchnia
                source: spotify

And card_slider_generic is just the modified light slider card:

card_slider_generic:
  template:
    - ulm_language_variables
  variables:
    ulm_card_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
    icon: "[[[ return entity.attributes.icon ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - icon_info
          - yellow_slider
        entity: "[[[ return entity.entity_id ]]]"
        tap_action:
          action: toggle
        label: >-
          [[[
            if (entity.state !='unavailable'){
              if (entity.state =='off'){
                return variables.ulm_off;
              } else if (entity.state == 'on'){
                if (entity.attributes.brightness != null){
                  var bri = Math.round(entity.attributes.brightness / 2.55);
                  return (bri ? bri : '0') + '%';
                } else {
                  return variables.ulm_on
                }
              }
            } else {
              return variables.ulm_unavailable;
            }
          ]]]
        name: "[[[ return variables.ulm_card_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
            - padding: 0px
    item2:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

Person card custom zones do not work

When using the person card with custom zones defined, the card will crash with the following error if the person is in one of the custom zones:

ButtonCardJSTemplateError: TypeError: states[variables.ulm_card_person_zone1] is undefined in 'if (states[variables.ulm_card_person_entity].state != 'home'){ if (states[variables.ulm_card_p...'

Taking a peek at the code, it looks like this is because the custom zones defined (ulm_card_person_zone1, and ulm_card_person_zone2) need to be the friendly name of the zones to match the persons state, but then the zone entity is tried to look up with just the friendly name. Suggested fix would be to have the ulm_card_person_zone1 variables be defined as the actual zone, i.e. zone.work, then tweak the icon lookup function to something like this: (beware, I'm not a js developer, so it might need some further tweaks)

        if (states[variables.ulm_card_person_entity].state != 'home'){
          if (states[variables.ulm_card_person_entity].state == states[variables.ulm_card_person_zone1].attributes.friendly_name){
            var icon = states[variables.ulm_card_person_zone1].attributes.icon != null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'
            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
          } else if (states[variables.ulm_card_person_entity].state == states[variables.ulm_card_person_zone2].attributes.friendly_name){
            var icon = states[variables.ulm_card_person_zone2].attributes.icon != null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'
            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
          } else {
            return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
          }
        } else {
          return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
        }

How to hide custom item on a card based on condition?

I have a custom slider card based on the light slider. Is there a way to hide the slider item when the given entity state is off?

card_slider_generic:
  template:
    - ulm_language_variables
  variables:
    ulm_card_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
    icon: "[[[ return entity.attributes.icon ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - icon_info
          - yellow_slider
        entity: "[[[ return entity.entity_id ]]]"
        tap_action:
          action: toggle
        label: >-
          [[[
            if (entity.state !='unavailable'){
              if (entity.state =='off'){
                return variables.ulm_off;
              } else if (entity.state == 'on'){
                if (entity.attributes.brightness != null){
                  var bri = Math.round(entity.attributes.brightness / 2.55);
                  return (bri ? bri : '0') + '%';
                } else {
                  return variables.ulm_on
                }
              }
            } else {
              return variables.ulm_unavailable;
            }
          ]]]
        name: "[[[ return variables.ulm_card_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
            - padding: 0px
    item2:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

Default icon missing on card_media_player

Hi,

Default icon is missing on card_media_player while it is present on card_media_player_with_control.

card_media_player:
  template:
    - icon_info_bg
    - ulm_language_variables
  icon: |
    [[[
      var icon = 'mdi:speaker';  <==== ADDED
      if(entity.attributes.app_name){
        var app = entity.attributes.app_name.toLowerCase();
        if(app == 'spotify'){
          var icon = 'mdi:spotify';
        } else if(app == 'google podcasts'){
          var icon = 'mdi:google-podcast';
        } else if(app == 'plex'){
          var icon = 'mdi:plex';
        } else if(app == 'soundcloud'){
          var icon = 'mdi:soundcloud';
        } else if(app == 'youtube music'){
          var icon = 'mdi:youtube';
        } else if (app == 'oto music'){
          var icon = 'mdi:music-circle';
        }
      }
      return icon;
    ]]]

incorrect template

on the graph card, you call the template "icon_info" which doesn't exist. I believe it should be "icon_info_bg" but i didn't spend a lot of time figuring out which icon_info_* template it's meant to use

Currency not working on chip_power_consumption

Hi,

Currency is not displayed on chip_power_consumption becuase language template is missing.

chip_power_consumption:
  template: 
    - chips
    - ulm_language_variables   <= missing template

Incorrect background on light slider cards when using dark mode.

Added the following variables to eliminate the background on item1 for the cards below. Might be a better way to do it but this worked.

card_light_slider:
  variables:
    ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:    <===== ADDED
          slider_background_color: 'rgba(0,0,0,0)'   <===== ADDED
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
    item2:
      card:
        type: 'custom:my-slider'
        entity: '[[[ return entity.entity_id ]]]'
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: '0px'
        thumbVerticalPadding: '0px'   
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

card_light_slider_collapse:
  variables:
    ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        grid:
          - row-gap: 12px
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:    <===== ADDED
          slider_background_color: 'rgba(0,0,0,0)'     <===== ADDED
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
        state:
          - styles:
              card:
                - background: transparent
            value: 'on'
    item2:
      card:
        type: conditional
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: 'on'
        card:
          type: 'custom:my-slider'
          entity: '[[[ return entity.entity_id ]]]'
          radius: 14px
          height: 42px
          mainSliderColor: rgba(var(--color-yellow),1)
          secondarySliderColor: rgba(var(--color-yellow),0.2)
          mainSliderColorOff: rgba(var(--color-theme),0.05)
          secondarySliderColorOff: rgba(var(--color-theme),0.05)
          thumbHorizontalPadding: '0px'
          thumbVerticalPadding: '0px'   
          thumbWidth: 0px
          card_mod:
          style: |
            ha-card {
              border-radius: 14px;
              box-shadow: none;
            }

card_light_slider_horizontal:
  variables:
    ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1 item2"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1fr
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:    <===== ADDED
          slider_background_color: 'rgba(0,0,0,0)'   <===== ADDED
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
    item2:
      card:
        type: 'custom:my-slider'
        entity: '[[[ return entity.entity_id ]]]'
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: '0px'
        thumbVerticalPadding: '0px'   
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

yellow:
  variables:   <===== ADDED
    slider_background_color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'  <===== ADDED
  state:
    - styles:
        icon:
          - color: 'rgba(var(--color-yellow),1)'
        label:
          - color: 'rgba(var(--color-yellow-text),1)'
        name:
          - color: 'rgba(var(--color-yellow-text),1)'
        img_cell:
          - background-color: 'rgba(var(--color-yellow), 0.2)'
        card:
          - background-color: '[[[ return variables.slider_background_color ]]]'    <===== ADDED
      value: 'on'

Thermostat Card missing or not working

Hi,

i noticed here https://community.home-assistant.io/t/lovelace-ui-minimalist/322687 that you use a thermostat card. But i can not find it in the documentation. The custom card template custom_card_thermostat ist not working probertly. How did you realize this template card for controlling climate entities?

Icon, label and state on media_player cards not readable

I have the problem that with media player cards neither the icon, nor the label and the status are readable when the media player is on but no cover art is available while on light theme:

Here we should probably change something about the color selection or representation in general?

I would also suggest treating media players that are in idle or pause mode similar to media players that are off. Or at least we should rethink the representation here as well.
For example, Sonos speakers are always in idle mode when nothing is playing. So for most of the day they are treated in the UI like media players that are on but idle. But from the user perspective however, they are turned off.

Theme: opacity on wrong state?

Could it be that the "Set opacity-bg to 0.1 in light themes" chanhe is applied to the wrong state condition?
Now for a card in an off condition it becomes white and in an on condition it becomes transparent.
I would expect it the otherway around?
Thanks!

Enhancement: Conditional Confirmation

Recommend adding the following to every card. No reason not to and adds simple protection for critical devices.

If the variable is included in the card, the confirmation text is displayed. If the variable is not included, the card operates normally.

Card

variables:
  custom_card_mwolter_power_outlet_confirm_text: Toggle the eGPU power?

Template

tap_action:
  action: toggle
  confirmation: '[[[ return variables.custom_card_mwolter_power_outlet_confirm_text == null ? false : {"text": variables.custom_card_mwolter_power_outlet_confirm_text} ]]]'
hold_action:
  action: more-info

card_power_outlet not working

Hi,

card_power_outlet is not working.

I think code should be :

card_power_outlet:
  template:
    - yellow
    - icon_info_bg
    - ulm_language_variables
  label: |-
    [[[ 
      if ((entity.state =='on') && (variables.ulm_card_power_outlet_consumption_sensor != '')) {
        return variables.ulm_on + ' • ' + states[variables.ulm_card_power_outlet_consumption_sensor].state + 'W';
      } else {
        return variables.ulm_off;
      }
    ]]]

Cannot add carts to dashboard.

Hello, I configure minimalist like in instructions and choose minimalist in theme. I see 2 tabs with Welcome to UI-lovelace-minimalist but cannot add any card. I don't see anything in logs.

Regards.

Chip in light theme cut off

In the light theme, the chip (for some reason not the first 2) is cut off because of the box-shadow.

I'm using the icon only chip, but also tried it with the normal generic chip, but that makes no difference.

Dark mode is fine, because there is no box-shadow. Also if I set the box-shadow to none in the light theme, the cut off is also gone, so something is up with that shadow.

PS: This is my 3rd issue, sorry! I really like this theme, so far one of the best out there, so I want to make it even better :)

Make guest counter optional on chip_presence_detection

It seems to confuse people when some variable is mandatory. We should therefore make some specifications optional. An example of this is the ulm_chip_presence_counter_guests specification for the chip_presence_detection template:

https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/658?u=cm000n

Add a new template to reflect the old style "Scenes"

Add a template that mirrors the old behaviour for Scenes (now vertical-buttons)

custom_card_tpx01_aircondition gives failed to call service script

When using the custom_card_tpx01_aircondition and try to adjust the ac up or down on the card you get this:

It does however work with the popup.

Chip navigation template

I'm using chips for view navigation too, maybe add a second template for tap action?

- type: 'custom:button-card' 
  template:
    - chip_icon_only
    - chip_navigation
  variables:
    ulm_chip_icon_only: 'mdi:car'
    ulm_chip_navigation_path: car

Template

chip_navigation:
  tap_action:
    action: navigate
    navigation_path: "[[[ return variables.ulm_chip_navigation_path; ]]]"

Option to use MDI icons in chips

The chips don't show the MDI icons when using the variables.
Only when using emoji's

- type: 'custom:button-card'
  template: chip_icon_state
  entity: group.denon
  variables: 
    ulm_chip_icon_state_icon: 'mdi:speaker-wireless'
    ulm_chip_icon_state_entity: sensor.denon_count

Button Template - Faulty state template value

In button_card_templates.yaml, on line 195 and 213, templates "vertical_buttons_blue" and "vertical_buttons_green" are defined.

The state template value contains the following:
value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]"

As using the template doesn't work, it does when modifying this line to:
value: "[[[ return entity.state == variables.state ]]]"

Afterwards, the button card template seems to work as expected.

I think this needs to be adjusted for the next release, as it will be overwritten each time this theme is updated without changing this part.

Add unit on chips chip_icon_state and chip_icon_double_state

Hi,

Could be interesting to add unit_of_measurement (if available) to chip_icon_state and chip_icon_double_state.

chip_icon_state:
  template: chips
  triggers_update:
    - "[[[ variables.ulm_chip_icon_state_entity ]]]"
  label: |
    [[[
      var icon = '❔';
      if (variables.ulm_chip_icon_state_icon){
        var icon = variables.ulm_chip_icon_state_icon;
      } 
      var state = '';
      if (states[variables.ulm_chip_icon_state_entity].state){
        var state = states[variables.ulm_chip_icon_state_entity].state;
        if (states[variables.ulm_chip_icon_state_entity].attributes.unit_of_measurement){   <= ADDED
          state += states[variables.ulm_chip_icon_state_entity].attributes.unit_of_measurement;   <= ADDED
        }   <= ADDED
      } 
      return icon + ' ' + state;
    ]]]
chip_icon_double_state:
  template: chips
  triggers_update:
    - "[[[ variables.ulm_chip_icon_double_state_entity_1 ]]]"
    - "[[[ variables.ulm_chip_icon_double_state_entity_2 ]]]"
  label: |
    [[[
      var icon = '❔';
      if (variables.ulm_chip_icon_double_state_icon){
        var icon = variables.ulm_chip_icon_double_state_icon;
      } 
      var state1 = '';
      if (states[variables.ulm_chip_icon_double_state_entity_1].state){
        var state1 = states[variables.ulm_chip_icon_double_state_entity_1].state;
        if (states[variables.ulm_chip_icon_double_state_entity_1].attributes.unit_of_measurement){   <= ADDED
          state1 += states[variables.ulm_chip_icon_double_state_entity_1].attributes.unit_of_measurement;   <= ADDED
        }   <= ADDED
      } 
      var state2 = '';
      if (states[variables.ulm_chip_icon_double_state_entity_2].state){
        var state2 = states[variables.ulm_chip_icon_double_state_entity_2].state;
        if (states[variables.ulm_chip_icon_double_state_entity_2].attributes.unit_of_measurement){   <= ADDED
          state2 += states[variables.ulm_chip_icon_double_state_entity_2].attributes.unit_of_measurement;   <= ADDED
        }   <= ADDED
      } 
      return icon + ' ' + state1 + ' • ' + state2;
    ]]]