šŸŒ» Lovelace UI ā€¢ Minimalist

Share your Projects!
,
183

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?

184

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
185

Thx @bms. Now is working :slight_smile:

186

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?

187

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
188

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:

189

Did you ā€˜activateā€™ label by using show_label: true ?

190

Another day, another template :slight_smile:

Screenshot from 2021-08-17 10-47-49
Screenshot from 2021-08-17 10-47-49513Ɨ633 63.6 KB

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:

Screenshot from 2021-08-17 10-50-38
Screenshot from 2021-08-17 10-50-38511Ɨ875 62 KB

6 Likes
191

Can you share your configuration?

192

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
193

What is the content of template ā€˜Yellowā€™?

2 Likes
194

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
195

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
196

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:

197

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
198

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.

199

@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
200

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.

201

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
202

nice, spot on:)
image