🌻 Lovelace UI • Minimalist

Ok. first of all thx for this great looking simple design. I’m using HA for a few months and now i try to set this up onto an separate test HA environment.
Right now I’m not sure how to use this correctly.

Example
battery indicator: “sensor.mi_schlafzimmer_batteriestatus”

I want to use this design / button from your GitHub:

This is my code in the “\config\lovelace\views\ownsite.yaml”:

  - title: OWN
    icon: 'mdi:snake'
    path: own
    cards:
      - type: 'custom:button-card'
        name: Test
        template: title
      - entity: sensor.mi_schlafzimmer_batteriestatus
        template: 
          - icon_info_bg
          - generic
        type: 'custom:button-card'

and this is the output:
own

I’m not sure how to handle the TEMPLATE code on your GitHub?

Thanks & Greeting

PS: Will this design work in the HA companion app?

Hi @flirtysanchez,

I’m not really sure what your question is because it looks like it is working in your screenshot :slight_smile:

@tben has his layout in a grid card, which could explain why your card is so wide:

You can also chance the Mi Schlafzimmer - Batteriestatus if you want by adding a custom label to your card:

entity: sensor.mi_schlafzimmer_batteriestatus
label: Battery
template: 
    - icon_info_bg
   - generic
type: 'custom:button-card'

If there is anything else, I’m happy to help.

PS: yes it will look exactly the same :smiley:

1 Like

Thx @bms. Now is working :slight_smile:

Problem not switching themes between dark and light mode seems to be related to an error with modes keyword. Added an issue to GitHub.

Did anyone get the automatic switching of themes working?

Thx for the hints! Slowly things are moving in the right direction.

The label: battery doesn’t work. It overwrites the battery %. The solution:

name: Battery

I just answered your Github issue. :slight_smile:

mode without an “s” is correct. I’ll take a look why the colors and borders aren’t working. If you could provide a piece of code (eg. a place where it won’t work for you), that would be helpful. Ideally just post it in the Github issue. :slight_smile:

Did you ‘activate’ label by using show_label: true ?

Another day, another template :slight_smile:

Modified the template for a homekit style look + quick toggles for the lights in each room.

Clicking on a room brings you to the details page of the room:

6 Likes

Can you share your configuration?

The room template config:

########################################################################################################
#                                                                                                      #
#                                             ROOM                                                     #
#                                                                                                      #
########################################################################################################
  room:
    tap_action:
      action: more-info
    color: var(--google-grey-500)
    show_icon: true
    show_name: true
    show_label: true
    size: 20px
    label: >-
      [[[ 
          if (entity.state !='unavailable'){
            if (entity.state =='off'){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return 'Off';  
            }else{
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri : '0') + '%'; 
            }
          }else{
            return "Unavailable";
          }
      ]]]
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"i toggle" "n n" "l l"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: min-content
      icon:
        - color: 'rgba(var(--color-theme),0.2)'
      img_cell:
        - background-color: 'rgba(var(--color-theme),0.05)'
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px
      name:
        - align-self: end
        - justify-self: start
        - font-weight: bold
        - font-size: 14px
        - margin-left: 12px
        - margin-top: 12px
      label:
        - justify-self: start
        - align-self: start
        - font-weight: bolder
        - font-size: 12px
        - filter: opacity(40%)
        - margin-left: 12px
      state:
        - justify-self: start
        - align-self: start
        - font-weight: bolder
        - font-size: 12px
        - filter: opacity(40%)
        - margin-left: 12px
    custom_fields:
      toggle:
        card:
          entity: '[[[ return entity.entity_id ]]]'
          name: '[[[ return name ]]]'
          state:
            - value: 'on'
              icon: 'mdi:lightbulb'
              styles:
                icon:
                  - color: 'rgba(var(--color-yellow),1)'
                img_cell:
                  - background-color: 'rgba(var(--color-yellow), 0.2)'
            - value: 'off'
              icon: 'mdi:lightbulb-off'
          tap_action:
            action: toggle
          type: 'custom:button-card'
          template: 
            - widget_icon

Usage in lovelace:

              - type: 'custom:button-card'
                template: 
                  - room
                  - yellow
                entity: light.keuken
                name: Keuken
                icon: mdi:silverware-fork-knife
                tap_action:
                  action: navigate
                  navigation_path: '/lovelace-mobile/keuken/'

Not really optimized, so there will be some duplication from other components.
Tips to improve are welcome :slight_smile:

5 Likes

