🌻 Lovelace UI • Minimalist

Hi,

this is for the custom card, but I am using this one:

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

your using

    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          template:
            - card_room
            - red_no_state
          name: Wohnzimmer
          entity: light.licht_wohnzimmer
          icon: mdi:sofa

ie
entity: light.licht_wohnzimmer, this need to be your temp sensor not the light enitity

oh wow, I should have a break and check the other day before asking for help. Thanks!

Is there a way to format the temperature to be without decimals by any chance?

edit the entity and set the display precision

strangely, the are all set to be with .1 precision, but show with .12 precision in the dashboard and everywhere else.

you could try my modded room card, it based on the original room card.

1 Like

I’ll have a look at them

If you happen to be using zigbee2mqtt you will need to go to the z2m dashboard and set the decimal there. Just load up the dashboard, select the sensor you want to change, then Settings (specific). if I remember correctly the change will go into effect the next time the sensor checks in/temp change.

2 Likes

I’m trying to setup a button on the card_room card that will send my vacuum robot to that room (spot clean) - I’m struggling with the yaml though - can anyone help?

I get the following error when clicking entity_2:

Failed to call service vacuum/send_command. required key not provided @ data['command']

    - type: "custom:button-card"
      template:
        - card_room
        - yellow_no_state
      name: Bedroom
      entity: sensor.bedroom_air_purifier_temperature
      icon: mdi:bed
      tap_action:
        action: navigate
        navigation_path: "bedroom"
      variables:
        label_use_temperature: true
        label_use_brightness: false
        entity_1:
          entity_id: light.bedroom_ceiling_light
          templates:
            - yellow_on
          tap_action:
            action: toggle
            service_data:
              entity_id: light.bedroom_ceiling_light
        entity_2:
          entity_id: vacuum.henry
          templates:
            - blue_no_state
          tap_action:
            action: call-service
            service: vacuum.send_command
            data:
              command: app_segment_clean
              params:
                - segments:
                    - 16
                  repeat: 1
            target:
              entity_id: vacuum.henry

Here is my working Call Service code:

service: vacuum.send_command
data:
  command: app_segment_clean
  params:
    - segments:
        - 16
      repeat: 1
target:
  entity_id: vacuum.henry

I think I’ve worked it out, using a script and variable:

This seems to work - I created a script and pass the room number:

alias: Vacuum Room
sequence:
  - service: vacuum.send_command
    data:
      command: app_segment_clean
      params:
        - segments:
            - "{{ room }}"
          repeat: 1
    target:
      entity_id: vacuum.henry
mode: queued
icon: mdi:robot-vacuum
        entity_4:
          entity_id: vacuum.henry
          templates:
            - blue_on
          tap_action:
            action: call-service
            service: script.vacuum_room
            service_data:
              room: '16'

Hello everyone, I’m looking for some help, please.

I’m installing minimalist ui as per the instructions but afterwards I cannot restart as I keep getting this error.

Package frontend setup failed. Component frontend has duplicate key 'state-icon-color'

If I remove the following from my configuration file the error disappears and I can reboot.

frontend:

  themes: !include_dir_merge_named themes

This is the only theme that I have installed, so I’m unsure why the message is stating that I have a duplicate key?

Any help would be very much appreciated.

Thank you.

Remove any frontend integration from your config. You are probably stating it already and wherever is set it has that key already.

1 Like

Thank you very much. You were correct.

I have been doing this long enough to know better, and I can not believe I did not think of that!

Thank you for your assistance.

Cheers,

andyblac
I’m trying to modify the “card_esh_welcome” card by combining the weather card used by you.
How can I fix these problems? (reduce top space, remove shadows and border)

This is the wip code:

