šŸŒ» Lovelace UI ā€¢ Minimalist

Thanks! I will have a look at it! :slight_smile:

Itā€™s the Welcome Card With Weather but slightly changed things to make it only display the weather, i did exactly the same with mine. You can take the code to get the same result.

custom_card_paddy_welcome_with_weather:
  template:
    - ulm_custom_card_paddy_welcome_language_variables
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
      - row-gap: 1px
    card:
      - height: 70px
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
  custom_fields:
    item2:
      card:
        type: weather-forecast
        tap_action:
          action: none
        entity: "[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]"
        show_forecast: false
        name: ""
        card_mod:
        style: |
          ha-card.type-weather-forecast {
            border-radius: 14px;
            box-shadow: none;
            margin-top: -25px;
          }
          ha-card.type-weather-forecast .state {
            text-align: left;
            font-size: 18px;
            font-weight: bolder;
            margin-top: 2px;
          }
          ha-card.type-weather-forecast .name {
            text-align: left;
            font-size: 14px;
          }
          ha-card.type-weather-forecast .temp-attribute {
            text-align: right;
          }
          ha-card.type-weather-forecast .temp {
            text-align: right;
            font-size: medium;
            font-weight: bolder;
            margin-right: 16px;
          }
          ha-card.type-weather-forecast .temp span {
            text-align: right;
            font-size: medium;
            font-weight: bolder;
          }
          ha-card.type-weather-forecast .attribute {
            text-align: right;
            font-size: smaller;
          }

How do you do the 2/2 for presence detection?

Just using the chip_presence_detection:

          - type: 'custom:button-card'
            template: chip_presence_detection
            variables:
              ulm_chip_presence_counter_residents: sensor.people_presence
              ulm_chip_presence_counter_guests: sensor.my_guests_counter

