🌻 Lovelace UI • Minimalist

[tj335]

When trying to create my own custom cards using the card_scenes as a starting point, I had it working but after making a few more changes I can’t get it to display on my dashboard anymore. I even reverted the last changes I made to what I had before but that didn’t work either. I restarted HA to make sure everything reloaded.
Nothing is appearing in the error log. Is there a way to debug why a card won’t appear? If I change the template to “card_scenes” in the button code it displays properly, so I’m sure something in the template is messed up but can’t figure out what it is.

Button code:

              - type: "custom:button-card"
                template:
                  - custom_card_tj335_4scenes
                variables:
                  entity_1:
                    entity_id: scene.good_morning
                    icon: "mdi:weather-sunny"
                    icon_color: "yellow"
                    name: "Rise"
                    bg_color: "yellow"
                    confirm_text: "Toggle the Good Morning scene?"
                  entity_2:
                    entity_id: scene.good_morning_with_coffee
                    icon: "mdi:coffee-maker"
                    icon_color: "blue"
                    name: "Rise+"
                    bg_color: "blue"
                    confirm_text: "Toggle the Good Morning with Coffee scene?"
                  entity_3:
                    entity_id: scene.bedtime
                    icon: "mdi:bed"
                    icon_color: "purple"
                    name: "Bed"
                    bg_color: "purple"
                    confirm_text: "Toggle the Bedtime scene?"
                  entity_4:
                    entity_id: scene.good_night
                    icon: "mdi:weather-night"
                    icon_color: "green"
                    name: "Nite"
                    bg_color: "green"
                    confirm_text: "Toggle the Good Night scene?"

Template code:

---
custom_card_tj335_4scenes:
  show_icon: false
  show_name: false
  show_label: false
  variables:
    entity_1:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
      confirm_text: ''
    entity_2:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
      confirm_text: ''
    entity_3:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
      confirm_text: ''
    entity_4:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
      confirm_text: ''
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3 item4'"
      - grid-template-columns: "1fr 1fr 1fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_four_scenes_pill"
        entity: "[[[ return variables.entity_1.entity_id ]]]"
        icon: "[[[ return variables.entity_1.icon ]]]"
        name: "[[[ return variables.entity_1.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_1.icon_color ]]]"
          color_bg: "[[[ return variables.entity_1.bg_color ]]]"
        tap_action:
          action: "call-service"
          confirmation: '[[[ return variables.entity_1.confirm_text == '' ? false : {"text": variables.entity_1.confirm_text} ]]]'
          service: "homeassistant.turn_on"
          service_data:
            entity_id: "[[[ return variables.entity_1.entity_id ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "card_four_scenes_pill"
        entity: "[[[ return variables.entity_2.entity_id ]]]"
        icon: "[[[ return variables.entity_2.icon ]]]"
        name: "[[[ return variables.entity_2.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_2.icon_color ]]]"
          color_bg: "[[[ return variables.entity_2.bg_color ]]]"
        tap_action:
          action: "call-service"
          confirmation: '[[[ return variables.entity_2.confirm_text == '' ? false : {"text": variables.entity_2.confirm_text} ]]]'
          service: "homeassistant.turn_on"
          service_data:
            entity_id: "[[[ return variables.entity_2.entity_id ]]]"
    item3:
      card:
        type: "custom:button-card"
        template: "card_four_scenes_pill"
        entity: "[[[ return variables.entity_3.entity_id ]]]"
        icon: "[[[ return variables.entity_3.icon ]]]"
        name: "[[[ return variables.entity_3.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_3.icon_color ]]]"
          color_bg: "[[[ return variables.entity_3.bg_color ]]]"
        tap_action:
          action: "call-service"
          confirmation: '[[[ return variables.entity_3.confirm_text == '' ? false : {"text": variables.entity_3.confirm_text} ]]]'
          service: "homeassistant.turn_on"
          service_data:
            entity_id: "[[[ return variables.entity_3.entity_id ]]]"
    item4:
      card:
        type: "custom:button-card"
        template: "card_four_scenes_pill"
        entity: "[[[ return variables.entity_4.entity_id ]]]"
        icon: "[[[ return variables.entity_4.icon ]]]"
        name: "[[[ return variables.entity_4.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_4.icon_color ]]]"
          color_bg: "[[[ return variables.entity_4.bg_color ]]]"
        tap_action:
          action: "call-service"
          confirmation: '[[[ return variables.entity_4.confirm_text == '' ? false : {"text": variables.entity_4.confirm_text} ]]]'
          service: "homeassistant.turn_on"
          service_data:
            entity_id: "[[[ return variables.entity_4.entity_id ]]]"