What is the content of template ‘Yellow’?

2 Likes

Yes, sorry.

I added some more colors and gave them a more suitable name :stuck_out_tongue:

####################################################
#                                                  #
#                    COLOR                         #
#                                                  #
####################################################
  yellow:
    styles:
      icon:
        - color: rgba(var(--color-yellow), 1)
      img_cell:
        - background-color: rgba(var(--color-yellow), 0.2)
  yellow_on:
    state:
      - styles:
          icon:
            - color: 'rgba(var(--color-yellow),1)'
          img_cell:
            - background-color: 'rgba(var(--color-yellow), 0.2)'
        value: 'on'

####################################################

  blue:
    styles:
      icon:
        - color: rgba(var(--color-blue), 1)
      img_cell:
        - background-color: rgba(var(--color-blue), 0.2)
  blue_on:
    state:
      - styles:
          icon:
            - color: 'rgba(var(--color-blue),1)'
          img_cell:
            - background-color: 'rgba(var(--color-blue), 0.2)'
        value: 'on'

####################################################

  green:
    styles:
      icon:
        - color: rgba(var(--color-green), 1)
      img_cell:
        - background-color: rgba(var(--color-green), 0.2)
  green_on:
    state:
      - id: green_on
        styles:
          icon:
            - color: 'rgba(var(--color-green), 1)'
          img_cell:
            - background-color: 'rgba(var(--color-green), 0.2)'
        value: 'on'
  green_off:
    state:
      - id: green_off
        styles:
          icon:
            - color: 'rgba(var(--color-green), 1)'
          img_cell:
            - background-color: 'rgba(var(--color-green), 0.2)'
        value: 'off'

####################################################

  red:
    styles:
      icon:
        - color: rgba(var(--color-red), 1)
      img_cell:
        - background-color: rgba(var(--color-red), 0.2)
  red_on:
    state:
      - id: red_on
        styles:
          icon:
            - color: rgba(var(--color-red), 1)
          img_cell:
            - background-color: rgba(var(--color-red), 0.2)
        value: 'on'
  red_off:
    state:
      - id: red_off
        styles:
          icon:
            - color: rgba(var(--color-red), 1)
          img_cell:
            - background-color: rgba(var(--color-red), 0.2)
        value: 'off'

####################################################

  violet:
    styles:
      icon:
        - color: rgba(var(--color-violet), 1)
      img_cell:
        - background-color: rgba(var(--color-violet), 0.2)

@tben This will be a breaking change, but I think this will improve the repository :wink:

2 Likes

The proposed change above allows for flexible configuration:

This is an input_boolean to change whether my motion sensor should control the lights:

              - type: custom:button-card
                entity: input_boolean.veranda_light_on
                name: Sensor
                label: "[[[ return entity.state === 'off' ? 'Active' : 'Not active' ]]]"
                template:
                  - icon_info_bg
                  - green_off
                  - red_on

Love the design! Are you able to share the background image you use please?

This design is getting harder and harder to ignore, might have to start transferring mine over at some point :slight_smile:

Yes, of course.

I stole it from here:

Add the lovelace-background: to your theme yaml file.

(can’t post it here, because of the char limit)

1 Like

Great work on the room button:)

I use groups instead of a singel light and wonder if its possible to add temperature etc… to his card instead of the dimmer value? Think this would be a nice feature to have a quick overview of the room.

@steinis I was thinking the same thing. Because i allready know the state of the lights by the color of the toggle button.

You can just change the label component from the template (if you know some javascript)

label: >-
      [[[ 
          if (entity.state !='unavailable'){
            if (entity.state =='off'){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return 'Off';  
            }else{
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri : '0') + '%'; 
            }
          }else{
            return "Unavailable";
          }
      ]]]
1 Like

Yeah was thinking it was something here. But how do I get/fetch more then one entity from lovelace config and into the generic template? I still want the light to be the main entity but I can easy add temp, lux etc to the card.

There are a few possibilities, but the easiest (and most flexible) will probably be to override the label property for each room:

              - type: 'custom:button-card'
                template: 
                  - room
                  - yellow
                entity: light.keuken
                name: Keuken
                icon: mdi:silverware-fork-knife
                tap_action:
                  action: navigate
                  navigation_path: '/lovelace-mobile/keuken/'
                label: '[[[ return states["sensor.temp_sensor_kitchen"].state + "°C" ]]]'

(not tested, but should be close to working) :stuck_out_tongue:

2 Likes

nice, spot on:)
image