[FR] Button slider read-only mode

[DaveP317]

(I'm adding this issue so that I can do a pull request to implement the feature myself.)

In my use-cases, I have a dashboard configured with bubble button cards in slider mode, where the sliders indicate the battery charge level or fuel/water tank level. The values are derived from input_number elements, but they should be treated as read-only status reporting. No amount of clicking or dragging the slider will change the actual amount of fuel that's in the tank, etc.

Cloos suggested adding a new button type for this. Fundamentally, it should behave exactly like a slider, but it should ignore click-and-drag operations, and it should provide handling options for taps that are similar to other modes for the buttons/icons/sub-buttons.

[jb1228]

You can set the slider percentage via CSS.

Edit the card, go to "Styling Options" > "Custom Styles", and add this text:

.bubble-range-fill {
  transform: translateX(${hass.states['sensor.water_tank_level'].state}%) !important;
}

You can use the value from any entity state, attribute, etc. This will also prevent changing it via clicking/dragging, essentially making it read-only. Just remember to add the !important property.

[DaveP317]

I finally got around to testing this, it's a very interesting idea. It doesn't do the job of making an input_number read-only, but it does allow a regular sensor to be displayed as a slider, which is quite handy.

It also doesn't allow me to set an action when tapping the button (I'd like it to pull up the history graph).

I still think I want to implement something that is a read-only hybrid between a slider and a regular button, but thanks for the clever idea!

[Just666Me]

My Home Screen which shows the main information from my shutters is now loaded with BubbleCard Sliders. Top !!
From time to time it happens, when I scroll on the Home Screen, that I open or close a shutter, as they are in full edit mode.
Would be awesome, if you could implemet this to the slider similar as you offer it with "Tab action", to set it to "no action"

[DaveP317]

I understand the request. I will look at this when I have some free time.

[barryvdh]

Thanks for this! I was looking at this also. For my use-cases:

• Heatpump current fan percentage (slider showing based on the percentage)
• Heatpump current power output (slider based on the max output)

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. If you want to keep it open, please leave a comment. Thank you for your contributions.

[Just666Me]

After the latest update, I was hopeful that the read-only mode for sliders had been implemented.
Recently, I have tried many different approaches, but the slider either remains editable or is not visible at all, showing only the attribute, such as 40%.

@DaveP317 : as this request was assigned to you, do you think you will implement this in the near future?
Thank you for your support.

[MrBearPresident]

@Just666Me Have you seen this #928 ?
Is this able to solve your need?

[Just666Me]

Thank you very much @MrBearPresident for your suggestion.
When I integrate my Shutter/cover entity "cover" instead of your "sensor" into your Progressbar, no bar is visible in the "bubble card."

However, as soon as I replace my cover with a battery sensor, the "bubble card" works, and the bar (e.g., 90%) is visible, properly colored green, and non-interactive.
I suspect that HA displays a card with any cover as interactive.

[MrBearPresident]

You would need a custom style like this:
_{(Replace the entities with yours and if the attributes are different don't forget these)}

:host{
    --color-ok: #36A1D3AA ;
    --color-bar: var(--color-ok);
    --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['cover.test_cover_cover'].attributes.current_position)}%,
  var(--color-background) ${Math.round(hass.states['cover.test_cover_cover'].attributes.current_position)}%,
  var(--color-background) 100%
) !important;

[DaveP317]

Hey, unfortunately life changes are preventing me from getting started on this in the near future. I still have it in my todo list, but it might not be until January or February.

…

On Tue, Dec 10, 2024, 3:29 AM Just666Me ***@***.***> wrote: After the latest update, I was hopeful that the read-only mode for sliders had been implemented. Recently, I have tried many different approaches, but the slider either remains editable or is not visible at all, showing only the attribute, such as 40%. @DaveP317 <https://github.com/DaveP317> : as this request was assigned to you, do you think you will implement this in the near future? Thank you for your support. — Reply to this email directly, view it on GitHub <#604 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZLG5F6P44K4PV3GQUSZK4T2E2J37AVCNFSM6AAAAABJ5WHVZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZQGY2TKMZTG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Just666Me]

@MrBearPresident:
Yesterday, I didn´t change the button type from "Slider" to "State".
After doing this, it works perfectly.
In the meantime, I also considered creating a "sensor" template with the "cover" in YAML and then implementing the "sensor" into the bubble but I like your solution so much better.

Thank you very much for this solution.