🌻 Lovelace UI • Minimalist

saxel · September 27, 2021, 10:36am

Absolutely!

But just know with the dark theme it still looks like the previous picture. I haven’t had time to dig into this yet. Lots to learn here The Natural mode triggers a switch button, but the oscillate is triggered directly with service calls. I guess going forward the oscillate might as well just trigger a switch button as well so it can be tied to a voice assistant.

ui-lovelace.yaml

              - type: custom:button-card
                entity: fan.xiaomi_smart_fan
                variables:
                  entity: fan.xiaomi_smart_fan
                  name: Fan
                  switch_natural: switch.xiaomi_smart_fan_natural
                template:
                  - fan_buttons

button_card_templates.yaml

  fan_buttons:
    show_icon: false
    show_name: false
    show_label: false
    variables:
      entity:
      switch_natural:
      name: 'Fan'
    styles:
      card:
        - border-radius: var(--border-radius)
        - 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: toggle
          hold_action:
            action: more-info
          template:
            - icon_info
            - fan
          type: 'custom:button-card'
      item2:
        card:
          template: list_items_columns_4
          type: 'custom:button-card'
          custom_fields:
            item1:
              card:
                entity: '[[[ return variables.entity ]]]'
                icon: 'mdi:fan'
                styles:
                  icon:
                    - transform: scale(0.625)
                tap_action:
                  action: call-service
                  service: fan.decrease_speed
                  service_data:
                    entity_id: entity
                    percentage_step: 10
                type: 'custom:button-card'
                template: widget_icon
            item2:
              card:
                icon: 'mdi:leaf'
                entity: '[[[ return variables.entity ]]]'
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: '[[[ return variables.switch_natural ]]]'
                type: 'custom:button-card'
                template:
                  - >-
                    [[[
                      if (entity.attributes.mode === 'Nature') {
                        return 'blue';
                      } else {
                        return 'widget_icon';
                      }
                    ]]]
                  - widget_icon
            item3:
              card:
                icon: 'mdi:rotate-3d-variant'
                entity: '[[[ return variables.entity ]]]'
                tap_action:
                  action: call-service
                  service: fan.oscillate
                  service_data:
                    entity_id: entity
                    oscillating: >-
                      [[[ return !entity.attributes.oscillate ]]]
                type: 'custom:button-card'
                template:
                  - >-
                    [[[
                      if (entity.attributes.oscillate) {
                        return 'blue';
                      } else {
                        return 'widget_icon';
                      }
                    ]]]
                  - widget_icon
            item4:
              card:
                entity: '[[[ return variables.entity ]]]'
                icon: 'mdi:fan'
                tap_action:
                  action: call-service
                  service: fan.increase_speed
                  service_data:
                    entity_id: entity
                    percentage_step: 10
                type: 'custom:button-card'
                template: widget_icon

  list_items_columns_4:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
      grid:
        - grid-template-areas: '"item1 item2 item3 item4"'
        - grid-template-columns: 1fr 1fr 1fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px

clemalex · September 27, 2021, 4:30pm

I had the same last month: Discord

I had to stop working on it but the problem is related to light-popup-card for me (i use view and not popup).

I’m going to see how you did it but the operation of light-popup is seems different apart from a popup

I have to find the time to finish the map but I am running out of time

here a preview, it’s a poc, so impossible to share it for the moment, but yours is almost identical so you will probably release it before me so to see if it is useful or not to continue

animate

Ouch ! gifmaker doesn’t like color picker…

in summary, I would ask for help on the topic of browser-mod

Ps:

I just remembered that I wanted to go on another card than light-popup because the problem seems to come from her :

https://i.ibb.co/pw8VpHy/20210927-190043.gif(image larger than 3 MB)

schumijo · September 27, 2021, 7:03pm

Thank you Clemalex, maybe you’re right I should ask for help in browser-mod topic because I really want this to be a popup.

I still have a lot of work to do but your design is exactly what I was thinking. (I don’t know if I am able to create blur effect and animation to be honest )

Also you can continue to work on yours. Having 2 possibilities (popup and view) is always interesting for community.

clemalex · September 27, 2021, 8:16pm

All popups can be turn into a view (in panel mode)

clemalex · September 28, 2021, 5:03am

Just ask

      - type: custom:light-entity-card
        card_mod:
          style:
            '#light-entity-card-light-salon_lampe_01':
              $: |
                #interactionLayer{ z-index: 1; filter: opacity(0.6);}
                #backgroundLayer{
                    filter: blur(20px);
                  }

It’s a config of state-card

