[Example] Progressbar, % bar

[MrBearPresident]

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dev_gf_hw_pir_battery
styles: |-
  :host{
      --color-ok-icon: green ;
      --color-warning-icon: orange ;
      --color-alert-icon: red ;
      --color-ok: #85A408AA ;
      --color-warning: #E77910AA ;
      --color-alert: #CA3333AA ;
      --color-bar: ${state > 40 ? 'var(--color-ok)'
                     : state > 20 ? 'var(--color-warning)'
                     : 'var(--color-alert)'} ;
      --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
      --color-notification-bubble: red;
  }

  ha-icon {
    color: var(${ state > 40 ? '--color-ok-icon':
                  state > 20 ? '--color-warning-icon' :
                              '--color-alert-icon'}) 
              !important; }

  .bubble-button-card-container {
      background: linear-gradient(
    to right, 
    var(--color-bar) 0%, 
    var(--color-bar) ${Math.round(state)}%, 
    var(--color-background) ${Math.round(state)}%,
    var(--color-background) 100%
  ) !important;
  }

  ha-card::after {
    position: absolute;
    top: -10px;
    left: -10px;
    padding: 0 10px;
    border-radius: 999px;
    border: 0px solid black;
    color: #fff;
    content: "${Math.round(state) < 40 ? '!' : ''}";
    background: var(--color-notification-bubble);
    display: block;
  }
icon: ""
name: ""
sub_button: []
layout_options:
  grid_columns: 2
  grid_rows: 1
card_layout: large

Extra features:

• Color change based on percentage
• Notification round on the left to pull attention on alerts

[falkio8]

Thank you very much for that code. Looks great but I am struggling to implement it based on a different entity than defined in the bubble-card entity. I tried different options but none of them worked. So is there a way to use a different entity than the variable "state"? Tried it with "states("another_entity")" and so on...

var(--color-bar) ${Math.round(**state**)}%, var(--color-background) ${Math.round(**state**)}%,

[MrBearPresident]

I have this working. (see below)
Can you send me your YAML of the complete bubble card + printscreen of the values?

:host{
    --color-ok: #36A1D3AA ;
    --color-warning: #E77910AA ;
    --color-alert: #CA3333AA ;
    --color-bar: ${hass.states['sensor.nas_volume_3_status'].state === 'normal' ? 'var(--color-ok)'
                   : 'var(--color-alert)'} ;
    --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
}

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round(hass.states['sensor.nas_volume_3_volume_used'].state)}%,
  var(--color-background) ${Math.round(hass.states['sensor.nas_volume_3_volume_used'].state)}%,
  var(--color-background) 100%
) !important;
}

[falkio8]

Thanks for the reply, with hass.states I got it working. But unfortunately it seems not to work with bubble-card type: pop-up. The pop-up cards have a bubble card at the top and I wanted to use it there but it doesn´t apply there. Doing it the same way with a single bubble-card type: button its working.

And another question, is there the possibility to access an entity´s attribute for hass.states?

[killtux]

I have this working. (see below) Can you send me your YAML of the complete bubble card + printscreen of the values?

:host{
    --color-ok: #36A1D3AA ;
    --color-warning: #E77910AA ;
    --color-alert: #CA3333AA ;
    --color-bar: ${hass.states['sensor.nas_volume_3_status'].state === 'normal' ? 'var(--color-ok)'
                   : 'var(--color-alert)'} ;
    --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
}

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round(hass.states['sensor.nas_volume_3_volume_used'].state)}%,
  var(--color-background) ${Math.round(hass.states['sensor.nas_volume_3_volume_used'].state)}%,
  var(--color-background) 100%
) !important;
}

wow that looks amazing. would be cool if this could get implemented as a seperate bubble card 😊

[falkio8]

Here is a small guide to get this to work with a climate card: #996 (reply in thread)

[jaaneo]

Amazing job!