[Styling Module] Cover gradient background indicator

[j-kwan]

Cover background position indicator

Version: v1.6
Creator: j-kwan

Important

Supported cards:

• Cover
• Pop Up
• Button

Add gradient background indicator regarding cover position

Configure this module via the editor or in YAML, for example (popup and cover):

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#popup-shutters"
    name: Volets roulants
    show_state: false
    button_type: state
    show_header: true
    show_last_changed: true
    card_layout: large
    entity: cover.volets_roulants
    show_icon: true
    tap_action:
      action: more-info
    show_attribute: false
    attribute: supported_features
    double_tap_action:
      action: none
    hold_action:
      action: none
    modules:
      - cover_gradient_background_indicator
  - type: custom:bubble-card
    card_type: cover
    entity: cover.cuisine_volet_roulant_baie
    card_layout: large
    name: Cuisine - Baie
    show_last_changed: true
    show_state: true
    show_attribute: true
    attribute: current_position
    icon_open: mdi:pot-steam
    icon_close: mdi:pot-steam-outline
    modules:
      - cover_gradient_background_indicator
    cover_gradient_background_indicator:
      color: red
  - type: custom:bubble-card
    card_type: cover
    entity: cover.bureau_volet_roulant_fenetre
    card_layout: large
    name: Bureau - Fenêtre
    show_last_changed: true
    show_state: true
    show_attribute: true
    attribute: current_position
    icon_open: mdi:book-open-page-variant
    icon_close: mdi:book-open-page-variant-outline
    show_icon: true
    modules:
      - cover_gradient_background_indicator
    cover_gradient_background_indicator:
      - color: blue
      - inverted: true

If you want to use a slider type, here is an example with 3 sub-buttons to keep the possibility of closing, stopping, or opening :

type: custom:bubble-card
card_type: button
button_type: slider
entity: cover.salon_volet_roulant_baie
name: Salon - Baie
icon: mdi:sofa
card_layout: large
show_last_changed: true
show_state: true
show_attribute: true
attribute: current_position
styles: |-
  ${(() => {
    // disable sub-button 1 if cover is fully opened
    const up_button = hass.states[entity].attributes.current_position == 100  ? `
      .bubble-sub-button-1 {
        opacity: 0.3 !important;
        pointer-events: none !important;
        cursor: none !important;
      }` : '';          
    // disable sub-button 3 if cover is fully closed
    const down_button = hass.states[entity].attributes.current_position == 0 ? `
      .bubble-sub-button-3 {
        opacity: 0.3 !important;
        pointer-events: none !important;
        cursor: none !important;
        color: ${hass.states[entity].state}
      }` : '';
    return `
      ${up_button}
      ${down_button}
    `;
  })()}
sub_button:
  - name: UP
    icon: mdi:arrow-up
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.open_cover
  - name: STOP
    icon: mdi:stop
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.stop_cover
  - name: DOWN
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.close_cover
    icon: mdi:arrow-down
button_action:
  tap_action:
    action: none
modules:
  - cover_gradient_background_indicator

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

cover_gradient_background_indicator:
  name: Cover gradient background indicator
  version: '1.7'
  creator: j-kwan
  link : "https://github.com/Clooos/Bubble-Card/discussions/1628"
  supported:
    - cover
    - pop-up
    - button
  description: This module adds a custom background indicator to the cover card regarding the position
  code: |-
    ${(() => {
      const coverConfig = this.config.cover_gradient_background_indicator;
      const isOpen = state === 'open';
      const currentPosition = hass.states[entity]?.attributes.current_position ?? 0;
      const hightlightColor = coverConfig?.advanced_color ?? `var(--${coverConfig?.color ?? 'purple'}-color)`;
      const backgroundColor = 'var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))))';
      const gradientAngle = (coverConfig?.inverted ?? false) ? '270' : '90';
      const highlighClosed = coverConfig?.highlight_closed ?? false;
      const colorlessClosed = coverConfig?.colorless_closed ?? false;
      const openPart = highlighClosed ? backgroundColor : hightlightColor;
      const closedPart = highlighClosed ? hightlightColor : backgroundColor;
      const iconColor = (highlighClosed && currentPosition < 100) || (!highlighClosed && isOpen) ? hightlightColor : 'initial';
      const iconOpacity = (highlighClosed && currentPosition < 100) || (!highlighClosed && isOpen) ? 1 : 0.6;
      
      return `
        .bubble-cover, .bubble-button-card {
          background: ${colorlessClosed ? 'transparent' : (highlighClosed && currentPosition < 100) || (!highlighClosed && isOpen) ? hightlightColor : 'transparent'} !important;
        }
        .bubble-background {
          background: linear-gradient(
            ${gradientAngle}deg,
            ${openPart} ${currentPosition}%,
            ${closedPart} ${currentPosition}%
          ) !important;
          opacity: ${colorlessClosed ? 1 : 0.5} !important;
        }
        .bubble-range-fill {
          background: ${openPart} !important;
        }
        .bubble-icon {
          color: ${iconColor} !important;
          opacity: ${iconOpacity} !important;
        }
        .bubble-sub-button.background-on,
        .bubble-sub-button.background-off {
          background: transparent !important;
        }
      `;   
    })()}
  editor:
    - name: color
      label: Color
      selector:
        ui_color:
          default_color: purple
    - name: advanced_color
      label: Advanced color (if not blank, overwrite the selected color above)
      required: false
      selector:
        text:
          multiline: false
          type: text
    - name: inverted
      label: Invert direction
      selector:
        boolean:
          custom_value: false
    - name: highlight_closed
      label: Highlight the closed part
      selector:
        boolean:
          custom_value: false
    - name: colorless_closed
      label: Colorless background for the closed part
      selector:
        boolean:
          custom_value: false

