šŸŒ» Lovelace UI ā€¢ Minimalist

Share your Projects!
,
92

Sure :wink:

image

Without any optimization:

type: vertical-stack
cards:
  - card:
      entity: alarm_control_panel.alarme
      states:
        - arm_home
        - arm_away
      style:
        .: |
          ha-card{
            margin-left: 6px;
            margin-right: 6px;
          }
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-green-500) !important;
          }
          ha-card{
            padding-top: 16px;
            padding-bottom: 12px !important;
            border-radius: 21px;
          }
          ha-card > h1{
             padding-top: 0;
             color: transparent;
          }
          ha-card > h1::before{
             content: "Disabled";
             color: var(--google-green-500);
             position: absolute;
             font-variant: small-caps;
          }
          #alarmCode{
            display: none;
          }
          #keypad{
            display: none !important;
          }
        '#armActions':
          mwc-button:nth-child(1):
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;

              }
              #button{
                width: 150px;
                border-radius: 21px;
              }

              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "First";
                margin: 0 0 0 50%;
              }
          mwc-button:nth-child(2):
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;

              }
              #button{
                width: 150px;
                border-radius: 21px;
              }

              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Second";
                margin: 0 0 0 50%;
              }
      title: Alarme
      type: alarm-panel
    conditions:
      - entity: alarm_control_panel.alarme
        state: disarmed
    type: conditional
  - card:
      entity: alarm_control_panel.alarme
      states:
        - arm_home
      title: Alarme
      type: alarm-panel
      style:
        .: |
          ha-card{
            margin-left: 6px;
            margin-right: 6px;
          }
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-red-500) !important;
          }
          ha-card{
            padding-top: 16px;
            padding-bottom: 12px !important;
            border-radius: 21px;
          }
          ha-card > h1{
             padding-top: 0;
             color: transparent;
          }
          ha-card > h1::before{
             content: "Enabled";
             color: var(--google-red-500);
             position: absolute;
             font-variant: small-caps;
          }
        '#armActions':
          mwc-button:
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;    
              }
              #button{
                width: 150px;
                border-radius: 21px;
              }
              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Disable";
                margin: 0 0 0 50%;
              }
        '#keypad':
          mwc-button:
            $: |
              #button{
                border-radius: 12px
              }
    conditions:
      - entity: alarm_control_panel.alarme
        state_not: disarmed
    type: conditional
4 Likes
93

nowhere :upside_down_face: :shushing_face:

Itā€™s just a wink I give him when talking about witchcraft.

it showed me that the javascript code could be executed. I then looked for how to take advantage of it to answer your question. Again this morning, I didnā€™t know it was possible

But I liked the idea so I looked for

A non-basic and diverted use of his fabulous card

maybe we could do without automation.

1 Like
94

Thanks a lot :slight_smile:

1 Like
95

I love the chips so much that they often donā€™t fit on my screen :blush:

image
image828Ɨ120 31.5 KB

Is there a way to wrap them to a next line? (I donā€™t want 2 lines when they do fit on one)
The horizontal-stack doesnā€™t seem to do this by default.

96

you can use the swiper card

  - type: custom:swipe-card
#    card_width: '185px'
#    start_card: 6
    parameters:
      simulateTouch: true
      spaceBetween: 8
      preventInteractionOnTransition: true
#      preventClicks: true
#      effect: coverflow
      freeMode: true
    cards:
      - !include /config/lovelace/includes/include_chip_temperature.yaml
      - !include /config/lovelace/includes/include_chip_presence.yaml
      - !include /config/lovelace/includes/include_chip_energy.yaml
      - !include /config/lovelace/includes/include_chip_alarm_clock.yaml

and adapt the parameters to your liking

3 Likes
97

dont yet understand the history: back commandā€¦ hmm. how does the name: of the button cause the history to go back?? Or does it set the name, and by clicking the is goes back in history? that would be crafty :wink:

does work indeedā€¦ how cool :wink: thanks, and to Romrider of course, Iā€™ll post this in button-card, as answer on my own question for reference.

see Lovelace: Button card - #5757 by Mariusthvdb

98

Tnx, but feels like huge overkill just to wrap something :astonished:

99

the swiper card adds the swipe functionality to HA, so it does offer the extra UX. Its more than merely overkill, and kind of nice once you get used to its behavior.

you could probably also wrap them in a grid card, to auto fit and go to the next line. Its what I do with my dynamically created alert buttons

100

Iā€™ll give it a try, but didnā€™t you mention that the hold_action doesnā€™t work? Or did you solve it?

101

A better code to a history back button : Lovelace: Button card - #5765 by clemalex

102

@tben :upside_down_face:

I just saw the vide template.

But there is already a blank card in button-card :

image
image1324Ɨ541 23.4 KB

animate
animate1905Ɨ828 312 KB

this is not the most important but if you want to keep the template, you might have to add pointer-events property to none :

  vide:
    styles:
      card:
        - background-color: rgba(0,0,0,0)
        - box-shadow: none
        - height: 0px
        - pointer-events: none   #<-- here

animate
animate1905Ɨ828 231 KB

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

3 Likes
103

Just wanted to say I love this design! Havenā€™t used it myself but will be stealing elements of it for my own UI :slight_smile: Keep up the great work!!!

2 Likes
104

Hey Clemalex :wave:
I donā€™t think I used this card anymore. But thanks for the info, I would correct that :slight_smile:

105

Great work! This UI is amazing. I just created a button card for my climates.

Screenshot 2021-08-06 at 2.52.46 PM
Screenshot 2021-08-06 at 2.52.46 PM1152Ɨ786 43.8 KB

11 Likes
106

hello could you share your card please? @djacid

107

Of course, but I need some time to clean my code, before share it

3 Likes
108

No problem thanks

109

Wow, this looks amazing! Any plans to build into a custom Lovelace strategy?

2 Likes
110

Imagine this UI right throughout HA :wink:

3 Likes
111

Looks like this was depreciated in UI Editor?