Nerwyn / android-tv-card

A completely customizable universal remote card for Home Assistant. Supports multiple platforms out of the box.
Apache License 2.0
254 stars 13 forks source link

Slider card tooltip multiplier #74

Closed kingy444 closed 7 months ago

kingy444 commented 8 months ago

Is your feature request related to a problem? Please describe. I would like the value of the Slider card to represent that of the device. This is somewhat working but say when the TV volume is 40 the slider appears as 0.40

Describe the solution you'd like If there was an option to "multiply the slider tooltop value by x" then I could define a value of 100 and the true value of 0.40 would display to the users tooltip as 40 Obviously the backend still needs to send the same original value this is visual only

Describe alternatives you've considered Tried to see if this can be done under the current templating but couldnt work out a way

Nerwyn commented 7 months ago

I recently deprecated tooltip in favor of tooltip_style in my other project and plan to do something similar in this one. I'm thinking that I can refactor the tooltip text to use an ::after pseudo element with the content property, and make it so that the user can change this to a template. I'll let you know when I have an alpha or beta available.

Nerwyn commented 7 months ago

@kingy444 in the latest 3.5.3 alpha (alpha.014 at time of writing), you should be able to change the tooltip label using the built in style options. Can you install the latest alpha build and try adding this to your slider custom action?

custom_actions:
  slider:
    style:
      '--tooltip-label': '{{ 100 * VALUE | int }}%'

image

Nerwyn commented 7 months ago

Because this release has a bunch of small feature requests I've bumped the version up to 3.6.0 and put a beta out. Let me know if it looks good to you!

kingy444 commented 7 months ago

Looks good from my side - haven't found any quirks so far

Nerwyn commented 7 months ago

Tooltip custom style fields added in 3.6.0.

azaidi4 commented 6 months ago

@Nerwyn, quick note after I ran through some issues: Using {{ value }} does not seem to work on the Home Assistant Companion app on my Android phone (returning NaN). Changing to {{ VALUE }} resolved the issue. Might want to look into it, or update the READEME Docs to stick to ~{{ value }}~ {{ VALUE }} https://github.com/Nerwyn/android-tv-card/blob/67b37569cad6afa2259f86938266a8c80c8920ef/README.md?plain=1#L802

Nerwyn commented 6 months ago

All caps template variables have been deprecated in favor of lower case ones (they'll still work but aren't recommended as I try to make user facing variable names consistent with Home Assistant and card-mod template variables). It isn't working for you due to a caching issue. Try clearing cache and reinstalling the latest version.

zimmra commented 2 months ago

Were there changes to the templating capabilities of --tooltip-label @Nerwyn ?

This style use to work for me but doesn't after upgrading to 4.x

Used for converting the volume percentage to dB range of -92.0 - 23 which is what my Sony AV Receiver displays on the OSD when changing volume

# old 
:host {
      --background: gray;
      --border-radius: 10px;
      --color: white;
      --tooltip-label: '{{ (((VALUE - 0.00) / (1.00 - 0.00)) * (23.0 - (-92.0)) +
        (-92.0)) | round(0, ''closest'') | int | string + ''.0'' if ((((VALUE - 0.00)
        / (1.00 - 0.00)) * (23.0 - (-92.0)) + (-92.0)) | round(0, ''closest'') | int
        | string)[-1] == ''0'' else (((VALUE - 0.00) / (1.00 - 0.00)) * (23.0 - (-92.0))
        + (-92.0)) | round(0, ''closest'') | int | string + ''.5'' }}dB';
      margin-top: 15px;
}

I have also tried with lowercase value and still doesn't function

Nevermind, it seems that either apostrophe's aren't handled the same or the 'convert old config' didn't handle properly, changed to single apostrophe and now works no issue

:host {
  --background: gray;
  --border-radius: 10px;
  --color: white;
  --tooltip-label: '{{ (((value - 0.00) / (1.00 - 0.00)) * (23.0 - (-92.0)) +
    (-92.0)) | round(0, 'closest') | int | string + '.0' if ((((value - 0.00)
    / (1.00 - 0.00)) * (23.0 - (-92.0)) + (-92.0)) | round(0, 'closest') | int
    | string)[-1] == '0' else (((value - 0.00) / (1.00 - 0.00)) * (23.0 - (-92.0))
    + (-92.0)) | round(0, 'closest') | int | string + '.5' }}dB';
  margin-top: 15px;
}
Nerwyn commented 2 months ago

Make sure you're not inadvertently prematurely closing your strings! It's easier to avoid if you use one type of quote for the outer encapsulating quotes like double quotes.

Pre v4 CSS was set using YAML and the inline style attribute. This didn't require the outer quotes and the update may have broken styles set using templates. In v4 styles are set using the style tag element using pure CSS strings, which does require the outer quotes around values with spaces like templates.