neilimixamo / Home-Assistant-Quick-Look-Mobile

129 stars 6 forks source link

Script after tap in persons view #28

Closed Michelone86 closed 6 months ago

Michelone86 commented 6 months ago

Hello @neilimixamo, I would like to run a script for each person present in the PERSONS card, when I press the arrow.

It's possible? Thank you 🙏 Screenshot_20240508_130433

neilimixamo commented 6 months ago

Hi @Michelone86, the 'Routines' section at the bottom of each view is designed for easy triggering of 5 scripts, automations, and/or scenes and can be customized with icon, name and colors :

- type: custom:button-card # FOOTER
  view_layout:
    grid-area: footer
  template: routines_footer
  variables:
    routine1_entity: script.your_entity_id
    routine1_name: 
    routine1_background_color: 
    routine1_icon_color: 
    routine2_entity: automation.your_entity_id
    routine2_name: 
    routine2_background_color: 
    routine2_icon_color: 
    routine3_entity: scene.your_entity_id
    routine3_name:  
    routine3_background_color: 
    routine3_icon_color: 
    routine4_entity: 
    routine4_name: 
    routine4_background_color: 
    routine4_icon_color: 
    routine5_entity: 
    routine5_name: 
    routine5_background_color: 
    routine5_icon_color: 

However, if you specifically want to trigger a script by pressing the arrow integrated in the 'person' card, you can add the following code to it :

- type: custom:button-card # PERSON 01
  template: person_expandable #or "person"
  variables:
    entity: person.your_entity_id
    name: #optional
    label: #optional
    battery: #optional battery sensor to display as a badge when <60%
  custom_fields:
    chevron: 
      card:
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.your_entity_id

I hope this meets your expectations :)

Michelone86 commented 6 months ago

This is awesome, works great 😍 One last request (I hope...): in the Persons tab, is it possible to display the battery percentage instead of the battery symbol? Thank you @neilimixamo 🙏

neilimixamo commented 6 months ago

Here's a simple version for that, just replace /dashboards/quick_look_mobile/templates/badges/badge_battery.yaml with this :

badge_battery:
  custom_fields:
    icon:
      card:
        custom_fields:
          badge:
            card:
              type: custom:button-card
              show_icon: false
              show_label: true
              show_name: false
              label: |
                [[[
                  var battery = variables.battery;
                  if (battery) {
                    return states[battery].state;
                  } else {
                    return '';
                  }
                ]]]
              size: 50%
              styles:
                label:
                  - display: flex
                  - justify-content: center
                  - align-items: center
                  - font-size: |
                      [[[
                        var entity = variables.entity;
                        var battery = variables.battery;

                        if (entity && battery) {
                          if (states[battery].state <= 10) {
                            return '10px';
                          } else if (states[battery].state < 100) {
                            return '9px';
                          } else {
                            return '7px';
                          }
                        } else {
                          return 'transparent';
                        }
                      ]]]
                  - font-weight: bold
                  - color: |
                      [[[
                        var battery = variables.battery;
                        if (battery) {
                          return 'var(--text)';
                        } else {
                          return 'transparent';
                        }
                      ]]]
                card:
                  - display: flex
                  - justify-content: center
                  - align-items: center
                  - height: 2vh
                  - width: 2vh
                  - border-radius: 50%
                  - border: solid
                  - border-width: 1px
                  - position: absolute
                  - top: -6vh
                  - left: -4vw
                  - background: |
                      [[[
                        var battery = variables.battery;
                        if (battery) {
                          return 'var(--battery-icon-background-medium)';
                        } else {
                          return 'transparent';
                        }
                      ]]] 
                  - border-color:  |
                      [[[
                        var battery = variables.battery;
                        if (battery) {
                          return 'var(--text)';
                        } else {
                          return 'transparent';
                        }
                      ]]]
                  - box-shadow: 'none'

Would you like to see more features ?

Michelone86 commented 6 months ago

This is all fantastic! Thanks so much @neilimixamo! yes, I have other features to ask you but I'm afraid of bothering you too much... 🙈🙈🙈

neilimixamo commented 6 months ago

Thanks @Michelone86. No worries at all, please don't hesitate to share your feature requests through separate topics, I actually find it fun to make improvements and it gives me good ideas too. :)

Michelone86 commented 6 months ago

Ok thanks, in the next few days I will collect ideas and open new topics 😉