🌻 Lovelace UI • Minimalist

Pour l’aspirateur / Vacuum :

La carte / edit for bilingual card :

#card
type: custom:button-card
template: aspiro
variables:
  in_progress: Maison
  color: couleur-rouge
entity: script.aspiro_maison
icon: mdi:home
name: Maison
#template
button_card_templates:
  aspiro:
    variables:
      color: default
      in_progress: default
      script: default
    size: 20px
    show_label: true
    label: |
      [[[
        if (states["input_select.vacuum_aspiro_in_progress"].state == variables.in_progress){
            return '💧';
        }
        else if (states["input_select.vacuum_aspiro_last"].state == variables.in_progress){
            return '✔️'
        }
      ]]]
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 10px 0px 8px 0px
      grid:
        - grid-template-areas: '"i" "n" "l"'
      name:
        - margin-top: 10px
        - justify-self: center
        - font-weight: bold
        - font-size: 14px
      label:
        - justify-self: center
        - align-self: start
        - font-weight: bolder
        - font-size: 12px
        - filter: opacity(40%)
        - animation: |
            [[[ 
              if (states["input_select.vacuum_aspiro_in_progress"].state == variables.in_progress){
                  return 'blink 0.9s ease infinite';
              }
            ]]]
      icon:
        - color: '[[[ return ''rgb(var(--'' + variables.color + ''))'' ]]]'
      img_cell:
        - background-color: '[[[ return ''rgba(var(--'' + variables.color + ''),0.2)'' ]]]'
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: '[[[return entity.entity_id]]]'
    name: '[[[return entity.entity_id]]]'

Merci / edit for bilingual : Thanks @tben :heart:

4 Likes

Please use the English language for forum posts to be inclusive of the majority and to enable effective moderation.

6 Likes

Come on the guy has been translating everything into English. Bilingual is fine with me.

9 Likes

The replies that were deleted as a result of a moderation request were not bi-lingual. The bi-lingual posts were left as perfectly acceptable.

1 Like

@tom_l
Pour clore cet aparté :
J’ai toujours traduit les informations importantes :wink: pas les politesses. :stuck_out_tongue_winking_eye: :upside_down_face:

To close this digression:
I have always translated important information, not courtesies :upside_down_face: :wink:

La modération est rude ici :face_with_hand_over_mouth:

Moderation is harsh here :face_with_hand_over_mouth:

No worries, I would pay attention the next times.

2 Likes

@clemalex While I appreciate your effort to translate everything, I agree with the moderator. This is an english forum. @tben wrote his initial post in perfect english, so I don’t see what it adds to write your posts bi-lingual. If I start translating my posts in Dutch and someone else in Spanish etc., it becomes a mess.

But let’s not be distracted from the content of this thread which is about a beautiful design. Thank you for the vacuum buttons @clemalex, I was trying to create something like this!

2 Likes

Hi clem, :wave:
It’s nice to see people using the cards for their own use !
Everyone has his own taste but about the color I prefer to use gray when the device is closed or off. I find it less distracting and it allows to draw the eye on other more important elements.
Still on the subject of colors, I used one color per type of device

  • Orange : light and electricity
  • Red : heating
  • Blue : On/off devices
  • Green : exterior

I find that it allows to have a coherence in the whole interface.

Nice work :+1:

4 Likes

Thank you for these explanations, I will apply them!

It is this kind of remark that I was expecting when I said that you could make them even more beautiful…

Feel free to explain it in your github :yum: :drooling_face:

:hammer_and_wrench: The Github is in progress :hammer_and_wrench:

2 Likes

