swingerman / lovelace-fluid-level-background-card Goto Github PK

I use it in a grid card and it seems the number of columns modifies where the highest water level is.. 1 col = full height, 2 col = half height and so on... Entity value always stays the same in the pics

how did you put the bubbles in the map?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Consider this config:

  - type: custom:fluid-level-background-card
    card:
      type: glance
      entities:
        - entity: person.ildar
    entity: input_number.test_level_1
    fill_entity: input_boolean.test_boolean
    level_color:
      - 244
      - 0
      - 204

Currently a "bubbles" animation is shown if fill_entity = ON.
A "waves" animation is shown always.

I suggest an alternate variant:
-- if fill_entity = ON -> show "bubbles" & "waves";
-- if fill_entity = OFF -> show a "still water".

A type of animation may be defined by some new option like waves_always:
-- true: the current behaviour (default);
-- false: show "bubbles" & "waves" if fill_entity = ON; if fill_entity = OFF -> do not show "bubbles" & "waves".

A reason behind this is that in some circumstances (people's age/eyes, a screen type, etc) these "bubbles" may be less visible.
Then a "wave" animation could be rather informative that "something is going on".

Describe the solution you'd like
A clear and concise description of what you want to happen.

see above.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

See above.

Additional context
Add any other context or screenshots about the feature request here.

Have to refresh the page to get the updated sensor value

Is your feature request related to a problem? Please describe.
Fluid level fill % heavily depends on aspect ratio of containing card.
Aside from that actual width size seems to play a role to some extent.

• For a card of aspect ratio 16:9 the state value of 100 usually equals completely filled card.
  screenshot - 100 percent

• A card of 21:9 aspect ratio fills at around ≈ 85 percent
  screenshot - 85 percent

• a typical Tile card without AR on layout with extra space (~450px width) has filled as early as ≈ 65 percent
  screenshot - 65 percent

• A square card will never fill up. At the state value of 100 it's around 4/5 filled.

Describe the solution you'd like
A card should be filled based on enity state alone, independent of its size or aspect ratio.

Describe alternatives you've considered
Only way is to try create a card with "golden" aspect ratio, were the fluid level represents card filled %.

Additional context

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently a level_color option has a default value rgb(0,128,0).
So, if the level_color is not defined explicitly - this default color is used.

Proposal:
Add a CSS variable like --fluid-level-background-card-level-color to a code:

• if no level_color option is defined: if this variable is defined -> then use this variable, otherwise - use a default color;
• if level_color option is defined -> then use this option (as it is implemented now).

Use-cases:

1. Similar to described in #381 (case 1) - but a user does not have to define a level_color for every card explicitly, everywhere a "standard water color" for a theme is used (assume this card is only used for a water).
2. Color of level may be changed dynamically by card-mod! Could be really cool - although a liquid color does not change dependently on a volume in a real life )))).
   Consider the code:

  - type: custom:mod-card
    card_mod:
      style: |
        fluid-level-background-card {
          ... define --fluid-level-background-card-level-color dynamically dependently on a level's value ...
        }
    card:
      type: custom:fluid-level-background-card
      ... do not define level_color here

Describe the solution you'd like
A clear and concise description of what you want to happen.
Please see above.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
-- none --

Additional context
Add any other context or screenshots about the feature request here.

Thank you for this great card. I love it!
Please go on with planned features.....

• Level based colors
• Change default color
• Bubbles if level increases
• Better editor UI

The card is not working we have a failt

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.1.3

Last working release (if known):
Unknown

Browser and Operating System:
Windows 11 & Google Chrome

Description of problem:

"Choose a differnt card" vs "Choose a differEnt card"

Hello sir.
I love this card but I think can be improved. Every time the fluid entity level is refreshed I see a stutter on screen.

It would be great if we could set the fluid level manually.
Thank you.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.1.3

Last working release (if known):
Unknown

Browser and Operating System:
Windows 11 & Google Chrome

Description of problem:

After restart of HA one card including Gauges is displaying an error for the one using the Fluid Level background card. All other Gauge card are working fine. Editing the card (no need to save) resolves the issue until the next reboot of HA.

Error message:

In the below example all gauges are working fine except the last one which is embedded in Fluid Level:
type: vertical-stack
cards:

