custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.97k stars 242 forks source link

Just wanted to give kudos #773

Closed bradennapier closed 8 months ago

bradennapier commented 1 year ago

Wow, I must say I was skeptical at first but its pretty cool how you put this together! I have always felt that home assistant's ways of doing UI / extensions / etc was extremely clunky and terrible, I still do. YAML templates for programming? Just.. no!

But after learning for a hour or two I did finally start to accomplish some tasks which was fun. Nothing crazy but I was happy and surprised how well the evaluation of the javascript templates works.

Aside from the whole order of evaluation - that is a nightmare. I would probably recommend you allow defining the variables as n array of key/value pairs and that they are evaluiated in that order -- or similar if the actual ordering gets lost in translation.

Anyway, my actual accomplishment is just a simple stateful button but I was very happy to see the group expansion so that my currentState ACTUALLY loops like 16 entities to determine the actual state of the room.

type: custom:button-card
variables:
  ctx:
    scene_on: scene.main_bath_lights_on
    scene_off: scene.main_bath_lights_off
    entities:
      - light.main_bath_sink_left
      - light.main_bath_sink_right
  data:
    currentState: |
      [[[
         //console.dir(this)
         const entities = this._entities
         console.log(entities.map(id => states[id]))
         const isOn = entities.some(id => states[id].state === 'on')
         return isOn ? true : false
      ]]]
  sceneEntity: |
    [[[ 
      return variables.data.currentState 
        ? variables.ctx.scene_off 
        : variables.ctx.scene_on 
    ]]]
icon: mdi:lightbulb-group
name: Main Bath Lights
triggers_update:
  - '[[[ return variables.ctx.entities.shift() ]]]'
  - '[[[ return variables.ctx.entities.shift() ]]]'
group_expand: true
show_state: true
state_display: '[[[ return variables.data.currentState ? "On" : "Off" ]]]'
tap_action:
  action: call-service
  service: scene.turn_on
  data:
    entity_id: |
      [[[ 
        return variables.sceneEntity 
      ]]]
styles:
  card:
    - height: 100%
  grid:
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr max-content max-content
  name:
    - padding-top: 10px
    - padding-bottom: 1px
  state:
    - color: var(--secondary-text-color)
    - font-size: 0.95rem
    - line-height: 21px
state:
  - operator: default
    color: red
  - operator: template
    color: green
    value: '[[[ return variables.data.currentState ]]]'