queimadus / cover-icon-element Goto Github PK

First off this looks awesome, thank you for putting it together. That being said I am struggling a little bit to get it working on my system.. Today I have a button card thats mostly working

      type: custom:button-card
      template: homekit_style_settings
      entity: cover.one_car_garage_door
      label: 1 Car
      show_state: false
      show_label: true
      tap_action:
        action: call-service
        service: cover.toggle
        service_data:
          entity_id: cover.one_car_garage_door
      styles:
        icon:
          - width: 80px
          - padding-left: 0px
          - padding-right: 120px
        name:
          - justify-self: left
          - padding-left: 5px
          - padding-bottom: 10px
          - padding-top: 0px
          - padding-right: 0px
          - font-weight: bold
          - text-transform: Titlecase
          - font-size: 20px
        label:
          - font-size: 18px
          - padding-left: 5px
          - padding-bottom: 10px
          - padding-top: 20px
          - padding-right: 20px
          - justify-self: left
      state:
        - value: unavailable
          color: 'rgb(255, 0, 0)'
          icon: 'mdi:car'
          name: "???"
        - value: open
          color: 'rgb(255, 0, 0)'
          icon: 'mdi:garage-open'
          name: "Open"
        - value: closed
          color: 'rgb(121, 233, 80)'
          icon: 'mdi:garage'
          name: "Closed"

How would I make your card a button w/ a configurable icon ?

Thanks

Hi,

first of all thank you for your addon.

It would be very nice if you could add the option to change the color in combination to the breakpoints, e. g.

• color no.1 if value below breakpoint 1
• color no. 2 it value is between breakpoint 1 and breakpoint 2
• and so on

Thank you very much in advance!
Best regards
messer

The component has a very strange behavior when entering the top/left styles to set the position. Instead of the position, the size also changes debendend on the values of the top: xx%/left: xx% styles.

For all other elements of the picture element such as state-icon, state-label, image, ... you set the position with top/left and set the size with transform: scale(0.2,0.2)

This behavior also results in very strange values for top: xx%/left: xx% compared to the other elements.

Example here a state-label and the cover-icon-element will be positiones at a similar place on the picture:

  - type: custom:cover-icon-element
    entity: cover.k13_003_wohnzimmer_rollladen_links_03
    title: Rollladen Links
    opacity: 0.08
    tap_action:
      action: more-info
    style:
      top: '-8%'
      left: 3%
      color: black
      transform: scale(0.2,0.2)
  - type: state-label
    title: Rollladen Links
    tap_action:
      action: more-info
    entity: cover.k13_003_wohnzimmer_rollladen_links_03
    style:
      top: 22%
      left: 34%
      color: black

To get an approximately same position of the cover-icon-element you even have to move the top position to the negative.

On the same picture element I have another cover-icon-element on an other position. To have the same zize, it needs compleetly different scaling factor to have this shown with the same size as the element on the other position.

  - type: custom:cover-icon-element
    entity: cover.k13_001_wohnzimmer_rollladen_fenster_01
    title: Rollladen Fenster
    opacity: 0.08
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 86%
      color: black
      transform: scale(0.8,0.8) rotate(-90deg)

It would be nice if there was a two car in addition to the one car garage icon

The element should expose an option to override the icon cover or use a CSS variable to control it so it can be overridden from outside.

[Originally requested by #7]

Can you please add an open-source license to this nice project?
It would allow other open-source projects to use it. For example, as suggested here: berrywhite96/lovelace-shutter-row#13

The new custom color capability is great. Only position 0 does not change the color to the custom color, but shows the base color.

I like the add-in very much, it's the sort of thing that is surprinsigly missing in HA for such a common component.
But I'd like to have some more customization, for instance the ability to customize the color of the icons (it just messes with the picture in the background sometimes) or the ability to set the limits where one or the other icon is shown.
To clarify: I rarely close to 0% my blinds, it usually goes to 10/15% so I'd be nice for them to show as "closed" icon when under 15%.
I also have automations that set the % to 50% or 75% exactly, and 50% is still represented as a 25% open and not half open as it should be:

I believe that this could be considered a bug: at 50% open I expect the icon to show 50% open regardless of my personal taste.
The same goes for 75%, that is shown as "half open":