🌻 Lovelace UI • Minimalist

I had to make two scripts for setting temperature, after that it worked

increment_climate_temperature:
  alias: increment_climate_temperature
  sequence:
  - service: climate.set_temperature
    data_template:
      entity_id: climate.vent_vsr500
      temperature: '{{(state_attr(''climate.vent_vsr500'' , ''temperature'')|round(0))
        + 1 }}'
    target:
      entity_id: climate.vent_vsr500
  mode: single
decrease_climate_temperature:
  alias: decrease_climate_temperature
  sequence:
  - service: climate.set_temperature
    data_template:
      entity_id: climate.vent_vsr500
      temperature: '{{(state_attr(''climate.vent_vsr500'' , ''temperature'')|round(0))
        - 1 }}'
    target:
      entity_id: climate.vent_vsr500
  mode: single

Those are the scripts that are called upon when hitting + or -

1 Like

Where I can I find icons to include notifications - like your basket? :slight_smile:

Is there anyway to change the person card state name? It now says home or not_home but i want to translate it to dutch (Thuis or Afwezig).

Just head over to https://emojipedia.org/ :slight_smile:

1 Like

The state is read from the person object that was passed through the variables (label: "[[[ return states[variables.ulm_card_person_entity].state ]]]"), so the home/away text is read from Home Assistant entity and that can only be changed in some system-files.

But it should be possible to map this to a custom variable, so it can be integrated in the language-file for custom naming, but that is up to @paddy0174 :slight_smile:

You could probably do a template sensor that translates the state of the person, and then call that state in the card instead?

Probably an easier way - but it’s what I’ve been doing whenever I need to change state of something :see_no_evil:

@rphlwnk

You can always override the label with your own custom value by adding label: your own text to the person card.

How can i add this to my conf?

I just made a custom card template to show the light colors in the icon and in the slider (if used).
By just adding the custom templates needed as stated on Changing template - UI-Lovelace-Minimalist you can accomplish the same result.
Light mode:


Dark mode:

card_light_slider_collapse_color:
  template: 
    - ulm_language_variables
  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:
        card:
          - background-color: >
              [[[
                if (states['sun.sun'].state == "below_horizon"){
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',var(--opacity-bg))'
                  }
                  else{
                    return 'rgba(var(--color-yellow),var(--opacity-bg))'
                  } 
                }else if (states['sun.sun'].state == "above_horizon")
                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
              ]]]
        grid:
          - row-gap: 12px
  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'
        template:
          - icon_info
          - color_slider
        entity: "[[[ return entity.entity_id ]]]"
        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_light_slider_collapse_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: conditional
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: 'on'
        card:
          type: 'custom:my-slider'
          entity: '[[[ return entity.entity_id ]]]'
          radius: 14px
          height: 42px
          mainSliderColor: >
              [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
                  }
                  else{
                    return 'rgba(var(--color-yellow),1)'
                  } 
              ]]]
          secondarySliderColor: >
              [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
                  }
                  else{
                    return '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;
            }
color_slider:
  state:
    - styles:
        icon:
          - color: >
              [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)';
                  }
                  else{
                    return 'rgba(var(--color-yellow),1)';
                  } 
              ]]]
        label:
          - color: >
              [[[
                if (states['sun.sun'].state == "below_horizon"){
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
                  }
                  else{
                    return 'rgba(var(--color-yellow-text),1)'
                  } 
                }else if (states['sun.sun'].state == "above_horizon")
                  return 'rgba(var(--color-yellow-text),1)';
              ]]]
        name:
          - color: >
              [[[
                if (states['sun.sun'].state == "below_horizon"){
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
                  }
                  else{
                    return 'rgba(var(--color-yellow-text),1)'
                  } 
                }else if (states['sun.sun'].state == "above_horizon")
                  return 'rgba(var(--color-yellow-text),1)';
              ]]]
        img_cell:
          - background-color: >
              [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
                  }
                  else{
                    return 'rgba(var(--color-yellow),0.2)';
                  } 
              ]]]
        card:
          - background-color: 'rgba(0,0,0,0)'
      value: 'on'

If don’t want to affect the slider color just change these parameters in the card_light_slider_collapse_color template to:

mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
5 Likes

Hi all,

Just to share something I just found out.
The reason why icons in the chips appear as black and white in chrome is due to “bold” option.

From chips template:

  styles:
    label:
      - justify-self: center
      - padding: 0px 6px
      - font-weight: bold
      - font-size: 14px