card_four_scenes_pill:
  show_icon: true
  show_label: false
  show_name: true
  variables:
    color_icon: "gray"
    color_bg: "gray"
  styles:
    grid:
      - grid-template-areas: "'i' 'n'"
      - grid-template-columns: "min-content"
      - grid-template-rows: "1fr 1fr"
      - row-gap: "12px"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - box-shadow: "none"
      - padding: "5px"
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
      - border-radius: "50px"
      - place-self: "center"
      - width: "52px"
      - height: "84px"
    icon:
      - color: >
          [[[
            var color = [variables.color_icon];
            if (color == "gray"){
              var color = "rgba(var(--color-theme),0.20)";
            } else if(color == "yellow"){
              var color = "rgba(var(--color-yellow),1)";
            } else if(color == "blue"){
              var color = "rgba(var(--color-blue),1)";
            } else if(color == "purple"){
              var color = "rgba(var(--color-purple),1)";
            } else if(color == "green"){
              var color = "rgba(var(--color-green),1)";
            } else if(color == "red"){
              var color = "rgba(var(--color-red),1)";
            }
            return color;
          ]]]
    img_cell:
      - background-color: >
          [[[
            var color = [variables.color_bg];
            if (color == "gray"){
              var color = "rgba(var(--color-theme),0.05)";
            } else if(color == "yellow"){
              var color = "rgba(var(--color-yellow),0.20)";
            } else if(color == "blue"){
              var color = "rgba(var(--color-blue),0.20)";
            } else if(color == "purple"){
              var color = "rgba(var(--color-purple),0.20)";
            } else if(color == "green"){
              var color = "rgba(var(--color-green),0.20)";
            } else if(color == "red"){
              var color = "rgba(var(--color-red),0.20)";
            }
            return color;
          ]]]
      - border-radius: "50%"
      - width: "42px"
      - height: "42px"
    name:
      - font-weight: "bold"
      - font-size: "9.5px"
      - width: "33px"
      - padding-bottom: "7px"
    state:
      - color: "rgba(var(--color-theme),0.9)"
  color: "var(--google-grey)"

[j3tang (J Tang)]

2 random questions:

could someone help with how I could go about putting in a mdi icon in place for an emoji in the double state chip?

is it possible to set pop-ups to tap actions instead of hold actions?

[Virgil_Popa (Virgil)]

Hello, can you share the code? I want to do the same, I also use Irrigation Unlimited.

Thx!

[TryhomeIT]

Can you share de code?

[antyamok]

hi,

I’ve a problem when to decrease or increase temperature. I’ve a following message - bottom left

Does anyone know where the error is from?

[Heijt771]

Thanks for the great “Theme” @tben !

I have been excitedly playing around with the theme and am so far very happy!
There is just 1 item that I wonder about being possible, or if I could raise a feature request for it
I currently created 3 different “main” views, for which I created navigation chips in the top part of the page. Now this all works fine, but I would love to be able to swipe the page on my phone to be able to move to one of the other 2 “main” tabs.

I found this custom component in the community: Lovelace Swipe Navigation
But I am unable to figure out how to add it to the minimalistic dashboard.

Anyone has any suggestion on whether this is possible or not? Thanks a lot!!

[massaquah (Adrian)]

Hey @Heijt771 ,
this looks really cool. Would you please share some details on how to set this up?