It’s perfect :+1: Thanks for explanations :+1:
(yellow when the shutter is moving (electricity consumption)

5 Likes

With stack-in card, I combined two cards :

It’s late, I would post the code later (cleanup to do)

@tben You will notice that I still have progress to make on the colors… :innocent:

10 Likes

Very cool ! :muscle:
I love the element that allows you to visualize the suction power ! It gives me ideas :blush:

2 Likes

That’s the goal :yum:

And always depending on the work of 7ahang’s work

button_card_templates:
  card_line_4_actions:
    variables:
      item1_icon: mdi:numeric-1-circle
      item2_icon: mdi:numeric-2-circle
      item3_icon: mdi:numeric-3-circle
      item4_icon: mdi:numeric-4-circle
      name: Default name
    styles:
      card:
        - border-radius: 20px
        - box-shadow: none
        - padding: 12px
        - background: transparent
      grid:
        - grid-template-areas: '"item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
    custom_fields:
      item2:
        card:
          template: list_items_line_4_actions
          type: custom:button-card
          custom_fields:
            item1:
              card:
                icon: '[[[ return variables.item1_icon ]]]'
                styles:
                  card:
                    - background-color: |
                        [[[
                          //Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
                          if (states["sensor.aspiro_fan"].state.toUpperCase() == "GENTLE"){
                              return 'white';
                          }else{
                              return 'transparent';
                          }
                        ]]]
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.vacuum_aspiro_speed_set
                    option: Gentle
                type: custom:button-card
                template:
                  - widget_icon_line_4_actions
            item2:
              card:
                icon: '[[[ return variables.item2_icon ]]]'
                styles:
                  card:
                    - background-color: |
                        [[[
                          //Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
                          if (states["sensor.aspiro_fan"].state.toUpperCase() == "SILENT"){
                              return 'white';
                          }else{
                              return 'transparent';
                          }
                        ]]]
                  icon:
                    - transform: scale(0.75)
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.vacuum_aspiro_speed_set
                    option: Silent
                type: custom:button-card
                template:
                  - widget_icon_line_4_actions
            item3:
              card:
                icon: '[[[ return variables.item3_icon ]]]'
                styles:
                  card:
                    - background-color: |
                        [[[
                          //Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
                          if (states["sensor.aspiro_fan"].state.toUpperCase() == "STANDARD"){
                              return 'white';
                          }else{
                              return 'transparent';
                          }
                        ]]]
                  icon:
                    - transform: scale(1)
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.vacuum_aspiro_speed_set
                    option: Standard
                type: custom:button-card
                template:
                  - widget_icon_line_4_actions
            item4:
              card:
                icon: '[[[ return variables.item4_icon ]]]'
                styles:
                  card:
                    - background-color: |
                        [[[
                          //Remplacer_ici l'entité à observer pour l'affichage de l'item mis en avant
                          if (states["sensor.aspiro_fan"].state.toUpperCase() == "TURBO"){
                              return 'white';
                          }else{
                              return 'transparent';
                          }
                        ]]]
                  icon:
                    - transform: scale(1.4)
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.vacuum_aspiro_speed_set
                    option: Turbo
                type: custom:button-card
                template:
                  - widget_icon_line_4_actions
  list_items_line_4_actions:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 21px
        - pointer-events: none
        - background-color: rgba(var(--couleur-gris),0.2
        - justify-items: center
      grid:
        - grid-template-areas: '"item1 item2 item3 item4"'
        - grid-template-columns: 1fr 1fr 1fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
        - justify-items: center
      img_cell:
        - justify-items: center
  widget_icon_line_4_actions:
    show_icon: true
    show_name: false
    size: 20px
    styles:
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 50%
        - place-self: center
        - height: 42px
        - width: 42px
        - pointer-events: auto
      grid:
        - grid-template-areas: '"i"'
      icon:
        - color: rgba(var(--couleur-theme),0.9)

I forgot to variable the size of the icon…

6 Likes

After years of looking for a cool dashboard for mobile views, I think I’ve found what I was looking for !
Merci !
Will try to put this all together with my configuration. Love it :love_you_gesture:

While implenting it, just a first thought, the “chip” for weather condition on home page is “icon” + “inside temp” + “outside temp” wich looks weird. Looks like at home today is rainy with 21.4° outside and 15.4 inside :crazy_face:
I personnaly switched the temperatures.

3 Likes

All set up! Really liking this UI. Thanks everyone for your contributions!

I would show more pages but I’m a new user and it won’t let me.

SNoof85 - I also switched the temperatures!

6 Likes

Nice! Could you post your other screens in differents posts maybe? I’m curious!

1 Like

Finally i’m having something that suits my needs for mobile interface. Last problem (I hope), hidding the header, I’ve seen the code to hide it but it doesn’t work. Even with the theme applied.

Nevermind : found my error :slight_smile:
The card-mod-theme: light_mobile has to be changed in card-mod-theme: mobile because my theme is named “mobile”… RTFM !

1 Like

Thanks for the card :+1:

I reworked the card to look like an image of the original design. I added the color of the bulb in the icon and the brightness. Take it or not :wink:

animate

#cards
type: grid
cards:
  - entity: light.salon_lampe_01
    template:
      - light_buttons_with_colors
    type: custom:button-card
    variables:
      entity: light.salon_lampe_01
      name: Salon
  - entity: light.salon_lampe_01
    template:
      - light_buttons_with_colors_light
    type: custom:button-card
    variables:
      entity: light.salon_lampe_01
      name: Salon
columns: 2
square: false
#templates
button_card_templates:
  list_items_light:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
      grid:
        - grid-template-areas: '"item1 item2"'
        - grid-template-columns: 2fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
  light_with_colors:
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    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 + '%' : 'On') ; 
            }
          }else{
            return "Indisponible";
          }
      ]]]
    state:
      - styles:
          icon:
            - filter: |-
                [[[ 
                    var bri = entity.attributes.brightness / 2.55;
                    return ('brightness(' + (50+bri/2) + '%)') ; 
                ]]]
            - color: |-
                [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
                  }
                  else{
                    return 'rgba(var(--couleur-jaune),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(--couleur-jaune),0.2)'
                  } 
                ]]]
        value: 'on'
  light_buttons_with_colors_light:
    show_name: false
    show_icon: false
    variables:
      entity: light.default
      name: Lumière
    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:
          entity: '[[[ return variables.entity ]]]'
          name: '[[[ return variables.name ]]]'
          tap_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: '[[[ return variables.entity ]]]'
          template:
            - icon_info
            - light_with_colors
          type: custom:button-card
      item2:
        card:
          template: list_items_light
          type: custom:button-card
          custom_fields:
            item1:
              card:
                type: custom:slider-card
                entity: light.salon_lampe_01
                radius: 12px
                height: 42px
                thumbColorOff: rgba(var(--couleur-theme),0.2)
                mainSliderColorOff: rgb(var(--couleur-theme),0.2)
                secondarySliderColorOff: var(--google-grey-500)
                mainSliderColor: rgb(var(--couleur-gris-light))
                thumbColor: rgb(var(--couleur-gris-light))
                secondarySliderColor: var(--google-grey-500)
                card_mod:
                  style: |
                    ha-card {
                      border-radius: 14px;
                    }
                    div {
                      border: 2px solid var(--google-grey-500);
                      border-radius: 14px !important;
                      box-sizing: border-box;
                      position: relative;
                    }
            item2:
              card:
                icon: mdi:palette
                tap_action:
                  action: more-info
                type: custom:button-card
                entity: '[[[ return variables.entity ]]]'
                template: widget_icon
  light_buttons_with_colors:
    show_name: false
    show_icon: false
    variables:
      entity: light.default
      name: Lumière
    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:
          entity: '[[[ return variables.entity ]]]'
          name: '[[[ return variables.name ]]]'
          tap_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: '[[[ return variables.entity ]]]'
          template:
            - icon_info
            - light_with_colors
          type: custom:button-card
      item2:
        card:
          template: list_items_light
          type: custom:button-card
          custom_fields:
            item1:
              card:
                type: custom:slider-card
                entity: '[[[ return variables.entity ]]]'
                radius: 14px
                height: 42px
                mainSliderColorOff: var(--google-grey-500)
                secondarySliderColor: rgba(var(--couleur-theme),0.05)
                secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
                thumbColorOff: white
            item2:
              card:
                icon: mdi:palette
                tap_action:
                  action: more-info
                type: custom:button-card
                entity: '[[[ return variables.entity ]]]'
                template: widget_icon

The code is not optimized because I think we can lighten it by combining the templates

7 Likes

très sexy.

2 Likes