And these are my sensors (I hardcoded the guests for 2, this way means there is 2 people home out of two:

      people_presence:
        friendly_name: People Presence
        value_template: >-
          {{ states.person|selectattr('state','equalto','home')|list|length }}


      my_guests_counter:
        friendly_name: Guests Presence
        value_template: >-
          {{ 2 | int }}

And this is the chip template:

chip_presence_detection:
  template: chips
  triggers_update:
    - "[[[ return variables.ulm_chip_presence_counter_residents; ]]]"
    - "[[[ return variables.ulm_chip_presence_counter_guests; ]]]"
  label: |
    [[[
      var guests = states[variables.ulm_chip_presence_counter_guests].state ? ' / ' + states[variables.ulm_chip_presence_counter_guests].state : '';
      return 'šŸ  ' +  states[variables.ulm_chip_presence_counter_residents].state + guests;
    ]]]
2 Likes

Did you ever work the issue?
If so, would you mind sharing the template/yaml?
:slight_smile:
Edit: never mind, my bad, saw that your where working on it now on Github. Keep up the great work!

It is still under active development. But any help is appreciated.
More info can be found in the pull request

2 Likes

Hi Bavo. Saw your contribution in Github! Awesome work!
If I could, I would help out coding, but I canā€™t code :joy:

Where did you do those changes? I want to use that card for thermostats also, but I canā€™t figure it outā€¦

@vandenbogerd I made a new custom card for climate entities. It change the icon/color depending on the state etc. You just have to set your climate entity in the card config and be sure it use the same climate attributes as mine heating system (Vicareā€¦). Give me a day and I will upload it + the scripts for increase/decrease the temperature, I just need to find the time for uploading all my custom cards (Sonos, Vicare, TV, STB and PlayStation).

3 Likes

A vacuum card with buttons for

  • Return home
  • Open/close vacuum Ā«garage doorĀ»
  • Zones to clean
  • Exit garage
6 Likes

Iā€™m really enjoying learning lovelace, but Iā€™m also new to designing dashboards. Is there a collection of examples somewhere? Preferably ones designed for desktop, as well as mobile? Not just pictures (although those are needed, in order to visualize), but also the yaml, to understand how everything fits together?

As an example, I truly love this dashboard, and while I donā€™t want to copy it, Iā€™d like to know how to do something similar. But Iā€™ve got no idea where to start with it.

Also adjusted the default battery template so that an alarm is displayed when the battery falls below a certain threshold.

Very nice! Do you have the code for this? :slight_smile:

Possible to toggle a chip template when i tap on it?
Struggling to get this to workā€¦

          - type: 'custom:button-card'
            template: chip_icon_state
            variables:
              ulm_chip_icon_state_icon: 'šŸ’”'
              ulm_chip_icon_state_entity: light.kallare_taklampor
            tap_action:
              action: toggle
              entity: light.kallare_taklampor
            triggers_update: light.kallare_taklampor

Try:

action: call-service
service: light.toggle
service_data:
  entity_id: your entity

Magic!
Thanks @Vintage89

1 Like

thx @Noah and @anon36468094 the lights count works great

Have you tried

hi, can you post your configuration?
Thank you.

Havenā€™t cleaned up the code yet but this is what Iā€™ve got at the moment. I couldnā€™t decide on names or icons for the zones, so they could be easily switched to template: widget_icon and do icons later on if I feel like it. I used the custom aircon card as a starting point.

Card:


  - type: custom:button-card
    template: custom_card_vacuum_with_buttons
    variables:
      entity: vacuum.roborock_s7
      name: Britt

Templates:


widget_name:
  tap_action:
    action: toggle
  show_icon: false
  show_name: true
  styles:
    grid:
      - grid-template-areas: '"n"'
    card:
      - box-shadow: none
      - padding: 0px
      - background-color: rgba(var(--color-theme),0.05)
      - border-radius: 14px
      - place-self: center
      - height: 42px
    name:
      - font-weight: bold
      - font-size: 14px
    icon:
      - color: rgba(var(--color-theme),0.9)
  size: 20px
  color: var(--google-grey)

custom_card_vacuum:
  template:
    - ulm_language_variables
  tap_action:
    action: more-info
  icon: |
    [[[
        return 'mdi:robot-vacuum';
    ]]]
  label: |-
    [[[      
        return states['input_number.areal_stovsugd'].state + ' mĀ²';
    ]]]

custom_card_vacuum_with_buttons:
  variables:
  name: null
  styles:
    grid:
      - grid-template-areas: '"item1" "item2" "item3"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content  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: list_items_favorite
        custom_fields:
          item1:
            card:
              type: custom:button-card
              template:
                - icon_info
                - custom_card_vacuum
              tap_action:
                action: more-info
              name: |
                [[[
                    if (variables.name == null) {
                      return variables.entity;
                    }
                    return variables.name;
                ]]]
              entity: '[[[ return variables.entity ]]]'
          item2:
            card:
              type: horizontal-stack
              cards:
                - type: conditional
                  conditions:
                    - entity: '[[[ return variables.entity ]]]'
                      state_not: docked
                    - entity: '[[[ return variables.entity ]]]'
                      state_not: charging
                  card:
                    type: custom:button-card
                    template: widget_icon
                    tap_action:
                      action: call-service
                      service: input_boolean.toggle
                      service_data:
                        entity_id: input_boolean.stovsuger_parker
                    icon: mdi:home-variant
                    state:
                      - operator: template
                        value: >-
                          [[[ return
                          states['input_boolean.stovsuger_parker'].state ==
                          'on' ]]]
                        styles:
                          card:
                            - background-color: >-
                                rgba(var(--color-background-blue),var(--opacity-bg))
                - type: conditional
                  conditions:
                    - entity: '[[[ return variables.entity ]]]'
                      state_not: 'off'
                  card:
                    type: custom:button-card
                    template: widget_icon
                    tap_action:
                      action: call-service
                      service: switch.toggle
                      service_data:
                        entity_id: switch.roberto_luke
                    icon: hass:garage
                    state:
                      - operator: template
                        value: >-
                          [[[ return states['switch.roberto_luke'].state ==
                          'on' ]]]
                        styles:
                          card:
                            - background-color: >-
                                rgba(var(--color-background-blue),var(--opacity-bg))
    item2:
      card:
        type: custom:button-card
        template: list_items
        custom_fields:
          item1:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle
                service_data:
                  entity_id: input_boolean.stovsug_kjokken
              name: KjĆøkken
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.stovsug_kjokken'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))
          item2:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle      
                service_data:
                  entity_id: input_boolean.stovsug_spisestue
              name: Spisestue
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.stovsug_spisestue'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))
          item3:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle
                service_data:
                  entity_id: input_boolean.stovsug_tv_stue
              name: TV-stue
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.stovsug_tv_stue'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))
    item3:
      card:
        type: custom:button-card
        template: list_items
        custom_fields:
          item1:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle
                service_data:
                  entity_id: input_boolean.2_etg
              name: 2. etg
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.2_etg'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))
          item2:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle
                service_data:
                  entity_id: input_boolean.stovsug_1_etg
              name: 1. etg
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.stovsug_1_etg'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))
          item3:
            card:
              type: custom:button-card
              template: widget_name
              tap_action:
                action: call-service
                service: input_boolean.toggle
                service_data:
                  entity_id: input_boolean.stovsuger_kom_frem
              name: Kom frem
              state:
                - operator: template
                  value: >-
                    [[[ return states['input_boolean.stovsuger_kom_frem'].state ==
                    'on' ]]]
                  styles:
                    card:
                      - background-color: >-
                          rgba(var(--color-background-blue),var(--opacity-bg))

6 Likes

Thanks - I hadnā€™t seen that section of the docs. But I probably shouldā€™ve been more clear. Itā€™s not the layout that I was really asking about. Itā€™s the ā€œmaking-it-look-goodā€ part.

From what Iā€™ve seen, a lot of folks seem to have the ability to bring things together with a nice appearance. Iā€™m not one of them. :upside_down_face:

It would be awesome to be able to take some of my dashboards to that next level.