Giter Site home page Giter Site logo

Comments (2)

matt8707 avatar matt8707 commented on August 19, 2024

Hi, I modified the light-entity-card when there were no other options. I'm migrating to light-popup-card instead since it does the same thing and I don't have to maintain light-slider-card.

https://github.com/DBuit/light-popup-card

Also putting it inside button_card_templates so it only has to be defined once.

    hold_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        card:
          type: vertical-stack
          cards:
            - entities:
                - entity: >
                    [[[ return entity.entity_id ]]]
                  secondary_info: last-changed
                - type: custom:light-popup-card
                  entity: >
                    [[[ return entity.entity_id ]]]
                  icon: none
                  fullscreen: false
                  brightnessWidth: 130px
                  brightnessHeight: 400px
                  borderRadius: 1.8em
                  sliderColor: '#c7c7c7'
                  sliderTrackColor: rgba(25, 25, 25, 0.9)
                  actionSize: 6em
                  actions:
                    - service: browser_mod.popup
                      service_data:
                        card:
                          entities:
                            - entity: >
                                [[[ return entity.entity_id ]]]
                              secondary_info: last-changed
                            - brightness: false
                              color_temp: true
                              entity: >
                                [[[ return entity.entity_id ]]]
                              full_width_sliders: true
                              header: false
                              show_slider_percent: true
                              smooth_color_wheel: true
                              type: custom:light-entity-card
                              style: |
                                ha-card {
                                  box-shadow: none;
                                  margin-bottom: -1em;
                                }
                          show_header_toggle: false
                          type: entities
                        deviceID:
                          - this
                        style:
                          '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
                          border-radius: 0.8vw
                          opacity: 0.9
                        title: >
                          [[[ return entity.attributes.friendly_name ]]]
                  style: |
                    #popup > div.action-holder > div > div > span {
                      background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
                      radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
                      radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
                    }
                    #popup > div.action-holder > div > div {
                      margin: 0.2em 0 0 0;
                    }
                    #brightnessValue {
                      color: rgba(255, 255, 255, 0.7);
                      margin: -0.8em 0 0.7em 0;
                      font-size: 1.9em;
                      font-weight: 400;
                      font-family: SF Display;
                      letter-spacing: 0.04em;
                      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
                    }
                    #popup {
                      margin: 0 0 0.8em 0;
                    }
                    #popup > div.range-holder > input[type=range]::-webkit-slider-thumb {
                      border: 0;
                      height: 0;
                      width: 0;
                      cursor: pointer;
                    }
              show_header_toggle: false
              type: entities
        deviceID:
          - this
        style:
          '--ha-card-border-radius': 0 0 0.8em 0.8em
          border-radius: 0.8em
          opacity: 0.9
        title: >
          [[[ return entity.attributes.friendly_name ]]]

from hass-config.

marima84 avatar marima84 commented on August 19, 2024

I came across with light-popup-card component yestarday night after my post, and it's a awesome component!
But thank you very much for share your code, very useful for studying and learn ;-)

Mark

from hass-config.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.