šŸŒ» Lovelace UI ā€¢ Minimalist

Share your Projects!
,
63

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

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
66

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:

67

:hammer_and_wrench: The Github is in progress :hammer_and_wrench:

2 Likes
68

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

image
image544Ɨ769 28.1 KB

5 Likes
69

With stack-in card, I combined two cards :

20210802_010331
20210802_0103311080Ɨ687 34.4 KB
20210802_010347
20210802_0103471080Ɨ653 31.9 KB
20210802_010406
20210802_0104061080Ɨ682 34.4 KB

Screenshot_20210802-011038_Home Assistant
Screenshot_20210802-011038_Home Assistant1080Ɨ677 48.7 KB

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
70

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

2 Likes
71

Thatā€™s the goal :yum:

72

Screenshot_20210802-201800_Home Assistant
Screenshot_20210802-201800_Home Assistant1080Ɨ251 16.3 KB

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
73

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
74

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

IMG_2061.PNG
IMG_2061.PNG828Ɨ1792 99 KB

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
75

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

1 Like
76

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
77

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

8 Likes
78

trĆØs sexy.

2 Likes
79

I just published the github on my first post, feel free to give feedback, itā€™s the first time Iā€™ve done this :rocket:

7 Likes
80

thankā€™s @tben :slight_smile:

Do not hesitate to join us on forum.hacf.fr and our discord :wink:

81

Outstanding work ! Really love this. Go get your ass in the frontend team !

3 Likes
82

The temperature page.

IMG_2062.PNG
IMG_2062.PNG828Ɨ1792 104 KB

2 Likes
83

The security page. Thanks to clemalex for the alarm card mods.

IMG_2057.PNG
IMG_2057.PNG828Ɨ1792 62.4 KB

2 Likes