[Styling Module, JS Module, JS+Editor Module] Progress Bar

[inukiwi]

Module post template

Progress Bar

Version: 1.1.1
Creator: inukiwi

Important

Supported cards:

• Button

Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions.

Configure this module via the editor or in YAML, for example:

progress_bar: 
    min_value: 0
    max_value: 100
    progress_color: "green"

---

🧩 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.

progress_bar:
  name: Progress Bar
  version: 1.1.1
  creator: inukiwi
  supported:
    - button
  description: Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions.
  code: |-
    .bubble-button-background {
      ${card.state = this.config.progress_bar?.custom_entity ? hass.states[this.config.progress_bar?.custom_entity].state : state};
      ${card.percentage = (card.state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100};
      ${card.color = this.config.progress_bar?.progress_color};
      ${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_1 : card.color };
      ${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_2 : card.color };
      opacity: 1 !important;
      background: 
        linear-gradient(
          to right,
          var(--${card.color}-color)
          ${card.percentage}%,
          transparent
          ${card.percentage}%
        );
    }
  editor:
    - name: min_value
      label: Minimum value
      required: true
      default: 0
      selector:
        number:
          mode: box
    - name: max_value
      label: Maximum value
      required: true
      default: 100
      selector:
        number:
          mode: box
    - name: progress_color
      label: Progress Color
      required: true
      default: '#00ff00'
      selector:
        ui_color:
          include_state: true
    - name: custom_entity
      label: Custom state entity
      selector:
        entity: {}
    - type: expandable
      name: conditional_colors
      title: Conditional colors
      icon: mdi:tune
      expanded: false
      schema:
        - name: condition_1
          label: Condition 1 (use color below if met)
          selector:
            condition: {}
        - name: condition_color_1
          label: Condition 1 color (only used if condition 1 is defined)
          selector:
            ui_color:
              include_state: true
        - name: condition_2
          label: Condition 2 (use color below if met)
          selector:
            condition: {}
        - name: condition_color_2
          label: Condition 2 color (only used if condition 2 is defined)
          selector:
            ui_color:
              include_state: true

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[lopermo]

How to do so I can select a separate entity/sensor for the progress? I have a Dog entity, but I want to track her food consumed, which is a separate number.

[lopermo]

Here, I figured it out. If you don't select any entity in the configurator, it'll use by default the button's entity. If you choose an entity, it'll default to the selected one.

.bubble-button-background {
  opacity: 1 !important;
  background: 
    linear-gradient(
      to right,
      var(--${this.config.progress_bar?.progress_color}-color)
      ${(hass.states[this.config.progress_bar?.entity]?.state || state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100}%,
      transparent
      ${(hass.states[this.config.progress_bar?.entity]?.state || state  - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100}%
    );
}

- name: min_value
  label: Minimum value
  required: true
  selector:
    number:
      mode: box
- name: max_value
  label: Maximum value
  required: true
  selector:
    number:
      mode: box
- name: entity
  label: Target Entity
  selector:
    entity: null
  required: false
- name: progress_color
  label: Progress Color
  required: true
  selector:
    ui_color:
      include_state: true

[inukiwi]

Ah I was working on this as well, so version 1.1.0 includes a similar approach

[inukiwi]

Updated to version 1.1.0 with support for:

• Setting a custom entity to use for the state
• Setting up to two thresholds to specify a custom color when the state is below the threshold

[Clooos]

Hi! Since v3.0.0 you can do that directly in the slider editor, just pick your battery entity, then it will works directly. The only difference I see here is the ability to change the color.

But maybe I'm missing something else?

[inukiwi]

Ah, no I wasn't aware, I just had a lot of these cards before and wanted to convert it into a module.
I guess this one can be removed then since the color functionality is also available in https://github.com/Clooos/Bubble-Card/discussions/1636

[ozumado]

The build in slider could support more entities, this module allowed me to display sensors previously not supported.
Example (percentage sensor but not device_class: battery):

[Clooos]

It now supports all entities with a numeric value, just enable this, you will be able to pick any entity, then just set the min/max values 🙂

[lopermo]

@Clooos I'm still missing the possibility of showing the main entity, but having the slider attached to a different entity unless I have overlooked it somewhere.

In my example, I have Tractive's for my Dog's location as the main entity in the bubble card, but then I use the slider to track how much food I've fed her in a day.

Can I do that with the native Slider bubble card?

[xsrplayerx]

Hello! First of all thanks for the amazing work :D
I just have a question, regarding conditional colors. Is it possible to change color depending on the sensor state?
For example, if the consumed energy is 100W then it's green, 1000W yellow, etc. ?
Thanks!

[xsrplayerx]

Yes, you can define up to two colors that will be shown when certain conditions are met. To do this expand the "Conditional colors" section and define your conditions and colors.

Ah yes, I figured it out, I was being dumb (I was selecting entity State instead of Numeric State 🤦‍♂️).
It would be super cool if we could add more than 2 colors in a future update :) (for example, in this case it would be nice to have at least 4 different colors - green, yellow, orange and red)

[xsrplayerx]

@ozumado It seems very nice :) If we could personalize the ranges for other entities numeric states it would be cool

PS: Can you tell how did you make the sub buttons transparent white?

[ozumado]

This is 10% white opacity background as in the picture above:

.bubble-sub-button {
    background: rgba(255,255,255,0.1);
}

[hydrakus88]

I've added a 3rd condition, just need to update the JS

.bubble-button-background {
  ${card.state = this.config.progress_bar?.custom_entity ? hass.states[this.config.progress_bar?.custom_entity].state : state};
  ${card.percentage = (card.state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100};
  ${card.color = this.config.progress_bar?.progress_color};
  
  ${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_1 : card.color };
  ${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_2 : card.color };
  
  /* Condition 3 Added Below */
  ${card.color = this.config.progress_bar?.conditional_colors?.condition_3 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_3), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_3 : card.color };

  opacity: 1 !important;
  background: 
    linear-gradient(
      to right, 
      var(--${card.color}-color) 
      ${card.percentage}%, 
      transparent 
      ${card.percentage}%
    );
}

[fuxii]

@xsrplayerx I'm currently working on a Battery Level Bar module that will gradually change color based on battery level (colors are hard coded red-orange-green at 10%-50%-90%), I will add an option to reverse colors, so it will be green-orange-red instead. Hope this is something that will be useful to you. Preview (this module will only change card background, I have other styling modules enabled here):

Looks awesome! Is this available in the meanwhile as a module? 😉

[LinkerHoden]

Is it possible to change the color to a custom hex or rgba color?
I tried setting it in the code editor, but the color never changed:

  progress_color:  rgba(102, 153, 255, 1)
  conditional_colors:
    condition_color_1: '#ff9966'
    condition_color_2: '#6699ff'

[inukiwi]

I've chosen to stick with the provided color picker, which chooses the colors from your selected theme.
With a few modifications to the style section you could hardcode your custom colors ofcourse.

[Sudo-Adam]

Is there a reason the color shows up on desktop but not in the mobile app?

[inukiwi]

That might have something to do with your selected themes. The module sets the colors based on the theme variable names and there's no separate styling for desktop/mobile in the module.

[Sudo-Adam]

7 hours later it is now working on mobile!

[maceddy]

Maybe it is a concidence, but I tried this module twice and as soon as I try to use this on a powerplug power entity all my powerplug entities go offline in Home Assistant. What logs can I collect to check this out?

[autox86]

Hi @inukiwi,

I have the case that I required a status bar on a timer which is counting from 0 to a specific end.
The end is specified by a number component dynamically based on user input, so it might change at any time.

With the help of AI, I am now able to select an entity as MAX instead of a static value.

In my case:
Custom state entity: sensor.pool_any_number
Dynamic Maximum Entity: number.pool_any_number

Kindly have a look and decide if this is worth to be added to your original module.

progress_bar:
  name: Progress Bar_Custom
  version: 25.0.0
  creator: autox
  link: https://github.com/Clooos/Bubble-Card/discussions/1634
  supported:
    - button
  description: Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions.
  code: |-
    .bubble-button-background {
      /* 1. Get Status of Entity */
      ${card.state = this.config.progress_bar?.custom_entity ? (hass.states[this.config.progress_bar?.custom_entity]?.state || 0) : state};

      /* 2. Dynamic calculation*/
      ${(() => {
        // Load Values from config
        const min = parseFloat(this.config.progress_bar?.min_value) || 0;
        const fixedMax = parseFloat(this.config.progress_bar?.max_value) || 100;
        
        // Check if there is a MAX entity or not
        const maxEntityName = this.config.progress_bar?.max_entity;
        const dynamicMax = maxEntityName && hass.states[maxEntityName] 
          ? parseFloat(hass.states[maxEntityName].state) 
          : NaN;

        // Use dynamic or static max
        const max = !isNaN(dynamicMax) ? dynamicMax : fixedMax;

        // Calculation: (most recent value - Min) / (Max - Min) * 100
        const calcPercent = ((parseFloat(card.state) - min) / (max - min)) * 100;
        card.percentage = Math.min(Math.max(calcPercent, 0), 100);
      })()};

      /* 3. Color Logic */
      ${card.color = this.config.progress_bar?.progress_color || 'primary'};
      
      ${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) 
        ? this.config.progress_bar?.conditional_colors?.condition_color_1 
        : card.color 
      };
      
      ${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) 
        ? this.config.progress_bar?.conditional_colors?.condition_color_2 
        : card.color 
      };

      /* 4. Gradient visualization*/
      opacity: 1 !important;
      background: 
        linear-gradient(
          to right,
          var(--${card.color}-color) ${card.percentage}%,
          transparent ${card.percentage}%
        ) !important;
      
      /* Smooth transition */
      transition: background 0.5s ease-in-out !important;
    }
  editor:
    - name: min_value
      label: Minimum value
      required: true
      default: 0
      selector:
        number:
          mode: box
    - name: max_value
      label: Maximum value
      required: true
      default: 100
      selector:
        number:
          mode: box
    - name: progress_color
      label: Progress Color
      required: true
      default: 'primary'
      selector:
        ui_color:
          include_state: true
    - name: custom_entity
      label: Custom state entity
      selector:
        entity: {}
    - name: max_entity
      label: Dynamic Maximum Entity (Optional)
      selector:
        entity: {}
    - type: expandable
      name: conditional_colors
      title: Conditional colors
      icon: mdi:tune
      expanded: false
      schema:
        - name: condition_1
          label: Condition 1 (use color below if met)
          selector:
            condition: {}
        - name: condition_color_1
          label: Condition 1 color (only used if condition 1 is defined)
          selector:
            ui_color:
              include_state: true
        - name: condition_2
          label: Condition 2 (use color below if met)
          selector:
            condition: {}
        - name: condition_color_2
          label: Condition 2 color (only used if condition 2 is defined)
          selector:
            ui_color:
              include_state: true