You get:image

If you comment out the bold:

  styles:
    label:
      - justify-self: center
      - padding: 0px 6px
      #- font-weight: bold
      - font-size: 14px

You get: image

Hope I helped :slight_smile:

4 Likes

anyone knows if there is a buttoncard-template for this card?

image

would like to change it to use it for a room button like this:

arrow up: tap to turn on/off lights in that room
pause: open a popup card to control covers/blinds in that room
arrow down: popup card to controll the heater in the room.

also i´m having an isse with the Light Slider Card (collapse), when i add it to my lovelace.yaml it will stay empty and not load.

used it like this:

- type: 'custom:button-card'
  template: card_light_slider_collapse
  variables:
    ulm_card_light_slider_collapse_name: Office
  entity: light.office
1 Like

So I’ve been tinkering with the Cover card - to make a card that I can dim the lights with.


card_dim_kleskap:
  variables:
    ulm_card_cover_with_buttons_name: "n/a"
  triggers_update:
    - "[[[ variables.ulm_card_cover_with_buttons_entity ]]]"
  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
          - ulm_language_variables
          - dimmer_with_buttons
        tap_action:
          action: more-info
        entity: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
        name: '[[[ return variables.ulm_card_cover_with_buttons_name ]]]'
    item2:
      card:
        type: 'custom:button-card'
        template: list_items
        custom_fields:
          item1:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: script.dim_ned_lys
              icon: 'mdi:arrow-down'
          item2:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: light.toggle
                service_data:
                  entity_id: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
              icon: 'mdi:power'
          item3:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: script.dim_opp_kleskap
              icon: 'mdi:arrow-up'

dimmer_with_buttons:
  tap_action:
    action: more-info
  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;
      }
    ]]]
  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)"

image
image

I can’t figure out how I can make the background turn yellow when the light is on - like the regular buttons.
I tried adding the yellow template


card_dim_kleskap:
  template:
    - yellow

…..

But that did nothing.

1 Like

Hey there, nice idea. Could you please share the yaml code for this card?
thanks /danke :slight_smile:

To get the background colorized you can use this state trigger:

state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'

I tried adding it like this, but then the button just disappeared:


card_dim_kleskap:
  variables:
    ulm_card_cover_with_buttons_name: "n/a"
  triggers_update:
    - "[[[ variables.ulm_card_cover_with_buttons_entity ]]]"
  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
          - ulm_language_variables
          - dimmer_with_buttons
        tap_action:
          action: more-info
        entity: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
        name: '[[[ return variables.ulm_card_cover_with_buttons_name ]]]'
    item2:
      card:
        type: 'custom:button-card'
        template: list_items
        custom_fields:
          item1:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: script.dim_ned_lys
              icon: 'mdi:arrow-down'
          item2:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: light.toggle
                service_data:
                  entity_id: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
              icon: 'mdi:power'
          item3:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: script.dim_opp_kleskap
              icon: 'mdi:arrow-up'


state:
    - operator: template
      value: "[[[ variables.ulm_card_cover_with_buttons_entity == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'

This made the button show again - but no color change

I think you will need to add some id’s to your states defined in the card. Check the Merge by id in the documentation.

I’m on my phone right now so I can’t investigate further. But I had the same symptoms as well, and it was due to the incorrect merging of the states.

Hope this helps :wink:

Hey, whats the magic to show the button vertically aligned like this? Didn’t found anything in the docs or here in this thread. :face_with_monocle:

grafik

2 Likes

@panhans

Don’t know if this is the right way of doing it. But this is what I use:

	  - type:vertical-stack
		cards:
          - type: horizontal-stack
            cards:

              - type: "custom:button-card"
                template: edge
			  - type: 'custom:button-card'
				template: card_input_boolean
				entity: input_boolean.guest_mode

              - type: "custom:button-card"
                template: edge
			  - type: 'custom:button-card'
				template: card_input_boolean
				entity: input_boolean.guest_mode

              - type: "custom:button-card"
                template: edge
			  - type: 'custom:button-card'
				template: card_input_boolean
				entity: input_boolean.guest_mode
				
              - type: "custom:button-card"
                template: edge
			  - type: 'custom:button-card'
				template: card_input_boolean
				entity: input_boolean.guest_mode

Hope it helps.

Thx, but I had no success.
grafik

And I have another issue: There are no states in my cards. For example the off-state is missing.

//EDIT: ok, I found a template called vertical_buttons. Seems this is the solution