Icon border as a progress indicator

[poachedindividual]

Icon border as a progress indicator

See updated version by @lsmarsden here

[Neokimx]

I appreciate your work but sadly it doesn't look that well with my theme.
Any possibility you are able to fix this for non-rounded themes?

[Neokimx]

Mhhh, I deleted the old code from my bubble-modules.yaml and copy/pasted the new code. After that I restarted HA. But I still can't see the changes. Still looks like this:

What am I doing wrong here?
Is the code posted above actually the new code?

[poachedindividual]

Please share the code from your card so I can see what might be happening.
Do you have " --bubble-icon-border-radius" defined in your theme or on the card?
If the code you copied is version 1.1 it is the updated version.
Also, no need to reboot HA when you edit the module file, just save and reload your browser.

[Neokimx]

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.honeybadger_battery
name: Tesla Model 3
icon: mdi:car
show_attribute: true
card_layout: large
sub_button:
  - entity: binary_sensor.honeybadger_charger
    show_name: false
    show_state: false
    icon: mdi:ev-plug-ccs2
    show_background: true
    visibility:
      - condition: state
        entity: binary_sensor.honeybadger_charger
        state: "on"
  - entity: switch.honeybadger_sentry_mode
    visibility:
      - condition: state
        entity: switch.honeybadger_sentry_mode
        state: "on"
  - entity: input_select.ladegrenze_tesla
    show_background: true
    show_state: true
    icon: mdi:battery-alert
button_action:
  tap_action:
    action: navigate
    navigation_path: "#tesla"
  double_tap_action:
    action: none
  hold_action:
    action: none
styles: |-

  .bubble-sub-button {
    font-size: 13px !important;
    margin-right: 0px;
  }

  .bubble-sub-button-icon {
    --mdc-icon-size: 20px !important;
  }

  .bubble-sub-button-3 {
    opacity: 1 !important;
    background-color: ${
        hass.states['switch.honeybadger_sentry_mode'].state == "on" ? "var(--bad-color)" :
        "none"
      } !important;
  }
show_icon: true
scrolling_effect: false
modules:
  - default
  - progress_border
progress_border:
  entity: sensor.honeybadger_battery
  color: primary

I have "--bubble-border-radius:" defined in the bubble-modules.yaml, but NOT "--bubble-icon-border-radius". Is this the problem?

[Neokimx]

I added "--bubble-icon-border-radius" to my theme. Now it looks better but still another issue:

The "red" border has a different width depending on the position around the icon. The upper and right part are thinner than the lower and left parts of the border. It looks like the icon is no centered in the icon container. This may be a problem on my side I guess?!

[poachedindividual]

I have only been able to reproduce this when adjusting the zoom level to something other than 100%, 150%, 200% or when using a low DPI screen.
I have updated V1.1.1 which seems to handle issue this a little better but can still be seen when using some zoom levels. Let me know if V1.1.1 is any better.

[Normanras]

Is there more documentation on including custom bubble-card modules? I run HA in docker and don't have the /www/bubble path in my config. Mine is /www/community/Bubble-Card. Either way, installing it as per this thread's instructions at either path didn't seem to work, so I might be missing something fundamental.

[poachedindividual]

You need to install the 2.5.0 beta (if you want to run beta software). If so, look at the beta 1 post here for information on the modules yaml Beta 2.5.0

[Normanras]

Ah totally missed it. Thank you!

[oerix]

Nice mod, although it doesn't seem to be displaying correctly?

[npstewart87]

Im trying to use this to create a person card where I have the persons picture as the main icon photo but with a progress indicator for the persons phone. Bascially I want the "Person" 's photo surrounded by the battery indicated.

Possible?

[Clooos]

Hi! I'm teasing a bit, but check this post featuring your module 😄

https://www.reddit.com/r/BubbleCard/comments/1jw2z6r/hi_everyone_ive_spent_the_last_few_weeks_working/

[Castelvielh]

I've tried your module, it works like a charm, thanks! I have a suggestion though, would it be possible to choose manually the progress bar and the background color, e.g. "rgb(1, 2, 3)" instead of a limited set of predefined colors? I tried to replace the color name by "rgb(1, 2, 3)" in the yaml code of the card with no luck...

[lsmarsden]

Hi, I forked this module and added this as a change - It can be found here - I may post this in a separate discussion soon.

[jayhix123]

hey is there a way to add this to sub buttons instead?

[lsmarsden]

Hi, I forked this module and added this as a change - It can be found here - I may post this in a separate discussion soon.

[eMeF1]

Great mod, thank you! Could you please add an option to define the range? Currently, it is set from 0 to 100, but I have a sensor that ranges from 0 to 20.

[lsmarsden]

Hi, I forked this module and added this as a change - It can be found here - I may post this in a separate discussion soon.

[Jacid23]

would be nice to assign color via the attribute of entity. I was trying to use this to simplify my ams reading for my bambu printer.

[lsmarsden]

Hi, I forked this module and added this as a change - It can be found here - I may post this in a separate discussion soon.

[Jacid23]

Nice! Thank you

[chicco-carone]

Looks good but when using it with a media player if it has the image of the album instead of just the icon of the media player it doesn't show properly. I really wanted to use this as a better visualizer for the volume of a client

[lsmarsden]

Hey, I can take a look into this and see what's going on. Could you please send me the full YAML of that card in the image and I will replicate the issue and see if I can figure out the problem and get a fix.

[lsmarsden]

Hey, cool module! I made some updates to this, and included some features that others requested:

• ability to apply separately to main icon and sub buttons
• ability to define custom start/end ranges to scale progress
• ability to define colours in hex, rgb, or via entity/attribute

It can be found here (discussion page for module store here)- feel free to pull in any updates to your module!

[eMeF1]

This is awesome, @lsmarsden!

I have a suggestion regarding the progress display: how about using a slider with different colors that reflect the state or attributes of the primary or external entity?

Here’s my use case:
I have an air conditioning unit with a variable power inverter and different modes.

• The climate card could use colors to indicate whether it's in heating, cooling, or fan-only mode. In my case, I need to source this information from an attribute of a different sensor rather than my climate entity.

• The slider would represent the current fan speed of the inverter, which comes from yet another entity state.

I believe there will be additional use cases as well.

[lsmarsden]

@eMeF1 Thanks! Interesting suggestion.

If I'm understanding right, you want something like:

• The colour of the progress ring is red when in heating mode, blue in cooling mode (for example)
• The actual progress of the ring is determined by the fan speed

Which would involve adding some way of conditionally choosing colours based on entity states. It should be possible...

[eMeF1]

@lsmarsden Well, I thought of progress on a card itself rather than on an icon. Enabling what is possible on the Button-Slider card for any card.

But other than this what you are saying is what I thought about.

[lsmarsden]

Ah ok, I think I get what you mean now. So this would be a completely different style of progress display.

I think that should be scoped into its own separate module for a slider progress display. It'd probably be a read-only slider as well, at least initially - including touch capabilities is probably doable but starts to take over core Bubble-card scope and would take some time to figure out.

Something to think about - good idea!

[eMeF1]

@lsmarsden Read-only is definitely sufficient. If I wanted to control it, I would probably start with the slider card as a base and modify it the way I want.

[lsmarsden]

Hi all, for anyone who prefers YAML-less installs, I've just created a discussion to share the upgraded module as well - this way it should appear in the module store to download.