welcome_card:
  template: "ulm_language_variables"
  variables:
    ulm_weather: "[[[ return variables.ulm_weather]]]"
    entity_1:
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_2:
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_3:
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_4:
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_5:
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
  show_icon: false
  show_label: true
  show_name: false
  styles:
    grid:
      - grid-template-areas: >
          [[[
            if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
              return "\'item1\' \'item2\' ";
            } else {
              return "\'item1\' \'item2\' \'item3\'";
            }
          ]]]
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
      - row-gap: "0px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px"
      - cursor: "default"
      - "--mdc-ripple-press-opacity": 0 # prevent click animation
    custom_fields:
      item3:
        - display: >
            [[[
              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
      item4:
        - display: >
            [[[
              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        show_name: true
        show_entity_picture: false
        name: |
          [[[
            var today = new Date();
            var time = today.getHours()
            let welcome = '';
            if (time >= '18'){
              welcome = variables.ulm_evening;
            } else if (time >= '12'){
              welcome = variables.ulm_afternoon;
            } else if (time >= '5'){
              welcome = variables.ulm_morning;
            } else {
              welcome = variables.ulm_hello;
            }
            return welcome + ', ' + '   <br>' + user.name + '!';
          ]]]
        styles:
          name:
            - align-self: "start"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "24px"
            - margin-left: "16px"
          grid:
            - grid-template-areas: "'i n' 'i l'"
            - grid-template-columns: "min-content auto"
            - grid-template-rows: "min-content min-content"
            - text-align: "start"
          card:
            - box-shadow: "none"
            - padding: "2px"
            - cursor: "default"
            - "--mdc-ripple-press-opacity": 0 # prevent click animation
    item2:
      card:
        type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:clock-weather-card
            entity: weather.openweathermap
            forecast_days: 5
            locale: en-GB
            hide_today_section: false
            hide_forecast_section: true
            hide_clock: false
            hide_date: false
            hourly_forecast: true
            use_browser_time: true
            card_mod:
              style: |
                ha-card {
                  height: 136px !important;
                }
          - type: custom:hourly-weather
            entity: weather.openweathermap
            num_segments: 18 # optional, defaults to 12
            name: "" # optional, defaults to "Hourly Weather"
            card_mod:
              style: |
                ha-card {
                  height: 90px !important;
                }
          - type: custom:clock-weather-card
            entity: weather.openweathermap
            sun_entity: sun.sun
            weather_icon_type: fill
            animated_icon: true
            forecast_days: 7
            locale: en-GB
            time_format: 24
            date_pattern: P
            hide_today_section: true
            hide_forecast_section: false
            hide_clock: false
            hide_date: false
            hourly_forecast: false
            use_browser_time: true
        styles:
          card:
            - box-shadow: "none"
            - padding: "0px"
            - cursor: "default"
            - "--mdc-ripple-press-opacity": 0 # prevent click animation

    item3:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_nav"
        styles:
          card:
            - border-radius: "none"
            - box-shadow: "none"
            - padding: "4px"
            - cursor: "default"
            - "--mdc-ripple-press-opacity": 0 # prevent click animation
        variables:
          entity_1: "[[[ return variables.entity_1 ]]]"
          entity_2: "[[[ return variables.entity_2 ]]]"
          entity_3: "[[[ return variables.entity_3 ]]]"
          entity_4: "[[[ return variables.entity_4 ]]]"
          entity_5: "[[[ return variables.entity_5 ]]]"

card_esh_welcome_title:
  tap_action:
    action: "none"
  show_icon: false
  show_label: true
  show_name: true
  styles:
    label:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1rem"
      - opacity: "0.4"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "20px"
    grid:
      - grid-template-areas: "'n' 'l'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - width: "auto"
      - margin-top: "-10px"
      - margin-left: "16px"
      - margin-bottom: "-15px"
      - cursor: "default"
      - "--mdc-ripple-press-opacity": 0 # prevent click animation

card_esh_welcome_nav:
  show_icon: false
  show_name: true
  show_label: false
  styles:
    grid:
      - grid-template-areas: |
          [[[
            return "'" + [(variables.entity_1?.nav ? 'item1' : ''),
                        (variables.entity_2?.nav ? 'item2' : ''),
                        (variables.entity_3?.nav ? 'item3' : ''),
                        (variables.entity_4?.nav ? 'item4' : ''),
                        (variables.entity_5?.nav ? 'item5' : '')].join(' ') + "'";
          ]]]
      - grid-template-columns: |
          [[[
            return [(variables.entity_1?.nav ? '1fr' : ''),
                    (variables.entity_2?.nav ? '1fr' : ''),
                    (variables.entity_3?.nav ? '1fr' : ''),
                    (variables.entity_4?.nav ? '1fr' : ''),
                    (variables.entity_5?.nav ? '1fr' : '')].join(' ');
          ]]]
      - grid-template-rows: "min-content"
      - justify-items: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - overflow: "visible"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        variables:
          number_of_nav_pills: |
            [[[
              return [variables.entity_1?.nav,
                      variables.entity_2?.nav,
                      variables.entity_3?.nav,
                      variables.entity_4?.nav,
                      variables.entity_5?.nav].filter(el => el !== undefined).length;
            ]]]
          entity: "[[[ return variables.entity_1; ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        variables:
          number_of_nav_pills: |
            [[[
              return [variables.entity_1?.nav,
                      variables.entity_2?.nav,
                      variables.entity_3?.nav,
                      variables.entity_4?.nav,
                      variables.entity_5?.nav].filter(el => el !== undefined).length;
            ]]]
          entity: "[[[ return variables.entity_2; ]]]"
    item3:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        variables:
          number_of_nav_pills: |
            [[[
              return [variables.entity_1?.nav,
                      variables.entity_2?.nav,
                      variables.entity_3?.nav,
                      variables.entity_4?.nav,
                      variables.entity_5?.nav].filter(el => el !== undefined).length;
            ]]]
          entity: "[[[ return variables.entity_3; ]]]"
    item4:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        variables:
          number_of_nav_pills: |
            [[[
              return [variables.entity_1?.nav,
                      variables.entity_2?.nav,
                      variables.entity_3?.nav,
                      variables.entity_4?.nav,
                      variables.entity_5?.nav].filter(el => el !== undefined).length;
            ]]]
          entity: "[[[ return variables.entity_4; ]]]"
    item5:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        variables:
          number_of_nav_pills: |
            [[[
              return [variables.entity_1?.nav,
                      variables.entity_2?.nav,
                      variables.entity_3?.nav,
                      variables.entity_4?.nav,
                      variables.entity_5?.nav].filter(el => el !== undefined).length;
            ]]]
          entity: "[[[ return variables.entity_5; ]]]"

card_esh_welcome_pill_nav:
  tap_action:
    action: "navigate"
    navigation_path: "[[[ return variables.entity?.nav; ]]]"
  show_icon: false
  show_label: false
  show_name: false
  state:
    - operator: "template"
      value: "[[[ return !variables.entity?.nav; ]]]"
      styles:
        card:
          - display: "none"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "1fr 1fr"
      - row-gap: "12px"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - border-radius: "50px"
      - place-self: "center"
      - width: "[[[ return (52 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
      - height: "[[[ return (84 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
      - "--mdc-ripple-press-opacity": 0.12 # allow click animation
  color: "var(--google-grey)"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        tap_action:
          action: "navigate"
          navigation_path: "[[[ return variables.entity?.nav; ]]]"
        show_icon: true
        show_label: false
        show_name: false
        icon: "[[[ return variables.entity?.icon ]]]"
        styles:
          icon:
            - color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 1)`;]]]"
            - width: "[[[ return (20 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
          img_cell:
            - background-color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 0.20)`;]]]"
            - border-radius: "50%"
            - width: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
            - height: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
          grid:
            - grid-template-areas: "i"
          card:
            - box-shadow: "none"
            - border-radius: "50px"
            - padding: "5px"
        state:
          - value: "on"
            styles:
              card:
                - overflow: "visible"
                - box-shadow: |
                    [[[
                      if (hass.themes.darkMode){
                        return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                      } else {
                        return "var(--box-shadow)";
                      }
                    ]]]
    item2:
      card:
        type: "custom:button-card"
        tap_action:
          action: "navigate"
          navigation_path: "[[[ return variables.entity?.nav; ]]]"
        show_icon: false
        show_label: false
        name: "[[[ return variables.entity?.name ]]]"
        styles:
          name:
            - font-weight: "bold"
            - font-size: "[[[ return (9.5 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
            - width: "[[[ return (33 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
            - padding-bottom: "7px"
          grid:
            - grid-template-areas: "n"
          card:
            - box-shadow: "none"
            - padding: "0px 5px 5px 5px"
            - margin-top: "-5px"
            - border-radius: "50px"

card_esh_welcome_topbar:
  show_icon: false
  show_label: false
  show_name: true
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3'"
      - grid-template-columns: "1fr 7fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - cursor: "default"
      - "--mdc-ripple-press-opacity": 0 # prevent click animation
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "chips"
        tap_action:
          action: "call-service"
          service: "input_boolean.toggle"
          service_data:
            entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
        show_icon: true
        icon: "mdi:chevron-up"
        entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
        styles:
          grid:
            - grid-template-areas: "'i'"
          card:
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - visibility: "[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]"
            - "--mdc-ripple-press-opacity": 0.12 # allow click animation
        state:
          - value: "on"
            icon: "mdi:chevron-down"
            styles:
              icon:
                - color: "rgb(var(--color-theme))"
    item2:
      card:
        type: "custom:button-card"
        template: "chip_weather_date"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        tap_action:
          action: "navigate"
          navigation_path: "/lovelace-mobile/temperature"
        entity: "[[[ return variables.ulm_weather]]]"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12 # allow click animation
    item3:
      card:
        type: "custom:button-card"
        template: "chip_mdi_icon_only"
        variables:
          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
        tap_action:
          action: "navigate"
          navigation_path: "/config/dashboard"
        styles:
          card:
            - align-self: "end"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12 # allow click animation

thx

1 Like

if you are wanting to just see at as one card, it will ALL have to be in one card.

but 1st check your indent level for

        styles:
          card:
            - box-shadow: "none"
            - padding: "0px"
            - cursor: "default"
            - "--mdc-ripple-press-opacity": 0 # prevent click animation

make sure the stack-in-card has this block of code too, if that is the border your trying to hide. I see you have it for the stuff in the stack-in-card, which is correct, but fo you want to hide the border of the stack-in-card, it will need one too.

I want to do some sort of a adaptive dashboard in the sense that for wide displays I’ll display 3 cards, while for narrower displays only 2 (hiding the 3rd one).

Just by using grid-template-areas, it doesn’t seem possible that I can hide a card named by a grid-area entry. Am I getting this wrong? Or what’s the approach to hide/show some cards for a certain display width?

edit: I know I can use extra_styles and css to hide it, but I was wondering if there’s a way to make use of the grid configuration yaml.

try using state-switch

2 Likes

Hmmm, I was able to switch between displaying 2 cards/entities depending on the width of the display, but I’m having a hard time figuring out how to set the narrow card to be empty.

For example

          - view_layout:
              grid-area: "card5"
            type: custom:state-switch
            entity: mediaquery
            states:
              "(min-width: 1000px)":
                type: markdown
                content: more than 1000 px
              "all":
                type: "custom:button-card"
                template: "card_generic"
                entity: light.office

This switches between the text and the light switch, but I’d like “all” to be empty instead, but it expects an element.

don’t use the all state, just remove it .

1 Like

Working on my first dashboard, and still pretty new to Home Assistant. Making good progress on my dashboard, but having a problem trying to change an icon in the Room Card. Specifically I’m trying to change one of the entities to have an icon that is different from what is assigned to the entity. Here is my yaml:

              entity_2:
                entity_id: cover.master_bedroom_slider
                icon: mdi:arrow-up-bold
                templates:
                  - green_on
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data:
                    entity_id: cover.master_bedroom_slider

I’m trying to change the ‘cover’ icon to be an up arrow (mdi:arrow-up-bold)

Any help is appreciated!

Bill

that is not supported in the default room card, but take a look at my custom room card, it has loads of additional features.

https://community.home-assistant.io/t/my-custom-cards-for-minimalist-ui

I be happen to help in that thread i you need help settingup, or have any questions