type: custom:state-switch
default: color-card
transition: flip #<-- activation
transition_time: 500 #<-- config

schumijo · September 29, 2021, 7:11am

Thank you !!!

KaherdinTristan · October 3, 2021, 11:42am

Sorry for this; how do I go about to make it possible for me to use this layout in Lovelace?
I have HACS, and button card installed. But then…?

paddy0174 · October 3, 2021, 12:55pm

Then you would have to setup the button_card_templates.yaml file, the “themes” and use the templates in your view. That’s the short version.

Wait a few days, there will be instructions available on how to install and use this “theme” a little different but easier. This “theme” is not something that was “developed” for public use, it is the code @tben uses for his own installation and was kind enough to share his setup. Right now this is not something you should install or work with, if you don’t have a little deeper knowledge on how and why things happen here.

As I said, wait a few days. I know, that’s always lame, if someone say “wait”, but in this case I strongly advise to do so.

KaherdinTristan · October 3, 2021, 1:02pm

I’ve been away from HA a while, but right now I’m all wild and crazy with these layouts. Im gonna gove it a try to implement this anyway =)

Whats is comming in a few days? Someone trying to get this into Hacz? =) =)

paddy0174 · October 3, 2021, 1:25pm

There are a few people working on re-writing this “theme”, where re-write is not exactly correct. The thing is, right now, it is a very specific way to “install” and use this “theme”. It is fitted like tailor-made clothes to the installation of @tben, eg. he is from France and therefor the custom text is partly in french.

He made this for his installation and so there are some things, that need to be adapted, if someone else is using it. In one card for example there is a sensor hardcoded into the template. If you don’t have that sensor (exactly that sensor), you will get errors.

And yes, one of the goals would be to bring this to the public by using HACS. But that is unfortunately not as easy as it looked, as this is, technically spoken, not a theme in the conventional way. There are themes involved, but they are only a small part. The main part are button-card-templates, and these are handled differently in your installation. Simply spoken, this “theme” doesn’t fit into HACS, because it’s neither a “theme”, nor an “integration” in the HACS way of thinking. But I’m sure this will be possible sooner or later, but it is not the main task at the moment. The main task is to bring this into public and make it easily maintanable (and usable).

Right now the code is nearly ready and checked, but the documentation and examples unfortunately doesn’t write themself.

Btw. what is your current knowledge about HA and it’s use? Are you more like an experienced user or are you a UI guy (not meant disrespectful!)?

tscibilia · October 4, 2021, 1:28am

@paddy0174 I hacked my way through TBens yaml files and created my own, but I’m looking forward to see what you’re putting together.

KaherdinTristan · October 4, 2021, 6:54am

Thanks for the explanation!

Regarding my level of knowledge and usage; I’m a happy enthusiast, been running HA supervised in docker for 10 months but now HA OS (Rpi4). Im also using WG on another RpiZ and pihole, for home usage.

I’m just as interested in the technical details as in the GUI. I’m not schooled in Linux but I can use terminal commands sufficiently.

I would love to play Devil’s Advocate for your ReadMe/installation procedure (I’m kinda picky, so it’s usually a productive process for the receiving end…)

Pm me if it sounds interesting

GleDel · October 11, 2021, 7:15pm

Hi all,

I’m trying to modify the thermostat card so that is shows Eco mode and turns the color to green when the thermostat is in eco mode. But I’m having a hard time with changing the color. I thing the issue is with the condition template.

thermostat:
    hold_action:
      action: more-info
      entity: climate.woonkamer
    label: >-
      [[[
          if (entity.state =='off')
          {
            return 'Off' ;
          }
          else
          {
            if (states['climate.woonkamer'].state == 'heat')
            {
              if (entity.attributes.preset_mode == 'eco')
              {
                var etat = "Eco";
              }
              else
              {
                var etat = "Verwarmen";
              }
            }
            else
            {
                var etat = "Inactief";
            }
            return (entity.attributes.temperature ) + '°' + ' • ' + etat ;
          }
      ]]]
    state:
      - operator: template
        value: >
          [[[
            return states['climate.woonkamer'].state == 'heat'
          ]]]
        styles:
          icon:
            - color: 'rgba(var(--color-red),1)'
          img_cell:
            - background-color: 'rgba(var(--color-red),0.2)'
          card:
            - background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
          name:
            - color: 'rgba(var(--color-red-text),1)'
          label:
            - color: 'rgba(var(--color-red-text),1)'
      - operator: template
        value: >
          [[[
            return states['climate.woonkamer'].preset_mode == 'eco'
          ]]]
        styles:
          icon:
            - color: 'rgba(var(--color-green),1)'
          img_cell:
            - background-color: 'rgba(var(--color-green),0.2)'
          card:
            - background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
          name:
            - color: 'rgba(var(--color-green-text),1)'
          label:
            - color: 'rgba(var(--color-green-text),1)'

