🌻 Lovelace UI • Minimalist

OK. Thanks for the hint. But it doesn’t work with this option. If i try to click nothing happens.

  chips_temp_nas:
    template: chips
    tap_action:
      action: more-info
    label: |
      [[[
        var temp = states['sensor.ds218plus_temperature'].state;
        return '🌡️' + " " + temp + '° | DS218+';
      ]]]

  chips_used_space_nas:
    template: chips
    tap_action:
      action: more-info
    label: |
      [[[
        var spacetotal = states['sensor.ds218plus_volume_1_used_space'].state;
        var spacepercent = states['sensor.ds218plus_volume_1_volume_used'].state;
        return '💾' + " " + spacetotal + " TB | " + spacepercent + " %";
      ]]]
1 Like

@flirtysanchez Ah yes, I see the next problem.
You didn’t provide an entity to navigate to.
Either specify one for the button-card:

  chips_temp_nas:
    template: chips
    entity: sensor.ds218plus_temperature
    tap_action:
      action: more-info
    label: ......

or specify an entity in your tap_action:

  chips_temp_nas:
    template: chips
    tap_action:
      action: more-info
      entity: sensor.ds218plus_temperature
    label: ......
2 Likes

Thanks! you are awesome!

I have those attributes:

No time to continue tonight.

Be careful, these are the old names.

It is necessary to adapt the ‘generic’ template to finish the job…

To share work already done

Left card
#left card
type: custom:button-card
styles:
  card:
    - border-radius: 20px
    - box-shadow: var(--box-shadow)
    - padding: 0px
  grid:
    - grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content
custom_fields:
  item1:
    card:
      entity: sensor.canon_mg5700_series
      name: Canon MG5750
      template:
        - icon_info
        - generique
      styles:
        card:
          - padding: 12px
      type: custom:button-card
  item2:
    card:
      type: custom:bar-card
      name: BK
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_bk
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item3:
    card:
      type: custom:bar-card
      name: B
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_pgbk
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item4:
    card:
      type: custom:bar-card
      name: 'Y'
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(250,179,0)
      entities:
        - entity: sensor.canon_mg5700_series_yellow
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item5:
    card:
      type: custom:bar-card
      name: M
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(248,75,122)
      entities:
        - entity: sensor.canon_mg5700_series_magenta
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item6:
    card:
      type: custom:bar-card
      name: C
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(66,126,222)
      entities:
        - entity: sensor.canon_mg5700_series_cyan
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px 16px 16px;
        }
      animation:
        state: 'off'
Right Card
type: custom:button-card
styles:
  card:
    - border-radius: 20px
    - box-shadow: var(--box-shadow)
    - padding: 0px
  grid:
    - grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content
custom_fields:
  item1:
    card:
      entity: sensor.canon_mg5700_series
      name: Canon MG5750
      template:
        - icon_info
        - generique
      styles:
        card:
          - padding: 12px
      type: custom:button-card
  item2:
    card:
      type: custom:bar-card
      name: BK
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_bk
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item3:
    card:
      type: custom:bar-card
      name: B
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_pgbk
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item4:
    card:
      type: custom:bar-card
      name: 'Y'
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(250,179,0)
      entities:
        - entity: sensor.canon_mg5700_series_yellow
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item5:
    card:
      type: custom:bar-card
      name: M
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(248,75,122)
      entities:
        - entity: sensor.canon_mg5700_series_magenta
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item6:
    card:
      type: custom:bar-card
      name: C
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(66,126,222)
      entities:
        - entity: sensor.canon_mg5700_series_cyan
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px 16px 16px;
        }
      animation:
        state: 'off'
11 Likes

Please do not cross post over different threads! Stay in the one you asked the question first. People have already answered there and it is cluttering the threads more than it is useful. :slight_smile:

Despite that mostly the same people will try to answer your question and spreading information over different threads makes answering more difficult!

Thank you! :slight_smile:

EDIT: Here we go:

1 Like

Sorry for that.

