🌻 Lovelace UI • Minimalist

[0la1]

Hi everyone,

does someone has a clue what kind of code I need to add so my temperature is displayed in the room card? Currently it says “on °C”.

This is my code:

    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          template:
            - card_room
            - red_no_state
          name: Wohnzimmer
          entity: light.licht_wohnzimmer
          icon: mdi:sofa
          label_temperature_entity: sensor.klima_wohnzimmer_temperature
          tap_action:
            action: navigate
            navigation_path: /ui-lovelace-minimalist/wohnzimmer
          variables:
            label_use_temperature: true
            label_use_brightness: false
            entity_1:
              entity_id: light.licht_wohnzimmer
              templates:
                - yellow_on
              tap_action:
                action: toggle

I know the wiki says it should be provided by an entity state or attribute. I’m just lost where to enter this. I do have a temperature sensor allocated to this room.

Thanks in advance!

[andy_vdg (Andy)]

Check Custom Card Room - UI Lovelace Minimalist at the very bottom it tells you how to get the label to display the temperature and not just the state.

[0la1]

Hi,

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

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

[andyblac (Andy Blackburn)]

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

[0la1]

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?

[andyblac (Andy Blackburn)]

edit the entity and set the display precision

[0la1]

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

[andyblac (Andy Blackburn)]

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

My Custom Cards for Minimalist UI

I thought I would share my custom cards, I would like your feedback on these. The dev branch will be used for the bleeding edge and could have bugs, but if you find any issues in the master or dev brach please submit a git issue, and I take a look. I did these for myself, but I hope you like. [Screenshot 2023-09-28 at 19.23.51] guides are here If your having issue with these cards, make sure you have all the necessary frontend integrations installed. first you need to have installed UI …

[0la1]

I’ll have a look at them

[billyjoebob999]

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.

[madlan]

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'

[Egoman]

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.

[hatarez]

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

[Egoman]

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,

[Sildenafil]

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

[andyblac (Andy Blackburn)]

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.

[LaUr3nTiU (Laurentiu Tertan)]

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.

[andyblac (Andy Blackburn)]

try using state-switch

GitHub - thomasloven/lovelace-state-switch: 🔹Dynamically replace lovelace...

[LaUr3nTiU (Laurentiu Tertan)]

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.

[andyblac (Andy Blackburn)]

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