• type: glance
  show_name: true
  show_icon: true
  show_state: false
  entities:
  • entity: binary_sensor.abri_citernes_grundfos
  • entity: binary_sensor.abri_citernes_pompe
  • entity: binary_sensor.citerne_niveau_haut
  • entity: binary_sensor.citerne_vide
    title: Citerne
    columns: 4
• type: markdown
  content: |-
  Text explaining the values
• type: horizontal-stack
  cards:
  • type: gauge
    entity: sensor.abri_citernes_adc
    name: ''
    max: 6
    needle: true
    severity:
    green: 2
    yellow: 1
    red: 0
  • type: gauge
    name: ''
    entity: sensor.citerne_mazout
    max: 100
    needle: true
    severity:
    green: 25
    yellow: 15
    red: 0
  • type: gauge
    name: ''
    entity: sensor.citerne_mazout_cm
    max: 180
    needle: true
    severity:
    green: 25
    yellow: 15
    red: 0
• type: custom:fluid-level-background-card
  entity: sensor.citerne_mazout
  level_color:
  • 128
  • 19
  • 0
    card:
    type: gauge
    entity: sensor.citerne_mazout_l
    max: 3000
    needle: true
    severity:
    green: 800
    yellow: 400
    red: 0
    min: 0
    unit: L

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.1.6-beta.6

Last working release (if known):
?

Browser and Operating System:
Chrome 124.0.6367.119
Win10x64

Description of problem:

Installed the latest v0.1.6-beta.6 - but cannot be 100% sure since the corr. data seems to be not properly shown:

Javascript errors shown in the web inspector (if applicable):

Additional information:

Hello, I have implemented your card in my farm but instead of a percentage I try to control the value in liters of a tank, when I enter the property full_value: 1000 it has no effect, and with 80l, the water comes out practically full on the card. This is my configuration:

type: custom:fluid-level-background-card
card:
full_value: 1000
show_name: true
show_icon: true
type: button
tap_action:
action: none
show_state: true
entity: sensor.litros
icon: mdi:barrel-outline
hold_action:
action: none
name: Litros
level_color:

• 33
• 150
• 243
  entity: sensor.litros

I have tried to put full_value in different places but it still has no effect. I hope your help

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Fluid level background card: v0.1.5
HA: 2024.4.3

Last working release (if known):

nothing

Browser and Operating System:

Opera GX and Windows 11

Description of problem:

I noticed that your integration was generating a lot of errors in the java script console. This slows me down during certain modifications.

EDIT : I've just seen that this problem has already been mentioned and is corrected in the beta version. I'll leave you to deal with this issue as you see fit.

Javascript errors shown in the web inspector (if applicable):

Hi, thank you so much for this cool add-on, it really makes tank level displays a billion times cooler..

So I have a few tank level entities that don't work in percent, it would be great if you could add an option so I can set the entities lower and upper bounds. It can be done with a new sensor but would be more elegant in the actual add-on 😉

Thank you for your work, I feel this add-on is way under -appreciated by the HA community..

Hi! Can you add round corners support?

Used “outline” theme for cards and dark iOS for background

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
Latest release

Last working release (if known):

Browser and Operating System:
Firefox 122.0 Windows 11

Description of problem:
I need to force clear the browser cache for the bubbles to appear when charging. It should happen automatically based on the fill_entity state.

Is your feature request related to a problem? Please describe.
Nope

Describe the solution you'd like
A way to control the speed at which the animation happens.

Describe alternatives you've considered
Nothing

Additional context
Currently for very large cards, it's pretty slow.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently a color for level_color & background_color options is defined as a list:

level_color: [255,0,0]

or

level_color:
  - 255
  - 0
  - 0

We cannot use these variants:

level_color: red
level_color: 'red'
level_color: '#ff0000'
level_color: var(--red-color)
level_color: 'var(--red-color)'
level_color: rgb(242,142,28) # or rgba()
level_color: 'rgb(242,142,28)' # or rgba()

These variants are commonly used in many other cards (mainly custom cards since stock cards do not support defining colors explicitly, only by themes or card-mod).

Possible use-cases with the proposed approach:

1. User may define a global CSS theme variable to represent a "color of water" & then use it for graphs / progressbar-like cards (like bar-card) and this fluid-level-background-card. Assume this variable is called --water-color, then a code will be:

level_color: var(--water-color)

2. A similar case with using yaml-anchors:

color: &ref_water_color rgb(xxx,xxx,xxx) # for some another card
...
level_color: *ref_water_color