I think the problem is here but I’m not sure what to change it to.

- operator: template
        value: >
          [[[
            return states['climate.woonkamer'].preset_mode == 'eco'
          ]]]

Any help?

paddy0174 · October 11, 2021, 9:53pm

This can’t be correct,

if this

works.

I assume, the states should be an attribute of a sensor, shouldn’t it? Then try this
states['climate.woonkamer'].attributes.preset_mode. Even better would be to simply use the entity, like this entity.attributes.preset_mode.

And while at it, change the hold_action to entity as well:

thermostat:
  hold_action:
    action: more-info
    entity: "[[[ return entity.entity_id ]]]"

This assumes, that you provide an entity in your view for this entry, otherwise this will not work.

And I noticed, the indentation seems to be off. That may very well be a copy&paste error, but if not, that could be another issue.

GleDel · October 12, 2021, 7:08am

Thank you @paddy0174 !

I managed to get it working using your input. Here is the full code is anyone is interested:

thermostat:
  hold_action:
    action: more-info
    entity: "[[[ return entity.entity_id ]]]"
  label: >-
    [[[
        if (entity.state =='off')
        {
          return 'Off' ;
        }
        else
        {
          if (entity.state == 'heat')
          {
            if (entity.attributes.preset_mode == 'eco')
            {
              var etat = "Eco";
            }
            else
            {
              var etat = "Verwarmen";
            }
          }
          else
          {
              var etat = "Inactief";
          }
          return (entity.attributes.temperature ) + '°' + ' • ' + etat ;
        }
    ]]]
  state:
    - operator: template
      value: >
        [[[
          return entity.state == 'heat' && entity.attributes.preset_mode == 'none'
        ]]]
      styles:
        icon:
          - color: 'rgba(var(--color-red),1)'
        img_cell:
          - background-color: 'rgba(var(--color-red),0.2)'
        card:
          - background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
        name:
          - color: 'rgba(var(--color-red-text),1)'
        label:
          - color: 'rgba(var(--color-red-text),1)'
    - operator: template
      value: >
        [[[
          return entity.state == 'heat' &&entity.attributes.preset_mode == 'eco'
        ]]]
      styles:
        icon:
          - color: 'rgba(var(--color-green),1)'
        img_cell:
          - background-color: 'rgba(var(--color-green),0.2)'
        card:
          - background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
        name:
          - color: 'rgba(var(--color-green-text),1)'
        label:
          - color: 'rgba(var(--color-green-text),1)'

paddy0174 · October 20, 2021, 12:44pm

So a little teaser for you all!

The re-write of this great “theme” is moving forward and seems to be getting to a point, where a first public beta version can be rolled out. Nothing fancy you think - you will be surprised!

This is, what you can expect from the rollout:

re-write of the “theme” so updating and maintainance get’s a lot easier
new structure for the files
possibilty to extend your installation by adding custom-cards (modular, you install only what you need)
easily extend our code with yours without disturbing updates
adding language specific strings (EN, DE and FR are already taken care of, other languages welcome)
a quite comprehensive wiki at the new repository with
- installation guides
- an example page (this unfortunately is not ready yet, input is welcome!)
- guides to setup your first page, update, upgrade and more
- all things you don’t even want to know about the “theme”
- developer corner to support the development of this “theme” (eg. custom_cards)
CodeGenerators to ease the installation and usage in UI-mode (that’s one funny thing)
a few new cards like eg. two modified light-sliders, a welcome card and much more

and some other things!

Stay tuned, if things work out well, we should be ready within a week for the first public beta. This will not be a stable release, but we are getting there!

PS: Thanks a lot to the beta-testers, your input is very much appreciated!

PPS: If you’d like to see some specific things in this “theme”, this is the time to tell us!

Klex1404 · October 20, 2021, 6:30pm

Thanks @paddy0174 , I look forward to testing it.
Maybe a template for a camera in the style of the theme could be added?

odiv · October 22, 2021, 9:45pm

@paddy0174 please include in your new update animated icons

Sildenafil · October 24, 2021, 5:38am

Thx for your work.
Can’t wait to try it.
If you need help translating into Italian, I can do it.

gabrin · October 24, 2021, 9:43am