---

Screenshot:

• Default display
  
• Examples with multiples options
  

Changelog

v1.7

Adding custom option to choose a colorless background for the closed part
With the options Colorless background for the closed part, the closed part will be transparent.

v1.6

Fix - No more empty background when cover is not fully closed.
The background becomes colorless only when the cover is completely closed.

v1.5

Adding support for type button/slider type.
Note : Not recommended using the Invert direction option of the module with this type of card.
The display wouldn't align with the direction of the input slider

v1.4

Adding custom option for inverting the highlighted part
With the option Highlight the closed part set to true, the closed percentage representation will be highlighted instead of the opened part.

v1.3 (screenshot 3)

Adding advanced color field:
If the field is not empty, the entered value will overwrite the value from the color selector above.
This field is an unstructured text input, and its value will be passed directly to the CSS.
The value can therefore be in any color format (hexadecimal, RGB, RGBBA, HLS, HLSA, predefined, etc.).

v1.2

Fix error Cannot read properties of undefined (reading 'attributes') when cover is closed

v1.1

Adding custom options :

• Color selector (default : purple)
• Invert gradient position (default : false)
  Improvement :
• Pop-up type does not require additional style any more for the semi-transparent background

v1.0

• Initial version

Thank you everyone !
I really enjoyed working on this module ❤️

[ilanhalakhmi]

cool !
is there any way to configure the color of the gradient ?
for example - if i prefer green, or orange instead of purple ?

[ZaGaPonG]

I have modified the "Code (CSS/JS template)" part, by writing the color name instead of var, see the red lined part.
The proper way will be to modified the var into dedicated template but this way works.

[Eschwinm]

I'd like to see an option in which we could invert the gradient from the opposite direction.

I do have some sunscreens which open the other way around, would love to have the gradient start from the right side and also picking a color would be nice. Love the work you did here, makes the UI look more fantastic

[ZaGaPonG]

You must change the value underlined in red, 270 is the value if you want the gradient from the opposite direction ;)

[j-kwan]

Hi @ilanhalakhmi @ZaGaPonG and @Eschwinm,
I had made this module for my personal needs, therefore, I had not taken into account these customization possibilities.
I have added customisable options to the 1.1 version of the module.
You can select your preferred color and direction now, as you can see in the third screenshot.

Alternatively, the new options can be updated directly in YAML by providing the following information:

cover_gradient_background_indicator:
  color: red
  inverted: true

In this example:

• the color value will be interpreted as var(--red-color) (HA named color)
• the boolean set in inverted will determine the direction of the gradient
  • false : opening color in left
  • true : opening color in right

Thank you for your ideas and suggestions!

[ilanhalakhmi]

Thanks ♥️

[robertofabrizi]

Can you add hex colors support?

[j-kwan]

Hi @robertofabrizi,
regarding your request, I have added another field name advanced_color in the v1.3.
If the field is not empty, the entered value will overwrite the value from the color selector above.
This field is a raw text input, and its value will be passed directly to the CSS.
The value can therefore be in any color format (hexadecimal, RGB, RGBA, HLS, HLSA, predefined, etc.).
You can check the forth screenshot for illustration.

Best regards,

[Ahtos79]

Hi,
would it be possible to add a feature that inverts the color display based on the blind's opening percentage?
In my setup, when the blind is open, the background is fully colored, and when it’s closed, the background is colorless.
I think this might be because my blind is considered "open" until it's fully closed. For example, when the blind is 80% closed, the entity still shows "open 20%".

Thank you :)

[j-kwan]