This proposal could be NOT a BREAKING change if the currently used "list" variant stays supported along with the new proposed ways.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Please see above.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.1.4

Last working release (if known):

Browser and Operating System:
Chrome 122.0.6261.112 (Win10)

Description of problem:
Consider this config:

  - type: custom:fluid-level-background-card
    card:
      type: glance
      entities:
        - entity: sun.sun
    entity: input_number.test_level_1
    fill_entity: input_boolean.test_boolean
    level_color:
      - 244
      - 0
      - 204

Scaled:

Here:

1. The inner card has a double border.
2. The background part overflows the inner card - it is clearly seen on bottom corners.
3. The background part has a box-shadow.

I managed to fix it by these styles:

      /* use only the inner card's border & box-shadow */
      div#container {
        border: none;
        box-shadow: none;
      }          
      /* use only the inner card's border & box-shadow */
      .type-custom-fluid-level-background-card {
        border: none;
        box-shadow: none;
      }
      /* use same shape as the inner card to avoid overflow */
      fluid-background {
        border-radius: var(--ha-card-border-radius,12px);
      }

After fix:

Javascript errors shown in the web inspector (if applicable):
none

Additional information:

Hello

could you provide example for config?

i like the one that is display propane, bubble...

Tks

Checklist:

• [x ] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue:
v0.1.6-beta.0

Last working release (if known):

Browser and Operating System:
Chrome 123.0.6312.59 (win10x64)

Description of problem:

Noticed that the Log is flooded by these errors:

2024-03-21 16:11:25.908 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)
2024-03-21 16:11:25.909 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)
2024-03-21 16:11:25.909 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)
2024-03-21 16:11:25.910 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)
2024-03-21 16:11:25.910 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)
2024-03-21 16:11:25.911 ERROR (MainThread) [frontend.js.latest.202403070] Uncaught error from Chrome 123.0.0.0 on Windows 10
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-25) is negative.
v (/hacsfiles/lovelace-fluid-level-background-card/fluid-level-background-card.js:181:1290)

Here is only a tiny amount of same messages. They are raised in a large amount within a small time interval.
Probably these errors are caused by a wrong user's code in the card config (I played with differently defined level_color).
Suggest to avoid this extensive generation of errors; some messages are surely should be reported - but not with this high frequency.

Javascript errors shown in the web inspector (if applicable):
I did not notice errors in console.
May be there were in fact.

Additional information:

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

Javascript errors shown in the web inspector (if applicable):

Additional information:

Is it possible to use a timer entity as a level entity?

Hello, when i try to add repository HACS says:

Repository 'swingerman/lovelace-fluid-level-background-card' exists in the store.

But i can't find the fluid level background card. Thanks.

Hello,
I'm trying to custom title but not luck with card_mod:
I can't change title format

`square: true
columns: 1
type: custom:fluid-level-background-card
cards:

• show_name: false
  show_icon: true
  show_state: true
  type: glance
  entities:
  • entity: sensor.acqua_giardino_utilizzo_settimanale
  • entity: sensor.utilizzo_acqua_giardino
    state_color: false
    title: Giardino
    card_mod:
    style: |
    ha-card {
    font-size: 9px;
    font-weight: bold;
    }
    .card.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    }
    entity: sensor.livello_tanica
    card:
    show_name: false
    show_icon: true
    show_state: true
    type: glance
    entities:
  • entity: sensor.acqua_barile_utilizzo_settimanale`

Hi ! thanks for uoy job :)

Can you add color with the entity value?

exemple with mini graph card :
color_thresholds:

• color: '#1da4f2'
  value: 5
• color: '#11f13a'
  value: 28
• color: '#f0da11'
  value: 31
• color: '#ef5a0f'
  value: 36
• color: '#ef1d0f'
  value: 40

thanks

Hello,

i'm using V1 and it seems a little buggy.

`
- type: custom:fluid-level-background-card
entity: sensor.pixel_6_pro_battery_level
level_color:
- 20
- 40
- 65
card:
type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.maxime
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: zone.travail_max
ulm_address: sensor.pixel_6_pro_geocoded_location

`

1. Round corner seems not be fixed
2. The blue round have an icon within ( was working with the V0.3 version )
3. Level_color seems not working ( same color for 2 value 10 and 58 ) ( using classical value for level_color ( 20/50/60), the color is black :( )

For the blue round it seems that CSS
It seems