Later I was thinking that this question is more suitable for this thread, because if I put entity out of variables card is not working. Probably not the right way to put entity in variables, but card is working. Only problem that I have, I can not read states and attributes from entity if entity is in variables, or I am doing something wrong in JSTemplate. JSTempling is relatively new to me and I am still learning. :slight_smile:

Have you changed something in the icon_info_bg template regards the binary_input to show automatic light status? I get the following error when I try to add this card:

ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'return entity.state === 'off' ? 'Active' : 'Ikke active''

Small note:

If you use the light-slider, DO NOT UPDATE your ha-slider-card! There is an update available that is not really ready for production.

I’ll make a short issue with the author, for now my recommendation is to stay with the “old” version of ha-slider-card. I’ll update this post and/or make a new one, if all seems to be resolved.

1 Like

Is there a way to add these without changing to YAML mode? Adding /lovelace/button_card_templates/button_card_templates.yaml as Stylesheet to dashboard > resources did not help

EDIT: Also, would it be to much work to add these as cards in HACS? Somewhat like this DBuit/Homekit-panel-card: Homekit panel card for home assistant (github.com)

And of course well done! This looks really really great!

@filikun It should be possible but you will need to add the template file as yaml somewhere in your configuration and then include it in your configuration by using the ui.

In the case of your example:
/lovelace/button_card_templates/button_card_templates.yaml

  1. create a folder in your configuration:
    lovelace with a folder inside with name button_card_templates
  2. Put the templates file inside of this folder
  3. Edit your dashboard
  4. Go to raw configuration editor (3 dots upper right)
  5. Add the following line (at the top of the file should be fine):
    button_card_templates: !include lovelace/button_card_templates/button_card_templates.yaml
  6. Save

Now you should be able to use the templates in UI mode :wink:

Let me know if you run into more problems :slight_smile:

1 Like

Should we also do something with the resources.yaml file and themes files too? ( for getting this working with only UI mode )
Or @tben maybe you can extend the github page with some more details? ( sorry not knowing what to do with all the files in UI mode - non yaml mode )

1 Like

The resources should be automatically included when you use HACS.
You will need to add the theme to your configuration.yaml (see here)

Hi tben, thanks for this nice theme.
I’ve been testing it out after installing it.
However I’m experiencing some issues with the theme.
As you can see in the screenshot the icon colors don’t appear, and also the slider button card doesn’t seem to get implemented here.
The first light on the left top is a dimmable light and the slider appears but incorrectly it seems.

Dimmed light on:
image

Thanks for the advice in advance
Pieter

Seems as it isn’t using the correct theme.
Did you select the correct theme in your user profile for this device?

Thanks Dylan,

That was the option I didn’t checked yet, thought this was fixed in the yaml setup as well.
Thanks again!

Another question I have is the difference in spacing, which is better visible in the dark theme.

I’m using the edge at the beginning and the end of each block.

            - template: edge
              type: 'custom:button-card'

Is that’s what it’s used for or is it for something else still?
Thanks!
Pieter

So the difference in width seems to be the caused by mixing a grid and a horizontal grid card

              - type: grid
                columns: 2
                square: false
                cards:

using the grid like above gives a nice layout

How many chips can i show in mobile view?
Some of them only shows as dots, when i change to landscape they shows like it should

I have a problem with buttons no alway on same place during on / off.

ezgif.com-gif-maker (1)

Here is code:

  widget_temperature:
    tap_action:
      action: toggle
    color: var(--google-grey-500)
    show_icon: false
    show_name: false
    show_label: true
    size: 20px
    label: |-
      [[[
          var current_temperature = entity.attributes.current_temperature;
          var temperature = entity.attributes.temperature;
          if (entity.state == 'off') {
            var temperature = current_temperature;
          }
          return temperature + '°C'
      ]]]
    styles:
      card:
        - box-shadow: none
        - padding: 0px
        - background-color: 'rgba(var(--couleur-theme),0)'
        - border-radius: 14px
        - place-self: center
        - height: 42px
      grid:
        - grid-template-areas: '"l"'
      label:
        - color: 'rgba(var(--couleur-theme),0.9)'  