Hi,
What you describe is the normal behavior of the cover type entities.
You can summarize it to: if the cover is not totally closed, it is open to a certain percentage regarding the current_position attribute value.
You can do some tests in the "state" tab of "Developer-Tools" and see the data of your blind.

With this module, the colored part of the background corresponds to the value of current_position.
So your request is to color the closed part instead of the open part ?

[Ahtos79]

Oh, okay – I didn’t know that.
Yes, exactly – it would be great if the closed part could be colored instead of the open part.
Maybe with an additional toggle, like the one that already exists for inverting the direction of the gradient.

[j-kwan]

Okay.
Yes, it's doable with a toggle.
I'll update the module as soon as I can free up some time.
At the earliest, tonight or this weekend.

[Ahtos79]

That would be awesome, thanks a lot!

[j-kwan]

I have added a custom option for inverting the highlighted part in the v1.4 update.
When the option Highlight the closed part is active, the closed percentage representation will be highlighted instead of the opened part.
I suggest you to also activate the Invert direction option to have the highlighted part at the left.

[roumano]

@j-kwan , i love this but idealy if it's possible i would like to set the position via a click on the progress bar to open the cover to a specific position, instead to open (or close), wait a specific delay then click stop

[j-kwan]

Hello,

the action you describe is working only with the slider type, not the cover type.
With something like that :

type: custom:bubble-card
card_type: button
button_type: slider
entity: cover.salon_volet_roulant_baie
name: Salon - Baie
icon: mdi:sofa
card_layout: large
show_last_changed: true
show_state: true
show_attribute: true
attribute: current_position
sub_button:
  - name: UP
    icon: mdi:arrow-up
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.open_cover
  - name: STOP
    icon: mdi:stop
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.stop_cover
  - name: DOWN
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: cover.close_cover
    icon: mdi:arrow-down
button_action:
  tap_action:
    action: none
modules:
  - cover_gradient_background_indicator

I will create another styling module for this specific case.

[j-kwan]

In the end, I didn’t need to create a new module. I was able to tweak it so it works with the slider type. However, I recommend not using the Invert direction option for this type of card. The display wouldn’t align with the input slider direction.

[roumano]

Yes it's working but one (small) cons about this solution is when it's fully open or close, button are still clickable and not in grey like with the original

The first one, is the original and as you can see, the clover is totally closed and the button to close is in grey and not clickable

[j-kwan]

Yes, in the cover type, when the cover is fully opened or fully closed, the buttons have this styling :

      opacity: 0.3 !important;
      pointer-events: none !important;
      cursor: none !important;

We can mimic this behaviour by adding some conditional styling.
In this specific case (button number 1 for UP, and button number 3 for DOWN), you can add this styling for your card.

${(() => {

  // disable sub-button 1 if cover is fully opened
  const up_button = hass.states[entity].attributes.current_position === 100  ? `
    .bubble-sub-button-1 {
      opacity: 0.3 !important;
      pointer-events: none !important;
      cursor: none !important;
    }` : '';

  // disable sub-button 3 if cover is fully closed
  const down_button = hass.states[entity].attributes.current_position === 0 ? `
    .bubble-sub-button-3 {
      opacity: 0.3 !important;
      pointer-events: none !important;
      cursor: none !important;
    }` : '';

  return `
    ${up_button}
    ${down_button}
  `;

})()}

I have updated my example if you want to see the complete and cleaned yaml for a slider with conditional styling

[julien94800]

Hello @j-kwan
First, thanks a lot for this module!! I like it a lot!!

And now my question:
Since few time, I noticed that behavior is different between popup header and other cards. It was not like that few times ago (idk if it comes from HA updates or module update). Is it from module on purpose?
Do you have any idea on how I could get the popup header behavior same as normal card (it looks strange having sometimes 2 colors and sometimes only one color)

Thanks in advance

[julien94800]

Hello,
Thanks for your feedback! Indeed after update now it's coherent! I have same behaviour everywhere (two colours everywhere)
To be honest I preferred when there were only one color. But now it's coherent everywhere so it's good anyway!
Thanks again!!!

[j-kwan]

If I can free up some time tomorrow, I will try to set up an additional option that would allow switching from one display to another (colorless or semi-transparency).

[julien94800]

Thanks! But it's really small detail! Don't worry about it, I really like this module, good work! And enjoy your weekend

[j-kwan]

Hi,
here is the version 1.7.
You can find a new option named Colorless background for the closed part.
You have to activate it to have a unique color without the semi-transparent part for the closed part.

[julien94800]

Hello,

I just installed, and it looks perfect to me now!
Thanks a lot!
Really good work, and really apppreciated!