search

AnthonMS / my-cards

Bundle of my custom Lovelace cards for Home Assistant. Includes: my-slider, my-slider-v2, my-button
Other
99 stars 26 forks source link

Linear-gradient on main and secondary color #19

Closed Timofiev closed 2 years ago

Timofiev commented 2 years ago

Hi!

I would like to set up a linear-gradient as a main and secondary color for brightness and for color temperature. I think it would be cool, but I cannot set it up. Is it possible at all or just simple colors are possible. Could you let me know if this is possible? Thanks!

AnthonMS commented 2 years ago

Are you sure it doesn't already support linear-gradient as color attributes in the config? Because I technically just use what the user inputs there as the css attribute. So if you know how to use linear-gradient css attribute, then you'll maybe be able to do it already?

Let me know.

AndyVRD commented 2 years ago

Works fine here.

AEE53DC3-7C7F-4E20-BC38-FD574A4CA911

20E030A4-F22E-493E-9105-B4D1A6FF2FDC

Timofiev commented 2 years ago

Thanks, its all beautiful and all, but I still don't know how to set it up. I tried again with no success. Can you show me how your config looks like, so I can see what I'm doing wrong?

This is how it looks for me: image

Thank you!

AndyVRD commented 2 years ago

Sure, see background under card_mod style ".slider-container input[type="range"] {".

        type: "custom:my-slider"
        entity: "[[[ return variables.ulm_popup_light_entity ]]]"
        minBar: "[[[ return states[variables.ulm_popup_light_entity].attributes.min_mireds ]]]"
        minSet: "[[[ return states[variables.ulm_popup_light_entity].attributes.min_mireds ]]]"
        maxBar: "[[[ return states[variables.ulm_popup_light_entity].attributes.max_mireds ]]]"
        maxSet: "[[[ return states[variables.ulm_popup_light_entity].attributes.max_mireds ]]]"
        function: "Warmth"
        radius: "20px"
        rotate: 270
        containerHeight: "320px"
        width: "250px"
        height: "100px"
        thumbHorizontalPadding: "0px"
        thumbWidth: "0%"
        thumbHeight: "85px"
        thumbColor: "#000"
        mainSliderColor: "rgba(255, 255, 255, 0)"
        mainSliderColorOff: "rgba(255, 255, 255, 0)"
        card_mod:
          style: |
            ha-card {
              background: none !important;
              box-shadow: none !important;
            }
            .slider-container input[type="range"] {
              position: revert !important;
              border: 0px solid rgba(208, 208, 208, 1) !important;
              background: linear-gradient(90deg, #c9f2fc, #fff, #f3db6d);
              --thumb-top: 0px !important;
              --slider-secondary-color: none !important;
            }
            .slider-container input[type="range"]::-webkit-slider-thumb {
              margin-top: 0px;
              background-color: none;
            }
            .slider-container input[type="range"]::-moz-range-thumb {
              background-color: none;
            }
            .slider-container {
              display: flex;
              justify-content: center;
              align-items: center;
            }
AnthonMS commented 2 years ago

This should be possible in the new slider-v2 card. If not and you still need help, just open another issue and we will figure it out.