########################################################################################################
#                                                                                                      #
#                                               HEATING                                                #
#                                                                                                      #
########################################################################################################

  heating:
    tap_action:
      action: more-info
    icon: |
      [[[
          if (entity.state =='auto') {
            return 'mdi:robot-industrial';
          } else if (entity.state =='heat') {
            return 'mdi:radiator';
          }
          return 'mdi:radiator-off';
      ]]]
    label: >-
      [[[
          if (entity.state =='off') {
            return "Izključeno";
          } else if (entity.state =='heat') {
            return "Gretje";
          } else if (entity.state =='auto') {
            return "Auto";
          }
          return entity.state;
      ]]]
    state:
      - operator: template
        value: >
          [[[
            return entity.state != 'off';
          ]]]
        styles:
          icon:
            - color: 'rgba(var(--couleur-rouge),1)'
          img_cell:
            - background-color: 'rgba(var(--couleur-rouge),0.2)'
    template: 
      - red

####################################################
#                                                  #
#              HEATING WITH BOUTONS                #
#                                                  #
####################################################

  heating_buttons:
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
    custom_fields:
      item1:
        card:
          template: list_items_favorite
          type: custom:button-card
          custom_fields:
            item1:
              card:
                entity: '[[[ return variables.entity ]]]'
                name: >
                  [[[
                      if (variables.name == null) {
                        return variables.entity;
                      }
                      return variables.name;
                  ]]]
                tap_action:
                  action: more-info
                template:
                  - icon_info
                  - heating
                type: 'custom:button-card'
            item2:
              card:
                type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state: 'off'
                    card:
                      icon: mdi:power
                      tap_action:
                        action: call-service
                        service: climate.set_hvac_mode
                        service_data:
                          entity_id: '[[[ return variables.entity ]]]'
                          hvac_mode: 'heat'
                      type: custom:button-card
                      template: widget_icon
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state_not: 'off'
                    card:
                      icon: mdi:power-off
                      tap_action:
                        action: call-service
                        service: climate.set_hvac_mode
                        service_data:
                          entity_id: '[[[ return variables.entity ]]]'
                          hvac_mode: 'off'
                      type: custom:button-card
                      template: widget_icon
      item2:
        card:
          template: list_items
          type: 'custom:button-card'
          custom_fields:
            item1:
              card:
              
                type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state_not: 'off'
                    card:
                      icon: 'mdi:minus'
                      tap_action:
                        action: call-service
                        service: script.decrease_heating_temperature
                        service_data:
                          entity_id: '[[[ return variables.entity ]]]'
                      type: 'custom:button-card'
                      template: widget_icon
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state: 'off'
                    card:
                      icon: 'mdi:home-thermometer-outline'
                      tap_action:
                        action: none
                      type: 'custom:button-card'
                      template: widget_icon
            item2:
              card:
                icon: 'mdi:temperature-celsius'
                tap_action:
                  action: none
                type: 'custom:button-card'
                template: widget_temperature
                entity: '[[[ return variables.entity ]]]'
            item3:
              card:
              
                type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state_not: 'off'
                    card:
                      icon: 'mdi:minus'
                      tap_action:
                        action: call-service
                        service: script.increment_heating_temperature
                        service_data:
                          entity_id: '[[[ return variables.entity ]]]'
                      type: 'custom:button-card'
                      template: widget_icon
                  - type: conditional
                    conditions:
                      - entity: '[[[ return variables.entity ]]]'
                        state: 'off'
                    card:
                      icon: 'mdi:home-thermometer-outline'
                      tap_action:
                        action: none
                      type: 'custom:button-card'
                      template: widget_icon

Hello @Mariusthvdb
trying to split up chips to separated files like you with an swipe card but i get error when loading my include file that it cannot find card type. Can you help?

- type: 'custom:button-card'
  template: edge
- type: 'custom:button-card'
  template: chips_temperature

This is my swipe-card setup

              - type: custom:swipe-card
                parameters:
                  spaceBetween: 8
                  freeMode: true
                cards:
                  - !include /config/lovelace/includes/chip_temperature.yaml

Never mind, i nail it :smiley:
Beginners mistake.