[basbrus (Bas)]

@Heijt771

I found this custom component in the community: Lovelace Swipe Navigation

Hi it’s definitely possible with that custom component. Your ui-lovelace.yaml should something like this:

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
swipe_nav:
  animate: fade
  swipe_amount: 5

title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
views:

You can alter the parameters from swipe_nav to your liking. More documentation on it is given on the github repo of the swipe navigation.

[madir]

hi,

few weeks ago, I have created a very similar card! have you used my code posted here on the forum??
or have you just used the HA area card?

I am not a coder. I am still working on improving the code, if you have made any corrections/improvements I would be happy if you can share your code!

thanks.

[NdR (Andrea Montanari)]

Hello guys, I’m having some trobles with the tap_action feature.
I’m using this feature in other dashboard without any problem, but in this case somethimes is not working.

For Example, in this card:
Room Card

The tap_action is not working on the entity_id on the side.

Same situation on the welcome_scenes_card: the chip_weather_date has more-info, but nothing happens if i click on it.

Some suggestions?

[basbrus (Bas)]

@NdR

Same situation on the welcome_scenes_card: the chip_weather_date has more-info, but nothing happens id i click on it.

This should be fixed in the next release
You can check the changes here: [card_welcome_scenes] Bugfixes by basbruss · Pull Request #537 · UI-Lovelace-Minimalist/UI · GitHub

[NdR (Andrea Montanari)]

Thank you for your reply!
Basically, you removed the tap_action from the card template and you added it in the chip template.

I already tried this yesterday, but it didn’t work

EDIT: I got it.
For some reason, in the card template file it was missing:
entity: "[[[ return variables.ulm_weather]]]"

Now it’s working properly!

[Stephan_Burgwal (Stephan)]

Speaking about the welcome card, for some reason I dont seem to get this working properly. The layout doesnt show properly. I think I’ve tried and checked all I could but nothing seems to help, any advise on this?

[basbrus (Bas)]

Which version are you on of the UI minimalist integration? This should be fixed from hacs-release v0.0.6-hotfix1

[NdR (Andrea Montanari)]

Did you selected the corrected theme?

[Stephan_Burgwal (Stephan)]

Well I installed 0.0.6 after the hotfix1 so I figured this was installed already but it wasn’t, I just updated to hotfix2 but still it shows incorrectly. It did change something but still not as it should. For the weather I guess the card isn’t compatible with my weahter client. I only set weather so it should auto populate.

[Stephan_Burgwal (Stephan)]

Yeah the correct theme is selected, all other cards do show as they should.

[basbrus (Bas)]

The weather chip is a known bug in the chrome-engine (it does work in firefox and safari) and should be fixed with the next release:

@basbrus

You can check the changes here: [card_welcome_scenes] Bugfixes by basbruss · Pull Request #537 · UI-Lovelace-Minimalist/UI · GitHub

Does your HomeAssistant have some scripts? Because it is set to only auto-populate script entities.
You could also manually add your own entities like input_booleans, lights, media_players or scenes as described in the docs. Maybe try that to show the pills.

[antyamok]

I don’t have the error message anymore but I don’t have any action to trigger when I press the “+” or “-” button.

The associed code:

increment_climate_temperature:
    alias: Augmentation T°
    sequence:
    - service: climate.set_temperature
      data_template:
        entity_id: "{{ entity_id }}"
        temperature: >
          {{ (state_attr(entity_id, 'temperature') | float) + (state_attr(entity_id, 'target_temp_step') | float) | float }}
decrease_climate_temperature:
    alias: Diminution T°
    sequence:
    - service: climate.set_temperature
      data_template:
        entity_id: "{{ entity_id }}"
        temperature: >
          {{ (state_attr(entity_id, 'temperature') | float) - (state_attr(entity_id, 'target_temp_step') | float) | float }}

[Stephan_Burgwal (Stephan)]

I do have some scripts just to test because I know it will auto populate these. But makes no difference if I add manually.